/* Reveo — product pages (AI chatbot / Call analyze / Offline analyze).
   Its own design system rather than the SEO-page template: the landing's
   tokens, type scale and card language, so a visitor moving from the home
   page into a product page stays in the same product, not a second website.
   Self-contained — these pages link this file only. */

/* ---------- Fonts (same self-hosted faces as the landing) ---------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/space-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}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --brand:#00B57C;--brand-bright:#0A8A62;--brand-deep:#05704F;--brand-tint:#E6F7F1;
  --ink:#0B1F19;--ink-soft:#3D5049;--muted:#62736C;--muted-2:#83938C;
  --line:rgba(11,31,25,.10);--line-2:rgba(11,31,25,.17);
  --panel-2:#F3F8F6;--radius:24px;--radius-sm:14px;--maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font-d:"Space Grotesk",system-ui,sans-serif;
  --font-b:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow-sm:0 1px 2px rgba(11,31,25,.06);
  --shadow-md:0 10px 30px -12px rgba(11,31,25,.16);
  --shadow-lg:0 30px 70px -28px rgba(11,31,25,.26);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased;
  line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}
::selection{background:rgba(0,181,124,.22)}
.container{max-width:var(--maxw);margin:0 auto;padding-left:28px;padding-right:28px}
.sec{padding-top:88px;padding-bottom:88px}
.sec--soft{background:var(--panel-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(34px,4.6vw,56px);letter-spacing:-.03em;line-height:1.04}
h2{font-size:clamp(28px,3.4vw,42px)}
h3{font-size:19px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-d);font-size:12.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-bright)}
.kicker::before{content:"";width:24px;height:1px;background:var(--brand)}
.sec-head{max-width:760px;margin-bottom:46px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .kicker::before{display:none}
.sec-head h2{margin-top:16px}
.lede{font-size:clamp(16px,1.4vw,19px);color:var(--ink-soft);margin-top:18px;max-width:620px}
.sec-head.center .lede{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 26px;
  border-radius:999px;font-family:var(--font-b);font-weight:600;font-size:15.5px;cursor:pointer;
  border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 8px 22px -10px rgba(0,181,124,.75)}
.btn--primary:hover{background:#00A270;box-shadow:0 14px 34px -12px rgba(0,181,124,.85)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--panel-2);border-color:var(--brand)}
.btn--sm{height:42px;padding:0 18px;font-size:14px}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:26px;height:70px;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:700;font-size:20px;
  letter-spacing:-.01em;flex:none}
.brand img{height:27px;width:auto}
.hnav{display:flex;align-items:center;gap:2px;margin-left:8px}
.hnav a{font-size:14.5px;font-weight:500;color:var(--ink-soft);padding:9px 13px;border-radius:10px;
  transition:color .18s,background .18s;white-space:nowrap}
.hnav a:hover{color:var(--ink);background:var(--panel-2)}
.hnav a[aria-current="page"]{color:var(--brand-bright);background:var(--brand-tint)}
.hdr__right{display:flex;align-items:center;gap:10px;margin-left:auto}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:13px;color:var(--muted)}
.crumb .container{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-top:16px;padding-bottom:4px}
.crumb a:hover{color:var(--brand-bright)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-top:42px;padding-bottom:74px}
.hero::before{content:"";position:absolute;inset:-140px -10% auto;height:520px;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%,rgba(0,181,124,.16),transparent 70%);filter:blur(30px)}
.hero .container{position:relative}
.hero__grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.hero__grid>div:first-child{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__grid>div:first-child .lede{margin-left:auto;margin-right:auto}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:13px;font-weight:600;color:var(--ink-soft)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px rgba(0,181,124,.16)}
.hero h1{margin-top:22px}
.hero h1 em{font-style:normal;color:var(--brand-bright)}
.hero .lede{margin-top:22px}
.hero__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:13px;margin-top:32px}
.hero__facts{display:flex;justify-content:center;flex-wrap:wrap;gap:34px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line);width:min(100%,720px)}
.hero__fact b{display:block;font-family:var(--font-d);font-size:23px;font-weight:700;color:var(--ink);line-height:1}
.hero__fact span{display:block;font-size:12.5px;color:var(--muted);margin-top:6px}

/* ---------- Hero visuals (built in markup, no images) ---------- */
/* The floating badges sit outside the card; the wrapper reserves room for
   them so they never cover the card's own header or last row. */
