/* Telybot marketing site + docs hub.
   The Horizon identity (2026-10-12): blush paper, deep plum ink, one copper
   accent; Archivo for the voice, Archivo Black for the display headline, Lora
   for the reading text. Source of truth for the palette is the Horizon design
   (../Horizon/apps/web/src/index.css); app/app/app.css uses the same values.
     background hsl(325 24% 92%)  foreground hsl(318 25% 18%)
     primary    hsl(318 25% 23%)  accent     hsl(21 38% 46%)
   Copper is for dots, rules and highlights; copper TEXT uses --brand, a deeper
   copper that reads at 5:1 on the paper (Horizon's own copper is 3.7:1). */

:root{
  --ink:#392232; --ink-2:#5c4254; --ink-3:#785e70; --line:#d2c1cc;
  --bg:#efe6eb; --bg-2:#e2d4dc; --card:#f6eff3;
  --plum:#492c41; --plum-ink:#f3ecf0; --copper:#a26849; --mauve:#cfafc2; --mauve-2:#d1bdc9;
  --brand:#885235; --brand-2:#ead7e2;
  --ok:#0d7a57; --r:4px; --r-lg:6px;
  --shadow:none;
  --sans:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Archivo Black",Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:Lora,Georgia,"Times New Roman",serif;
  /* Kept for the few regions that are bound by READING WIDTH rather than by
     the page — long-form legal and the docs article column. Layout no longer
     uses it. */
  --wrap:1120px;
  /* The one gutter every full-width region shares — nav, sections, footer.
     Content used to sit in a 1120px band while the nav ran edge to edge
     (~425px of dead margin either side at 1920px); the first fix went too far
     the other way and the owner marked the margin they actually wanted on a
     screenshot: ~13.4% per side on a 1728px MacBook display. This linear ramp
     passes through that mark — ≈24px on a 390px phone, ≈122px at 1024,
     ≈230px at 1728, ≈260px at 1920 — so phones keep their content width
     while desktops get the airy margins the screenshot asked for. Capped so
     an ultrawide does not run away with it. */
  --gutter:clamp(24px,calc(15.4vw - 36px),280px);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.14;font-family:var(--sans);letter-spacing:-.02em;font-weight:500}
p{margin:0}
.dim{color:var(--ink-3)}
.tiny{font-size:12.5px}
.small{font-size:14px}
.wrap{margin:0 auto;padding:0 var(--gutter)}

/* ── nav ─────────────────────────────────────────────────────────────── */
.snav{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:22px;
  padding:14px var(--gutter);background:rgba(247,240,244,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.sbrand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em}
.sbrand .dot{
  width:26px;height:26px;border-radius:8px;background:var(--brand);color:var(--plum-ink);
  display:grid;place-items:center;font-size:14px;font-weight:800;
}
.sbrand .sub{color:var(--ink-3);font-weight:600}
.slinks{display:flex;gap:22px;margin-inline-start:14px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.slinks a:hover{color:var(--brand)}
.sactions{margin-inline-start:auto;display:flex;align-items:center;gap:12px}
.sactions a{white-space:nowrap}
/* Hamburger — only exists below 880px; "Sign in" is duplicated into the
   menu there because the header's own ghost link is dropped at phone width. */
.navtoggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink-2);cursor:pointer;place-items:center;padding:0}
.navtoggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.slinks .mobile-only{display:none}
.ghost{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.cta,.btn-lg{
  display:inline-block;background:var(--brand);color:var(--plum-ink);font-weight:600;
  padding:9px 16px;border-radius:10px;font-size:14.5px;
}
.cta:hover{filter:brightness(1.07)}
.btn-lg{padding:13px 22px;font-size:15.5px;border-radius:12px}
.btn-quiet{
  display:inline-block;padding:13px 22px;border-radius:12px;font-size:15.5px;
  font-weight:600;border:1px solid var(--line);color:var(--ink-2);background:var(--card);
}

/* ── sections ────────────────────────────────────────────────────────── */
section{padding:clamp(56px,6.2vw,104px) 0}
section.tint{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);margin-bottom:12px;
}
.hero{padding:clamp(60px,7vw,116px) 0 clamp(48px,5vw,84px)}
.hero h1{font-size:clamp(34px,4.6vw,62px);max-width:15ch}
.hero p.lede{margin-top:18px;font-size:clamp(17px,1.15vw,21px);color:var(--ink-2);max-width:54ch}
.hero .row{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .assure{margin-top:16px;font-size:13.5px;color:var(--ink-3)}
/* A hero with NOTHING beside it — pricing, contact, the legal pages — where
   the copy is the whole row rather than one column of two. The two-column
   measure (15ch/54ch) was tuned against artwork on the right; on a full-width
   page with no artwork it left the right half of the screen empty and the
   headline broke over three short lines. Child combinator so the two-column
   hero on the home page keeps its narrower column. */
.hero > .wrap > h1{max-width:24ch}
.hero > .wrap > p.lede{max-width:72ch}
h2.sec{font-size:clamp(25px,2.6vw,40px);max-width:20ch}
p.seclede{margin-top:12px;color:var(--ink-2);max-width:62ch;font-size:16.5px}

/* ── cards / grids ───────────────────────────────────────────────────── */
.grid{display:grid;gap:18px;margin-top:34px}
/* Exactly two columns, not auto-fit. auto-fit with a 300px min fitted THREE
   across the 1120px wrap, so a four-card section rendered 3+1 and orphaned
   its last card on every desktop width above ~940px. */
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.g2{grid-template-columns:1fr}}
.g3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.g1{grid-template-columns:1fr}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--shadow);
}
.card h3{font-size:17.5px;margin-bottom:8px}
.card p{color:var(--ink-2);font-size:15px}
.pcard{display:flex;flex-direction:column;gap:10px}
.pcard .badge{
  align-self:flex-start;background:var(--brand-2);color:var(--brand);
  font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:99px;
  letter-spacing:.04em;text-transform:uppercase;
}
.soonbox{
  border:1px dashed var(--line);border-radius:var(--r-lg);padding:24px;
  display:grid;place-items:center;text-align:center;color:var(--ink-3);
  background:repeating-linear-gradient(45deg,#f5eef2,#f5eef2 10px,#f3ebef 10px,#f3ebef 20px);
}
.steps{counter-reset:s}
.step{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .n{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--brand-2);
  color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:14px;
}
.step h3{font-size:16.5px;margin-bottom:4px}
.step p{color:var(--ink-2);font-size:14.8px}

/* ── code ────────────────────────────────────────────────────────────── */
pre.code{
  margin:16px 0;background:#3e2637;color:#efe2ea;border-radius:12px;
  padding:16px 18px;overflow-x:auto;font-size:13px;line-height:1.55;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
.prose :not(pre) > code{background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:1px 5px}

/* ── pricing ─────────────────────────────────────────────────────────── */
.tiers{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));margin-top:36px}
.tier{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column}
.tier.hi{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-2);position:relative}
.tier.hi::after{
  content:"Most popular";position:absolute;top:-11px;inset-inline-start:26px;background:var(--brand);
  color:var(--plum-ink);font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;letter-spacing:.04em;
}
.tier .price{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:12px 0 2px}
.tier .price span{font-size:14px;font-weight:600;color:var(--ink-3)}
.tier ul{list-style:none;margin:18px 0 24px;padding:0;display:grid;gap:9px;font-size:14.6px;color:var(--ink-2)}
/* flex, not a margin on the marker: a wrapped feature line used to start back
   under the tick instead of hanging with the text above it. */
.tier li{display:flex;gap:9px;align-items:flex-start}
.tier li::before{content:"✓";color:var(--ok);font-weight:700;flex:0 0 auto;line-height:1.5}
.tier .cta,.tier .btn-quiet{margin-top:auto;text-align:center}
.tablewrap{overflow-x:auto;margin:24px 0}
/* Scroll containers on a phone: the clipped edge is the only clue that
   there is more, and a cut-off "SCAL" column reads as broken. Say so. */
@media(max-width:520px){
  .tablewrap::before,.flowbox::before,.lineage::before{content:"Scroll sideways to see the rest \2192";display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:8px}
}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:start;padding:11px 14px;border-bottom:1px solid var(--line)}
th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
details.faq{border-bottom:1px solid var(--line);padding:16px 0}
details.faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;position:relative;padding-inline-end:28px}
details.faq summary::-webkit-details-marker{display:none}
/* Pinned to the inline END of the first line, with room reserved by the summary's padding: a float dropped below a question whose last line was full (24 of 41 home pages on a 390px phone), and "right" is the START of the row in RTL (ae, sa, eg). */
details.faq summary::after{content:"+";position:absolute;inset-inline-end:0;top:0;color:var(--ink-3);font-weight:400}
details.faq[open] summary::after{content:"–"}
details.faq p{margin-top:10px;color:var(--ink-2);font-size:15px}

/* ── docs ────────────────────────────────────────────────────────────── */
.docwrap{margin:0 auto;display:grid;grid-template-columns:238px minmax(0,1fr);gap:clamp(28px,4vw,72px);padding:34px var(--gutter) 80px}
/* Centred in the column, not left-jammed: the sidebar holds the left gutter
   and the measure is capped for readability, so left-aligning the article
   pushed all the leftover width into one dead strip down the right. */
.docwrap .prose{max-width:78ch;margin-inline:auto}
.docnav{position:sticky;top:78px;align-self:start;max-height:calc(100vh - 100px);overflow:auto}
/* The sidebar is a <details> so a phone can fold it (it used to push the
   article 1.5 screens down); on desktop the summary is hidden and the build
   ships it open. */
.docmenu>summary{display:none}
.dgroup{margin-bottom:22px}
.dlabel{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.ditem{display:block;padding:6px 10px;margin-inline-start:-10px;border-radius:8px;font-size:14.5px;color:var(--ink-2)}
.ditem:hover{background:var(--bg-2)}
.ditem.on{background:var(--brand-2);color:var(--brand);font-weight:600}
.docmain{min-width:0}
.prose h1{font-size:33px;margin-bottom:14px}
.prose h2{font-size:22px;margin:34px 0 12px;padding-top:6px}
.prose h3{font-size:17px;margin:24px 0 8px}
.prose p{margin:12px 0;color:var(--ink-2)}
.prose ul,.prose ol{margin:12px 0;padding-inline-start:22px;color:var(--ink-2)}
.prose li{margin:6px 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.prose a{color:var(--brand);font-weight:500}
.note{
  background:var(--brand-2);border-inline-start:3px solid var(--brand);border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:10px;border-end-end-radius:10px;
  padding:13px 16px;margin:18px 0;font-size:14.8px;color:var(--ink-2);
}
.nextlink{display:inline-block;margin-top:42px;font-weight:600;color:var(--brand)}

/* ── footer ──────────────────────────────────────────────────────────── */
.sfoot{border-top:1px solid var(--line);background:var(--bg-2);padding:52px var(--gutter) 30px}
.fcols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fcols .fcol-label{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.fcols a{display:block;font-size:14.5px;color:var(--ink-2);margin-bottom:8px}
.fcols a:hover{color:var(--brand)}
.soon{font-size:13.5px;color:var(--ink-3)}
.fbase{margin:34px 0 0;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* The burger threshold is 1080, not 880: translated navs run long — the
   Russian header needs ~1042px (links + region pill + «Начать бесплатно»),
   so at tablet-landscape the desktop nav overflowed the viewport. English
   would fit at 900; the WIDEST shipped language decides. */
@media(max-width:1080px){
  .snav{flex-wrap:wrap;gap:12px}
  /* One header row: brand, then the actions pushed right, then the toggle at
     the far edge. Without an order on .sactions it kept its default 0 and
     came BEFORE the toggle, which wrapped onto a row of its own. */
  .sactions{order:1;margin-inline-start:auto}
  .navtoggle{display:grid;order:2;margin-inline-start:0;flex:0 0 auto}
  .slinks{display:none;order:3;flex-basis:100%;flex-direction:column;gap:0;margin:4px 0 0;padding-top:6px;border-top:1px solid var(--line);font-size:15.5px}
  .snav.open .slinks{display:flex}
  .slinks a{padding:10px 0}
  .slinks .mobile-only{display:block}
}
@media(max-width:880px){
  .docwrap{grid-template-columns:1fr;gap:20px}
  .docnav{position:static;max-height:none;border-bottom:1px solid var(--line);padding-bottom:14px}
  .docmenu>summary{display:block;cursor:pointer;font-weight:600;font-size:14.5px;padding:8px 0;color:var(--ink-2)}
  .docmenu[open]>summary{margin-bottom:12px}
  section{padding:52px 0}
}
@media(max-width:520px){
  .sactions .ghost{display:none}
  /* 342px of header on a 390px phone: brand + CTA + toggle only fit with the
     gaps closed up, the "Business" sub-label dropped and a compact CTA —
     otherwise the toggle wrapped onto a second row. */
  .snav{gap:10px}
  .sbrand .sub{display:none}
  .sactions{gap:8px}
  .sactions .cta{padding:9px 13px;font-size:13.5px}
}
/* The narrowest phones (320px) still wrapped the toggle: keep the logo, drop
   the wordmark — the link keeps its name via aria-label in nav.html. */
@media(max-width:360px){
  .sbrand{font-size:0;gap:0}
}

/* Brand mark. The lettermark `.dot` remains the fallback when logo.png is not
   deployed (see the inline onerror in the nav/footer partials). */
.sbrand .logo{width:28px;height:28px;border-radius:8px;object-fit:contain;display:block}

/* Legal pages: a narrow measure. Long-form terms are read start to finish by
   somebody's compliance team, and full-width lines make that genuinely harder
   than it needs to be. */
.wrap.legal{max-width:820px}
.legal .prose h2{scroll-margin-top:80px}
.legal .prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px}
.legal .prose th,.legal .prose td{border:1px solid var(--line);padding:9px 11px;text-align:start;vertical-align:top}
.legal .prose th{background:var(--bg-2);font-weight:650}
.legal h1{max-width:none}

/* Legal pages joined the reframe (they were the last four pages on the old
   indigo design — different nav, purple CTA, and a measure that computed to
   ~500px of text at 1280px because the 820px cap ABSORBED the gutter
   padding). The cap now adds the gutters on top, so the reading measure is a
   real 760px at any desktop width. */
.biz-legal .wrap.legal{max-width:calc(760px + var(--gutter)*2)}
.biz-legal .hero h1{font-size:clamp(38px,4.4vw,58px)}
.biz-legal .hero p.lede{max-width:60ch}
.biz-legal .prose h2{font-size:21px;margin-top:38px}
.biz-legal .prose{font-size:15.5px}

/* ─────────────────────────────────────────────────────────────────────────
   Product imagery.

   Built from HTML + CSS + inline SVG rather than screenshots, on purpose:
   a screenshot of the dashboard goes stale the moment the UI moves, and
   this site has no image pipeline (the build is a copy + minify). These
   also stay sharp on any display and cost no extra request.
   ───────────────────────────────────────────────────────────────────────── */

/* Hero: copy left, product shot right. */
.herogrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(36px,4vw,76px);align-items:center}
@media (max-width:960px){.herogrid{grid-template-columns:1fr;gap:38px}}

/* A browser window containing a site with the widget open. */
.shot{position:relative}
.browser{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--shadow);overflow:hidden}
.browser .bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.browser .dot{width:9px;height:9px;border-radius:50%;background:#d9cad3}
.browser .addr{margin-inline-start:8px;flex:1;height:20px;border-radius:999px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;padding:0 9px;font-size:11px;color:var(--ink-3)}
.browser .body{position:relative;height:392px;padding:16px;background:
  linear-gradient(var(--bg-2) 0 0) padding-box}
/* Skeleton of "your website" behind the widget — deliberately abstract so it
   reads as any shop, not a specific one. */
.sk{background:#e7dbe2;border-radius:6px}
.sk.t{height:9px;width:38%;margin-bottom:9px}
.sk.l{height:7px;width:70%;margin-bottom:7px}
.sk.l2{width:56%}
.sk.img{height:74px;width:100%;margin:14px 0 12px;background:linear-gradient(135deg,#e7dbe2,#f1e7ed)}
.sk.row{display:flex;gap:9px}
.sk.row>span{flex:1;height:44px;border-radius:6px;background:#ece1e7;display:block}

/* The widget itself, matching the real one's shape. */
.wdg{position:absolute;inset-inline-end:14px;bottom:14px;width:236px;border-radius:14px;background:var(--bg);border:1px solid var(--line);box-shadow:0 10px 30px -12px rgba(62,38,55,.4);overflow:hidden}
.wdg .hd{display:flex;align-items:center;gap:8px;padding:9px 11px;background:var(--brand);color:var(--plum-ink)}
.wdg .av{width:20px;height:20px;border-radius:50%;background:rgba(247,240,244,.24);display:grid;place-items:center;font-size:11px;font-weight:700}
.wdg .hd b{font-size:12.5px;font-weight:650}
.wdg .msgs{padding:11px;display:flex;flex-direction:column;gap:7px;background:var(--bg)}
.wdg .m{max-width:84%;padding:7px 10px;border-radius:12px;font-size:11.5px;line-height:1.45}
.wdg .m.u{align-self:flex-end;background:var(--brand);color:var(--plum-ink);border-end-end-radius:4px}
.wdg .m.b{align-self:flex-start;background:var(--bg-2);color:var(--ink);border:1px solid var(--line);border-end-start-radius:4px}
.wdg .ft{display:flex;align-items:center;gap:7px;padding:8px 11px;border-top:1px solid var(--line)}
.wdg .ft>span:first-child{flex:1;font-size:11px;color:var(--ink-3)}
.wdg .send{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--brand);display:grid;place-items:center}
/* Floating "answered in 2s" tag. */
.tag{position:absolute;inset-inline-start:-14px;bottom:64px;background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:7px}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block}
@media (max-width:520px){.tag{display:none}}

/* Mechanism diagram — how the bot actually answers. */
/* The diagram is bounded even though its card is not. width:100% on a
   full-bleed page scaled these SVGs to 1700px+ — every box the size of a
   fist, and the section taller than the fold it was meant to support.
   Centred at a fixed comfortable size; the min-width keeps it legible on
   a phone, where the card scrolls sideways instead of shrinking it. */
.flowbox{margin-top:30px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);padding:22px;overflow-x:auto}
.flowbox svg{display:block;width:100%;max-width:880px;margin:0 auto;min-width:620px;height:auto}
.flowlegend{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-size:13px;color:var(--ink-3)}
.flowlegend span{display:flex;align-items:center;gap:7px}
.flowlegend i{width:10px;height:10px;border-radius:3px;display:block}

/* Step cards get an illustration strip. */
.step .ico{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:var(--brand-2);display:grid;place-items:center;margin-bottom:10px}
.step .ico svg{width:20px;height:20px;display:block}

/* Phone frame for the language section. */
.phone{width:212px;margin:0 auto;border:8px solid #3e2637;border-radius:28px;background:var(--bg);overflow:hidden;box-shadow:var(--shadow)}
.phone .nub{height:16px;background:#3e2637;display:flex;justify-content:center}
.phone .nub span{width:64px;height:16px;background:#3e2637;border-radius:0 0 9px 9px}
.phone .scr{padding:11px 11px 18px;display:flex;flex-direction:column;gap:7px;background:var(--bg-2);min-height:236px}
.phone .m{max-width:86%;padding:7px 10px;border-radius:12px;font-size:11.5px;line-height:1.45}
.phone .m.u{align-self:flex-end;background:var(--brand);color:var(--plum-ink);border-end-end-radius:4px}
.phone .m.b{align-self:flex-start;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-end-start-radius:4px}
.langgrid{display:grid;grid-template-columns:1fr 1.25fr;gap:44px;align-items:center}
@media (max-width:860px){.langgrid{grid-template-columns:1fr;gap:32px}}

/* Interactive sample conversation on the product page. */
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start;margin-top:28px}
@media (max-width:880px){.demo{grid-template-columns:1fr;gap:26px}}
.demowdg{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--shadow);overflow:hidden}
.demowdg .hd{display:flex;align-items:center;gap:10px;padding:13px 15px;background:var(--brand);color:var(--plum-ink)}
.demowdg .hd .av{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:rgba(247,240,244,.22);display:grid;place-items:center;font-weight:700;font-size:14px}
.demowdg .hd b{display:block;font-size:14.5px;font-weight:650;line-height:1.3}
.demowdg .hd em{display:block;font-style:normal;font-size:11.5px;opacity:.82}
.demowdg .msgs{padding:15px;display:flex;flex-direction:column;gap:9px;min-height:250px;max-height:330px;overflow-y:auto;background:var(--bg-2)}
.demowdg .m{max-width:82%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.5;white-space:pre-wrap}
.demowdg .m.u{align-self:flex-end;background:var(--brand);color:var(--plum-ink);border-end-end-radius:5px}
.demowdg .m.b{align-self:flex-start;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-end-start-radius:5px}
.demowdg .m.handoff{background:#fdf3e0;border-color:#e2b567}
.demowdg .unans{align-self:flex-start;font-size:11.5px;color:#b8760b;font-weight:600;margin:-2px 0 0 4px}
.demowdg .m.typing{display:flex;gap:4px;align-items:center;padding:12px 14px}
.demowdg .m.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);display:block;animation:blink 1.1s infinite}
.demowdg .m.typing i:nth-child(2){animation-delay:.18s}
.demowdg .m.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.demowdg .m.typing i{animation:none;opacity:.5}}
.demowdg .ask{display:flex;flex-wrap:wrap;gap:8px;padding:13px 15px;border-top:1px solid var(--line);background:var(--bg)}
.qbtn{font:inherit;font-size:13px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink-2);cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.qbtn:hover:not(:disabled){border-color:var(--brand);color:var(--brand);background:var(--brand-2)}
.qbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.qbtn:disabled{opacity:.42;cursor:default}
.demoside h3{font-size:19px;margin-bottom:12px}
.demosteps{margin:0;padding-inline-start:20px;color:var(--ink-2)}
.demosteps li{margin:9px 0}

/* ─── Company homepage ──────────────────────────────────────────────────────
   Deliberately NOT product imagery. The storefront mockup and the answer-flow
   diagram belong to Telybot and live on its page; the homepage's job is to
   say who builds this and what an account gives you, so its visuals are about
   the company and the platform. */

/* Hero: one account, and the surfaces it reaches. */
.reach{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--shadow);padding:22px}
.reach svg{display:block;width:100%;height:auto}

/* The lineage band — where the language work comes from. */
.lineage{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);padding:22px;margin-top:26px;overflow-x:auto}
.lineage svg{display:block;width:100%;max-width:840px;margin:0 auto;min-width:560px;height:auto}

/* Catalogue: one product, presented as a decision rather than a placeholder. */
.cat{display:grid;grid-template-columns:1.35fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg);box-shadow:var(--shadow);margin-top:28px}
@media (max-width:820px){.cat{grid-template-columns:1fr}}
.cat .main{padding:30px}
.cat .main h3{font-size:25px;margin-bottom:10px}
.cat .side{background:var(--bg-2);border-inline-start:1px solid var(--line);padding:26px 24px}
@media (max-width:820px){.cat .side{border-inline-start:0;border-top:1px solid var(--line)}}
.cat .side h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.catlist{list-style:none;margin:0;padding:0}
.catlist li{display:flex;gap:9px;align-items:flex-start;margin:9px 0;font-size:14px;color:var(--ink-2)}
.catlist svg{flex:0 0 15px;margin-top:3px}
.cat .row{margin-top:22px;display:flex;gap:11px;flex-wrap:wrap}

