/* Keyda Business marketing site + docs hub.
   Its own identity, deliberately distinct from the consumer keyda.in site
   (spec R2): lighter, calmer, enterprise-leaning — but sharing the product's
   indigo so the two read as one company. */

:root{
  --ink:#101425; --ink-2:#3d4560; --ink-3:#626b86; --line:#e6e9f2;
  --bg:#ffffff; --bg-2:#f7f8fc; --brand:#3b4ee0; --brand-2:#eef0ff;
  --ok:#0d9b6c; --r:12px; --r-lg:18px;
  --shadow:0 1px 2px rgba(16,20,37,.05), 0 12px 34px -18px rgba(16,20,37,.28);
  /* 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 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.14;font-family:"Space Grotesk",Inter,-apple-system,sans-serif;letter-spacing:-.01em;font-weight:700}
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(255,255,255,.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:#fff;
  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:#fff;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:#fff;
}

/* ── 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:#fff;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,#fbfcfe,#fbfcfe 10px,#f7f8fc 10px,#f7f8fc 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:#101425;color:#e8ebff;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:#fff;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:#fff;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}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";float:right;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:#d9dde9}
.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:#e9ecf4;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,#e9ecf4,#f3f5fa)}
.sk.row{display:flex;gap:9px}
.sk.row>span{flex:1;height:44px;border-radius:6px;background:#eef0f6;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(16,20,37,.4);overflow:hidden}
.wdg .hd{display:flex;align-items:center;gap:8px;padding:9px 11px;background:var(--brand);color:#fff}
.wdg .av{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.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:#fff;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 #101425;border-radius:28px;background:var(--bg);overflow:hidden;box-shadow:var(--shadow)}
.phone .nub{height:16px;background:#101425;display:flex;justify-content:center}
.phone .nub span{width:64px;height:16px;background:#101425;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:#fff;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:#fff}
.demowdg .hd .av{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:rgba(255,255,255,.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:#fff;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 Keyda Bot 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)}

/* ─────────────────────────────────────────────────────────────────────────
   Keyda Business 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("/business/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("/business/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:#0b0d12;--ink-2:#40434c;--ink-3:#6d7079;--line:#dedfd9;
  --bg:#f7f7f3;--bg-2:#eeeeea;--brand:#5a5cf6;--brand-2:#e3e3ff;
  --ok:#087f5b;--amber:#e8a23b;--r:8px;--r-lg:16px;
  --shadow:0 1px 1px rgba(11,13,18,.05),0 28px 70px -42px rgba(11,13,18,.42);
  background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;
}
.biz-reframe ::selection{background:var(--brand);color:#fff}
.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(247,247,243,.9);
  border-color:rgba(11,13,18,.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:#555861}
.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:#fff;
  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(11,13,18,.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(255,255,255,.45)}
.biz-reframe .sfoot{background:var(--ink);border-color:#25272e;color:#f7f7f3;padding-top:68px}
.biz-reframe .sfoot .dim,.biz-reframe .sfoot .fcols .fcol-label,.biz-reframe .sfoot .fcols a{color:#999ca6}
.biz-reframe .sfoot .fcols a:hover{color:#fff}
.biz-reframe .sfoot .sbrand .sub{color:#8f929b}
.biz-reframe .sfoot .fbase{border-color:#292b32}
.biz-reframe .navtoggle{border-radius:8px;background:transparent;border-color:rgba(11,13,18,.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:#b0b2b7}
.text-link{font-size:14px;font-weight:550;border-bottom:1px solid rgba(11,13,18,.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:#8c8f99}

/* Homepage: live answer trace. */
.answer-field{position:relative;padding:22px;border:1px solid #dcdcf0;border-radius:18px;background:linear-gradient(180deg,#ffffff,#fafaff 55%,#f4f4ff);color:var(--ink);box-shadow:0 24px 60px -34px rgba(49,52,150,.22)}
.answer-field::after{content:"";position:absolute;inset:9px;border:1px solid rgba(11,13,18,.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 #e3e3da;background:#f6f6f0;border-radius:11px;padding:15px}
.answer-question small,.answer-reply{border-color:#d4d6ff!important;background:#eef0ff!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:#6d6046;font-size:11px;font-weight:650}
.answer-avatar-keyda{background:var(--brand);color:#fff}
.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:#dddece}.answer-path b{color:#6d7079;font-size:9px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;background:#efefe9;border-radius:99px;padding:3px 9px}
.answer-path-brand span{background:rgba(90,92,246,.38)}.answer-path-brand b{color:#4547c9;background:#e8e8ff}
.answer-source{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #b9bbff;background:#e9eaff;border-radius:11px;padding:14px 16px;box-shadow:0 10px 24px -18px rgba(90,92,246,.55)}
.answer-source small{display:block;color:#4547c9;font-size:9px;font-weight:650;letter-spacing:.1em}.answer-source strong{display:block;margin-top:2px;font-size:13px}.answer-source>b{color:#4547c9;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:#fff}
.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:#f1f1ed}
.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:#f5f5f0}
.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:#a3a6ae;font-size:17px}
.language-lineage{display:flex;align-items:center;gap:10px;margin-top:var(--sec-gap);color:#777a83;font-size:8.5px;font-weight:650;letter-spacing:.12em}.language-lineage i{height:1px;flex:1;max-width:50px;background:#3b3d45}.language-lineage strong{color:#babbff;font-weight:650}
.language-conversation{border-top:1px solid #30323a}
.language-row{display:grid;grid-template-columns:42px 1fr;align-items:center;min-height:86px;border-bottom:1px solid #30323a;color:#8f929b}.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:#fff}.language-response{padding:25px 0 0 42px}.language-response small{display:block;color:#70737c;font-size:9px;letter-spacing:.11em}.language-response strong{display:block;margin-top:8px;font-size:20px;font-weight:520;color:#fff}

.product-panel{display:grid;grid-template-columns:.82fr 1.18fr;gap:0;margin-top:var(--sec-gap);background:#fff;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:#111319;color:#f7f7f3}.knowledge-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:21px 0;border-bottom:1px solid #2b2d34}.knowledge-row small{display:block;color:#80838c;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:#8b8e97;font-size:11px;font-weight:450}.knowledge-row.top{border:1px solid rgba(90,92,246,.7);border-radius:10px;background:rgba(90,92,246,.08);margin-bottom:8px;padding:20px 16px}.knowledge-row.top small{color:#9799ff}.knowledge-row.top>b{color:#c8c9ff}.knowledge-foot{display:flex;align-items:center;gap:10px;margin-top:25px;color:#9497a0;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:#f7f7f3}.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:#979aa3}.principles-legal{font-size:12px!important;margin-top:var(--sec-gap)!important}.principles-legal a{color:#c7c8ff;border-bottom:1px solid #56587a}.principles-list{border-top:1px solid #30323a}.principles-list article{padding:29px 0;border-bottom:1px solid #30323a}.principles-list h3{font-size:22px;font-weight:520}.principles-list p{max-width:54ch;margin-top:9px;color:#9a9da6;font-size:14px}
.biz-final{padding:var(--sec-y) 0;background:#e1e2ff}.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:#484b56;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 #b8bac0;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:#fff;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:#fff}.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(255,255,255,.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:#777a84;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:#fff;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:#fff}.plan-card:last-child{border-inline-end:0}.plan-card-focus{background:var(--ink);color:#f7f7f3}.plan-head{display:flex;color:#9b9da5;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:#9497a0}.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:#30323a}.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:#a2a5ae}.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:#30323a;color:#caccff}
.plan-compare{padding:var(--sec-y) 0;background:var(--ink);color:#f7f7f3}.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:#989ba4;font-size:14px}.plan-compare .tablewrap{margin-top:var(--sec-gap)}.plan-compare table{color:#d8dae0}.plan-compare th,.plan-compare td{border-color:#30323a;padding:17px 15px}.plan-compare th{color:#787b85;font-size:9px}.plan-compare td:first-child{color:#f4f4ef}.plan-compare td:not(:first-child){font-size:12.5px;color:#a5a8b0}
.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:#fff;border-color:#d9dad5;border-radius:14px}.biz-product .browser .body{background:#ecece8}.biz-product .browser .bar{background:#f6f6f2}.biz-product .wdg .hd,.biz-product .demowdg .hd{background:var(--brand)}
.product-proofbar{grid-template-columns:repeat(3,1fr);margin-top:var(--sec-gap);border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.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:#fff}.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:#f7f7f3}.product-demo-section p.seclede{color:#9b9ea7}.product-demo-section .demo{gap:clamp(40px,7vw,100px);margin-top:var(--sec-gap);align-items:center}.product-demo-section .demowdg{background:#fff;border-color:#30323a;border-radius:14px;box-shadow:none;color:var(--ink)}.product-demo-section .demowdg .msgs{background:#f2f2ee}.product-demo-section .demoside h3{font-size:26px}.product-demo-section .demosteps{color:#aaaeb6}.product-demo-section .demosteps li{margin:16px 0}.product-demo-section .note{background:rgba(90,92,246,.11);border-color:var(--brand);color:#b9bbc4}.product-demo-section .dim{color:#858892}.product-demo-section a{color:#c1c2ff!important}
.product-mechanism .flowbox,.product-training .flowbox,.product-flows .flowbox{margin-top:var(--sec-gap);border-radius:14px;box-shadow:none}.product-training{background:#fff;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:#fff;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:#fff}.product-install p.seclede{color:#d6d7ff}.product-install .grid{margin-top:var(--sec-gap);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.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:#fff;transition:background .18s ease}.product-install .card:hover{background:#686aff}.product-install .card h3{font-size:20px}.product-install .card p{color:#d7d8ff}.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:#c7c8c3 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:#777a83;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:#555861;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:#f0f0eb;color:var(--ink)}
.biz-docs .ditem.on{background:#eeeeff;color:#3436b8;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:#494bd4;text-decoration:underline;text-decoration-color:#b9baff;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:#d7d8d2;border-radius:5px;background:#ecece7;color:#282a31;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:#fff;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 #282a31;border-radius:10px;background:var(--ink);box-shadow:0 25px 65px -46px rgba(11,13,18,.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:#858892;font-family:Inter,sans-serif;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:#f4f4ef}
/* 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:#f7f7f3}
/* 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:#8d9099}.legal-kicker>span{background:#7779ff}
.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:#a6a9b2;font-size:18px;line-height:1.58}
.legal-hero-side{min-width:0;border-top:1px solid #30323a}
.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 #30323a}
.legal-meta>div:not(:first-child){padding-inline-start:16px}.legal-meta>div:last-child{border-inline-end:0}
.legal-meta dt{color:#6f727c;font-size:8.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}
.legal-meta dd{margin:7px 0 0;color:#d7d8dc;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 #30323a}
.legal-suite a{display:flex;align-items:center;min-width:0;padding:17px 14px;border-inline-end:1px solid #30323a;color:#8c8f98;font-size:12.5px;font-weight:500;transition:background .16s ease,color .16s ease}
.legal-suite a:first-child{border-inline-start:1px solid #30323a}.legal-suite a:hover{background:#17191f;color:#fff}.legal-suite a.on{background:var(--brand);border-color:var(--brand);color:#fff}

.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:#c7c8c3 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:#8a8c93;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:#62656e;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:#b4b5b1}
.legal-toc a:hover{background:#ecece7;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:#fff;color:#4b4e57;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:#484b54;font-size:15.5px;line-height:1.74}
.biz-legal .prose ul,.biz-legal .prose ol{margin:18px 0;padding-inline-start:22px;color:#484b54;font-size:15px;line-height:1.68}
.biz-legal .prose li{margin:10px 0;padding-inline-start:5px}.biz-legal .prose li::marker{color:#7a7cf7}
.biz-legal .prose strong{color:#202229;font-weight:650}
.biz-legal .prose a{color:#494bd4;text-decoration:underline;text-decoration-color:#b9baff;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:#fff;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:#e9e9e4;color:#6b6e76;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:#fff;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 #30323a}.legal-suite a:nth-child(-n+2){border-bottom:1px solid #30323a}.legal-suite a:nth-child(3){border-inline-start:1px solid #30323a}
  .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)}
  .product-proofbar{grid-template-columns:repeat(3,1fr)}.product-proofbar>div:nth-child(2){border-inline-end:1px solid var(--line)}.product-proofbar>div:nth-child(-n+2){border-bottom:0}
  .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:#fff;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:#8d9099}
  .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(11,13,18,.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(11,13,18,.25);padding-bottom:1px}
.biz-reframe .sregion-en:hover{color:var(--ink);border-color:var(--ink)}
.biz-reframe .sfoot .sregion{border-color:#3a3d45;color:#999ca6}

/* 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:#fff;color:var(--ink);box-shadow:0 24px 60px -28px rgba(11,13,18,.45);
  font:14px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.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,#0b0d12);color:#fff;
  font-size:13.5px;font-weight:550;text-decoration:none;
}
.region-hint .rh-go:hover{background:var(--brand,#5a5cf6)}
.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:#fff;color:var(--ink);
  font:inherit;font-size:15px;
}
.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:#c9caff;background:#f0f0ff}
.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:#fff;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}