.vis{position:relative;width:min(100%,980px);margin:0 auto;padding:54px 22px 64px}
.vis__card{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:26px;
  box-shadow:0 28px 70px -32px rgba(11,31,25,.32),0 0 0 10px rgba(0,181,124,.045);overflow:hidden;width:100%}
.vis__head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);
  background:#fff}
.vis__ava{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand),var(--brand-deep));color:#fff;
  font-family:var(--font-d);font-weight:700;font-size:15px}
.vis__who b{display:block;font-family:var(--font-d);font-size:14.5px;font-weight:600}
.vis__who span{display:block;font-size:12px;color:var(--brand-bright);margin-top:2px}
.vis__badge{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:11px 15px;
  border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md);
  font-size:13px;font-weight:600}
.vis__badge b span{display:block;font-size:11.5px;font-weight:600;color:var(--brand-bright);margin-top:2px}
.vis__badge--tl{top:4px;left:6px}
.vis__badge--br{right:6px;bottom:4px}
.vis__ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--brand-tint);color:var(--brand-bright)}

/* chat */
.chat{display:flex;flex-direction:column;gap:10px;padding:26px 28px;background:#fff;min-height:250px}
.bub{max-width:84%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.45}
.bub--in{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:6px}
.bub--out{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:6px;font-weight:500}
.chat__foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.chat__field{flex:1;height:36px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line)}
.chat__send{width:36px;height:36px;border-radius:50%;background:var(--brand);flex:none;display:grid;place-items:center;color:#fff}

/* score card */
.score{padding:20px 20px 22px;display:flex;flex-direction:column;gap:16px}
.score__top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.score__ring{width:66px;height:66px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--brand) 0 82%,var(--panel-2) 82% 100%)}
.score__ring i{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-family:var(--font-d);font-style:normal;font-weight:700;font-size:17px;color:var(--ink)}
.score__row{display:flex;flex-direction:column;gap:7px}
.score__row .lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft)}
.score__row .lbl b{font-family:var(--font-d);font-size:13px;color:var(--ink)}
.bar{height:7px;border-radius:999px;background:var(--panel-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--brand)}
.bar--warn i{background:#E8A33D}

/* extraction card */
.extract{padding:20px;display:flex;flex-direction:column;gap:16px}
.quote-line{font-size:14.5px;line-height:1.6;color:var(--ink-soft);padding:14px 16px;border-radius:14px;
  background:var(--panel-2);border:1px solid var(--line)}
.quote-line b{color:var(--ink);font-weight:600}
.chips{display:flex;flex-direction:column;gap:9px}
.chip{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;border:1px solid var(--line);
  background:#fff;font-size:13.5px}
.chip em{font-style:normal;font-family:var(--font-d);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand-bright);background:var(--brand-tint);border-radius:999px;
  padding:4px 9px;flex:none}
.chip b{font-weight:600;color:var(--ink)}

/* ---------- Logos / channel strip ---------- */
.strip{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip span{font-size:13px;color:var(--muted)}
.strip img{width:26px;height:26px}

/* ---------- Feature cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;
  box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(0,181,124,.35)}
.card__ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-bright);font-family:var(--font-d);font-weight:700;font-size:13px}
.card h3{margin-top:18px}
.card p{color:var(--ink-soft);font-size:14.5px;margin-top:9px}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;box-shadow:var(--shadow-sm)}
.step__n{font-family:var(--font-d);font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--brand-bright)}
.step h3{margin-top:14px}
.step p{color:var(--ink-soft);font-size:14.5px;margin-top:9px}

/* ---------- Dark showcase band ---------- */
.band{background:linear-gradient(160deg,#0C2C23,#081F19);color:#fff;border-radius:var(--radius);
  padding:clamp(30px,4.4vw,56px);display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.72);font-size:16px;margin-top:16px;max-width:520px}
.band__stats{display:flex;flex-direction:column;gap:22px}
.band__stat b{display:block;font-family:var(--font-d);font-size:34px;font-weight:700;line-height:1;color:#fff}
.band__stat span{display:block;font-size:13px;color:rgba(255,255,255,.66);margin-top:7px}

/* ---------- Checklist ---------- */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:26px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-soft)}
.checks .tick{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-bright);margin-top:2px}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px;max-width:860px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 22px;
  box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:20px 0;font-family:var(--font-d);font-size:16.5px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq p{color:var(--ink-soft);font-size:15px;padding:0 0 20px}