/* What one account carries — the platform under every product. */
.carries{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:28px}
.carries .c{background:var(--bg);padding:22px 20px}
.carries .c h4{font-size:15.5px;margin-bottom:7px}
.carries .c p{font-size:14px;color:var(--ink-2)}
.carries .c .ic{width:30px;height:30px;border-radius:9px;background:var(--brand-2);display:grid;place-items:center;margin-bottom:12px}
.carries .c .ic svg{width:16px;height:16px;display:block}

/* The standard we hold ourselves to. */
/* Two columns, not auto-fit: these are prose blocks, and auto-fit fitted
   four-ish across the wrap and orphaned the last one. */
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 34px;margin-top:26px}
@media (max-width:760px){.rules{grid-template-columns:1fr}}
.rule{border-inline-start:3px solid var(--brand);padding:2px 0 2px 16px}
.rule h4{font-size:16px;margin-bottom:6px}
.rule p{font-size:14.5px;color:var(--ink-2)}

/* ─────────────────────────────────────────────────────────────────────────
   Telybot 2026 reframe.

   Intentionally scoped to the redesigned business routes and documentation
   hub. Legal pages keep the established system above; shared HTML partials
   do not need to fork. The visual grammar is answer provenance: question →
   owned source → answer or honest handoff.
   ───────────────────────────────────────────────────────────────────────── */

/* RETIRED 2026-09-01: Schibsted's r+n merged into m in the big headlines
   ("Turn" read as "Term"), so headings moved to Bricolage Grotesque and body
   to Inter. The face + woff2 files stay only so old cached HTML resolves. */
@font-face{
  font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

.biz-reframe{
  /* One vertical scale for every business page. Section rhythm used to be
     set per section — nine different clamps, and three sections with no top
     padding at all — so the space above a heading never matched the space
     below the block before it, and no two pages agreed. These are now the
     ONLY vertical values the marketing sections use. */
  --sec-y:clamp(88px,8.2vw,124px);   /* every section: top AND bottom */
  --sec-gap:clamp(40px,4.2vw,60px);  /* section head -> its content */
  --eyebrow-gap:24px;                /* eyebrow -> heading */
  --lede-gap:24px;                   /* heading -> lede */
  --doc-y:clamp(52px,5vw,76px);      /* docs + legal reading layouts */
  --h2:clamp(38px,4.3vw,62px);       /* every section heading, every page */
  --ink:#392232;--ink-2:#5c4254;--ink-3:#785e70;--line:#d2c1cc;
  --bg:#efe6eb;--bg-2:#e2d4dc;--card:#f6eff3;--brand:#885235;--brand-2:#ead7e2;
  --ok:#0d7a57;--amber:#c98a2e;--r:4px;--r-lg:6px;
  --shadow:none;
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);
  font-size:16px;line-height:1.55;
}
.biz-reframe ::selection{background:var(--brand);color:var(--plum-ink)}
.biz-reframe main{overflow:clip}
.biz-reframe h1,.biz-reframe h2,.biz-reframe h3,.biz-reframe h4{letter-spacing:-.012em;font-weight:600}
.biz-reframe .snav{
  min-height:72px;padding:15px var(--gutter);gap:25px;background:rgba(240,230,236,.9);
  border-color:rgba(56,34,50,.12);backdrop-filter:blur(18px) saturate(140%);
}
.biz-reframe .sbrand{font-weight:650;letter-spacing:-.035em}
.biz-reframe .sbrand .sub{font-weight:450;color:var(--ink-3)}
.biz-reframe .slinks{gap:27px;margin-inline-start:20px;font-size:13.5px;color:#6c5063}
.biz-reframe .slinks a{position:relative}
.biz-reframe .slinks a::after{content:"";position:absolute;inset-inline-start:0;inset-inline-end:100%;bottom:-6px;height:1px;background:var(--ink);transition:inset-inline-end .2s ease}
.biz-reframe .slinks a:hover{color:var(--ink)}
.biz-reframe .slinks a:hover::after{inset-inline-end:0}
.biz-reframe .ghost{font-size:13.5px;color:var(--ink);font-weight:550}
.biz-reframe .cta,.biz-reframe .btn-lg{
  border:1px solid var(--ink);border-radius:8px;background:var(--ink);color:var(--plum-ink);
  font-weight:550;box-shadow:none;transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.biz-reframe .cta:hover,.biz-reframe .btn-lg:hover{background:var(--brand);border-color:var(--brand);filter:none;transform:translateY(-1px)}
.biz-reframe .btn-lg{padding:13px 20px;font-size:15px}
.biz-reframe .btn-quiet{
  border:1px solid rgba(56,34,50,.2);border-radius:8px;background:transparent;color:var(--ink);
  padding:13px 20px;font-size:15px;font-weight:520;transition:border-color .18s ease,background .18s ease;
}
.biz-reframe .btn-quiet:hover{border-color:var(--ink);background:rgba(247,240,244,.45)}
.biz-reframe .sfoot{background:var(--ink);border-color:#4c3244;color:#f0e6ec;padding-top:68px}
.biz-reframe .sfoot .dim,.biz-reframe .sfoot .fcols .fcol-label,.biz-reframe .sfoot .fcols a{color:#bfa8b5}
.biz-reframe .sfoot .fcols a:hover{color:var(--plum-ink)}
.biz-reframe .sfoot .sbrand .sub{color:#b59caa}
.biz-reframe .sfoot .fbase{border-color:#503548}
.biz-reframe .navtoggle{border-radius:8px;background:transparent;border-color:rgba(56,34,50,.2)}

.biz-hero{padding:var(--sec-y) 0}
.biz-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);gap:clamp(52px,7vw,118px);align-items:center}
.biz-kicker,.biz-index{
  display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:11px;font-weight:650;
  letter-spacing:.115em;text-transform:uppercase;
}
.biz-kicker>span{width:24px;height:1px;background:var(--brand)}
.biz-hero h1{margin-top:var(--eyebrow-gap);font-size:clamp(40px,4.6vw,68px);line-height:1.05;font-weight:600;max-width:16ch;text-wrap:balance}
.biz-hero .biz-lede{max-width:52ch;margin-top:var(--lede-gap);color:var(--ink-2);font-size:clamp(17px,1.2vw,20px);line-height:1.56}
.biz-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:31px}
.biz-fine{margin-top:17px;color:var(--ink-3);font-size:12.5px;letter-spacing:.01em}
.biz-fine span{padding:0 5px;color:#cdbcc6}
.text-link{font-size:14px;font-weight:550;border-bottom:1px solid rgba(56,34,50,.25);padding-bottom:2px}
.text-link span{padding-inline-start:6px}
.text-link:hover{border-color:var(--ink)}

.biz-section{padding:var(--sec-y) 0}
/* Stacked, not a two-column grid. The eyebrow used to hold a 130px column of
   its own, which pushed the heading ~250px in from the gutter — so a page
   alternated between indented headings (Reach, Product, One account) and
   headings on the gutter (Language, The standard, every product section).
   Every section head on every page now starts on the same left edge. */
.biz-section-head{display:block}
.biz-section-head>div{max-width:none}
/* One heading size for every section on every page — this used to be six
   different clamps ranging from 66px to 76px. */
.biz-section-head h2,.language-stage h2,.principles-intro h2,
.biz-product h2.sec,.plan-compare-head h2,.pricing-faq h2,
.contact-context h2,.biz-final h2{
  font-size:var(--h2);line-height:1;letter-spacing:-.055em;font-weight:560;
}
.biz-section-head h2{margin-top:var(--eyebrow-gap)}
.biz-section-head p{max-width:62ch;margin-top:var(--lede-gap);color:var(--ink-2);font-size:17px}
.biz-index-light{color:#b298a7}

/* Homepage: live answer trace. */
.answer-field{position:relative;padding:22px;border:1px solid #ded0d8;border-radius:18px;background:linear-gradient(180deg,#f7f0f4,#f5eef2 55%,#f2e8ee);color:var(--ink);box-shadow:0 24px 60px -34px rgba(120,75,51,.22)}
.answer-field::after{content:"";position:absolute;inset:9px;border:1px solid rgba(56,34,50,.04);border-radius:11px;pointer-events:none}
.answer-field-head{display:flex;justify-content:space-between;gap:14px;padding:2px 2px 19px;color:var(--ink-3);font-size:9.5px;font-weight:650;letter-spacing:.12em}
.answer-field-status{display:flex;align-items:center;gap:7px;color:#0a6e4f;letter-spacing:.02em;text-transform:none;background:rgba(8,127,91,.08);border:1px solid rgba(8,127,91,.22);padding:4px 10px;border-radius:999px}
.answer-field-status i,.product-label i,.knowledge-foot i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(8,127,91,.12)}
.answer-question,.answer-reply{display:flex;gap:12px;align-items:center;border:1px solid #d7c7d0;background:#ede3e9;border-radius:11px;padding:15px}
.answer-question small,.answer-reply{border-color:#ead9e3!important;background:#f1e5ec!important}.answer-reply small{display:block;color:var(--ink-3);font-size:10.5px;margin-bottom:3px}
.answer-question strong,.answer-reply strong{display:block;font-size:15px;font-weight:520;letter-spacing:-.015em}
.answer-avatar{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:grid;place-items:center;background:#efe8d8;color:#6b4f62;font-size:11px;font-weight:650}
.answer-avatar-keyda{background:var(--brand);color:var(--plum-ink)}
.answer-path{height:33px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px;padding:0 30px}
.answer-path span{height:1px;background:#d3c3cd}.answer-path b{color:#7b6173;font-size:9px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;background:#e4d7df;border-radius:99px;padding:3px 9px}
.answer-path-brand span{background:rgba(164,103,70,.38)}.answer-path-brand b{color:#8c583c;background:#efe2ea}
.answer-source{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #e3cbd9;background:#f0e3ea;border-radius:11px;padding:14px 16px;box-shadow:0 10px 24px -18px rgba(164,103,70,.55)}
.answer-source small{display:block;color:#8c583c;font-size:9px;font-weight:650;letter-spacing:.1em}.answer-source strong{display:block;margin-top:2px;font-size:13px}.answer-source>b{color:#8c583c;font-size:13px;font-weight:700}
.answer-handoff{display:flex;justify-content:space-between;gap:15px;margin-top:16px;padding:11px 13px;border-top:1px solid var(--line);color:var(--ink-3);font-size:10.5px}
.answer-handoff strong{color:#8a5c0a;font-weight:600;text-align:end;background:#fbf1dd;border:1px solid #efdcb2;border-radius:99px;padding:4px 11px}
.biz-proofbar,.product-proofbar{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--sec-gap);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.biz-proofbar>div,.product-proofbar>div{padding:18px 20px 18px 0;border-inline-end:1px solid var(--line)}
.biz-proofbar>div:not(:first-child),.product-proofbar>div:not(:first-child){padding-inline-start:20px}
.biz-proofbar>div:last-child,.product-proofbar>div:last-child{border-inline-end:0}
.biz-proofbar small,.product-proofbar small{display:block;color:var(--ink-3);font-size:9.5px;font-weight:650;letter-spacing:.12em;margin-bottom:6px}
.biz-proofbar strong,.product-proofbar strong{font-size:12.5px;font-weight:520;letter-spacing:-.01em}

.channel-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--sec-gap);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.channel-card{min-height:322px;padding:23px;display:flex;flex-direction:column;border-inline-end:1px solid var(--line);transition:background .2s ease}
.channel-card:last-child{border-inline-end:0}.channel-card:hover{background:#e8dce3}
.channel-icon{width:74px;height:74px;margin:auto 0 34px;position:relative;color:var(--ink)}
.channel-browser{border:1.5px solid currentColor;border-radius:5px;padding-top:14px}
.channel-browser::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:12px;border-top:1px solid currentColor}.channel-browser i{position:absolute;top:5px;width:3px;height:3px;border-radius:50%;background:currentColor}.channel-browser i:nth-child(1){inset-inline-start:6px}.channel-browser i:nth-child(2){inset-inline-start:12px}.channel-browser i:nth-child(3){inset-inline-start:18px}
.channel-qr{border:1.5px solid currentColor}.channel-qr i{position:absolute;width:17px;height:17px;border:4px solid currentColor}.channel-qr i:nth-child(1){inset-inline-start:8px;top:8px}.channel-qr i:nth-child(2){inset-inline-end:8px;top:8px}.channel-qr i:nth-child(3){inset-inline-start:8px;bottom:8px}.channel-qr i:nth-child(4){inset-inline-end:11px;bottom:11px;width:10px;height:10px;border-width:3px}
.channel-phone{width:42px;margin-inline-start:15px;border:1.5px solid currentColor;border-radius:10px}.channel-phone i{position:absolute;width:15px;height:2px;top:7px;inset-inline-start:12px;background:currentColor}.channel-phone b{position:absolute;width:5px;height:5px;bottom:5px;inset-inline-start:17px;border:1px solid currentColor;border-radius:50%}
.channel-card h3{font-size:20px;letter-spacing:-.035em}.channel-card p{margin-top:9px;color:var(--ink-2);font-size:14px;line-height:1.55}.channel-card>small{padding-top:24px;color:var(--ink-3);font-size:9.5px;font-weight:650;letter-spacing:.11em}

.language-stage{padding:var(--sec-y) 0;background:var(--ink);color:#ede2e8}
.language-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(60px,9vw,150px);align-items:center}
.language-stage h2{margin-top:var(--eyebrow-gap)}.language-stage>div p{max-width:55ch;margin-top:var(--lede-gap);color:#c5b1bd;font-size:17px}
.language-lineage{display:flex;align-items:center;gap:10px;margin-top:var(--sec-gap);color:#95788a;font-size:8.5px;font-weight:650;letter-spacing:.12em}.language-lineage i{height:1px;flex:1;max-width:50px;background:#5c4154}.language-lineage strong{color:#e3cbd9;font-weight:650}
.language-conversation{border-top:1px solid #573c4f}
.language-row{display:grid;grid-template-columns:42px 1fr;align-items:center;min-height:86px;border-bottom:1px solid #573c4f;color:#b59caa}.language-row .lr-tag{font-size:9px;font-weight:650;letter-spacing:.12em}.language-row .lr-text{margin:0!important;color:inherit!important;font-size:clamp(17px,1.8vw,25px)!important;letter-spacing:-.025em}.language-row.active{margin:0 -20px;padding:0 20px;background:var(--brand);border-color:var(--brand);color:var(--plum-ink)}.language-response{padding:25px 0 0 42px}.language-response small{display:block;color:#84677a;font-size:9px;letter-spacing:.11em}.language-response strong{display:block;margin-top:8px;font-size:20px;font-weight:520;color:var(--plum-ink)}

.product-panel{display:grid;grid-template-columns:.82fr 1.18fr;gap:0;margin-top:var(--sec-gap);background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.product-copy{padding:clamp(34px,4vw,64px)}.product-label{display:flex;align-items:center;gap:9px;color:var(--ok);font-size:9.5px;font-weight:700;letter-spacing:.12em}.product-copy h3{margin-top:var(--eyebrow-gap);font-size:clamp(42px,5vw,70px);letter-spacing:-.065em}.product-copy>p{max-width:48ch;margin-top:var(--lede-gap);color:var(--ink-2);font-size:16px}.product-copy .biz-actions{align-items:center}
.knowledge-stack{padding:clamp(25px,3.5vw,54px);background:#3c2435;color:#f0e6ec}.knowledge-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:21px 0;border-bottom:1px solid #52374a}.knowledge-row small{display:block;color:#a28797;font-size:8.5px;letter-spacing:.12em}.knowledge-row strong{display:block;margin-top:2px;font-size:16px;font-weight:520}.knowledge-row>b{color:#b096a5;font-size:11px;font-weight:450}.knowledge-row.top{border:1px solid rgba(164,103,70,.7);border-radius:10px;background:rgba(164,103,70,.08);margin-bottom:8px;padding:20px 16px}.knowledge-row.top small{color:#c99a81}.knowledge-row.top>b{color:#e7d3df}.knowledge-foot{display:flex;align-items:center;gap:10px;margin-top:25px;color:#baa2b0;font-size:11px}

.platform-grid{display:grid;grid-template-columns:repeat(2,1fr);margin-top:var(--sec-gap);border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}.platform-grid article{display:flex;flex-direction:column;justify-content:flex-start;min-height:196px;padding:30px;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line)}.platform-grid h3{font-size:22px}.platform-grid p{max-width:47ch;margin-top:11px;color:var(--ink-2);font-size:14.5px}
.principles-section{padding:var(--sec-y) 0;background:var(--ink);color:#f0e6ec}.principles-section>.wrap{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(60px,10vw,170px)}.principles-intro h2{margin-top:var(--eyebrow-gap)}.principles-intro>p{max-width:33ch;margin-top:var(--lede-gap);color:#bda5b3}.principles-legal{font-size:12px!important;margin-top:var(--sec-gap)!important}.principles-legal a{color:#e7d3df;border-bottom:1px solid #74596c}.principles-list{border-top:1px solid #573c4f}.principles-list article{padding:29px 0;border-bottom:1px solid #573c4f}.principles-list h3{font-size:22px;font-weight:520}.principles-list p{max-width:54ch;margin-top:9px;color:#bfa8b6;font-size:14px}
.biz-final{padding:var(--sec-y) 0;background:#eddee7}.biz-final>.wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(60px,10vw,170px);align-items:end}.biz-final h2{margin-top:var(--eyebrow-gap)}.biz-final p{max-width:43ch;color:#64485c;font-size:16px}.biz-final .btn-lg{margin-top:var(--lede-gap)}

/* Contact. */
.contact-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(60px,10vw,170px);align-items:end}.contact-hero h1{max-width:none}.contact-intro>p{max-width:43ch;color:var(--ink-2);font-size:18px}.contact-email{position:relative;display:block;margin-top:34px;padding:22px 55px 22px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}.contact-email span{display:block;color:var(--ink-3);font-size:10px;letter-spacing:.1em;text-transform:uppercase}.contact-email strong{display:block;margin-top:7px;font-size:20px;font-weight:550}.contact-email i{position:absolute;inset-inline-end:0;top:50%;font-style:normal;font-size:22px;transform:translateY(-50%)}
.contact-routes{padding:var(--sec-y) 0}.contact-route-grid{border-top:1px solid var(--line)}.contact-route{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(230px,.8fr);gap:clamp(25px,5vw,80px);align-items:start;padding:43px 0;border-bottom:1px solid var(--line)}.contact-route small{color:var(--ink-3);font-size:9px;font-weight:650;letter-spacing:.12em}.contact-route h2{max-width:22ch;margin-top:12px;font-size:clamp(28px,3vw,44px);line-height:1.05}.contact-route p{max-width:57ch;margin-top:15px;color:var(--ink-2);font-size:14.5px}.contact-route-actions{display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding-top:23px}.contact-route-actions a{font-size:13px;font-weight:550;border-bottom:1px solid #cfbec8;padding-bottom:2px}.contact-route-actions a:hover{border-color:var(--ink)}.contact-route-attention::before{content:"";position:absolute;inset-inline-start:-18px;top:0;bottom:0;width:3px;background:var(--amber)}.contact-route-attention small{color:#a66b13}
.contact-context{padding:var(--sec-y) 0;background:var(--card);border-top:1px solid var(--line)}.contact-context-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(55px,9vw,150px)}.contact-context h2{max-width:12ch;margin-top:var(--eyebrow-gap)}.contact-checklist{border-top:1px solid var(--line)}.contact-checklist>div{padding:24px 0;border-bottom:1px solid var(--line)}.contact-checklist p{font-size:15px;color:var(--ink-2)}.contact-checklist strong{color:var(--ink);font-weight:600}/* A one-line notice bar, not a section — its own symmetric band. */
.contact-consumer{padding:31px 0;background:var(--brand);color:var(--plum-ink)}.contact-consumer>.wrap{display:flex;justify-content:space-between;gap:30px;align-items:center}.contact-consumer p{font-size:14px}.contact-consumer a{font-size:13px;font-weight:600;border-bottom:1px solid rgba(247,240,244,.6)}

/* Pricing. */
.pricing-hero-grid{display:grid;grid-template-columns:1fr minmax(390px,.82fr);gap:clamp(60px,9vw,150px);align-items:center}.pricing-hero h1{max-width:none}
.pricing-access{position:relative;padding:24px 0 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.pricing-access::before{content:"";position:absolute;top:-1px;inset-inline-end:0;width:58px;border-top:3px solid var(--brand)}
.pricing-access-status{display:flex;justify-content:space-between;color:#96798b;font-size:9px;font-weight:650;letter-spacing:.13em}.pricing-access-status i{display:flex;align-items:center;gap:7px;font-style:normal;color:var(--ok)}.pricing-access-status i::before{content:"";width:6px;height:6px;border-radius:50%;background:#62c89d;box-shadow:0 0 0 4px rgba(98,200,157,.1)}
.pricing-access-value{display:flex;align-items:flex-start;margin-top:37px;line-height:.78}.pricing-access-value>span{margin-top:8px;color:var(--ink-3);font-size:30px}.pricing-access-value strong{font-size:clamp(94px,9vw,134px);font-weight:520;letter-spacing:-.095em}.pricing-access-value small{align-self:flex-end;margin:0 0 13px 12px;color:var(--ink-3);font-size:11px;font-weight:550;letter-spacing:.04em;text-transform:uppercase}
.pricing-access>p{max-width:46ch;margin-top:36px;color:var(--ink-2);font-size:13.5px}.pricing-access dl{display:grid;grid-template-columns:repeat(2,1fr);margin:27px 0 0;border-top:1px solid var(--line)}.pricing-access dl>div{padding:15px 15px 16px 0;border-inline-end:1px solid var(--line)}.pricing-access dl>div+div{padding-inline-start:15px;border-inline-end:0}.pricing-access dt{color:var(--ink-3);font-size:8.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}.pricing-access dd{margin:5px 0 0;font-size:12.5px;font-weight:560}.pricing-access .btn-lg{display:flex;align-items:center;justify-content:space-between;margin:0;border-radius:0;background:var(--ink);border-color:var(--ink)}
.pricing-explainer{padding:var(--sec-y) 0}.pricing-explainer-grid>div{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,50px);margin-top:var(--sec-gap)}.pricing-explainer p{color:var(--ink-2);font-size:14px}.pricing-explainer strong{color:var(--ink);font-weight:600}
.future-plans{background:var(--card);border-top:1px solid var(--line)}.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--sec-gap);border:1px solid var(--line);border-radius:14px;overflow:hidden}.plan-card{min-height:600px;display:flex;flex-direction:column;padding:28px;border-inline-end:1px solid var(--line);background:var(--card)}.plan-card:last-child{border-inline-end:0}.plan-card-focus{background:var(--ink);color:#f0e6ec}.plan-head{display:flex;color:#bfa8b6;font-size:10px}.plan-head small{font-size:9px;letter-spacing:.11em}.plan-card h3{margin-top:var(--sec-gap);font-size:34px}.plan-for{min-height:48px;margin-top:7px;color:var(--ink-3);font-size:13px}.plan-card-focus .plan-for{color:#baa2b0}.plan-price{display:flex;align-items:baseline;gap:7px;margin-top:38px}.plan-price strong{font-size:35px;font-weight:570;letter-spacing:-.055em}.plan-price span{color:var(--ink-3);font-size:12px}.plan-allowance{display:flex;align-items:baseline;gap:8px;margin-top:13px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.plan-card-focus .plan-allowance{border-color:#573c4f}.plan-allowance strong{font-size:19px}.plan-allowance span{color:var(--ink-3);font-size:11px}.plan-card ul{list-style:none;margin:28px 0;padding:0;display:grid;gap:12px;color:var(--ink-2);font-size:13.5px}.plan-card-focus ul{color:#c5b1bd}.plan-card li{position:relative;padding-inline-start:15px}.plan-card li::before{content:"";position:absolute;inset-inline-start:0;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--brand)}.plan-card>a{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);font-size:13px;font-weight:600}.plan-card-focus>a{border-color:#573c4f;color:#e8d4e0}
.plan-compare{padding:var(--sec-y) 0;background:var(--ink);color:#f0e6ec}.plan-compare-head{display:grid;grid-template-columns:1fr .7fr;gap:60px;align-items:end}.plan-compare-head h2{margin-top:var(--eyebrow-gap)}.plan-compare-head p{max-width:45ch;color:#bda6b4;font-size:14px}.plan-compare .tablewrap{margin-top:var(--sec-gap)}.plan-compare table{color:#d5c5ce}.plan-compare th,.plan-compare td{border-color:#573c4f;padding:17px 15px}.plan-compare th{color:#987c8d;font-size:9px}.plan-compare td:first-child{color:#ebe0e7}.plan-compare td:not(:first-child){font-size:12.5px;color:#c7b3bf}
.pricing-faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(60px,10vw,170px)}.pricing-faq h2{margin-top:var(--eyebrow-gap)}.biz-pricing details.faq{padding:23px 0}.biz-pricing details.faq summary{font-size:17px;font-weight:550}.biz-pricing details.faq p{max-width:63ch}

/* Product page. Existing functional demo and diagrams are retained. */
.product-hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(400px,.98fr)}
.product-hero-grid .shot{min-width:0}.biz-product .browser{background:var(--card);border-color:#d3c4cd;border-radius:14px}.biz-product .browser .body{background:#e2d5dd}.biz-product .browser .bar{background:#eee4ea}.biz-product .wdg .hd,.biz-product .demowdg .hd{background:var(--brand)}
.product-proofbar{grid-template-columns:repeat(4,1fr);margin-top:var(--sec-gap);border:1px solid var(--line);border-radius:12px;background:rgba(247,240,244,.55);overflow:hidden}.product-proofbar>div{display:flex;min-height:105px;flex-direction:column;justify-content:space-between;padding:20px}.product-proofbar>div:not(:first-child){padding-inline-start:20px}.product-proofbar small{margin:0}.product-proofbar strong{max-width:29ch;font-size:13px;line-height:1.45}
.product-problem,.product-mechanism,.product-training,.product-difference,.product-faq{padding:var(--sec-y) 0}.biz-product h2.sec{max-width:20ch;margin-top:var(--eyebrow-gap)}.biz-product p.seclede{max-width:62ch;margin-top:var(--lede-gap);color:var(--ink-2);font-size:17px}.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--sec-gap);border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}.outcome-grid .card{display:flex;flex-direction:column;justify-content:flex-start;min-height:218px;border:0;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:26px;background:var(--card)}.outcome-grid .card h3{font-size:21px}.outcome-grid .card p{margin-top:10px;font-size:14px}
.product-demo-section{padding:var(--sec-y) 0;background:var(--ink);color:#f0e6ec}.product-demo-section p.seclede{color:#c0a9b6}.product-demo-section .demo{gap:clamp(40px,7vw,100px);margin-top:var(--sec-gap);align-items:center}.product-demo-section .demowdg{background:var(--card);border-color:#573c4f;border-radius:14px;box-shadow:none;color:var(--ink)}.product-demo-section .demowdg .msgs{background:#e9dee4}.product-demo-section .demoside h3{font-size:26px}.product-demo-section .demosteps{color:#cbb9c4}.product-demo-section .demosteps li{margin:16px 0}.product-demo-section .note{background:rgba(164,103,70,.11);border-color:var(--brand);color:#d0bfc9}.product-demo-section .dim{color:#a98f9e}.product-demo-section a{color:#e5cfdc!important}
.product-mechanism .flowbox,.product-training .flowbox,.product-flows .flowbox{margin-top:var(--sec-gap);border-radius:14px;box-shadow:none}.product-training{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Welcome flow continues the white "things you set up" band that Training
   starts, so the two read as one stretch of setup rather than as a stripe.
   Training already draws the hairline between them, hence no border-top. */
.product-flows{background:var(--card);border-bottom:1px solid var(--line)}
.product-flows .note{margin:var(--sec-gap) 0 0;background:var(--bg)}
.product-flows .grid{margin-top:22px}.product-training .steps{margin-top:var(--sec-gap);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}.product-training .step{display:flex;flex-direction:column;justify-content:flex-start;min-height:228px;padding:26px;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line)}.product-training .step h3{font-size:20px}.product-training .step p{margin-top:11px;font-size:13.5px}
.product-difference .grid{margin-top:var(--sec-gap);border-top:1px solid var(--line);border-inline-start:1px solid var(--line);gap:0}.product-difference .card{display:flex;flex-direction:column;justify-content:flex-start;min-height:206px;padding:28px;border:0;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}.product-difference .card h3{max-width:22ch;font-size:22px}.product-difference .card p{margin-top:11px}
.product-install{padding:var(--sec-y) 0;background:var(--brand);color:var(--plum-ink)}.product-install p.seclede{color:#ebdae4}.product-install .grid{margin-top:var(--sec-gap);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(247,240,244,.22);border:1px solid rgba(247,240,244,.22)}.product-install .card{display:flex;flex-direction:column;justify-content:flex-start;min-height:148px;border:0;border-radius:0;box-shadow:none;background:var(--brand);color:var(--plum-ink);transition:background .18s ease}.product-install .card:hover{background:#b67755}.product-install .card h3{font-size:20px}.product-install .card p{color:#ebdae4}.product-faq .faqlist{margin-top:var(--sec-gap)}.product-faq details.faq{padding:22px 0}.product-faq details.faq summary{font-size:17px;font-weight:550}.product-faq details.faq p{max-width:70ch}.product-final h2{max-width:14ch}

/* Documentation hub. Every guide shares one shell; content stays authored in Markdown. */
.biz-docs .docwrap{max-width:calc(1360px + var(--gutter)*2);grid-template-columns:232px minmax(0,1fr);gap:clamp(45px,7vw,110px);padding-top:var(--doc-y);padding-bottom:var(--doc-y)}
.biz-docs .docnav{top:96px;padding:0 20px 0 0;border-inline-end:1px solid var(--line);scrollbar-width:thin;scrollbar-color:#d1c1ca transparent}
.biz-docs .docnav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;padding:0 0 15px;border-bottom:1px solid var(--ink);font-size:10px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}.biz-docs .docnav-head small{color:var(--ink-3);font-size:8.5px;font-weight:600;letter-spacing:.09em}
.biz-docs .dgroup{margin-bottom:27px}
.biz-docs .dlabel{display:flex;align-items:center;margin-bottom:8px;color:#95788a;font-size:9px;font-weight:650;letter-spacing:.13em}
.biz-docs .ditem{position:relative;margin:0;padding:7px 9px 7px 18px;border-radius:0;color:#6c5063;font-size:12.75px;line-height:1.35;transition:background .15s ease,color .15s ease}
.biz-docs .ditem::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;background:transparent}.biz-docs .ditem:hover{background:#e6d9e1;color:var(--ink)}
.biz-docs .ditem.on{background:#f1e5ec;color:#825238;font-weight:570}.biz-docs .ditem.on::before{background:var(--brand)}
.biz-docs .docs-support{display:block;margin-top:36px;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.biz-docs .docs-support small{display:block;color:var(--ink-3);font-size:9px;font-weight:650;letter-spacing:.1em;text-transform:uppercase}.biz-docs .docs-support strong{display:flex;align-items:center;justify-content:space-between;margin-top:5px;font-size:12.5px;font-weight:570}.biz-docs .docs-support:hover strong{color:var(--brand)}
.biz-docs .docmain{max-width:880px}
.biz-docs .docmast{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px;padding-bottom:13px;border-bottom:1px solid var(--line);color:var(--ink-3);font-size:9.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}
.biz-docs .docmast span:last-child{color:var(--brand)}
.biz-docs .docwrap .prose{max-width:800px;margin:0}
.biz-docs .prose h1{max-width:14ch;margin:0 0 25px;font-size:clamp(48px,5vw,72px);font-weight:560;line-height:.98;letter-spacing:-.06em;text-wrap:balance}
.biz-docs .prose>p:first-of-type{max-width:62ch;margin:0 0 35px;color:var(--ink-2);font-size:18px;line-height:1.62}
.biz-docs .prose h2{margin:62px 0 17px;padding-top:25px;border-top:1px solid var(--line);font-size:29px;line-height:1.08;scroll-margin-top:96px}
.biz-docs .prose h3{margin:35px 0 12px;font-size:20px;line-height:1.2;scroll-margin-top:96px}
.biz-docs .prose p{margin:14px 0;color:var(--ink-2);font-size:15.5px;line-height:1.72}
.biz-docs .prose ul,.biz-docs .prose ol{margin:18px 0;padding-inline-start:22px;color:var(--ink-2);font-size:15px;line-height:1.65}
.biz-docs .prose li{margin:10px 0;padding-inline-start:4px}
.biz-docs .prose a{color:#915b3e;text-decoration:underline;text-decoration-color:#e3cbd9;text-underline-offset:3px;text-decoration-thickness:1px}
.biz-docs .prose a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.biz-docs .prose :not(pre)>code{border-color:#d3c3cd;border-radius:5px;background:#e2d4dc;color:#4f3447;padding:2px 5px}
.biz-docs .prose .note{margin:29px 0;padding:19px 21px;border:1px solid var(--line);border-inline-start:3px solid var(--brand);border-radius:8px;background:var(--card);color:var(--ink-2);font-size:14.5px;line-height:1.65}
.biz-docs .prose pre.code{position:relative;margin:27px 0;padding:25px 23px;border:1px solid #4f3447;border-radius:10px;background:var(--ink);box-shadow:0 25px 65px -46px rgba(56,34,50,.85);font-size:13px;line-height:1.65}
.biz-docs .prose pre.code[data-lang]::before{content:attr(data-lang);display:block;margin-bottom:14px;color:#a98f9e;font-family:var(--sans);font-size:9px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}
.biz-docs .prose hr{margin:45px 0;border-color:var(--line)}
.biz-docs .nextlink{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:72px;padding:20px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);color:var(--ink);font-size:13.5px;font-weight:560}
.biz-docs .nextlink:hover{color:var(--brand)}

/* Legal documents. Dense policy text gets a calm reading surface, a stable
   document map and explicit relationships between the four agreements. */
.biz-legal{background:#ebe0e7}
/* The only section with an asymmetric pad, and deliberately so: the document
   strip is a tab bar that has to meet the page below it. Everything else
   on every business page is --sec-y top and bottom. */
.legal-hero{padding:var(--sec-y) 0 0;background:var(--ink);color:#f0e6ec}
/* column-gap, not gap: the shorthand also set a ~130px ROW gap, which the
   full-width document strip inherited on top of its own margin. */
.legal-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);column-gap:clamp(55px,9vw,150px);row-gap:0;align-items:end}
.legal-kicker{color:#b299a8}.legal-kicker>span{background:#bd8364}
.legal-hero h1{max-width:12ch;margin-top:var(--eyebrow-gap);font-size:clamp(52px,6vw,88px);font-weight:550;line-height:.94;letter-spacing:-.067em;text-wrap:balance}
.legal-lede{max-width:42ch;margin-top:var(--lede-gap);color:#c8b5c0;font-size:18px;line-height:1.58}
.legal-hero-side{min-width:0;border-top:1px solid #573c4f}
.legal-meta{display:grid;grid-template-columns:repeat(3,1fr);margin:0}
.legal-meta>div{min-width:0;padding:19px 16px 22px 0;border-inline-end:1px solid #573c4f}
.legal-meta>div:not(:first-child){padding-inline-start:16px}.legal-meta>div:last-child{border-inline-end:0}
.legal-meta dt{color:#826679;font-size:8.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}
.legal-meta dd{margin:7px 0 0;color:#d4c4cd;font-size:12px;font-weight:500;line-height:1.35}
.legal-suite{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--sec-gap);border-top:1px solid #573c4f}
.legal-suite a{display:flex;align-items:center;min-width:0;padding:17px 14px;border-inline-end:1px solid #573c4f;color:#b198a6;font-size:12.5px;font-weight:500;transition:background .16s ease,color .16s ease}
.legal-suite a:first-child{border-inline-start:1px solid #573c4f}.legal-suite a:hover{background:#3f2637;color:var(--plum-ink)}.legal-suite a.on{background:var(--brand);border-color:var(--brand);color:var(--plum-ink)}

.legal-document{padding:var(--doc-y) 0}
.legal-layout{max-width:calc(1280px + var(--gutter)*2);display:grid;grid-template-columns:225px minmax(0,1fr);gap:clamp(55px,8vw,120px);align-items:start}
.legal-rail{position:sticky;top:98px;max-height:calc(100vh - 122px);overflow:auto;padding-inline-end:14px;scrollbar-width:thin;scrollbar-color:#d1c1ca transparent}
.legal-menu>summary{display:none}
.legal-toc{display:grid;border-top:1px solid var(--line)}
.legal-toc::before{content:"ON THIS PAGE";padding:16px 0 12px;color:#ad93a2;font-size:9px;font-weight:700;letter-spacing:.13em}
.legal-toc a{position:relative;padding:9px 8px 9px 13px;border-top:1px solid transparent;color:#74596c;font-size:12.5px;line-height:1.35;transition:color .15s ease,background .15s ease}
.legal-toc a::before{content:"";position:absolute;inset-inline-start:0;top:15px;width:3px;height:3px;border-radius:50%;background:#cdbcc6}
.legal-toc a:hover{background:#e2d4dc;color:var(--ink)}.legal-toc a:hover::before{background:var(--brand)}
.legal-main{min-width:0;max-width:820px}
.biz-legal .legal-main .prose{max-width:none;margin:0}
.biz-legal .prose>.note:first-child{margin-top:0}
.biz-legal .prose .note{margin:0 0 48px;padding:22px 24px;border:1px solid var(--line);border-inline-start:3px solid var(--brand);border-radius:8px;background:var(--card);color:#654a5d;font-size:14.5px;line-height:1.68}
.biz-legal .prose h2{margin:64px 0 18px;padding-top:27px;border-top:1px solid var(--line);font-size:29px;line-height:1.1;scroll-margin-top:98px}
.biz-legal .prose h3{margin:37px 0 13px;font-size:20px;line-height:1.2;scroll-margin-top:98px}
.biz-legal .prose p{margin:14px 0;color:#64485b;font-size:15.5px;line-height:1.74}
.biz-legal .prose ul,.biz-legal .prose ol{margin:18px 0;padding-inline-start:22px;color:#64485b;font-size:15px;line-height:1.68}
.biz-legal .prose li{margin:10px 0;padding-inline-start:5px}.biz-legal .prose li::marker{color:#bb7f5f}
.biz-legal .prose strong{color:#482e40;font-weight:650}
.biz-legal .prose a{color:#915b3e;text-decoration:underline;text-decoration-color:#e3cbd9;text-decoration-thickness:1px;text-underline-offset:3px}
.biz-legal .prose a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.biz-legal .prose table{display:block;width:100%;max-width:100%;margin:27px 0 40px;overflow-x:auto;border:1px solid var(--line);border-collapse:collapse;background:var(--card);font-size:13.5px}
.biz-legal .prose th,.biz-legal .prose td{min-width:165px;padding:13px 15px;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);text-align:start;vertical-align:top;line-height:1.5}
.biz-legal .prose th{background:#dfd0d9;color:#795f71;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.biz-legal .prose tr:last-child td{border-bottom:0}.biz-legal .prose th:last-child,.biz-legal .prose td:last-child{border-inline-end:0}

@media(max-width:900px){
  .legal-hero-grid{grid-template-columns:1fr;gap:48px}.legal-hero h1{max-width:14ch}.legal-hero-side{max-width:680px}
  .legal-layout{grid-template-columns:minmax(0,1fr);gap:36px}.legal-rail{position:static;max-height:none;overflow:visible;padding:0 0 20px;border-bottom:1px solid var(--line)}
  .legal-menu>summary{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font-size:13.5px;font-weight:550;list-style:none}
  .legal-menu>summary::-webkit-details-marker{display:none}.legal-menu>summary::after{content:"+";color:var(--ink-3);font-size:18px;font-weight:400;line-height:1}.legal-menu[open]>summary::after{content:"−"}.legal-menu[open]>summary{margin-bottom:16px}
  .legal-toc{grid-template-columns:repeat(2,1fr);gap:0 25px;padding-inline:8px}.legal-toc::before{grid-column:1/-1}.legal-main{width:100%;max-width:800px;margin-inline:auto}
}
@media(max-width:600px){
  .legal-hero-grid{gap:39px}.legal-hero h1{font-size:46px}.legal-lede{font-size:16px}.legal-meta>div{padding:16px 10px 18px 0}.legal-meta>div:not(:first-child){padding-inline-start:10px}.legal-meta dd{font-size:10.5px}
  .legal-suite{grid-template-columns:repeat(2,1fr)}.legal-suite a:nth-child(2){border-inline-end:1px solid #573c4f}.legal-suite a:nth-child(-n+2){border-bottom:1px solid #573c4f}.legal-suite a:nth-child(3){border-inline-start:1px solid #573c4f}
  .legal-layout{gap:28px}.legal-toc{grid-template-columns:1fr}.biz-legal .prose .note{margin-bottom:40px;padding:18px}.biz-legal .prose h2{margin-top:51px;font-size:24px}.biz-legal .prose h3{font-size:18px}.biz-legal .prose p{font-size:15px}.biz-legal .prose table{font-size:12.5px}.biz-legal .prose th,.biz-legal .prose td{min-width:145px;padding:11px 12px}
}

@media(max-width:1080px){
  .biz-hero-grid{grid-template-columns:1fr 1fr;gap:45px}.channel-card{min-height:300px}
  .principles-section>.wrap{grid-template-columns:.8fr 1.2fr;gap:70px}.plan-card{min-height:620px;padding:23px}
}
@media(max-width:880px){
  .biz-reframe .snav{min-height:68px}.biz-reframe .slinks a::after{display:none}
  .biz-hero-grid,.contact-hero-grid,.pricing-hero-grid,.language-grid,.product-panel,.principles-section>.wrap,.biz-final>.wrap,.contact-context-grid,.pricing-faq-grid{grid-template-columns:1fr}
  .biz-hero-grid{gap:55px}.biz-hero h1{max-width:12ch}
  .biz-proofbar,.product-proofbar{grid-template-columns:repeat(2,1fr)}.biz-proofbar>div:nth-child(2),.product-proofbar>div:nth-child(2){border-inline-end:0}.biz-proofbar>div:nth-child(-n+2),.product-proofbar>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .channel-grid{grid-template-columns:repeat(2,1fr)}.channel-card:nth-child(2){border-inline-end:0}.channel-card:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .language-grid{gap:70px}.product-panel{gap:0}.platform-grid{grid-template-columns:1fr}.principles-section>.wrap{gap:70px}.biz-final>.wrap{gap:45px;align-items:start}
  .contact-hero-grid{gap:45px}.contact-route{grid-template-columns:1fr}.contact-route-actions{grid-column:1;padding-top:0;flex-direction:row;flex-wrap:wrap;gap:18px}.contact-context-grid{gap:45px}
  .pricing-hero-grid{gap:50px}.pricing-access{max-width:560px}.plan-grid{grid-template-columns:1fr}.plan-card{min-height:auto;border-inline-end:0;border-bottom:1px solid var(--line)}.plan-card:last-child{border-bottom:0}.plan-for{min-height:auto}.plan-card ul{margin-bottom:45px}.plan-compare-head{grid-template-columns:1fr;gap:28px}
  .outcome-grid,.product-training .steps,.product-install .grid{grid-template-columns:1fr}.outcome-grid .card,.product-training .step{min-height:190px}.product-install .card{min-height:132px}.product-difference .grid{grid-template-columns:1fr}
  .biz-docs .docwrap{grid-template-columns:1fr;gap:34px}.biz-docs .docmain{max-width:none}.biz-docs .docwrap .prose{margin-inline:auto}.biz-docs .docnav{position:static;padding:0 0 18px;border-inline-end:0;border-bottom:1px solid var(--line)}.biz-docs .docnav-head,.biz-docs .docs-support{display:none}
  .biz-docs .docmenu>summary{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font-size:13.5px;font-weight:550;list-style:none}
  .biz-docs .docmenu>summary::after{content:"+";color:var(--ink-3);font-size:18px;font-weight:400;line-height:1}.biz-docs .docmenu[open]>summary::after{content:"−"}.biz-docs .docmenu[open]>summary{margin-bottom:19px}
  .biz-docs .docmenu>summary::-webkit-details-marker{display:none}.biz-docs .docmenu .dgroup{padding-inline:10px}.biz-docs .docmast{margin-top:3px}
}
@media(max-width:560px){
  .biz-reframe .snav{gap:9px}.biz-reframe .sactions .cta{font-size:12.5px;padding:9px 11px}
  .biz-hero h1{font-size:clamp(48px,15vw,68px)}.biz-hero .biz-lede{font-size:16px}.biz-actions{align-items:stretch;flex-direction:column}.biz-actions .btn-lg,.biz-actions .btn-quiet{text-align:center}.biz-fine{line-height:1.8}
  .answer-field{padding:14px}.answer-field-head{font-size:8px}.answer-source{align-items:flex-start;flex-direction:column;gap:8px}.answer-handoff{flex-direction:column}.answer-handoff strong{text-align:start}
  .biz-proofbar,.product-proofbar{grid-template-columns:1fr}.biz-proofbar>div,.biz-proofbar>div:not(:first-child),.product-proofbar>div,.product-proofbar>div:not(:first-child){padding:15px 0;border-inline-end:0;border-bottom:1px solid var(--line)}.biz-proofbar>div:last-child,.product-proofbar>div:last-child{border-bottom:0}
  .channel-grid{grid-template-columns:1fr}.channel-card{min-height:272px;border-inline-end:0;border-bottom:1px solid var(--line)}.channel-card:nth-child(3){border-bottom:1px solid var(--line)}.channel-icon{margin:32px 0 28px}
  .language-lineage{display:grid;grid-template-columns:1fr;gap:9px}.language-lineage i{width:1px;height:16px}.language-row.active{margin:0 -12px;padding:0 12px}.language-row .lr-text{font-size:17px!important}.language-response{padding-inline-start:0}
  .product-copy,.knowledge-stack{padding:27px}.knowledge-row{grid-template-columns:1fr}.knowledge-row>b{grid-column:1}.platform-grid article{min-height:180px}.principles-list h3{font-size:19px}
  .contact-hero-grid{gap:35px}.contact-intro>p{font-size:16px}.contact-route{gap:18px;padding:34px 0}.contact-route h2{font-size:26px}.contact-route-actions{flex-direction:column}.contact-consumer>.wrap{align-items:flex-start;flex-direction:column;gap:10px}
  .pricing-access-value strong{font-size:102px}.pricing-access dl{grid-template-columns:1fr}.pricing-access dl>div,.pricing-access dl>div+div{padding:13px 0;border-inline-end:0;border-bottom:1px solid var(--line)}.pricing-explainer-grid>div{grid-template-columns:1fr;gap:18px}.plan-card{padding:25px}.plan-compare .tablewrap::before{color:#b299a8}
  .product-install .grid{grid-template-columns:1fr}
  .biz-docs .docwrap{gap:27px}.biz-docs .docmast{align-items:flex-start;flex-direction:column;gap:5px;margin-bottom:22px}.biz-docs .prose h1{font-size:44px}.biz-docs .prose>p:first-of-type{font-size:16px}.biz-docs .prose h2{margin-top:50px;font-size:24px}.biz-docs .prose h3{font-size:18px}.biz-docs .prose p{font-size:15px}.biz-docs .prose pre.code{margin-inline:calc(var(--gutter) * -.35);padding:20px 17px;font-size:12px}.biz-docs .nextlink{margin-top:58px}
}
@media(prefers-reduced-motion:reduce){
  .biz-reframe *{scroll-behavior:auto!important}.biz-reframe .slinks a::after,.biz-reframe .cta,.biz-reframe .btn-lg,.biz-reframe .btn-quiet,.channel-card,.product-install .card{transition:none}
}

/* ─────────────────────────────────────────────────────────────────────────
   International — the region control, the suggestion, the picker.

   Google's guidance is explicit that a site should NOT automatically redirect
   people between language versions: it hides versions from users and from
   crawlers, and IP-adaptive content is invisible to Googlebot, which does not
   vary its crawl location. So a visitor changes market by CHOOSING — from the
   header on every page, from the picker, or from a one-time hint they can
   dismiss forever. Nothing here ever moves anybody.
   ───────────────────────────────────────────────────────────────────────── */

.biz-reframe .sregion{
  display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:8px;
  border:1px solid rgba(56,34,50,.14);color:var(--ink-2);
  font-size:13px;font-weight:520;white-space:nowrap;
  transition:border-color .18s ease,color .18s ease;
}
.biz-reframe .sregion:hover{border-color:var(--ink);color:var(--ink)}
.biz-reframe .sregion svg{flex:0 0 auto;opacity:.75}
/* The one-click way back to English, on every non-English market. */
.biz-reframe .sregion-en{font-size:13px;font-weight:550;color:var(--ink-2);border-bottom:1px solid rgba(56,34,50,.25);padding-bottom:1px}
.biz-reframe .sregion-en:hover{color:var(--ink);border-color:var(--ink)}
.biz-reframe .sfoot .sregion{border-color:rgba(57,34,50,.24);color:var(--ink-2)}

/* The suggestion. Bottom-anchored rather than a top bar: a top bar pushes the
   page down and reflows the hero the instant the script runs. */
.region-hint{
  position:fixed;inset-inline:auto 20px;bottom:20px;z-index:60;width:min(360px,calc(100vw - 40px));
  display:grid;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;
  background:var(--card);color:var(--ink);box-shadow:0 24px 60px -28px rgba(56,34,50,.45);
  font:14px/1.5 var(--sans);
}
.region-hint p{margin:0;color:var(--ink-2)}
.region-hint strong{color:var(--ink);font-weight:620}
.region-hint>div{display:flex;gap:10px;align-items:center}
.region-hint .rh-go{
  padding:9px 16px;border-radius:8px;background:var(--ink,#382232);color:var(--plum-ink);
  font-size:13.5px;font-weight:550;text-decoration:none;
}
.region-hint .rh-go:hover{background:var(--brand,#a46746)}
.region-hint .rh-stay{
  padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:transparent;
  color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:520;cursor:pointer;
}
.region-hint .rh-stay:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:520px){.region-hint{inset-inline:20px 20px;width:auto}}

/* The picker. 219 rows, so it is a scannable list with a filter, not a grid of
   cards — the reader arrives knowing exactly which one they want. */
.region-search{
  width:min(100%,420px);margin-top:var(--sec-gap);padding:13px 16px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);
  font:inherit;font-size:15px;
}
.biz-region .biz-lede{text-wrap:pretty}
.region-alt{margin:12px 0 0;font-size:14.5px;color:var(--ink-3)}
.region-alt a{color:var(--brand);font-weight:560;text-decoration:underline;text-underline-offset:3px}
.region-search:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-color:var(--brand)}
.region-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:0 clamp(24px,3vw,44px);
  margin-top:34px;border-top:1px solid var(--line);
}
.region-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.region-row:hover .region-name{color:var(--brand)}
/* The hidden ATTRIBUTE loses to any author display rule — the search filter
   sets it, so it must win over .region-row's display:grid. */
.region-row[hidden]{display:none}
.region-empty[hidden]{display:none}
.region-name{font-size:14.5px;font-weight:520;color:var(--ink)}
.region-lang{font-size:12.5px;color:var(--ink-3)}
.region-tag{
  font-size:8.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:99px;padding:3px 8px;
}
.region-row[data-own] .region-tag{color:var(--brand);border-color:#e8d4df;background:#f2e6ed}
.region-empty{margin-top:26px;color:var(--ink-3)}

/* Legal documents are served in English in every market — a machine-translated
   liability clause is a contract nobody agreed to. Say so, at the top. */
.legal-en-note{
  margin:0 0 30px;padding:13px 16px;border:1px solid var(--line);
  border-inline-start:3px solid var(--ink-3);border-radius:8px;
  background:var(--card);color:var(--ink-3);font-size:13.5px;line-height:1.6;
}

/* ── RTL ────────────────────────────────────────────────────────────────
   Every direction-sensitive rule above uses logical properties, so the whole
   layout mirrors on its own. These are the things logical properties cannot
   reach: glyphs that point somewhere, and the SVG diagrams, whose labels are
   English and whose arrows read left-to-right no matter what the page does. */
[dir="rtl"] .biz-actions .btn-lg span,
[dir="rtl"] .text-link span,
[dir="rtl"] .nextlink span,
[dir="rtl"] .contact-route-actions a span,
[dir="rtl"] .docs-support strong span,
[dir="rtl"] .contact-consumer a span,
[dir="rtl"] .plan-card>a span{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .flowbox,[dir="rtl"] .lineage,[dir="rtl"] .tablewrap{direction:ltr}
[dir="rtl"] .tablewrap table{direction:rtl}
[dir="rtl"] pre.code{direction:ltr;text-align:start}
/* Inline code too: inheriting RTL, `</body>` displayed as `<body/>` and `KeydaBot.open()` as `(KeydaBot.open)`. An LTR island leaves the Arabic around it untouched. */
[dir="rtl"] code{direction:ltr;unicode-bidi:isolate}

/* ─────────────────────────────────────────────────────────────────────────
   Orders and bookings (product page) + the order trace (homepage).

   The mockups are the real sequence drawn in HTML: the widget's cards and a
   typed order, the customer's order card, the team's alert and board, and the
   booking slot picker. They are LTR islands like the other product imagery,
   and every label in them is translated with the page.
   ───────────────────────────────────────────────────────────────────────── */
.product-commerce{padding:var(--sec-y) 0;background:radial-gradient(1200px 520px at 85% 0%,rgba(164,103,70,.10),transparent 70%),linear-gradient(180deg,#f1e8ed,#f0e6ec);border-bottom:1px solid var(--line)}
.cx-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:var(--sec-gap)}
.cx-panel{margin:0;display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 20px;box-shadow:var(--shadow)}
.cx-cap{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:13.5px;font-weight:600;color:var(--ink)}
.cx-cap b{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--plum-ink);font-size:12px;font-weight:650}
.cx-vis{flex:1;display:flex;flex-direction:column;justify-content:flex-start}
.cx-note{margin-top:auto;padding-top:16px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}

/* The chat window, as the widget draws it. */
.cx-win{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);font-size:12px;line-height:1.4;color:var(--ink);text-align:left}
.cx-hd{display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--brand);color:var(--plum-ink)}
.cx-hd b{display:block;font-size:12.5px;font-weight:650}
.cx-hd em{display:block;font-style:normal;font-size:10.5px;opacity:.8}
.cx-av{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(247,240,244,.22);font-size:12px;font-weight:700}
.cx-msgs{display:flex;flex-direction:column;gap:8px;padding:12px;background:#e9dee4}
.cx-m{max-width:86%;padding:7px 10px;border-radius:12px;font-size:11.5px}
.cx-m.u{align-self:flex-end;background:var(--brand);color:var(--plum-ink);border-end-end-radius:4px}
.cx-m.b{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-end-start-radius:4px}
/* A carousel: the third card runs off the edge, as it does in the widget. */
.cx-cards{display:flex;gap:8px;margin-inline:-12px;padding-inline:12px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#271622 82%,transparent);mask-image:linear-gradient(90deg,#271622 82%,transparent)}
.cx-card{position:relative;flex:0 0 43%;min-width:0;display:flex;flex-direction:column;gap:3px;padding:6px 6px 7px;background:var(--card);border:1px solid var(--line);border-radius:11px}
.cx-card b{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.cx-card small{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ink-2)}
.cx-ph{display:block;height:56px;border-radius:8px}
.cx-ph1{background:radial-gradient(circle at 50% 58%,rgba(247,240,244,.42) 0 30%,transparent 31%),radial-gradient(circle at 50% 58%,#fff7ea 0 37%,transparent 38%),linear-gradient(135deg,#f2a65a,#c4492f)}
.cx-ph2{background:radial-gradient(circle at 50% 58%,rgba(247,240,244,.42) 0 30%,transparent 31%),radial-gradient(circle at 50% 58%,#fff7ea 0 37%,transparent 38%),linear-gradient(135deg,#f7d470,#d9822b)}
.cx-ph3{background:radial-gradient(circle at 50% 58%,rgba(247,240,244,.42) 0 30%,transparent 31%),radial-gradient(circle at 50% 58%,#fff7ea 0 37%,transparent 38%),linear-gradient(135deg,#f1e1c0,#c99a62)}
.cx-pop{position:absolute;top:10px;left:10px;padding:2px 7px;border-radius:99px;background:var(--card);color:var(--ink);font-size:9px;font-weight:700;box-shadow:0 2px 6px rgba(56,34,50,.15)}
/* The vegetarian / non-vegetarian mark: a square with a dot. */
.cx-diet{position:relative;flex:0 0 9px;width:9px;height:9px;border:1.5px solid #138a36;border-radius:2px}
.cx-diet::after{content:"";position:absolute;inset:1.5px;border-radius:50%;background:#138a36}
.cx-diet.nv{border-color:#b3261e}.cx-diet.nv::after{background:#b3261e}
.cx-add{margin-top:4px;padding:3px 0;border:1px solid #e8d4df;border-radius:7px;background:#f2e8ee;color:var(--brand);font-size:10.5px;font-weight:600;text-align:center}
.cx-prop{align-self:flex-start;width:90%;display:flex;flex-direction:column;gap:4px;padding:9px 10px;background:var(--card);border:1px solid var(--line);border-radius:12px;border-end-start-radius:4px;font-size:11px}
.cx-prop>div,.cx-ol{display:flex;justify-content:space-between;gap:8px}
.cx-prop>div span,.cx-ol span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-tot{margin-top:2px;padding-top:6px;border-top:1px dashed var(--line);font-weight:650;color:var(--ink)}
.cx-btn{display:block;margin-top:6px;padding:6px 8px;border-radius:8px;background:var(--brand);color:var(--plum-ink);font-size:11px;font-weight:600;text-align:center}

/* The checkout behind, the customer's order card in front. */
.cx-orderwrap{position:relative;padding-top:2px;font-size:12px;line-height:1.4;color:var(--ink);text-align:left}
.cx-sheet{padding:12px;background:#f3ebef;border:1px solid var(--line);border-radius:14px}
.cx-seg{display:flex;gap:3px;padding:3px;border-radius:9px;background:#e1d3db}
.cx-seg span{flex:1;padding:5px 0;border-radius:7px;font-size:10.5px;color:var(--ink-2);text-align:center}
.cx-seg .on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(56,34,50,.12)}
.cx-field{margin-top:7px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:11px;color:var(--ink-2)}
.cx-sheet .cx-btn{margin-top:9px}
.cx-order{position:relative;padding:13px 14px 14px;background:var(--card);border:1px solid #e8d5e0;border-radius:14px;box-shadow:0 22px 44px -24px rgba(120,75,51,.5);font-size:11.5px}
.cx-oh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.cx-oh b{font-size:13px;font-weight:650}
.cx-pill{padding:2px 8px;border-radius:99px;border:1px solid #f0cf94;background:#fdf0d9;color:#8a5300;font-size:10px;font-weight:650;white-space:nowrap}
.cx-ol{padding:3px 0;color:var(--ink-2)}
.cx-ol.cx-tot{color:var(--ink)}
.cx-pay{margin-top:6px;font-size:10.5px;font-weight:600;color:var(--ok)}
.cx-steps{list-style:none;margin:13px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cx-steps li{position:relative;padding:17px 1px 0;font-size:9px;line-height:1.25;color:var(--ink-3);text-align:center;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.cx-steps li::before{content:"";position:absolute;z-index:1;top:0;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--card);border:2px solid #d3c3cc;box-sizing:border-box}
.cx-steps li:not(:last-child)::after{content:"";position:absolute;top:4.5px;left:50%;width:100%;height:2px;background:#ded0d8}
.cx-steps .done{color:var(--ink-2)}
.cx-steps .done::before{background:var(--ok);border-color:var(--ok)}
.cx-steps .done::after{background:var(--ok)!important}
.cx-steps .now{color:var(--ink);font-weight:650}
.cx-steps .now::before{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px rgba(164,103,70,.18)}

/* The team's side: the Orders board behind, an alert on a phone in front. */
.cx-owner{position:relative;font-size:12px;line-height:1.4;color:var(--ink);text-align:left}
.cx-board{padding:10px;background:#f3ebef;border:1px solid var(--line);border-radius:12px}
.cx-board-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cx-board-hd b{font-size:12px;font-weight:650}
.cx-bell{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fdf0d9;color:#8a5300}
.cx-bell svg{display:block;width:12px;height:12px}
.cx-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cx-cols>div{display:flex;flex-direction:column;gap:5px;min-height:88px;padding:6px;border-radius:8px;background:#e5d8df}
.cx-cols small{font-size:9.5px;font-weight:650;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-tk{padding:5px 6px;border:1px solid var(--line);border-radius:6px;background:var(--card);font-size:10.5px;font-weight:600}
.cx-tk.hot{border-color:var(--brand);box-shadow:0 0 0 3px rgba(164,103,70,.16);animation:cxPulse 2.4s ease-in-out infinite}
@keyframes cxPulse{0%,100%{box-shadow:0 0 0 3px rgba(164,103,70,.16)}50%{box-shadow:0 0 0 6px rgba(164,103,70,.06)}}
.cx-phone{position:relative;padding:8px 8px 12px;background:#3c2435;border-radius:20px;box-shadow:0 24px 46px -22px rgba(56,34,50,.6)}
/* One step leads to the next: the checkout to the order card, the board to
   the alert. Stacked with an arrow between them, never overlapping — a card
   laid over another hid its Place order button and half the board. */
.cx-down{position:relative;display:block;width:2px;height:22px;margin:8px auto;background:#d3c3cc;border-radius:2px}
.cx-down::after{content:"";position:absolute;left:50%;bottom:-2px;width:8px;height:8px;border-right:2px solid #d3c3cc;border-bottom:2px solid #d3c3cc;transform:translateX(-50%) rotate(45deg)}
.cx-notch{width:54px;height:6px;margin:0 auto 9px;border-radius:99px;background:#52374a}
.cx-alert{padding:9px 11px 10px;border-radius:13px;background:rgba(247,240,244,.97)}
.cx-alert-app{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--ink-3)}
.cx-alert-app i{position:relative;flex:0 0 16px;width:16px;height:16px;border-radius:5px;background:#25d366}
.cx-alert-app i::after{content:"";position:absolute;inset:4px 3.5px 5px;border-radius:50% 50% 50% 2px;background:var(--card)}
.cx-alert-app span{font-weight:650;color:var(--ink)}
.cx-alert-app em{margin-inline-start:auto;font-style:normal}
.cx-alert p{margin-top:5px;font-size:11px;line-height:1.42;color:var(--ink)}

/* Bookings: copy beside the slot picker. */
.cx-book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,410px);gap:clamp(36px,5vw,84px);align-items:center;margin-top:20px;padding:clamp(26px,3.6vw,52px);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.cx-book-copy h3{margin-top:var(--eyebrow-gap);font-size:clamp(28px,2.6vw,38px);line-height:1.05;letter-spacing:-.04em;font-weight:560}
.cx-book-copy>p{margin-top:16px;max-width:52ch;color:var(--ink-2);font-size:16px}
.cx-ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:13px}
.cx-ticks li{position:relative;padding-inline-start:33px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.cx-ticks li::before{content:"✓";position:absolute;inset-inline-start:0;top:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(8,127,91,.1);color:var(--ok);font-size:11px;font-weight:700}
.cx-ticks b{color:var(--ink);font-weight:600}
.cx-slots{justify-self:end;width:100%;box-shadow:0 26px 60px -36px rgba(120,75,51,.45)}
.cx-bk{display:flex;flex-direction:column;gap:10px;padding:12px;background:#e9dee4}
.cx-svc{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 11px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.cx-svc b{font-size:12px;font-weight:650}
.cx-svc span{font-size:11px;color:var(--ink-3);white-space:nowrap}
.cx-days{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.cx-days span{display:flex;flex-direction:column;align-items:center;padding:5px 0;background:var(--card);border:1px solid var(--line);border-radius:9px;font-size:9.5px;color:var(--ink-3);overflow:hidden}
.cx-days b{font-size:13px;font-weight:650;color:var(--ink)}
.cx-days .on{background:var(--brand);border-color:var(--brand);color:rgba(247,240,244,.82)}
.cx-days .on b{color:var(--plum-ink)}
.cx-days .off{background:repeating-linear-gradient(135deg,#e7dbe2 0 4px,#f2eaef 4px 8px);opacity:.6}
.cx-days .off b{color:var(--ink-3)}
.cx-times{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.cx-times span{padding:6px 0;background:var(--card);border:1px solid var(--line);border-radius:8px;font-size:11px;font-weight:550;text-align:center}
.cx-times .on{border-color:var(--brand);background:#f2e6ed;color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.cx-ok{display:flex;align-items:center;gap:10px;padding:10px 11px;background:var(--card);border:1px solid rgba(8,127,91,.3);border-radius:12px}
.cx-ok>i{position:relative;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--ok)}
.cx-ok>i::after{content:"";position:absolute;left:9px;top:6px;width:6px;height:11px;border:solid #f7f0f4;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cx-ok>div{flex:1;min-width:0}
.cx-ok b{display:block;font-size:12px;font-weight:650;color:var(--ok)}
.cx-ok small{display:block;font-size:11px;color:var(--ink-2)}
.cx-ok>span{padding:5px 8px;border:1px solid #e8d4df;border-radius:7px;color:var(--brand);font-size:10.5px;font-weight:600;white-space:nowrap}

.cx-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px;border:1px solid var(--line);border-radius:12px;background:rgba(247,240,244,.62);overflow:hidden}
.cx-facts>div{display:flex;flex-direction:column;gap:8px;padding:20px;border-inline-end:1px solid var(--line)}
.cx-facts>div:last-child{border-inline-end:0}
.cx-facts small{color:var(--ink-3);font-size:9.5px;font-weight:650;letter-spacing:.12em}
.cx-facts strong{font-size:13.5px;font-weight:520;line-height:1.45}
.cx-guides{margin-top:22px;font-size:14px;color:var(--ink-3)}
.cx-guides a{color:var(--brand);font-weight:600}

/* Homepage: the order trace, a sibling of the answer trace in its hero. */
.commerce-home-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr);gap:clamp(52px,7vw,118px);align-items:center}
.commerce-home-grid h2{margin-top:var(--eyebrow-gap);font-size:var(--h2);line-height:1;letter-spacing:-.055em;font-weight:560}
.commerce-home-grid>div>p{max-width:52ch;margin-top:var(--lede-gap);color:var(--ink-2);font-size:17px}
.commerce-uses{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.commerce-uses li{display:grid;grid-template-columns:minmax(120px,.42fr) minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.commerce-uses b{color:var(--ink);font-weight:600}
.order-field .answer-source{flex-wrap:wrap}
.order-field .answer-source>b{white-space:nowrap}
.order-field .answer-handoff strong{color:#0a6e4f;background:rgba(8,127,91,.08);border-color:rgba(8,127,91,.22)}

@media(max-width:1120px){
  .cx-stage{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}
  .cx-vis{align-items:center}
  .cx-vis>*{max-width:420px;width:100%}
}
@media(max-width:880px){
  .cx-book{grid-template-columns:minmax(0,1fr)}
  .cx-slots{justify-self:stretch;max-width:440px;margin-inline:auto}
  .cx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-facts>div:nth-child(2){border-inline-end:0}
  .cx-facts>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .commerce-home-grid{grid-template-columns:minmax(0,1fr);gap:48px}
}
@media(max-width:560px){
  .cx-panel{padding:14px 14px 16px}
  .cx-book{padding:22px 18px}
  .cx-facts{grid-template-columns:minmax(0,1fr)}
  .cx-facts>div{border-inline-end:0;border-bottom:1px solid var(--line)}
  .cx-facts>div:last-child{border-bottom:0}
  .commerce-uses li{grid-template-columns:minmax(0,1fr);gap:3px}
}
@media(prefers-reduced-motion:reduce){.cx-tk.hot{animation:none}}

/* ─────────────────────────────────────────────────────────────────────────
   Horizon (2026-10-12) — the Telybot identity, from the Horizon design.

   Everything above keeps its structure; this layer is the look. Paper is
   blush, ink and primary actions are deep plum, copper marks what is alive
   (the status dot, a rule, a hover). Archivo speaks (UI, headings, small
   caps labels at wide tracking), Archivo Black shouts once per page (the
   hero headline), Lora reads (every running paragraph, italic for asides).
   Corners are square-ish, shadows are gone, edges are hairlines of plum at
   low opacity — an editorial page, not an app.
   ───────────────────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
.biz-reframe{background:var(--bg);color:var(--ink);font-family:var(--sans)}
.biz-reframe ::selection{background:var(--plum);color:var(--plum-ink)}
.biz-reframe a:focus-visible,.biz-reframe button:focus-visible{outline:2px solid var(--copper);outline-offset:4px}

/* Type. Headings in Archivo 500, tight; running text in Lora. */
.biz-reframe h1,.biz-reframe h2,.biz-reframe h3,.biz-reframe h4{font-family:var(--sans);font-weight:500;letter-spacing:-.03em}
.biz-reframe main p,.biz-reframe main li,.biz-reframe main dd{font-family:var(--serif)}
/* …but product imagery, labels and data stay in the UI face. */
.biz-reframe main :is(.answer-field,.exhibit-caption,.exhibit-foot,.wdg,.demowdg,.phone,.browser,.flowbox,.lineage,
  .tablewrap,.product-proofbar,.biz-proofbar,.biz-fine,.biz-kicker,.pricing-access,.plan-head,.plan-price,.plan-allowance,
  .contact-email,.knowledge-stack,.language-row,.language-response,.qbtn,.docmast,.docnav,.region-list,pre,code) :is(p,li,dd,span,small,strong),
.biz-reframe main :is(.biz-fine,.answer-field p,.demowdg .m){font-family:var(--sans)}
.biz-reframe main :is(h1,h2,h3,h4) em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* Header: the Horizon masthead — hairline, plum wordmark, quiet links. */
.biz-reframe .snav{min-height:84px;padding-block:14px;background:rgba(239,230,235,.88);border-bottom:1px solid rgba(57,34,50,.18);backdrop-filter:blur(14px)}
.sbrand{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:700}
.sbrand .mark{flex:0 0 auto;display:block;color:var(--ink)}
.sbrand .wordmark{font-family:var(--sans);font-size:25px;font-weight:700;letter-spacing:-.06em;line-height:1}
.sfoot .sbrand .wordmark{font-size:23px}
.snote{display:none;font-family:var(--serif);font-style:italic;font-size:12.5px;line-height:1.55;color:var(--ink-2);margin-inline-start:30px}
@media (min-width:1680px){.snote{display:block}}
.biz-reframe .slinks{font-size:13px;color:var(--ink-2);letter-spacing:.005em}
.biz-reframe .slinks a::after{background:var(--copper)}
.biz-reframe .ghost{font-size:13px;color:var(--ink);font-weight:500}
.biz-reframe .cta,.biz-reframe .btn-lg{
  display:inline-flex;align-items:center;gap:12px;background:var(--plum);border:1px solid var(--plum);color:var(--plum-ink);
  border-radius:3px;font-weight:500;letter-spacing:.01em;box-shadow:none;transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.biz-reframe .cta:hover,.biz-reframe .btn-lg:hover{background:var(--copper);border-color:var(--copper);color:#fff;transform:translateY(-2px)}
.biz-reframe .cta:active,.biz-reframe .btn-lg:active{transform:scale(.98)}
.biz-reframe .cta{padding:11px 16px;font-size:13px}
.biz-reframe .btn-lg{justify-content:space-between;gap:34px;padding:17px 20px;font-size:13.5px}
.biz-reframe .btn-quiet{border-radius:3px;border:1px solid rgba(57,34,50,.32);background:transparent;color:var(--ink);padding:17px 20px;font-size:13.5px;font-weight:500}
.biz-reframe .btn-quiet:hover{border-color:var(--ink);background:rgba(246,239,243,.6)}
.biz-reframe .navtoggle{border-radius:3px;border-color:rgba(57,34,50,.24);color:var(--ink)}
.text-link{border-bottom-color:rgba(57,34,50,.3)}
.text-link:hover{border-color:var(--copper)}

/* Eyebrows: small caps at wide tracking; the live one carries the copper dot. */
.biz-reframe .biz-kicker,.biz-reframe .biz-index{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;color:var(--ink)}
.biz-reframe .biz-kicker>span{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 4px rgba(162,104,73,.12)}
.biz-reframe .biz-index-light{color:var(--mauve)}
.annotation{margin:0;font-family:var(--serif)!important;font-style:italic;font-size:15px;color:var(--brand)}

/* The display headline — Archivo Black, the only shout on the page. */
.biz-reframe .biz-hero h1{font-family:var(--display);font-weight:400;letter-spacing:-.05em;line-height:.94;text-wrap:balance}
.biz-reframe .biz-hero h1.display,.pricing-hero h1,.contact-hero h1{text-transform:uppercase}
.biz-home-hero{position:relative;padding-top:clamp(36px,4.4vw,64px)!important}
.biz-home-hero>.wrap{position:relative}
.biz-reframe .biz-home-hero h1.display{max-width:none;margin:30px 0 0 -.04em;font-size:clamp(44px,7.4vw,124px)}
.pricing-hero h1,.contact-hero h1{font-size:clamp(44px,6.4vw,104px)!important}
.biz-legal .hero h1,.biz-legal .biz-hero h1{font-size:clamp(36px,4.6vw,64px);text-transform:none}
.headline-spark{position:absolute;inset-inline-end:var(--gutter);top:clamp(56px,6vw,110px);width:clamp(34px,5vw,74px);height:auto;color:var(--copper);transform:rotate(13deg);pointer-events:none}
[dir="rtl"] .headline-spark{transform:rotate(-13deg)}
.biz-home-hero .biz-hero-grid{margin-top:clamp(30px,3.6vw,52px);grid-template-columns:minmax(0,.9fr) minmax(400px,1.1fr);gap:clamp(40px,9vw,150px);align-items:center}
.biz-home-hero .biz-hero-copy{max-width:470px;animation:settle-in .65s ease-out both}
.hero-voice{margin:14px 0 16px;font-size:clamp(26px,2.3vw,34px)!important;line-height:1.2;letter-spacing:-.035em!important;max-width:16ch}
.biz-home-hero .biz-lede{margin-top:0;font-family:var(--serif);font-size:15.5px;line-height:1.8;color:var(--ink-3)}
.biz-home-hero .biz-actions{margin-top:26px}
@keyframes settle-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Fig. 01 — the exhibit frame around the product trace. */
.exhibit{--tilt:-2deg;margin:0;padding:14px 18px 16px;border:1px solid rgba(57,34,50,.24);background:rgba(248,243,246,.3);box-shadow:inset 0 0 0 5px rgba(248,243,246,.22);transform:rotate(var(--tilt));animation:settle-tilt .85s .12s ease-out both}
[dir="rtl"] .exhibit{--tilt:2deg}
@keyframes settle-tilt{from{opacity:0;transform:translateY(12px) rotate(var(--tilt))}to{opacity:1;transform:rotate(var(--tilt))}}
.exhibit-caption,.exhibit-foot{display:flex;justify-content:space-between;gap:14px;font-family:var(--sans);font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.exhibit-caption{padding-bottom:12px}
.exhibit-foot{margin-top:14px;padding-top:12px;border-top:1px solid rgba(57,34,50,.16)}
.exhibit .answer-field{border:1px solid rgba(57,34,50,.16);border-radius:4px;background:var(--bg);box-shadow:none}
.exhibit .answer-field::after{display:none}
.answer-question,.answer-reply,.answer-source{border-radius:4px}
.answer-avatar-keyda{background:var(--plum)!important;color:var(--plum-ink)!important}

/* Square the containers; drop the soft shadows. */
.biz-reframe :is(.sregion,.card,.cx-panel,.cx-book,.cx-facts,.channel-grid,.product-panel,.plan-grid,.product-proofbar,.flowbox,.demowdg,.browser,.lineage,.cat,.carries,.tier,.region-hint,.answer-field,.note,.phone){border-radius:4px;box-shadow:none}
.biz-reframe .product-proofbar{background:rgba(246,239,243,.5)}
.biz-reframe .biz-docs .prose pre.code,.biz-reframe pre.code{border-radius:4px;box-shadow:none}

/* Section headings: Archivo 500 at the Horizon tracking. */
.biz-section-head h2,.language-stage h2,.principles-intro h2,.biz-product h2.sec,.plan-compare-head h2,.pricing-faq h2,.contact-context h2,.biz-final h2{
  font-weight:500;letter-spacing:-.04em;line-height:1.06;
}

/* Plum bands — the Horizon "vision" section. Text in blush, asides in mauve. */
.language-stage,.principles-section,.product-demo-section,.plan-compare{background:var(--plum)}
.biz-final{background:var(--plum);color:var(--plum-ink)}
.biz-final p{color:var(--mauve-2)!important}
.biz-final .biz-kicker{color:var(--plum-ink)}
.biz-final .btn-lg{background:var(--plum-ink);border-color:var(--plum-ink);color:var(--plum)}
.biz-final .btn-lg:hover{background:var(--copper);border-color:var(--copper);color:#fff}
.principles-list article{position:relative;padding-inline-start:46px}
.principles-list{counter-reset:principle}
.principles-list article::before{counter-increment:principle;content:counter(principle,decimal-leading-zero);position:absolute;inset-inline-start:0;top:34px;font-family:var(--sans);font-size:10px;color:var(--mauve);letter-spacing:.05em}
.principles-list article::after{content:"↗";position:absolute;inset-inline-end:0;top:28px;font-size:18px;color:var(--mauve)}
.principles-list h3{padding-inline-end:30px}

/* Install: a quiet mauve band instead of a second loud colour. */
.product-install{background:var(--bg-2);color:var(--ink)}
.product-install p.seclede{color:var(--ink-2)}
.product-install .biz-index-light{color:var(--ink)}
.product-install .grid{background:rgba(57,34,50,.16);border-color:rgba(57,34,50,.16)}
.product-install .card{background:var(--card);color:var(--ink)}
.product-install .card:hover{background:var(--bg)}
.product-install .card p{color:var(--ink-3)}

/* Mock widgets wear the plum, as Telybot's own bot does; copper stays an accent. */
.wdg .hd,.wdg .m.u,.wdg .send,.demowdg .hd,.demowdg .m.u,.phone .m.u,.biz-product .wdg .hd,.biz-product .demowdg .hd{background:var(--plum)!important;color:var(--plum-ink)}
.language-row.active{background:var(--copper);border-color:var(--copper)}

/* Footer: Horizon's — on the paper, a hairline above, an italic line under the mark. */
.biz-reframe .sfoot{background:var(--bg);color:var(--ink);border-top:1px solid rgba(57,34,50,.18);padding-top:60px}
.biz-reframe .sfoot .dim,.biz-reframe .sfoot .fcols .fcol-label{color:var(--ink-3)}
.biz-reframe .sfoot .fcols a{color:var(--ink-2)}
.biz-reframe .sfoot .fcols a:hover{color:var(--ink)}
.biz-reframe .sfoot .fbase{border-color:rgba(57,34,50,.18);align-items:center}
.biz-reframe .sfoot .fcols .fcol-label{font-size:10px;font-weight:500;letter-spacing:.18em}
.biz-reframe .fcols .fbrand .sbrand{display:inline-flex;margin-bottom:14px;color:var(--ink)}
.ftagline{margin:0 0 8px!important;font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink)}
.fback{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;color:var(--ink)}
.fback:hover{color:var(--brand)}

/* Legal: the plum band, display title, mauve kicker. */
.legal-hero{background:var(--plum)}
.biz-reframe .legal-hero .biz-kicker{color:var(--mauve)}
.legal-hero h1{font-family:var(--display);font-weight:400;letter-spacing:-.045em}
.legal-hero .legal-lede{font-family:var(--serif)}

/* Hero headlines sized to their column, so a two-line headline stays two. */
.pricing-hero h1{font-size:clamp(44px,5.4vw,92px)!important}
.contact-hero h1{font-size:clamp(44px,5.6vw,96px)!important}
.biz-docs .prose .note{border-radius:4px}

/* Docs: the reading column in Lora, the chrome in Archivo. */
.biz-docs .prose h1{font-family:var(--display);font-weight:400;letter-spacing:-.045em}
.biz-docs .ditem.on{background:var(--brand-2);color:var(--ink)}
.biz-docs .ditem.on::before{background:var(--copper)}
.biz-docs .prose a{color:var(--brand);text-decoration-color:rgba(136,82,53,.4)}

/* Scripts whose letters have no capitals, or whose fonts Archivo and Lora do
   not carry, keep their system faces: no faux-uppercase, no negative tracking
   designed for Latin, and the serif asides fall back to the UI face. */
:is(:lang(ja),:lang(ko),:lang(zh),:lang(th),:lang(ar),:lang(bn)) .biz-reframe,
.biz-reframe:is(:lang(ja),:lang(ko),:lang(zh),:lang(th),:lang(ar),:lang(bn)){--serif:var(--sans)}
:is(:lang(ja),:lang(ko),:lang(zh),:lang(th),:lang(ar),:lang(bn)) .biz-hero h1{letter-spacing:0;line-height:1.12;font-weight:800}
:is(:lang(ja),:lang(ko),:lang(zh),:lang(th),:lang(ar),:lang(bn)) .biz-home-hero h1.display{font-size:clamp(38px,5.6vw,96px)}
:lang(ru) .biz-hero h1,:lang(ru) .legal-hero h1,:lang(ru) .biz-docs .prose h1{font-weight:800}
:is(:lang(ja),:lang(ko),:lang(zh),:lang(th),:lang(ar),:lang(bn)) :is(.biz-kicker,.biz-index,.exhibit-caption,.exhibit-foot){letter-spacing:.04em}

@media (max-width:960px){
  .exhibit{--tilt:0deg}
  .biz-home-hero .biz-hero-grid{grid-template-columns:minmax(0,1fr)}
  .biz-home-hero .biz-hero-copy{max-width:none}
}
@media (max-width:560px){
  .biz-reframe .biz-home-hero h1.display{font-size:clamp(38px,11.5vw,60px)}
  .pricing-hero h1,.contact-hero h1{font-size:clamp(38px,11vw,58px)!important}
  .headline-spark{display:none}
  .exhibit{padding:10px 10px 12px}
  .biz-reframe .sactions .cta{padding:9px 12px;font-size:12.5px;gap:0}
  .biz-reframe .sactions .cta svg{display:none}
  .sbrand .wordmark{font-size:21px}
  .sbrand .mark{width:22px;height:22px}
  .biz-reframe .snav .sregion span{display:none}
  .biz-reframe .snav .sregion{padding:8px}
  .biz-reframe .btn-lg{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .biz-home-hero .biz-hero-copy,.exhibit{animation:none}
}

/* ─────────────────────────────────────────────────────────────────────────
   The story sections (2026-10-12): What it is, Why, Benefits, Customer
   experience — and the figures that show them.

   Charts may use colour beyond the brand pair, because a chart needs
   categories a reader can tell apart. The extra hues sit around the plum:
   teal (answered, exact), saffron (after hours, handed over), rose (waiting,
   unanswered), sky (night). On the paper each clears 3:1 for graphics
   (WCAG 1.4.11) — saffron is the deep #b97a12 because the bright one is 2:1 —
   and the plum band uses the light tints, which clear 5:1 there.

   Every figure is HTML with its labels in HTML (SVG <text> is never
   translated), says "Example" in its caption when its numbers are, and
   carries a role="img" sentence that the Markdown twin and screen readers
   read instead of the drawing. Motion is progressive: the hidden starting
   state exists only under html.anim, which the page's script sets when it
   can animate and the reader has not asked for reduced motion.
   ───────────────────────────────────────────────────────────────────────── */
.biz-reframe{
  --viz-teal:#2c7a6e; --viz-saffron:#b97a12; --viz-rose:#b4495d; --viz-sky:#5876a8; --viz-open:#9c7590; --viz-night:#e0e1ec;
  --viz-teal-l:#7fc4b4; --viz-saffron-l:#f0c36a; --viz-rose-l:#e8909f; --viz-sky-l:#9db5dc; --copper-l:#d99a76;
}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* The figure frame every story figure shares (the hero's exhibit, untilted). */
.viz,.dash,.journey,.botmap{margin:0;padding:14px 18px 18px;border:1px solid rgba(57,34,50,.2);background:rgba(246,239,243,.55)}
.biz-reframe main :is(.viz,.dash,.journey,.botmap,.compare,.facts) :is(p,li,span,small,strong,b,em,th,td){font-family:var(--sans)}
.biz-reframe main :is(.viz-note,.facts dd){font-family:var(--serif)}
.viz-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:12px;color:var(--ink-2)}
.lg{display:inline-flex;align-items:center;gap:8px}
.lg::before{content:"";flex:0 0 10px;width:10px;height:10px;border-radius:2px;background:var(--c)}
.lg-open{--c:var(--viz-open)}.lg-closed{--c:var(--viz-saffron)}
.lg-s1{--c:var(--viz-teal)}.lg-s2{--c:var(--copper)}.lg-s3{--c:var(--plum)}.lg-s4{--c:var(--viz-saffron)}
.viz-note{margin-top:12px!important;max-width:70ch;font-size:14px;line-height:1.6;color:var(--ink-2)}
.viz-note strong{color:var(--ink);font-weight:600}

/* Hero: the answer trace plays once — question, match, source, reply, handover. */
.exhibit :is(.answer-question,.answer-path,.answer-source,.answer-reply,.answer-handoff){animation:tb-rise .5s ease-out both}
.exhibit .answer-question{animation-delay:.75s}
.exhibit .answer-path{animation-delay:1.05s}
.exhibit .answer-source{animation-delay:1.3s}
.exhibit .answer-path-brand{animation-delay:1.6s}
.exhibit .answer-reply{animation-delay:1.85s}
.exhibit .answer-handoff{animation-delay:2.35s}
@keyframes tb-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── What it is: a plum band, the robot at the centre of its inputs and outputs. */
.what-section{padding:var(--sec-y) 0;background:var(--plum);color:var(--plum-ink)}
.biz-product .what-section p.seclede{max-width:70ch;color:#d6c3cf}
.what-section .what-def strong{color:var(--plum-ink);font-weight:600}
.botmap{margin-top:var(--sec-gap);border-color:rgba(243,236,240,.18);background:rgba(243,236,240,.035)}
.botmap .exhibit-caption{color:var(--mauve)}
.botmap-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(44px,6vw,96px) auto clamp(44px,6vw,96px) minmax(0,1fr);align-items:center;padding:clamp(18px,3vw,38px) clamp(0px,1.4vw,18px)}
.botmap-col small{display:block;margin:0 0 12px;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mauve)}
.botmap-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.botmap-col ul+small{margin-top:22px}
.botmap-col li{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid rgba(243,236,240,.16);border-radius:4px;background:rgba(243,236,240,.05);font-size:14px;line-height:1.3;color:var(--plum-ink)}
.botmap-col li svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:var(--viz-saffron-l);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.botmap-out li svg{stroke:var(--viz-teal-l)}
.botmap-stream{position:relative;height:120px}
.botmap-stream::before{content:"";position:absolute;inset-inline:0;top:50%;border-top:1px dashed rgba(243,236,240,.3)}
.botmap-stream i{position:absolute;inset:0;animation:tb-stream 2.7s linear infinite;opacity:0}
.botmap-stream i::after{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--viz-saffron-l);box-shadow:0 0 0 4px rgba(240,195,106,.15)}
.botmap-stream i:nth-child(2){animation-delay:.9s}
.botmap-stream i:nth-child(2)::after{background:var(--copper-l);box-shadow:0 0 0 4px rgba(217,154,118,.15)}
.botmap-stream i:nth-child(3){animation-delay:1.8s}
.botmap-stream-out i::after{background:var(--viz-teal-l);box-shadow:0 0 0 4px rgba(127,196,180,.15)}
.botmap-stream-out i:nth-child(2)::after{background:var(--viz-sky-l);box-shadow:0 0 0 4px rgba(157,181,220,.15)}
@keyframes tb-stream{0%{transform:translateX(0);opacity:0}15%,85%{opacity:1}100%{transform:translateX(calc(100% - 7px));opacity:0}}
[dir="rtl"] .botmap-stream{transform:scaleX(-1)}
.botmap-core{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 clamp(4px,1vw,14px);text-align:center}
.bot{display:block;width:clamp(128px,13vw,180px);height:auto;overflow:visible}
.bot-head{fill:#5d3b54;stroke:var(--plum-ink);stroke-width:6}
.bot-line,.bot-smile{fill:none;stroke:var(--plum-ink);stroke-width:6;stroke-linecap:round}
.bot-smile{stroke-width:5}
.bot-eyes circle{fill:var(--plum-ink)}
.bot-light{fill:var(--copper-l)}
.bot-glow{fill:var(--copper-l);opacity:.22;transform-box:fill-box;transform-origin:center;animation:tb-glow 2.4s ease-in-out infinite}
.bot-ring{fill:none;stroke:rgba(207,175,194,.45);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:tb-ring 3.6s ease-out infinite}
.bot-ring-2{animation-delay:1.8s}
.bot-body{animation:tb-bob 5s ease-in-out infinite}
.bot-eyes{transform-box:fill-box;transform-origin:center;animation:tb-eyes 9s ease-in-out infinite}
@keyframes tb-glow{0%,100%{transform:scale(.8);opacity:.12}50%{transform:scale(1.25);opacity:.32}}
@keyframes tb-ring{0%{transform:scale(.72);opacity:0}25%{opacity:.9}100%{transform:scale(1.12);opacity:0}}
@keyframes tb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* It reads the inputs, blinks, then looks to what it sends out. */
@keyframes tb-eyes{
  0%,8%{transform:translateX(0) scaleY(1)}
  14%,33%{transform:translateX(-5px) scaleY(1)}
  35%{transform:translateX(-5px) scaleY(.1)}
  37%,40%{transform:translateX(-5px) scaleY(1)}
  47%,66%{transform:translateX(5px) scaleY(1)}
  73%,88%{transform:translateX(0) scaleY(1)}
  90%{transform:translateX(0) scaleY(.1)}
  92%,100%{transform:translateX(0) scaleY(1)}
}
[dir="rtl"] .bot-eyes{animation-direction:reverse}
.botmap-name{margin-top:6px;font-size:28px;font-weight:700;letter-spacing:-.06em;line-height:1;color:var(--plum-ink)}
.botmap-core>span{max-width:17ch;font-family:var(--serif)!important;font-style:italic;font-size:13px;line-height:1.45;color:var(--mauve-2)}
.botmap-channels{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin:0!important;padding:16px 0 0;list-style:none;border-top:1px solid rgba(243,236,240,.14)}
.botmap-channels li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid rgba(243,236,240,.18);border-radius:999px;font-size:12px;color:var(--mauve-2)}
.botmap-channels li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--viz-teal-l)}
.facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 28px;margin:var(--sec-gap) 0 0;border-top:1px solid rgba(243,236,240,.18)}
.facts>div{padding-top:20px}
.facts dt{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mauve)}
.facts dd{margin:10px 0 0;font-size:14px;line-height:1.6;color:#e4d6de}
html.anim .botmap .botmap-col li{transition:opacity .5s ease,transform .5s ease}
html.anim .botmap .botmap-in li{transition-delay:calc(var(--d,0) * 1ms)}
html.anim .botmap:not(.in) .botmap-col li{opacity:0;transform:translateY(8px)}
html.anim .botmap :is(.botmap-in,.botmap-out) li:nth-child(2){--d:80}
html.anim .botmap :is(.botmap-in,.botmap-out) li:nth-child(3){--d:160}
html.anim .botmap :is(.botmap-in,.botmap-out) li:nth-child(4){--d:240}
html.anim .botmap :is(.botmap-in,.botmap-out) li:nth-child(5){--d:320}
html.anim .botmap .botmap-out li{transition-delay:calc(var(--d,0) * 1ms + 450ms)}
html.anim .botmap .bot{transition:transform .6s cubic-bezier(.2,.9,.3,1.3),opacity .5s ease}
html.anim .botmap:not(.in) .bot{transform:scale(.8);opacity:0}

/* ── Why: questions by hour, then four ways to answer them. */
.viz-hours{margin-top:var(--sec-gap)}
.hours{--hg:clamp(2px,.45vw,6px);padding:20px 2px 0}
.hours-plot{position:relative;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:var(--hg);align-items:end;height:clamp(150px,15vw,210px);border-bottom:1px solid rgba(57,34,50,.35)}
.hours-bands{position:absolute;inset:0;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:var(--hg)}
.hours-bands i{grid-row:1;background:var(--viz-night);border-radius:3px 3px 0 0}
.hours-bands .am{grid-column:1/12}
.hours-bands .pm{grid-column:22/25}
.hb{position:relative;height:max(2px,calc(var(--v) * 100%));border-radius:2px 2px 0 0;background:var(--viz-open);transform-origin:bottom;transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 26ms)}
.hb.c{background:var(--viz-saffron)}
html.anim .viz-hours:not(.in) .hb{transform:scaleY(0)}
.hours-axis{display:flex;justify-content:space-between;margin-top:9px;font-size:11px;color:var(--ink-3)}
.hours-axis span{display:flex;justify-content:center;width:0;white-space:nowrap}
.hours-axis span:first-child{justify-content:flex-start}
.hours-axis span:last-child{justify-content:flex-end}
.lg-closed::before{box-shadow:0 0 0 3px var(--viz-night)}

.compare{margin-top:var(--sec-gap)}
.compare-title{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.03em}
.compare-wrap{margin-top:18px;overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--card);-webkit-overflow-scrolling:touch}
.compare-table{width:100%;min-width:760px;border-collapse:collapse;font-size:13.5px}
.compare-table th,.compare-table td{padding:14px 16px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.4}
.compare-table tbody tr:last-child>*{border-bottom:0}
.compare-table thead th{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:var(--bg)}
.compare-table thead th.us{background:var(--plum);color:var(--plum-ink)}
.compare-table tbody th{width:23%;font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.compare-table td{color:var(--ink-2)}
.compare-table td.us{background:var(--brand-2);color:var(--ink);font-weight:600}
.compare-table :is(td.yes,td.part,td.no){position:relative;padding-inline-start:42px}
.compare-table :is(td.yes,td.part,td.no)::before{position:absolute;inset-inline-start:16px;top:14px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:10.5px;font-weight:700;line-height:1;color:#fff}
.compare-table td.yes::before{content:"✓";content:"✓"/"";background:var(--viz-teal)}
.compare-table td.part::before{content:"–";content:"–"/"";background:var(--viz-saffron)}
.compare-table td.no::before{content:"✕";content:"✕"/"";background:var(--viz-rose)}
.compare-table tbody th,.compare-table thead th:first-child{position:sticky;inset-inline-start:0;z-index:1;background:var(--card)}
.compare-table thead th:first-child{background:var(--bg)}
.compare-note{margin-top:14px!important;max-width:72ch;font-size:14px;color:var(--ink-3)}
html.anim .compare tbody tr{transition:opacity .45s ease,transform .45s ease}
html.anim .compare:not(.in) tbody tr{opacity:0;transform:translateY(8px)}
html.anim .compare tbody tr:nth-child(2){transition-delay:.07s}
html.anim .compare tbody tr:nth-child(3){transition-delay:.14s}
html.anim .compare tbody tr:nth-child(4){transition-delay:.21s}
html.anim .compare tbody tr:nth-child(5){transition-delay:.28s}
html.anim .compare tbody tr:nth-child(6){transition-delay:.35s}

/* ── Benefits: four numbered changes beside the dashboard that shows them. */
.benefits-section{padding:var(--sec-y) 0}
.benefit-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,6vw,90px);align-items:start;margin-top:var(--sec-gap)}
.benefit-list{counter-reset:benefit;border-top:1px solid var(--line)}
.benefit-list article{position:relative;padding:22px 0;padding-inline-start:46px;border-bottom:1px solid var(--line)}
.benefit-list article::before{counter-increment:benefit;content:counter(benefit,decimal-leading-zero);position:absolute;inset-inline-start:0;top:27px;font-family:var(--sans);font-size:10px;letter-spacing:.05em;color:var(--brand)}
.benefit-list h3{font-size:19px}
.benefit-list p{margin-top:7px;max-width:54ch;font-size:14px;color:var(--ink-3)}
.benefit-grid .dash{position:sticky;top:110px}
.dash-win{overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
.dash-top{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.dash-mark{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dash-top b{font-size:13px;font-weight:600}
.dash-live{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto;padding:3px 9px;border:1px solid rgba(13,122,87,.24);border-radius:999px;background:rgba(13,122,87,.08);font-size:11px;color:var(--ok)}
.dash-live i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:tb-live 2s ease-in-out infinite}
@keyframes tb-live{50%{box-shadow:0 0 0 4px rgba(13,122,87,.14)}}
.dash-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.dash-tiles>div{padding:14px 16px;border-inline-end:1px solid var(--line)}
.dash-tiles>div:last-child{border-inline-end:0}
.dash-tiles small{display:block;min-height:2.6em;font-size:10.5px;line-height:1.3;color:var(--ink-3)}
.dash-tiles b{display:block;margin-top:6px;font-size:26px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dash-tiles>div:nth-child(2) b{color:var(--viz-rose)}
.dash-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dash-card{display:grid;align-content:start;gap:8px;padding:16px}
.dash-card+.dash-card{border-inline-start:1px solid var(--line)}
.dash-card>b{font-size:13px;font-weight:600}
.dash-card>small{margin-bottom:2px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tbar,.fbar{position:relative;isolation:isolate;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;font-size:12px;line-height:1.3}
.tbar::before,.fbar::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;z-index:-1;width:calc(var(--v) * 100%);border-inline-start:3px solid var(--viz-teal);border-radius:2px;background:#d3e9e3;transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1) calc(.25s + var(--i) * 90ms)}
.fbar::before{border-color:var(--copper);background:#efdcd2}
[dir="rtl"] :is(.tbar,.fbar)::before{transform-origin:right}
/* Time runs left to right in every language (the charts keep dir="ltr"), but
   each label takes its own direction from its first letter, so an Arabic
   label inside a left-to-right timeline still reads right to left. */
:is(.hours,.stack,.trend,.journey-chart) :is(span,small,b,em,li,p){unicode-bidi:plaintext}
.tbar em,.fbar em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
.dash-foot{display:flex;align-items:center;gap:7px;margin-top:4px!important;font-size:12px;color:var(--brand)}
.dash-foot i{width:6px;height:6px;border-radius:50%;background:var(--copper)}
html.anim .dash:not(.in) :is(.tbar,.fbar)::before{transform:scaleX(0)}

.viz-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(28px,3vw,44px)}
.stack{padding-top:8px}
.stack-plot{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1.6vw,18px);align-items:end;height:200px;padding-top:22px;border-bottom:1px solid rgba(57,34,50,.35)}
.stack-col{position:relative;display:flex;flex-direction:column-reverse;gap:2px;height:calc(var(--t) * 100%);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 70ms)}
.stack-col>span{flex:var(--n) 1 0%;min-height:2px}
.stack-col .s1{background:var(--viz-teal)}
.stack-col .s2{background:var(--copper)}
.stack-col .s3{background:var(--plum)}
.stack-col .s4{background:var(--viz-saffron);border-radius:2px 2px 0 0}
.stack-col b{position:absolute;bottom:100%;left:0;right:0;padding-bottom:4px;text-align:center;font-size:11px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.stack-axis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1.6vw,18px);margin-top:9px;text-align:center;font-size:11px;color:var(--ink-3)}
html.anim .viz-week:not(.in) .stack-col{transform:scaleY(0)}
.trend{padding-top:14px}
.trend-plot{position:relative;height:200px;margin:0 16px}
.trend-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:clip-path 1.4s ease .15s}
.trend-grid{fill:none;stroke:rgba(57,34,50,.12);stroke-width:1;vector-effect:non-scaling-stroke}
.trend-area{fill:rgba(180,73,93,.1)}
.trend-line{fill:none;stroke:var(--viz-rose);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tp{position:absolute;left:var(--x);top:var(--y);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border:2.5px solid var(--viz-rose);border-radius:50%;background:var(--card);transition:transform .4s ease calc(.2s + var(--i) * .2s),opacity .4s ease calc(.2s + var(--i) * .2s)}
.tp b{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:600;color:var(--ink)}
html.anim .viz-trend:not(.in) .trend-plot svg{clip-path:inset(0 100% 0 0)}
html.anim .viz-trend:not(.in) .tp{transform:scale(0);opacity:0}
.trend-axis{display:flex;justify-content:space-between;margin:9px 16px 0;font-size:11px;color:var(--ink-3)}
.trend-axis span{display:flex;justify-content:center;width:0}
.trend-title{margin-top:6px!important;text-align:center;font-size:11px;color:var(--ink-3)}

/* ── Customer experience: one question, two timelines, six promises. */
.cx-section{padding:var(--sec-y) 0;background:var(--bg-2)}
.cx-section .viz,.cx-section .journey{background:rgba(246,239,243,.6)}
.journey{margin-top:var(--sec-gap)}
.journey-chart{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:18px 20px;padding:10px 4px 2px}
.journey-axis{grid-column:2;position:relative;height:20px;border-bottom:1px solid rgba(57,34,50,.2);font-size:11px;color:var(--ink-3)}
.journey-axis span{position:absolute;left:calc(var(--x) * 100%);transform:translateX(-50%);white-space:nowrap}
.journey-axis span:first-child{transform:none}
.journey-axis span:last-child{transform:translateX(-100%)}
.journey-lane{display:contents}
.lane-name{align-self:start;padding-top:6px;font-size:13px;font-weight:600}
.lane-track{position:relative;min-height:34px}
.lane-dot{position:absolute;left:0;top:17px;z-index:2;width:12px;height:12px;margin:-6px 0 0 -3px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px rgba(57,34,50,.1)}
.lane-wait{position:relative;display:flex;align-items:center;height:34px;margin-inline-start:6px;padding:0 14px;overflow:hidden;border-radius:3px;background:repeating-linear-gradient(-45deg,#b4495d 0 7px,#a53f53 7px 14px);transform-origin:left;transition:transform 2.2s cubic-bezier(.3,.1,.3,1) .2s}
.lane-wait span{color:#fff;font-size:12px;font-weight:600;white-space:nowrap;transition:opacity .4s ease 2.2s}
.lane-end{display:block;margin-top:6px;text-align:right;font-size:11.5px;font-weight:600;color:var(--viz-rose)}
.lane-fast{position:absolute;left:3px;top:4px;width:12px;height:26px;border-radius:3px;background:var(--viz-teal)}
.lane-events{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:0;padding:0;padding-left:26px;list-style:none}
.lane-events li{position:relative;display:inline-flex;align-items:center;min-height:34px;padding:6px 12px;border:1px solid #9fcdc2;border-radius:3px;background:#dbefea;font-size:12px;font-weight:600;line-height:1.3;color:#1f5e54;transition:opacity .4s ease,transform .4s ease}
.lane-events li+li::before{content:"→";position:absolute;right:100%;margin-right:6px;font-weight:400;color:var(--viz-teal)}
.lane-events li:nth-child(2){transition-delay:.35s}
.lane-events li:nth-child(3){transition-delay:.7s}
html.anim .journey:not(.in) .lane-wait{transform:scaleX(0)}
html.anim .journey:not(.in) .lane-wait span{opacity:0}
html.anim .journey:not(.in) .lane-events li{opacity:0;transform:translateX(-8px)}
.cx-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,3vw,44px);border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}
.cx-pillars article{padding:26px;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card);transition:background .2s ease}
.cx-pillars article:hover{background:var(--bg)}
.cx-pillars svg{display:block;width:26px;height:26px;margin-bottom:16px;fill:none;stroke:var(--c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cx-pillars article:nth-child(1){--c:var(--viz-teal)}
.cx-pillars article:nth-child(2){--c:var(--viz-saffron)}
.cx-pillars article:nth-child(3){--c:var(--copper)}
.cx-pillars article:nth-child(4){--c:var(--viz-rose)}
.cx-pillars article:nth-child(5){--c:var(--viz-sky)}
.cx-pillars article:nth-child(6){--c:var(--plum)}
.cx-pillars h3{font-size:19px}
.cx-pillars p{margin-top:8px;font-size:14px;color:var(--ink-3)}

/* ── Language: the thirty, each in its own script, drifting past. */
.lang-ribbon{margin-top:clamp(44px,5vw,68px);padding-top:22px;border-top:1px solid rgba(243,236,240,.14)}
.language-stage .lang-ribbon .lang-ribbon-label{max-width:none;margin:0;font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mauve)}
.lang-track{display:flex;margin-top:16px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.lang-track ul{display:flex;flex:0 0 auto;gap:10px;margin:0;padding:0 10px 0 0;list-style:none;animation:tb-marquee 70s linear infinite}
.lang-track:hover ul{animation-play-state:paused}
.language-stage .lang-track li{flex:0 0 auto;padding:8px 15px;border:1px solid rgba(243,236,240,.2);border-radius:999px;font-family:var(--sans);font-size:14px;line-height:1.3;color:var(--plum-ink);white-space:nowrap}
.language-stage .lang-track li:nth-child(4n+1){border-color:rgba(127,196,180,.5)}
.language-stage .lang-track li:nth-child(4n+2){border-color:rgba(240,195,106,.5)}
.language-stage .lang-track li:nth-child(4n+3){border-color:rgba(157,181,220,.5)}
@keyframes tb-marquee{to{transform:translateX(-100%)}}

/* Scripts with no capitals: no wide caps tracking on the new labels either. */
:is(:lang(ja),:lang(ko),:lang(zh),:lang(th),:lang(ar),:lang(bn)) :is(.botmap-col small,.facts dt,.dash-card>small,.compare-table thead th,.lang-ribbon-label,.growth-unit,.growth-steps b){letter-spacing:.04em}

@media (max-width:1180px){
  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .benefit-grid .dash{position:static}
  .benefit-grid{grid-template-columns:minmax(0,1fr)}
  .dash{max-width:760px}
}
@media (max-width:900px){
  .viz-row{grid-template-columns:minmax(0,1fr)}
  .botmap-grid{grid-template-columns:minmax(0,1fr);justify-items:stretch}
  .botmap-core{padding:4px 0}
  .botmap-stream{height:52px;width:100%}
  .botmap-stream::before{inset-inline:auto;left:50%;top:0;bottom:0;border-top:0;border-left:1px dashed rgba(243,236,240,.3)}
  .botmap-stream i::after{left:50%;top:0;margin:0 0 0 -3.5px}
  @keyframes tb-stream{0%{transform:translateY(0);opacity:0}15%,85%{opacity:1}100%{transform:translateY(calc(100% - 7px));opacity:0}}
  [dir="rtl"] .botmap-stream{transform:none}
  .cx-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .viz,.dash,.journey,.botmap{padding:12px 12px 14px}
  .dash-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-tiles>div:nth-child(2){border-inline-end:0}
  .dash-tiles>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .dash-cols{grid-template-columns:minmax(0,1fr)}
  .dash-card+.dash-card{border-inline-start:0;border-top:1px solid var(--line)}
  .journey-chart{grid-template-columns:minmax(0,1fr);gap:10px}
  .journey-axis{grid-column:1;margin-top:4px}
  .lane-name{padding-top:10px}
  .journey-axis span:nth-child(2){display:none}
  .compare-table{min-width:640px}
  .compare-table tbody th{width:auto;min-width:118px}
  .lane-wait span{font-size:11px}
  .lane-events{gap:8px 20px}
  .cx-pillars{grid-template-columns:minmax(0,1fr)}
  .stack-plot,.trend-plot{height:170px}
  .hours-axis{font-size:10px}
  .compare-table{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .exhibit :is(.answer-question,.answer-path,.answer-source,.answer-reply,.answer-handoff){animation:none}
  .bot-body,.bot-eyes,.bot-glow,.dash-live i{animation:none}
  .bot-ring,.botmap-stream i{display:none}
  .lang-track{-webkit-mask-image:none;mask-image:none}
  .lang-track ul{flex:1 1 auto;flex-wrap:wrap;animation:none;padding:0}
  .lang-track ul[aria-hidden="true"]{display:none}
}

/* ─────────────────────────────────────────────────────────────────────────
   The header with six destinations (2026-10-12): How it works, Features,
   Trust, Research, Pricing, Docs — plus Talk to us and Start free. One row
   from 1200px when it fits; otherwise the menu button. "Fits" is decided by
   the nav script (it adds .compact when the row overflows), because a
   translated header can need far more room than the English one; the width
   breakpoint is only the floor for browsers without JavaScript.
   ───────────────────────────────────────────────────────────────────────── */
.biz-reframe .snav{flex-wrap:nowrap}
.biz-reframe .slinks{gap:clamp(16px,1.6vw,26px);margin-inline-start:clamp(14px,2vw,30px);white-space:nowrap}
.biz-reframe .slinks a[aria-current="page"]{color:var(--ink)}
.biz-reframe .slinks a[aria-current="page"]::after{inset-inline-end:0;background:var(--copper)}
.biz-reframe .sactions{gap:10px}
.biz-reframe .talk{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(57,34,50,.3);border-radius:3px;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;transition:border-color .2s ease,background .2s ease}
.biz-reframe .talk:hover{border-color:var(--ink);background:rgba(246,239,243,.7)}
.biz-reframe .talk svg{color:var(--copper)}
@media (max-width:1439px){
  .biz-reframe .snav .sregion span{display:none}
  .biz-reframe .snav .sregion{padding:8px}
}
/* The menu-button layout, twice: by width, and by the nav's own measurement. */
@media (max-width:1199px){
  .biz-reframe .snav{flex-wrap:wrap}
  .biz-reframe .sactions{order:1;margin-inline-start:auto}
  .biz-reframe .navtoggle{display:grid;order:2;margin-inline-start:0;flex:0 0 auto}
  .biz-reframe .slinks{display:none;order:3;flex-basis:100%;flex-direction:column;gap:0;margin:4px 0 0;padding-top:6px;border-top:1px solid var(--line);font-size:15.5px;white-space:normal}
  .biz-reframe .snav.open .slinks{display:flex}
  .biz-reframe .slinks a{padding:11px 0}
  .biz-reframe .slinks a::after{display:none}
  .biz-reframe .slinks .mobile-only{display:block}
  .biz-reframe .sactions :is(.talk,.ghost){display:none}
}
.biz-reframe .snav.compact{flex-wrap:wrap}
.biz-reframe .snav.compact .sactions{order:1;margin-inline-start:auto}
.biz-reframe .snav.compact .navtoggle{display:grid;order:2;margin-inline-start:0;flex:0 0 auto}
.biz-reframe .snav.compact .slinks{display:none;order:3;flex-basis:100%;flex-direction:column;gap:0;margin:4px 0 0;padding-top:6px;border-top:1px solid var(--line);font-size:15.5px;white-space:normal}
.biz-reframe .snav.compact.open .slinks{display:flex}
.biz-reframe .snav.compact .slinks a{padding:11px 0}
.biz-reframe .snav.compact .slinks a::after{display:none}
.biz-reframe .snav.compact .slinks .mobile-only{display:block}
.biz-reframe .snav.compact .sactions :is(.talk,.ghost){display:none}
.biz-reframe .snav.compact .sregion span{display:none}
.biz-reframe .slinks .talk-link{margin-top:8px;padding:12px 14px!important;border:1px solid rgba(57,34,50,.3);border-radius:3px;color:var(--ink);font-weight:500}
.biz-reframe .slinks a[aria-current="page"]:is(.mobile-only){border-color:var(--copper)}
.biz-reframe .snav.tight .snote{display:none}
.biz-reframe .snav.tight .sregion span{display:none}
.biz-reframe .snav.tight .sregion{padding:8px}

/* ─────────────────────────────────────────────────────────────────────────
   The pages (2026-10-12): How it works, Features, Trust, Research, plus the
   figures on Pricing and the demo request on Contact. Same rules as the story
   sections above: labels in HTML, hidden start states only under html.anim,
   chart colours only inside figures. A .factfig is a figure of FACTS (from
   the DPA, the pricing rules, a cited study) and names its source in the
   caption instead of saying "Example".
   ───────────────────────────────────────────────────────────────────────── */
.factfig{margin:0;padding:14px 18px 18px;border:1px solid rgba(57,34,50,.2);background:rgba(246,239,243,.55)}
.biz-reframe main :is(.factfig,.steps-path,.demo-steps,.feature-index,.trust-badges,.explore-art,.paper-stack,.store-table,.mix-demo,.ground-demo) :is(p,li,span,small,strong,b,em,th,td){font-family:var(--sans)}
.biz-reframe main .factfig .viz-note{font-family:var(--serif)}
.page-hero{padding-top:clamp(40px,5vw,72px)!important}
.page-hero .page-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:clamp(40px,7vw,110px);align-items:center}
.biz-reframe .page-hero h1.display{max-width:13ch;margin-top:var(--eyebrow-gap);font-size:clamp(40px,5vw,82px);line-height:.95;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.biz-reframe .page-hero .biz-lede{max-width:56ch;font-family:var(--serif);font-size:16px;line-height:1.75;color:var(--ink-3)}
.biz-reframe .page-hero .biz-actions{margin-top:26px}
:is(:lang(ja),:lang(ko),:lang(zh),:lang(th),:lang(ar),:lang(bn)) .page-hero h1.display{font-size:clamp(34px,4.2vw,66px)}

/* Step paths: How it works (links to each step) and Contact (the demo). */
:is(.steps-path,.demo-steps){position:relative;list-style:none;margin:0;padding:0;display:grid;gap:4px}
:is(.steps-path,.demo-steps)::before{content:"";position:absolute;inset-inline-start:21px;top:26px;bottom:26px;width:2px;background:linear-gradient(var(--copper),var(--viz-saffron),var(--viz-teal));transform-origin:top;transition:transform 1.2s ease}
:is(.steps-path a,.demo-steps li){position:relative;display:flex;align-items:flex-start;gap:16px;padding:12px 12px 12px 0;color:var(--ink)}
.steps-path a{border-radius:4px;transition:background .2s ease}
.steps-path a:hover{background:rgba(246,239,243,.7)}
.steps-path a:hover strong{color:var(--brand)}
:is(.steps-path,.demo-steps) b{position:relative;z-index:1;flex:0 0 44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--c,var(--copper));border-radius:50%;background:var(--card);font-size:14px;font-weight:600;color:var(--ink);animation:tb-step 4s ease-in-out infinite}
:is(.steps-path,.demo-steps) li:nth-child(1){--c:var(--copper)}
:is(.steps-path,.demo-steps) li:nth-child(2){--c:var(--plum);--sd:1s}
:is(.steps-path,.demo-steps) li:nth-child(3){--c:var(--viz-saffron);--sd:2s}
:is(.steps-path,.demo-steps) li:nth-child(4){--c:var(--viz-teal);--sd:3s}
:is(.steps-path,.demo-steps) li b{animation-delay:var(--sd,0s)}
@keyframes tb-step{0%,20%,100%{box-shadow:0 0 0 0 rgba(162,104,73,0)}8%{box-shadow:0 0 0 7px rgba(162,104,73,.16)}}
:is(.steps-path,.demo-steps) strong{display:block;font-size:17px;font-weight:600;line-height:1.3}
:is(.steps-path,.demo-steps) small{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--ink-3)}
:is(.steps-path,.demo-steps) li{transition:opacity .5s ease,transform .5s ease}
:is(.steps-path,.demo-steps) li:nth-child(2){transition-delay:.12s}
:is(.steps-path,.demo-steps) li:nth-child(3){transition-delay:.24s}
:is(.steps-path,.demo-steps) li:nth-child(4){transition-delay:.36s}
html.anim :is(.steps-path,.demo-steps):not(.in)::before{transform:scaleY(0)}
html.anim :is(.steps-path,.demo-steps):not(.in) li{opacity:0;transform:translateX(-10px)}

/* Home: why in one table, then the way to everything else. */
.why-home{padding:var(--sec-y) 0}
.why-more{margin-top:20px!important}
.explore-section{padding:var(--sec-y) 0;background:var(--bg-2)}
.explore-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:var(--sec-gap);border:1px solid var(--line);background:var(--line)}
.explore-card{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;background:var(--card);color:var(--ink);transition:background .2s ease,opacity .5s ease,transform .5s ease}
.explore-card:hover{background:var(--bg)}
.explore-card h3{font-size:21px}
.explore-card p{flex:1;font-size:14px;color:var(--ink-3)}
.explore-go{font-size:13px;font-weight:600;color:var(--brand)}
.explore-go span{display:inline-block;transition:transform .2s ease}
.explore-card:hover .explore-go span{transform:translateX(4px)}
[dir="rtl"] .explore-card:hover .explore-go span{transform:translateX(-4px) scaleX(-1)}
.explore-card:nth-child(2){transition-delay:0s,.08s,.08s}
.explore-card:nth-child(3){transition-delay:0s,.16s,.16s}
.explore-card:nth-child(4){transition-delay:0s,.24s,.24s}
html.anim .explore-grid:not(.in) .explore-card{opacity:0;transform:translateY(10px)}
.explore-art{position:relative;display:block;height:88px;margin-bottom:6px;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
/* How: three dots flow into the bot. */
.art-how b{position:absolute;inset-inline-end:18px;top:24px;width:40px;height:40px;border:2px solid var(--plum);border-radius:10px}
.art-how b::before,.art-how b::after{content:"";position:absolute;top:13px;width:6px;height:6px;border-radius:50%;background:var(--plum)}
.art-how b::before{left:9px}.art-how b::after{right:9px}
.art-how i{position:absolute;left:14px;top:41px;width:8px;height:8px;border-radius:50%;background:var(--viz-saffron);animation:tb-dot 2.4s linear infinite}
.art-how i:nth-child(2){animation-delay:.8s;background:var(--copper)}
.art-how i:nth-child(3){animation-delay:1.6s;background:var(--viz-teal)}
@keyframes tb-dot{0%{transform:translateX(0);opacity:0}15%,80%{opacity:1}100%{transform:translateX(150px);opacity:0}}
/* Features: an order card, a booking and a lead slide in; a badge pops. */
.art-features i{position:absolute;left:16px;width:58%;height:16px;border-radius:3px;background:var(--card);border:1px solid var(--line);animation:tb-slide 4.5s ease-in-out infinite}
.art-features i::before{content:"";position:absolute;left:6px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--c)}
.art-features i:nth-child(1){top:14px;--c:var(--copper)}
.art-features i:nth-child(2){top:36px;--c:var(--viz-teal);animation-delay:.3s}
.art-features i:nth-child(3){top:58px;--c:var(--viz-saffron);animation-delay:.6s}
.art-features b{position:absolute;inset-inline-end:18px;top:26px;width:34px;height:34px;border-radius:50%;background:var(--plum);animation:tb-pop 4.5s ease-in-out infinite}
.art-features b::after{content:"";position:absolute;inset:11px 10px;border:solid var(--plum-ink);border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-2px)}
@keyframes tb-slide{0%,8%{transform:translateX(-120%)}22%,85%{transform:none}100%{transform:translateX(-120%)}}
@keyframes tb-pop{0%,25%{transform:scale(0)}35%{transform:scale(1.15)}42%,85%{transform:scale(1)}100%{transform:scale(0)}}
/* Trust: the shield draws itself. */
.art-trust{display:grid;place-items:center}
.art-trust svg{width:46px;height:46px;fill:none;stroke:var(--viz-teal);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.art-trust path{stroke-dasharray:80;animation:tb-draw 3.6s ease-in-out infinite}
.art-trust path+path{stroke:var(--plum);stroke-width:2;animation-delay:.6s}
@keyframes tb-draw{0%{stroke-dashoffset:80}40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}
/* Research: a little bar chart that keeps re-measuring. */
.art-research{display:flex;align-items:flex-end;justify-content:center;gap:9px;padding-bottom:16px}
.art-research i{width:14px;height:44px;border-radius:2px 2px 0 0;background:var(--c);transform-origin:bottom;animation:tb-eq 2.8s ease-in-out infinite}
.art-research i:nth-child(1){--c:var(--viz-saffron)}
.art-research i:nth-child(2){--c:var(--viz-sky);animation-delay:.3s}
.art-research i:nth-child(3){--c:var(--copper);animation-delay:.6s}
.art-research i:nth-child(4){--c:var(--viz-teal);animation-delay:.9s}
@keyframes tb-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.talk-band{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-top:22px;padding:20px 24px;border:1px solid var(--line);border-inline-start:3px solid var(--copper);border-radius:4px;background:var(--card)}
.talk-band strong{display:block;font-size:17px;font-weight:600}
.talk-band span{display:block;margin-top:3px;font-family:var(--serif);font-size:14px;color:var(--ink-3)}
.biz-final .final-talk{margin-top:14px!important;font-size:13.5px}
.biz-final .final-talk a{color:var(--plum-ink);border-bottom:1px solid rgba(243,236,240,.4);padding-bottom:1px}
.biz-final .final-talk a:hover{border-color:var(--plum-ink)}

/* Features: the index of what is on the page. */
.feature-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.feature-index a{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:4px;background:var(--card);font-size:14px;font-weight:550;line-height:1.3;color:var(--ink);transition:transform .2s ease,border-color .2s ease,opacity .5s ease}
.feature-index a:hover{border-color:var(--copper);transform:translateY(-2px)}
.feature-index svg{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:var(--c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.feature-index a:nth-child(1){--c:var(--viz-sky)}
.feature-index a:nth-child(2){--c:var(--viz-teal)}
.feature-index a:nth-child(3){--c:var(--copper)}
.feature-index a:nth-child(4){--c:var(--viz-saffron)}
.feature-index a:nth-child(5){--c:var(--viz-rose)}
.feature-index a:nth-child(6){--c:var(--plum)}
html.anim .feature-index:not(.in) a{opacity:0;transform:translateY(8px)}
.biz-page-features .product-problem{background:var(--bg-2)}
.biz-page-how .product-training{background:var(--bg-2)}

/* How it works, step 4: the loop beside the falling line. */
.learning-section{padding:var(--sec-y) 0}
.learning-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,70px);align-items:center;margin-top:var(--sec-gap)}
.learning-grid .viz{margin:0}
.loop-steps{list-style:none;margin:0;padding:0;counter-reset:loop;border-top:1px solid var(--line)}
.loop-steps li{position:relative;padding:18px 0;padding-inline-start:52px;border-bottom:1px solid var(--line)}
.loop-steps li::before{counter-increment:loop;content:counter(loop);position:absolute;inset-inline-start:0;top:18px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--c);color:#fff;font-family:var(--sans);font-size:13px;font-weight:700}
.loop-steps li:nth-child(1){--c:var(--viz-rose)}
.loop-steps li:nth-child(2){--c:var(--viz-saffron)}
.loop-steps li:nth-child(3){--c:var(--viz-teal)}
.loop-steps strong{display:block;font-family:var(--sans);font-size:16px;font-weight:600}
.loop-steps span{display:block;margin-top:4px;font-size:14px;color:var(--ink-3)}
.learning-more{margin-top:22px!important}

/* Trust. */
.trust-badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.trust-badges li{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:4px;background:var(--card);transition:opacity .5s ease,transform .5s ease}
.trust-badges li:nth-child(2){transition-delay:.1s}.trust-badges li:nth-child(3){transition-delay:.2s}.trust-badges li:nth-child(4){transition-delay:.3s}
html.anim .trust-badges:not(.in) li{opacity:0;transform:scale(.96)}
.trust-badges svg{flex:0 0 26px;width:26px;height:26px;fill:none;stroke:var(--c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.trust-badges li:nth-child(1){--c:var(--viz-teal)}.trust-badges li:nth-child(2){--c:var(--copper)}.trust-badges li:nth-child(3){--c:var(--viz-rose)}.trust-badges li:nth-child(4){--c:var(--viz-sky)}
.trust-badges strong{display:block;font-size:15px;font-weight:600}
.trust-badges small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
:is(.trust-everyone-section,.trust-growth-section,.trust-flow-section,.trust-store-section,.trust-never-section,.trust-protect-section){padding:var(--sec-y) 0}
:is(.trust-growth-section,.trust-store-section,.trust-protect-section){background:var(--bg-2)}
.flowmap{margin-top:var(--sec-gap)}
.flowmap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;padding:18px 2px 4px}
.fm-node{position:relative;padding:18px 16px;border:1px solid var(--line);border-top:3px solid var(--c);border-radius:4px;background:var(--card);transition:opacity .5s ease,transform .5s ease}
.fm-customer{--c:var(--viz-sky)}.fm-telybot{--c:var(--plum)}.fm-ai{--c:var(--copper)}.fm-back{--c:var(--viz-teal)}
.fm-telybot{transition-delay:.25s}.fm-ai{transition-delay:.5s}.fm-back{transition-delay:.75s}
.fm-node small{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff;font-size:11px;font-weight:700}
.fm-node strong{display:block;margin-top:10px;font-size:14.5px;font-weight:600;line-height:1.3}
.fm-node span{display:block;margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.fm-node:not(:last-child)::after{content:"";position:absolute;top:28px;inset-inline-end:-27px;width:24px;height:2px;background:linear-gradient(90deg,var(--line),var(--copper));animation:tb-flow 1.6s linear infinite}
[dir="rtl"] .fm-node:not(:last-child)::after{transform:scaleX(-1)}
@keyframes tb-flow{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}
html.anim .flowmap:not(.in) .fm-node{opacity:0;transform:translateY(10px)}
.flowmap-side{margin:18px 2px 0!important;padding:12px 14px;border-inline-start:3px solid var(--viz-saffron);background:rgba(185,122,18,.07);font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.store-wrap{margin-top:var(--sec-gap)}
.store-table{width:100%;min-width:820px;border-collapse:collapse;font-size:13.5px}
.store-table th,.store-table td{padding:14px 16px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.45}
.store-table thead th{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:var(--bg)}
.store-table tbody th{width:19%;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);position:sticky;inset-inline-start:0;background:var(--card)}
.store-table td{color:var(--ink-2)}
.store-table td:last-child{color:var(--ink);font-weight:550}
.store-table tbody tr:last-child>*{border-bottom:0}
.store-note{margin-top:14px!important;max-width:72ch;font-size:14px;color:var(--ink-3)}
.store-sub{margin-top:clamp(40px,5vw,64px);font-size:clamp(20px,2vw,24px);font-weight:500}
.store-sub+.retention{margin-top:16px}
.never-list{list-style:none;margin:var(--sec-gap) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 34px}
.never-list li{position:relative;padding:14px 0;padding-inline-start:40px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--ink-2);transition:opacity .45s ease,transform .45s ease}
.never-list li::before{content:"✕";content:"✕"/"";position:absolute;inset-inline-start:0;top:14px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--viz-rose);color:#fff;font-family:var(--sans);font-size:11px;font-weight:700}
.never-list strong{color:var(--ink)}
html.anim .never-list:not(.in) li{opacity:0;transform:translateY(6px)}
.retention{margin-top:var(--sec-gap)}
.ret-chart{display:grid;grid-template-columns:minmax(140px,230px) minmax(0,1fr);column-gap:22px;padding:12px 4px 4px}
.ret-axis{grid-column:2;position:relative;height:22px;border-bottom:1px solid rgba(57,34,50,.25);font-size:11px;color:var(--ink-3)}
.ret-axis span{position:absolute;left:calc(var(--x) * 100%);transform:translateX(-50%)}
.ret-axis span:first-child{transform:none}
.ret-axis span:last-child{transform:translateX(-100%)}
.ret-row{display:contents}
.ret-row>b{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;line-height:1.35}
.ret-track{position:relative;min-height:62px;border-bottom:1px solid var(--line)}
.ret-bar{position:absolute;top:12px;left:0;height:16px;width:calc(var(--w) * 100%);border-radius:2px;background:var(--viz-teal);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.ret-2{background:var(--viz-rose);transition-delay:.15s}
.ret-3{background:var(--viz-sky);transition-delay:.3s}
.ret-4{background:linear-gradient(90deg,var(--plum) 70%,rgba(73,44,65,.15));transition-delay:.45s}
.ret-ext{position:absolute;top:12px;height:16px;left:calc(var(--l) * 100%);width:calc(var(--w) * 100%);border:1.5px dashed var(--viz-teal);border-inline-start:0;border-radius:0 2px 2px 0;transition:opacity .5s ease 1s}
.ret-track em{position:absolute;left:0;top:34px;font-size:12px;font-style:normal;color:var(--ink-2);white-space:nowrap;unicode-bidi:plaintext}
html.anim .retention:not(.in) .ret-bar{transform:scaleX(0)}
html.anim .retention:not(.in) .ret-ext{opacity:0}
.shared-grid,.protect-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:var(--sec-gap);border:1px solid var(--line);background:var(--line)}
.shared-grid article,.protect-grid article{padding:22px;background:var(--card);transition:opacity .45s ease,transform .45s ease}
.shared-grid h3,.protect-grid h3{font-size:17px}
.shared-grid p,.protect-grid p{margin-top:8px;font-size:14px;color:var(--ink-3)}
.shared-grid article{border-top:3px solid transparent}
.shared-grid article:nth-child(1){border-top-color:var(--copper)}.shared-grid article:nth-child(2){border-top-color:var(--plum)}.shared-grid article:nth-child(3){border-top-color:var(--viz-teal)}
.shared-grid article:nth-child(4){border-top-color:var(--viz-saffron)}.shared-grid article:nth-child(5){border-top-color:var(--viz-rose)}.shared-grid article:nth-child(6){border-top-color:var(--viz-sky)}
html.anim :is(.shared-grid,.protect-grid):not(.in) article{opacity:0;transform:translateY(8px)}
.protect-grid article:nth-child(2),.protect-grid article:nth-child(5){transition-delay:.1s}.protect-grid article:nth-child(3),.protect-grid article:nth-child(6){transition-delay:.2s}
.shared-more{margin-top:16px!important}
/* Trust, for everyone: the three people Telybot touches, each with what
   they can count on. Every line restates the Privacy Policy or the DPA. */
.everyone-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:var(--sec-gap)}
.who{display:flex;flex-direction:column;padding:26px 24px 24px;border:1px solid var(--line);border-top:3px solid var(--c);border-radius:4px;background:var(--card);transition:opacity .5s ease,transform .5s ease}
.who-owner{--c:var(--plum);--t:rgba(73,44,65,.1)}
.who-customer{--c:var(--viz-teal);--t:rgba(44,122,110,.12);transition-delay:.12s}
.who-visitor{--c:var(--copper);--t:rgba(162,104,73,.14);transition-delay:.24s}
html.anim .everyone-grid:not(.in) .who{opacity:0;transform:translateY(10px)}
.who>svg{width:40px;height:40px;padding:8px;border-radius:50%;background:var(--t);fill:none;stroke:var(--c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.who h3{margin-top:16px;font-size:19px;line-height:1.25}
.who-lede{margin-top:6px!important;font-family:var(--serif);font-style:italic;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.who-list{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:11px}
.biz-reframe main .who-list li{position:relative;padding-inline-start:28px;font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--ink-2)}
.who-list li::before{content:"✓";content:"✓"/"";position:absolute;inset-inline-start:0;top:2px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--t);color:var(--c);font-family:var(--sans);font-size:11px;font-weight:700}
/* Value you can see: two example curves that start at the origin, drawn
   like Fig. 06 — an SVG for the line, HTML for every label so each market
   reads them in its own language. Points: x = step ÷ last step × 100,
   y = 48 − value ÷ top of scale × 44, in a 100×50 box; a dot's --y is
   that y ÷ 50. */
.growth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:var(--sec-gap)}
.viz-growth{display:flex;flex-direction:column}
/* The whole chart is left to right in every language, so the scale sits
   beside the origin; each label still reads in its own direction. */
.growth{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"u u" "y p" ". x" ". t";column-gap:10px;padding-top:6px;direction:ltr}
.growth-unit{grid-area:u;margin-bottom:14px!important;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.growth-y{grid-area:y;position:relative;min-width:30px;height:210px;font-size:11px;color:var(--ink-3)}
.growth-y span{position:absolute;inset-inline-end:0;transform:translateY(-50%)}
.growth-y span:nth-child(1){top:8%}.growth-y span:nth-child(2){top:30%}.growth-y span:nth-child(3){top:52%}.growth-y span:nth-child(4){top:74%}.growth-y span:nth-child(5){top:96%}
.growth-plot{grid-area:p;position:relative;height:210px;margin-inline-end:10px}
.growth-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:clip-path 1.6s cubic-bezier(.3,.7,.2,1) .15s}
.growth-grid-lines{fill:none;stroke:rgba(57,34,50,.12);stroke-width:1;vector-effect:non-scaling-stroke}
.growth-area{fill:rgba(44,122,110,.16)}
.growth-line{fill:none;stroke:var(--viz-teal);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gp{--gc:var(--viz-teal);position:absolute;left:var(--x);top:var(--y);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border:2.5px solid var(--gc);border-radius:50%;background:var(--card);transition:transform .4s ease calc(.3s + var(--i) * .25s),opacity .4s ease calc(.3s + var(--i) * .25s)}
.gp b{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.gp-start{border-color:var(--ink);background:var(--ink)}
.gp-start b{left:4px;transform:none;color:var(--ink-3)}
.gp-end{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;background:var(--gc);box-shadow:0 0 0 5px rgba(44,122,110,.16)}
.gp-end b{left:auto;right:0;transform:none;font-size:15px;color:var(--gc)}
.viz-growth-time .growth-area{fill:rgba(162,104,73,.14)}
.viz-growth-time .growth-line{stroke:var(--copper)}
.viz-growth-time .gp{--gc:var(--copper)}
.viz-growth-time .gp-end{box-shadow:0 0 0 5px rgba(162,104,73,.18)}
.growth-x{grid-area:x;display:flex;justify-content:space-between;margin:9px 10px 0 0;font-size:11px;color:var(--ink-3)}
.growth-x span{display:flex;justify-content:center;width:0}
.growth-title{grid-area:t;margin-top:6px!important;text-align:center;font-size:11px;color:var(--ink-3)}
:is(.growth,.growth-steps) :is(span,b,p,li){unicode-bidi:plaintext}
html.anim .viz-growth:not(.in) .growth-plot svg{clip-path:inset(0 100% 0 0)}
html.anim .viz-growth:not(.in) .gp{transform:scale(0);opacity:0}
.growth-steps{list-style:none;margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--ink-2)}
.growth-steps li{display:flex;align-items:baseline;gap:8px}
.growth-steps b{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--viz-teal)}
.viz-growth .viz-note{margin-top:auto!important;padding-top:16px}

/* Research. */
.paper-stack{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.paper-stack li{padding:14px 18px;border:1px solid var(--line);border-inline-start:3px solid var(--c);border-radius:4px;background:var(--card);transition:opacity .5s ease,transform .5s ease}
.paper-stack li:nth-child(1){--c:var(--viz-saffron)}.paper-stack li:nth-child(2){--c:var(--viz-sky);transition-delay:.1s;margin-inline-start:14px}
.paper-stack li:nth-child(3){--c:var(--copper);transition-delay:.2s;margin-inline-start:28px}.paper-stack li:nth-child(4){--c:var(--viz-teal);transition-delay:.3s;margin-inline-start:14px}
.paper-stack li:nth-child(5){--c:var(--viz-rose);transition-delay:.4s}
.paper-stack small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.paper-stack strong{display:block;margin-top:4px;font-size:14.5px;font-weight:600}
html.anim .paper-stack:not(.in) li{opacity:0;transform:translateX(16px)}
.finding{padding:var(--sec-y) 0}
.finding-alt{background:var(--bg-2)}
.finding-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:center}
.finding-copy>p{max-width:58ch;margin-top:18px!important;font-size:16px;line-height:1.7;color:var(--ink-2)}
.finding-copy>p strong{color:var(--ink)}
.biz-reframe .finding-copy .finding-built{padding:14px 16px;border-inline-start:3px solid var(--viz-teal);background:rgba(44,122,110,.07);font-size:15px}
.finding-built b{display:block;margin-bottom:4px;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--viz-teal)}
.biz-reframe .finding-copy .finding-src{font-size:13px;line-height:1.6;color:var(--ink-3)}
.finding-src a{color:var(--brand);font-weight:600;white-space:nowrap}
.ring-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:18px 6px 6px}
.ring{position:relative;display:grid;justify-items:center;gap:12px;text-align:center}
.ring svg{width:min(150px,100%);height:auto;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(57,34,50,.1);stroke-width:12}
.ring-fg{fill:none;stroke:var(--viz-saffron);stroke-width:12;stroke-linecap:round;stroke-dasharray:calc(var(--p) * 100) 100;transition:stroke-dasharray 1.3s cubic-bezier(.2,.7,.2,1)}
.ring-2 .ring-fg{stroke:var(--viz-rose);transition-delay:.2s}
.ring b{position:absolute;top:0;left:0;right:0;aspect-ratio:1;max-width:150px;margin:0 auto;display:grid;place-items:center;font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.ring span{max-width:22ch;font-size:13px;line-height:1.45;color:var(--ink-2)}
html.anim .rings:not(.in) .ring-fg{stroke-dasharray:0 100}
.gb{padding:16px 4px 0}
.gb-plot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);align-items:end;height:230px;padding:0 10px;border-bottom:1px solid rgba(57,34,50,.35)}
.gb-year{display:flex;align-items:flex-end;justify-content:center;gap:8px;height:100%}
.gb-bar{position:relative;flex:0 1 46px;height:calc(var(--v) * 100%);min-height:3px;border-radius:2px 2px 0 0;transform-origin:bottom;transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 0s)}
.gb-in{background:var(--viz-saffron)}
.gb-en{background:var(--viz-sky)}
.gb-year:nth-child(2) .gb-bar{transition-delay:.15s}.gb-year:nth-child(3) .gb-bar{transition-delay:.3s}
.gb-proj .gb-in{background:repeating-linear-gradient(-45deg,var(--viz-saffron) 0 6px,#cf9536 6px 12px)}
.gb-proj .gb-en{background:repeating-linear-gradient(-45deg,var(--viz-sky) 0 6px,#7690bc 6px 12px)}
.gb-bar b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:4px;font-size:12px;font-weight:600;color:var(--ink)}
.gb-axis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:9px;padding:0 10px;text-align:center;font-size:11.5px;color:var(--ink-3)}
.lg-in{--c:var(--viz-saffron)}.lg-en{--c:var(--viz-sky)}
html.anim .groupbars:not(.in) .gb-bar{transform:scaleY(0)}
.mix-demo,.ground-demo,.clock-demo{justify-self:center}
.mix-demo{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:26px;border:1px solid var(--line);border-radius:6px;background:var(--card)}
.mix-demo span{padding:10px 14px;border-radius:999px;font-size:17px;font-weight:550;animation:tb-bob2 3.2s ease-in-out infinite}
.mix-hi{background:rgba(185,122,18,.14);color:#7a5009}
.mix-en{background:rgba(88,118,168,.15);color:#3a5684}
.mix-demo span:nth-child(2){animation-delay:.3s}.mix-demo span:nth-child(3){animation-delay:.6s}.mix-demo span:nth-child(4){animation-delay:.9s}
@keyframes tb-bob2{0%,100%{transform:none}50%{transform:translateY(-4px)}}
.ground-demo{display:grid;grid-template-columns:auto 70px auto;align-items:center;gap:14px 10px;padding:26px;border:1px solid var(--line);border-radius:6px;background:var(--card)}
.ground-demo span{font-size:13.5px;font-weight:600}
.gd-doc,.gd-ans,.gd-hand{padding:10px 14px;border-radius:4px;text-align:center}
.gd-doc{background:var(--bg);border:1px solid var(--line)}
.gd-ans{background:var(--viz-teal);color:#fff}
.gd-hand{background:var(--viz-saffron);color:#fff}
.gd-none{color:var(--ink-3)}
.gd-arrow{height:2px;background:repeating-linear-gradient(90deg,var(--ink-3) 0 6px,transparent 6px 10px);background-size:20px 2px;animation:tb-dash 1s linear infinite}
@keyframes tb-dash{to{background-position:20px 0}}
[dir="rtl"] .gd-arrow{transform:scaleX(-1)}
.clock-demo svg{width:150px;height:150px;fill:none;stroke-linecap:round}
.clock-demo circle{stroke:var(--ink-3);stroke-width:2}
.clock-h{stroke:var(--plum);stroke-width:5}
.clock-m{stroke:var(--copper);stroke-width:3;transform-origin:60px 60px;animation:tb-spin 4s linear infinite}
@keyframes tb-spin{to{transform:rotate(360deg)}}
.checks-section{padding:var(--sec-y) 0;background:var(--plum);color:var(--plum-ink)}
.biz-product .checks-section p.seclede{color:#d6c3cf}
.checks-list{list-style:none;margin:var(--sec-gap) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 34px;border-top:1px solid rgba(243,236,240,.14)}
.checks-list li{position:relative;padding:16px 0;padding-inline-start:38px;border-bottom:1px solid rgba(243,236,240,.14);font-size:15px;line-height:1.55;color:#e4d6de;transition:opacity .45s ease,transform .45s ease}
.checks-list li::before{content:"✓";content:"✓"/"";position:absolute;inset-inline-start:0;top:16px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--viz-teal-l);color:var(--plum);font-family:var(--sans);font-size:12px;font-weight:700}
html.anim .checks-list:not(.in) li{opacity:0;transform:translateY(6px)}
.checks-more{margin-top:22px!important;color:#d6c3cf}
.checks-more a{color:var(--plum-ink);border-bottom:1px solid rgba(243,236,240,.4)}
.sources-section{padding:var(--sec-y) 0}
.sources{margin:var(--sec-gap) 0 0;padding-inline-start:22px;display:grid;gap:12px;max-width:90ch}
.sources li{padding-inline-start:6px;font-size:15px;line-height:1.55}
.sources a{color:var(--ink);border-bottom:1px solid rgba(136,82,53,.35)}
.sources a:hover{color:var(--brand);border-color:var(--brand)}

/* Pricing figures. */
.pricing-visuals{padding:clamp(20px,3vw,40px) 0 0}
.pv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px)}
.cf{display:grid;gap:18px;padding:16px 2px 4px}
.cf-q{justify-self:center;max-width:300px;padding:12px 16px;border-radius:14px 14px 14px 4px;background:var(--plum);color:var(--plum-ink);transition:opacity .4s ease,transform .4s ease}
.cf-q small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mauve)}
.cf-q strong{display:block;margin-top:3px;font-size:15px;font-weight:550}
.cf-split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-split::before{content:"";position:absolute;top:-18px;left:25%;right:25%;height:12px;border:1.5px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0}
.cf-path{display:grid;gap:5px;padding:14px;border:1px solid var(--line);border-top:3px solid var(--c);border-radius:4px;background:var(--card);transition:opacity .45s ease,transform .45s ease}
.cf-free{--c:var(--viz-teal);transition-delay:.35s}.cf-ai{--c:var(--copper);transition-delay:.55s}
.cf-tag{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
.cf-path strong{font-size:15px;font-weight:600}
.cf-path em{font-size:12.5px;font-style:normal;line-height:1.45;color:var(--ink-3)}
html.anim .countflow:not(.in) :is(.cf-q,.cf-path){opacity:0;transform:translateY(8px)}
.mt{display:grid;gap:16px;padding:18px 2px 4px}
.mt-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 14px;align-items:center}
.mt-row b{font-size:13px;font-weight:600}
.mt-row em{grid-column:2;font-size:12.5px;font-style:normal;color:var(--ink-3)}
.mt-track{position:relative;height:18px;border-radius:3px;background:rgba(57,34,50,.08);overflow:visible}
.mt-fill{position:absolute;inset:0 auto 0 0;width:100%;border-radius:3px;background:linear-gradient(90deg,var(--copper) 0 75%,var(--viz-rose));transform-origin:left;transition:transform 2s cubic-bezier(.3,.1,.3,1) .2s}
.mt-free .mt-fill{background:repeating-linear-gradient(-45deg,var(--viz-teal) 0 8px,#3a8f82 8px 16px);background-size:22.6px 22.6px;animation:tb-stripe 1s linear infinite;transition-delay:.4s}
@keyframes tb-stripe{to{background-position:22.6px 0}}
.mt-limit{position:absolute;right:0;top:-24px;bottom:-6px;width:2px;display:flex;justify-content:flex-end;background:linear-gradient(var(--ink),var(--ink)) bottom/2px 30px no-repeat;font-size:10px;font-weight:600;letter-spacing:.08em;line-height:1;text-transform:uppercase;white-space:nowrap;color:var(--viz-rose)}
.mt-limit::after{content:"";position:absolute;bottom:-6px;right:-4px;width:10px;height:10px;border-radius:50%;background:var(--viz-rose);animation:tb-live 1.6s ease-in-out infinite}
.mt-row:first-child{margin-top:14px}
html.anim .meter:not(.in) .mt-fill{transform:scaleX(0)}
.planfit{margin-top:clamp(28px,3vw,44px)}
.pf{display:grid;gap:12px;padding:16px 2px 4px}
.pf-row{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(150px,auto);gap:14px;align-items:center}
.pf-row b{font-size:13.5px;font-weight:600}
.pf-track{height:16px;border-radius:3px;background:rgba(57,34,50,.07)}
.pf-bar{display:block;height:100%;width:max(6px,calc(var(--v) * 100%));border-radius:3px;background:linear-gradient(90deg,var(--copper),var(--plum));transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .12s)}
.pf-num{font-size:12.5px;color:var(--ink-3)}
.pf-num strong{margin-inline-end:6px;font-size:15px;font-weight:700;color:var(--ink)}
html.anim .planfit:not(.in) .pf-bar{transform:scaleX(0)}

/* Contact: the demo request. */
.demo-book{padding:var(--sec-y) 0;background:var(--bg-2)}
.demo-book-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:clamp(36px,6vw,90px);align-items:center}
.demo-book h2{margin-top:var(--eyebrow-gap);max-width:18ch;font-size:var(--h2);line-height:1;letter-spacing:-.05em;font-weight:500}
.demo-book-grid>div>p{max-width:58ch;margin-top:var(--lede-gap)!important;font-family:var(--serif);font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.demo-include{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.demo-include li{position:relative;padding-inline-start:28px;font-size:15px;color:var(--ink-2)}
.demo-include li::before{content:"✓";content:"✓"/"";position:absolute;inset-inline-start:0;top:2px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--viz-teal);color:#fff;font-family:var(--sans);font-size:10px;font-weight:700}
.demo-book .biz-actions{margin-top:26px}

@media (max-width:1100px){
  .explore-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flowmap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-node:nth-child(2)::after{display:none}
  .shared-grid,.protect-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .page-hero .page-hero-grid,.finding-grid,.learning-grid,.pv-grid,.demo-book-grid{grid-template-columns:minmax(0,1fr)}
  .never-list,.checks-list,.everyone-grid,.growth-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .explore-grid,.feature-index,.trust-badges,.shared-grid,.protect-grid{grid-template-columns:minmax(0,1fr)}
  .flowmap-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .fm-node::after{display:none}
  .ret-chart{grid-template-columns:minmax(0,1fr)}
  .ret-axis{grid-column:1}
  .ret-row>b{border-bottom:0;padding-bottom:0}
  .growth-y,.growth-plot{height:170px}
  .growth-x{font-size:10px}
  .pf-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .ring-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .ground-demo{grid-template-columns:auto 36px auto;padding:18px}
  .talk-band{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  :is(.steps-path,.demo-steps) b,.art-how i,.art-features i,.art-features b,.art-trust path,.art-research i,.fm-node::after,.mix-demo span,.gd-arrow,.clock-m,.mt-free .mt-fill,.mt-limit::after{animation:none}
  .art-how i{opacity:1}.art-how i:nth-child(1){transform:translateX(30px)}.art-how i:nth-child(2){transform:translateX(65px)}.art-how i:nth-child(3){transform:translateX(100px)}
  .art-features b{transform:none}.art-research i{transform:scaleY(.7)}.art-research i:nth-child(2){transform:scaleY(1)}
}
.talk-band .btn-quiet{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.biz-reframe .finding-copy .finding-built{background:#dfeee9}