/* ---------- Closing CTA ---------- */
/* Closing band: the page ends on one dark card that carries the ask, the way
   the hero opens it. Light on light read as one more section; this reads as
   the end of the page. */
.cta{position:relative;overflow:hidden;border:0;border-radius:28px;color:#fff;text-align:center;
  padding:clamp(38px,5vw,72px);
  background:linear-gradient(135deg,#06251C 0%,#0C3A2B 46%,#0A7A57 100%);
  box-shadow:0 40px 90px -46px rgba(6,37,28,.85)}
.cta__kicker{display:block;font-family:var(--font-d);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#9BE4C7;margin-bottom:16px}
.cta h2{color:#fff;max-width:18ch;margin-left:auto;margin-right:auto}
.cta p{color:rgba(255,255,255,.72);font-size:17px;margin-top:16px;max-width:620px;margin-left:auto;margin-right:auto}
.cta__row{display:flex;justify-content:center;flex-wrap:wrap;gap:13px;margin-top:30px}
.cta .btn--primary{background:#fff;color:#06251C;border-color:#fff;box-shadow:none}
.cta .btn--primary:hover{background:#E6F7F1;border-color:#E6F7F1;box-shadow:none}
.cta .btn--ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.cta .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cta__note{margin-top:20px;font-size:14px;color:rgba(255,255,255,.6)}
.cta__note a{color:#9BE4C7;text-decoration:underline;text-underline-offset:3px}

/* ---------- Footer ---------- */
.ftr{background:var(--panel-2);border-top:1px solid var(--line);padding:56px 0 34px;margin-top:0}
.ftr__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px}
.ftr p{color:var(--muted);font-size:14px;margin-top:14px;max-width:300px}
.ftr h5{font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:14px}
.ftr__col a{display:block;font-size:14.5px;color:var(--ink-soft);padding:6px 0}
.ftr__col a:hover{color:var(--brand-bright)}
.ftr__bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero__grid,.band{grid-template-columns:1fr;gap:38px}
  .grid3,.steps{grid-template-columns:1fr 1fr}
  .hnav{display:none}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .sec{padding-top:56px;padding-bottom:56px}
  .grid3,.grid2,.steps,.checks,.ftr__grid{grid-template-columns:1fr}
  .vis__badge--tl{left:0;top:0}
  .vis__badge--br{right:6px;bottom:4px}
  .vis{padding-left:0;padding-right:0}
  .chat{padding:20px 16px;min-height:0}
  .hero{padding-top:28px;padding-bottom:48px}
  .hero__facts{gap:18px;margin-top:28px;padding-top:20px}
  .hero__fact b{font-size:20px}
  .hero__fact span{font-size:11px}
  .vis__badge{padding:8px 10px;border-radius:13px;font-size:11px}
  .vis__badge b span{font-size:10px}
  .vis__ic{width:26px;height:26px}
}

/* ---------- Feed pages (Product updates / Company news) ----------
   A listing page is a list, not a hero: compact header, a filter row, then
   entries on a dated timeline with a side rail for following along. */
.feed-head{padding:40px 0 22px}
.feed-head h1{font-size:clamp(30px,3.6vw,44px);margin-top:14px}
.feed-head .lede{margin-top:12px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.filters a,.filters button{font-family:var(--font-b);font-size:13.5px;font-weight:600;color:var(--ink-soft);
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s}
.filters a:hover,.filters button:hover{border-color:var(--brand);color:var(--ink)}
.filters .is-on{background:var(--brand-tint);border-color:rgba(0,181,124,.35);color:var(--brand-bright)}
/* Single column: the right-hand rail was removed from /updates/. */
.feed{display:block;max-width:820px;padding-bottom:80px}
.timeline{display:flex;flex-direction:column}
.entry{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--line)}
.entry:first-child{border-top:0}
.entry__date{font-family:var(--font-d);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--muted);
  padding-top:5px;position:relative}
.entry__date::after{content:"";position:absolute;right:-13px;top:9px;width:8px;height:8px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.entry__body{border-left:1px solid var(--line);padding-left:22px;min-width:0}
.entry__tag{display:inline-block;font-family:var(--font-d);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-bright);background:var(--brand-tint);border-radius:999px;
  padding:5px 10px;margin-bottom:10px}
.entry__tag--news{color:#5B4BB0;background:#EEEBFA}
.entry h2{font-size:20px;line-height:1.3}
.entry p{color:var(--ink-soft);font-size:15px;margin-top:8px;max-width:640px}
.entry ul{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.entry li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft)}
.entry li .tick{width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-bright);margin-top:2px}
.entry.is-hidden{display:none}
.rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:90px}
.rail__card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow-sm)}
.rail__card h3{font-size:16px}
.rail__card p{color:var(--ink-soft);font-size:14px;margin-top:8px}
.rail__card .btn{margin-top:14px;width:100%}
.rail__card--tint{background:radial-gradient(120% 120% at 15% 0%,var(--brand-tint),#F7FCFA)}
.rail__links{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.rail__links a{font-size:14px;color:var(--ink);padding:9px 12px;border-radius:12px;border:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center}
.rail__links a:hover{border-color:var(--brand);color:var(--brand-bright)}
.feed-empty{padding:36px;border:1px dashed var(--line-2);border-radius:20px;text-align:center;color:var(--muted)}
@media (max-width:900px){
  .feed{grid-template-columns:1fr}
  .rail{position:static}
  .entry{grid-template-columns:1fr;gap:8px}
  .entry__date::after{display:none}
  .entry__body{border-left:0;padding-left:0}
}

/* Flow diagram: one picture instead of three paragraph cards. Text lives in the
   SVG so it scales with the drawing and still reads as text to a screen reader. */
.flowchart{margin-top:30px}
.flowchart svg{display:block;width:100%;height:auto;color:var(--ink);font-family:var(--font-d)}
.flowchart .fc-num{fill:var(--brand-bright);font-size:12px;font-weight:700;letter-spacing:.12em}
.flowchart .fc-title{fill:var(--ink);font-size:17px;font-weight:600}
.flowchart .fc-sub{fill:var(--muted);font-size:13px;font-family:var(--font-b,inherit);font-weight:400}
/* Three nodes side by side shrink their own labels to nothing on a phone, so
   the same diagram is drawn stacked and the wide one steps aside. */
.flowchart--tall{display:none}
@media (max-width:760px){
  .flowchart--wide{display:none}
  .flowchart--tall{display:block}
}

/* ---------- The deck's arithmetic, and the panel itself ---------- */
.math{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:stretch;margin-top:28px}
.math__rows{list-style:none;margin:0;padding:clamp(22px,3vw,34px);border-radius:24px;background:var(--brand-tint)}
.math__rows li{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:6px 20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid rgba(11,31,25,.08)}
.math__rows li:last-child{border-bottom:0;padding-bottom:0}
.math__rows li:first-child{padding-top:0}
.math__rows b{font-family:var(--font-d);font-size:clamp(26px,3.4vw,38px);font-weight:700;color:var(--brand-bright);line-height:1}
.math__rows span{font-size:15px;color:var(--ink-soft)}
.math__out{display:flex;flex-direction:column;gap:18px}
.math__card{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:clamp(22px,3vw,32px);border-radius:24px}
.math__card span{font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.math__card b{font-family:var(--font-d);font-size:clamp(34px,4.6vw,52px);font-weight:700;line-height:1}
.math__card--loss{background:var(--brand);color:#fff}
.math__card--loss span{color:rgba(255,255,255,.8)}
.math__card--price{background:#06251C;color:#fff}
.math__card--price span{color:#9BE4C7}
.math__note{margin-top:18px;font-size:13.5px;color:var(--muted)}
@media (max-width:860px){.math{grid-template-columns:1fr}}

.shot{margin:28px 0 0;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#fff;
  box-shadow:var(--shadow-md)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:14px 18px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
.shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.shot-pair .shot{margin-top:22px}
@media (max-width:860px){.shot-pair{grid-template-columns:1fr}}

/* AI chatbot page: calm, product-first minimalism. */
.product-page--minimal{--radius:16px;background:#fff}
.product-page--minimal .hero::before{display:none}
.product-page--minimal .hero{padding-top:54px;padding-bottom:62px}
.product-page--minimal .pill{box-shadow:none;border-color:var(--line-2);padding:6px 12px}
.product-page--minimal .hero h1{max-width:820px;font-size:clamp(36px,4.4vw,58px)}
.product-page--minimal .hero__cta{margin-top:26px}
.product-page--minimal .hero__facts{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);gap:42px}
.product-page--minimal .vis{padding:34px 0 10px;max-width:900px}
.product-page--minimal .vis__badge{display:none}
.product-page--minimal .vis__card{border-radius:16px;box-shadow:0 14px 40px -30px rgba(11,31,25,.32);}
.product-page--minimal .vis__head{padding:14px 16px}
.product-page--minimal .chat{padding:22px 24px;min-height:230px}
.product-page--minimal .strip{gap:20px;padding:18px 0;color:var(--muted)}
.product-page--minimal .strip span:first-child{margin-right:12px}
.product-page--minimal .sec{padding-top:76px;padding-bottom:76px}
.product-page--minimal .sec--soft{background:#fbfcfb;border:0}
.product-page--minimal .sec-head{margin-bottom:34px}
.product-page--minimal .grid3{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.product-page--minimal .card{border:0;border-radius:0;box-shadow:none;background:transparent;padding:26px 24px}
.product-page--minimal .card:hover{transform:none;box-shadow:none;background:var(--panel-2)}
.product-page--minimal .card:nth-child(3n+2){border-left:1px solid var(--line);border-right:1px solid var(--line)}
.product-page--minimal .card__ic{width:auto;height:auto;border-radius:0;background:none;justify-content:flex-start;font-size:12px;letter-spacing:.12em;color:var(--brand-bright)}
.product-page--minimal .card h3{margin-top:16px}
.product-page--minimal .steps{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.product-page--minimal .step{border:0;border-radius:0;box-shadow:none;background:transparent;padding:26px 24px}
.product-page--minimal .step+.step{border-left:1px solid var(--line)}
.product-page--minimal .band{border-radius:16px;background:#06251c;padding:44px}
.product-page--minimal .math{gap:0}
.product-page--minimal .math__rows{border-radius:16px 0 0 16px;background:#f0faf6}
.product-page--minimal .math__card{border-radius:0;padding:26px 30px}
.product-page--minimal .math__card--loss{border-radius:0 16px 0 0}
.product-page--minimal .math__card--price{border-radius:0 0 16px 0}
.product-page--minimal .shot{border-radius:16px;box-shadow:none}
.product-page--minimal .faq{gap:0}
.product-page--minimal .faq details{border-width:1px 0 0;border-radius:0;box-shadow:none;padding:0}
.product-page--minimal .faq details:last-child{border-bottom:1px solid var(--line)}
.product-page--minimal .cta{border-radius:16px;background:#06251c;box-shadow:none}
@media(max-width:960px){
  .product-page--minimal .card:nth-child(3n+2){border-left:0;border-right:0}
  .product-page--minimal .step+.step{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:680px){
  .product-page--minimal .hero{padding-top:34px;padding-bottom:46px}
  .product-page--minimal .hero__facts{gap:20px}
  .product-page--minimal .vis{padding-top:24px}
  .product-page--minimal .card{padding:22px 0}
  .product-page--minimal .math__rows{border-radius:16px 16px 0 0}
  .product-page--minimal .math__card--loss{border-radius:0}
  .product-page--minimal .math__card--price{border-radius:0 0 16px 16px}
  .product-page--minimal .band{padding:30px 24px}
}

/* The embedded chat demo on /ai-chatbot/. A frame, so the landing's own
   stylesheet cannot reach this page's design system; the height is fixed
   because the demo inside it is a fixed-height chat card. */
.vis__demo{display:block;width:100%;height:620px;border:0;border-radius:20px;background:transparent}
@media (max-width:860px){.vis__demo{height:560px}}

/* ---- «Qanday ishlaydi»: the three steps ---- */
/* Cards on a rail. The SVG diagram this replaces drew its own boxes and arrows,
   so the text could not be selected, translated or reflowed, and every step was
   an empty outline. */
.steps{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* The rail is the "and then" the arrows were drawing, behind the cards. */
.steps::before{content:"";position:absolute;left:8%;right:8%;top:58px;height:2px;
  background:linear-gradient(90deg,rgba(0,181,124,.25),rgba(0,181,124,.55),rgba(0,181,124,.25))}
.step{position:relative;display:flex;flex-direction:column;gap:6px;
  padding:22px 22px 24px;border-radius:18px;border:1px solid var(--line);background:#fff;
  box-shadow:0 10px 30px -22px rgba(11,31,25,.5);
  transition:border-color .25s,box-shadow .25s,transform .25s}
.step:hover{border-color:rgba(0,181,124,.45);transform:translateY(-3px);
  box-shadow:0 18px 38px -22px rgba(0,181,124,.5)}
.step__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:var(--brand-tint,#E6F7F1);color:var(--brand-strong,#0A8A62);margin-bottom:6px}
.step__n{font:700 12px/1 var(--font-display,inherit);letter-spacing:.14em;color:var(--brand-strong,#0A8A62)}
.step h3{margin:2px 0 0;font-size:17px;line-height:1.3}
.step p{margin:0;font-size:14px;color:var(--muted,#62736C)}
@media (max-width:860px){
  .steps{grid-template-columns:1fr;gap:12px}
  /* Vertical rail on one column, threaded through the icon tiles. */
  .steps::before{left:43px;right:auto;top:38px;bottom:38px;width:2px;height:auto;
    background:linear-gradient(180deg,rgba(0,181,124,.25),rgba(0,181,124,.55),rgba(0,181,124,.25))}
  .step{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:16px 18px}
  .step__ic{margin:0;flex:none}
  .step__n{order:-1;width:100%;display:none}
  .step h3{flex:1 1 auto;font-size:15.5px}
  .step p{flex-basis:100%;margin-left:56px;font-size:13.5px}
}

/* ---- Hero orbit (AI chatbot) ---- */
/* Reveo in the middle, the channels it answers on and the systems it writes to
   turning around it. Two rings at different speeds and directions so the
   picture never reads as one rigid object. */
/* Tighter: at 520px the rings were large and mostly empty, and the icons read
   as specks on them. The box is smaller and the icons bigger, so the picture
   is the icons rather than the circles. */
.orbit{position:relative;width:min(100%,430px);aspect-ratio:1;margin:0 auto}
.orbit__ring{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid rgba(11,31,25,.10)}
.orbit__ring--in{width:52%;height:52%}
.orbit__ring--out{width:86%;height:86%}
.orbit__core{position:absolute;inset:0;margin:auto;width:30%;height:30%;border-radius:50%;
  display:grid;place-items:center;background:#fff;
  box-shadow:0 0 0 10px rgba(0,181,124,.07),0 22px 50px -24px rgba(0,181,124,.75)}
.orbit__core img{width:46%;height:auto}
.orbit__spin{position:absolute;inset:0;margin:auto;border-radius:50%}
.orbit__spin--in{width:52%;height:52%;animation:orbitSpin 34s linear infinite}
.orbit__spin--out{width:86%;height:86%;animation:orbitSpin 52s linear infinite reverse}
/* Placing an icon on a ring takes three nested elements and each one has a
   job: the ITEM rotates to the icon's angle and is a full-size box, so its top
   edge IS the ring; the i sits on that edge and runs the reverse spin, which
   cancels the ring's rotation; the b undoes the static angle, so the icon ends
   up upright wherever it sits. Collapsing any of them tilts the icons or
   stacks them in the middle. */
.orbit__item{position:absolute;inset:0;transform:rotate(var(--a))}
.orbit__item i{position:absolute;top:0;left:50%;display:block;width:56px;height:56px;
  margin:-28px 0 0 -28px;animation:orbitSpin 34s linear infinite reverse}
.orbit__item b{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:#fff;border:1px solid var(--line,rgba(11,31,25,.1));
  box-shadow:0 10px 24px -14px rgba(11,31,25,.5);transform:rotate(calc(-1 * var(--a)))}
.orbit__spin--out .orbit__item i{width:50px;height:50px;margin:-25px 0 0 -25px;
  animation-duration:52s;animation-direction:normal}
.orbit__item img{width:27px;height:27px;object-fit:contain}
.orbit__spin--out .orbit__item img{width:25px;height:25px}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@media (max-width:1100px){
  .orbit{width:min(100%,380px)}.orbit__pill--b{right:-4%;top:4%}.orbit__pill--d{left:-4%;bottom:0}
}
@media (max-width:620px){
  .orbit{width:min(100%,320px)}
  .orbit__item i{width:42px;height:42px;margin:-21px 0 0 -21px}
  .orbit__spin--out .orbit__item i{width:38px;height:38px;margin:-19px 0 0 -19px}
  /* Four floating labels do not fit beside a 320px circle. */
}
@media (prefers-reduced-motion:reduce){
  .orbit__spin,.orbit__item i{animation:none}
}

/* ---- Feature cards with drawn panels (AI chatbot) ---- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(26px,3.4vw,40px)}
.feat-grid--wide{grid-template-columns:repeat(2,1fr);margin-top:18px}
.feat{display:flex;flex-direction:column;gap:6px;padding:26px 26px 0;border-radius:22px;
  border:1px solid var(--line,rgba(11,31,25,.1));background:#fff;overflow:hidden;
  transition:border-color .25s,box-shadow .25s}
.feat:hover{border-color:rgba(0,181,124,.4);box-shadow:0 22px 46px -30px rgba(0,181,124,.55)}
.feat h3{margin:0;font-size:20px;line-height:1.25}
.feat p{margin:0;font-size:14.5px;color:var(--muted,#62736C);max-width:34ch}
/* The panel is the picture: tinted, inset, and cropped by the card's bottom so
   it reads as a window into the product rather than a boxed illustration. */
.feat__art{position:relative;margin:20px -26px 0;padding:22px;min-height:184px;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(165deg,#F2FBF7,#E4F5EE);overflow:hidden}
.feat-grid--wide .feat__art{min-height:230px}

/* follow-up */
.fa-bub{position:absolute;display:block;padding:11px 14px;border-radius:14px;font-size:12.5px;line-height:1.4;
  box-shadow:0 10px 24px -16px rgba(11,31,25,.6)}
.fa-bub--out{left:22px;top:24px;max-width:62%;background:var(--brand-strong,#0A8A62);color:#fff}
.fa-bub--in{right:22px;top:96px;width:44%;height:34px;background:#fff}
.fa-bub--short{top:140px;width:30%;height:26px}

/* images and voice */
.fa-tiles{position:absolute;left:50%;top:26px;transform:translateX(-50%);display:flex;gap:10px}
.fa-tiles i{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#fff;
  color:var(--brand-strong,#0A8A62);box-shadow:0 10px 22px -16px rgba(11,31,25,.6)}
.fa-wave{position:absolute;left:22px;right:22px;bottom:26px;display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:14px;background:var(--brand-strong,#0A8A62);color:#fff}
.fa-wave b{flex:none;width:0;height:0;border-left:11px solid currentColor;
  border-top:7px solid transparent;border-bottom:7px solid transparent}
.fa-wave svg{flex:1;height:26px;opacity:.9}
.fa-wave em{font-style:normal;font-size:12px;opacity:.85}

/* languages */
.fa-chip{position:absolute;padding:9px 14px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;
  box-shadow:0 10px 24px -16px rgba(11,31,25,.6)}
.feat__art--lang .fa-chip{left:24px;top:30px}
.feat__art--lang .fa-chip--b{left:auto;right:24px;top:62px}
.feat__art--lang .fa-chip--c{left:34px;top:96px}
.feat__art--lang .fa-chip--d{left:auto;right:30px;top:128px}
.feat__art--lang em{position:absolute;left:24px;bottom:20px;font-style:normal;font-weight:700;
  font-size:26px;color:rgba(10,138,98,.5)}

/* channels + crm: a core with its channels, and a wall of systems. Both are
   laid out by flow — a card this small cannot afford hand-placed absolutes. */
/* In flow, not absolute: the art grows to the cluster instead of squeezing it
   (a column flexbox shrinks its children's HEIGHT, which flattened the core). */
.fa-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:186px}
.fa-stack>*{flex:none}
.fa-orb{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:#fff;box-shadow:0 14px 30px -18px rgba(11,31,25,.65)}
.fa-orb img{width:32px;height:32px;object-fit:contain}
.fa-orb--mid{width:82px;height:82px}
.fa-orb--mid img{width:42px;height:42px}
.fa-row{display:flex;gap:16px}
/* The line from the core down to the channels: one element, no SVG. */
.fa-link{width:1px;height:18px;background:linear-gradient(rgba(10,138,98,.05),rgba(10,138,98,.45))}
.fa-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:2px}
.fa-tag{padding:7px 13px;border-radius:999px;background:#fff;font-size:12px;font-weight:600;
  color:var(--ink,#0B1F19);box-shadow:0 10px 22px -16px rgba(11,31,25,.6)}
.fa-tag--on{background:var(--brand-strong,#0A8A62);color:#fff;box-shadow:none}
/* The systems wall: every logo the agent can write into, at a readable size. */
.fa-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}
.fa-wall span{display:grid;place-items:center;height:62px;border-radius:16px;background:#fff;
  box-shadow:0 12px 26px -20px rgba(11,31,25,.6)}
.fa-wall img{max-width:60%;max-height:30px;object-fit:contain}
.fa-wall b{display:grid;place-items:center;height:62px;border-radius:16px;font-size:12.5px;
  font-weight:600;color:var(--brand-strong,#0A8A62);background:rgba(255,255,255,.55);
  border:1px dashed rgba(10,138,98,.35)}
@media (max-width:520px){
  .fa-wall{grid-template-columns:repeat(3,1fr)}
  .fa-orb{width:56px;height:56px}.fa-orb img{width:28px;height:28px}
  .fa-orb--mid{width:70px;height:70px}.fa-orb--mid img{width:36px;height:36px}
}

@media (max-width:980px){
  .feat-grid,.feat-grid--wide{grid-template-columns:1fr}
  .feat h3{font-size:18px}
}

/* The orbit's labels, under the circle rather than floating beside it. A wide
   label placed anywhere around a rotating ring is swept through by an icon
   once per lap — corners included, because the label is wider than the corner
   is deep. Measured 0 collisions here, by construction. */
.orbit__facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:18px auto 0;padding:0;max-width:440px}
.orbit__facts li{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  background:#fff;border:1px solid var(--line,rgba(11,31,25,.1));
  box-shadow:0 10px 24px -20px rgba(11,31,25,.55);
  font-size:12.5px;font-weight:600;color:var(--ink,#0B1F19)}
.orbit__facts li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand,#00B57C)}
@media (max-width:620px){.orbit__facts{max-width:320px}.orbit__facts li{font-size:11.5px;padding:7px 11px}}

/* ---- AI chatbot hero: copy left, orbit right ---- */
/* The centred stack put the headline over the middle of the page and the
   orbit below the fold. Two columns: the sentence reads down the left, the
   picture holds the right, and neither waits for the other. */
.hero--split .hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.hero--split .hero__grid>div:first-child{align-items:flex-start;text-align:left}
.hero--split .hero__grid>div:first-child .lede{margin-left:0;margin-right:0;max-width:52ch}
.hero--split .hero__cta{justify-content:flex-start}
@media (max-width:980px){
  /* Back to one column: at this width the orbit and the sentence each get
     less room than either needs. */
  .hero--split .hero__grid{grid-template-columns:1fr;gap:34px}
  .hero--split .hero__grid>div:first-child{align-items:center;text-align:center}
  .hero--split .hero__grid>div:first-child .lede{margin-left:auto;margin-right:auto}
  .hero--split .hero__cta{justify-content:center}
}

/* The orbit and its labels are one cell of the hero grid. */
.hero__vis{display:flex;flex-direction:column;align-items:center;gap:4px}
/* The labels are as wide as the circle, so both share one centre line. */
.hero__vis .orbit__facts{max-width:430px}

/* The split hero is the page's first chapter, so it sits on the same tint the
   home page gives its inner sections — the breadcrumb included, or the band
   would start mid-air below it. */
.crumb--tint,.hero--split{background:var(--panel-2)}
.hero--split{border-bottom:1px solid var(--line)}