/* ── tokens ─────────────────────────────────────────────────────────── */
:root{
  --bg:#ffffff; --fg:#1f1f1f; --fg-muted:rgba(31,31,31,.52);
  --surface:rgba(0,0,0,.04); --surface-hover:rgba(0,0,0,.08);
  --surface-solid:#f5f5f5; --grey:#f5f5f7; --rule:#eaeaea;
  --accent:#ff4400; --accent-soft:#fff3ee; --dark:#141416;
  --br:16px; --br2:8px; --br3:10px;
  --pd:16px; --pd2:8px; --pd3:4px;
  --card-h:98px; --card-gap:8px; --rail-w:390px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:1160px){ :root{ --rail-w:330px } }
@media (max-width:768px){ :root{ --br:12px; --card-h:80px; --card-gap:6px } }

/* ── reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html,body,h1,h2,h3,p,ul,li,figure{ margin:0; padding:0 }
ul{ list-style:none }
h1,h2,h3{ font-size:inherit; font-weight:inherit }
a{ color:inherit; text-decoration:none; display:inline-block; position:relative }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
svg{ display:block }
html{ -webkit-tap-highlight-color:transparent; overflow-x:hidden; overflow-y:scroll }
body{
  /* Inter, served from Google Fonts. SF Pro is not licensed for the web and
     only exists on Apple devices; Helvetica is the last-resort fallback. */
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-feature-settings:"cv05" 1,"cv08" 1,"ss03" 1,"tnum" 0;
  font-optical-sizing:auto;
  font-size:14px; line-height:125%; background:var(--bg); color:var(--fg); min-width:340px;
  -webkit-font-smoothing:antialiased;
}
@media (max-width:768px){ body{ font-size:13.5px; letter-spacing:-.31px } }
.t-muted{ color:var(--fg-muted) } .t-accent{ color:var(--accent) }

/* ── shell ──────────────────────────────────────────────────────────── */
.wrapper{ display:flex; align-items:flex-start }
@media (max-width:656px){ .wrapper{ flex-flow:column; align-items:stretch } }
.rail{ flex:0 0 var(--rail-w); width:var(--rail-w); position:sticky; top:0;
       max-height:100svh; overflow-y:auto; scrollbar-width:none; padding:var(--pd2) 0 var(--pd2) var(--pd2) }
.rail::-webkit-scrollbar{ display:none }
.content{ flex:1 1 auto; min-width:0; padding:var(--pd2) }

/* ── rail head ──────────────────────────────────────────────────────── */
.rail__head{ display:flex; flex-flow:column }
.rail__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--pd2) }
.rail__mid{ flex:auto; display:flex; flex-flow:column; align-items:center; justify-content:center; row-gap:40px; padding:44px 0 }

.pill{ display:inline-flex; align-items:center; gap:var(--pd2); height:40px; padding:0 18px;
       border-radius:40px; background:var(--surface); transition:background-color .3s var(--ease),color .3s; white-space:nowrap }
.pill:hover{ background:var(--surface-hover) }
.pill--accent{ background:var(--accent); color:#fff } .pill--accent:hover{ background:#e63d00 }
.pill .mark{ width:18px; height:18px }
.lang{ display:flex; align-items:center; height:38px; padding:3px; border-radius:38px; background:var(--surface); font-size:12px }
.lang button{ height:32px; padding:0 12px; border-radius:32px; color:var(--fg-muted); transition:.3s }
.lang button[aria-pressed="true"]{ background:var(--bg); color:var(--fg) }
.logo{ display:flex; align-items:center; gap:10px }

.logo .word{ font-size:23px; letter-spacing:.2px }
.clock{ text-align:center; cursor:default; font-size:23px; line-height:27px; letter-spacing:.45px }
@media (max-width:768px){ .clock{ font-size:16px; line-height:130% } }
.clock span{ display:block }

/* ── deck ───────────────────────────────────────────────────────────── */
.deck{ display:flex; flex-flow:column; row-gap:var(--card-gap) }
.deck__card{ pointer-events:none }
.deck__inner{ position:relative; display:flex; align-items:center; column-gap:12px; height:var(--card-h);
  padding:var(--pd); border-radius:var(--br3); background:var(--surface-solid); overflow:hidden;
  pointer-events:auto; transform-origin:50% 100%; will-change:transform,opacity; transition:background-color .3s }
@media (max-width:768px){ .deck__inner{ padding:12px; column-gap:9px } }
.deck__inner:hover{ background:#efefef }
.deck__inner.is-current{ background:#eaeaea }
.deck__bg{ position:absolute; inset:0; background:radial-gradient(76% 130% at 24% 65%, #d9d6d5 0, #efefef 100%) }
.deck__ico{ position:relative; flex:0 0 auto; width:65px; height:65px; border-radius:var(--br3);
  background:#fff; display:flex; align-items:center; justify-content:center; color:var(--accent) }
.deck__ico svg{ width:24px; height:24px }
@media (max-width:768px){ .deck__ico{ width:56px; height:56px } }
.deck__txt{ position:relative; min-width:0 }
.deck__txt h2{ display:flex; align-items:center; gap:6px }
.deck__txt p{ color:var(--fg-muted); margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.deck__end{ height:40px }
.tag{ font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; padding:2px 6px; border-radius:4px;
      background:var(--surface); color:var(--fg-muted); line-height:1.5 }
.tag--soon{ background:var(--accent-soft); color:var(--accent) }

/* ── page rhythm ────────────────────────────────────────────────────── */
.page{ display:flex; flex-flow:column; gap:var(--pd2) }
.sec{ border-radius:var(--br); padding:clamp(64px,9vw,132px) clamp(20px,5vw,64px); overflow:hidden }
.sec--white{ background:#fff; box-shadow:inset 0 0 0 1px var(--rule) }
.sec--grey{ background:var(--grey) }
.sec--accent{ background:var(--accent-soft) }
.sec--dark{ background:var(--dark); color:#fff }
.sec--dark .lede{ color:rgba(255,255,255,.62) } .sec--dark .kick{ color:rgba(255,255,255,.45) }
.sec--top{ padding-top:clamp(48px,6vw,96px) }
.sec__in{ max-width:900px; margin:0 auto; text-align:center }

.kick{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:20px }
.big{ font-size:clamp(30px,4.6vw,58px); line-height:1.05; letter-spacing:-.022em; font-weight:500 }
.lede{ font-size:clamp(16px,1.45vw,21px); line-height:1.45; color:var(--fg-muted);
       max-width:60ch; margin:22px auto 0 }
.sec__in > .pill{ margin-top:32px }

/* rise-in */
.rise{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.rise.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .rise{ opacity:1; transform:none; transition:none } }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{ position:relative; border-radius:var(--br); overflow:hidden; min-height:min(76svh,720px);
       display:flex; align-items:center; justify-content:center; padding:clamp(56px,8vw,120px) clamp(20px,5vw,64px) }
.hero__bg{ position:absolute; inset:0; background:
  radial-gradient(120% 90% at 12% 88%, #ff6a00 0%, rgba(255,106,0,0) 55%),
  radial-gradient(90% 80% at 78% 18%, #ff3d6e 0%, rgba(255,61,110,0) 60%),
  radial-gradient(100% 100% at 50% 50%, #d67cd6 0%, #b98ad9 40%, #e9a68f 100%) }
.hero__in{ position:relative; max-width:20ch; text-align:center; color:#fff }
.hero__in h1{ font-size:clamp(38px,6.2vw,84px); line-height:1.02; letter-spacing:-.03em; font-weight:500 }
.hero__in p{ font-size:clamp(16px,1.5vw,21px); line-height:1.42; margin:24px auto 0; max-width:36ch; color:rgba(255,255,255,.86) }
.hero__in .pill{ margin-top:32px; background:#fff; color:var(--fg) } .hero__in .pill:hover{ background:rgba(255,255,255,.86) }
.hero__in .pill .mark{ color:var(--accent) }

/* ── artwork ────────────────────────────────────────────────────────── */
.art{ margin:44px auto 0; max-width:520px }
.surf{ background:#fff; border-radius:18px; padding:18px; text-align:left; font-size:14px;
       box-shadow:0 18px 50px rgba(0,0,0,.09), inset 0 0 0 1px var(--rule) }
.sec--grey .surf{ box-shadow:0 18px 50px rgba(0,0,0,.07) }
.surf__h{ display:flex; justify-content:space-between; color:var(--fg-muted); font-size:12px; margin-bottom:14px }
.msg{ max-width:86%; padding:10px 14px; border-radius:16px; margin-bottom:8px; line-height:1.35 }
.msg.in{ background:#f1f1f3; border-bottom-left-radius:5px }
.msg.out{ background:var(--accent-soft); color:#8a2a08; margin-left:auto; border-bottom-right-radius:5px }
.lead{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; margin-bottom:7px }
.lead b{ font-weight:400 } .lead i{ margin-left:auto; font-style:normal; color:var(--fg-muted) }
.lead.hot{ background:#ffece7 } .lead.warm{ background:#fff6e3 } .lead.cold{ background:#eef3fb }
.lead__note{ color:var(--fg-muted); font-size:12.5px; margin-top:12px }
.slot{ display:flex; justify-content:space-between; padding:11px 0; border-top:1px solid var(--rule) }
.slot span{ color:var(--fg-muted) }
.val{ display:flex; justify-content:space-between; padding:11px 0; border-top:1px solid var(--rule) }
.val span{ color:var(--fg-muted) }
.qrow{ display:flex; align-items:center; gap:10px; padding:9px 0 }
.qrow span{ flex:0 0 42% } .qrow em{ font-style:normal; color:var(--fg-muted); flex:0 0 34px; text-align:right }
.qrow i{ flex:1; height:6px; border-radius:3px; background:rgba(0,0,0,.08); display:block }
.qrow i b{ display:block; height:100%; border-radius:3px; background:var(--accent) }
.chan{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; position:relative }
.chan__i{ background:#fff; border-radius:14px; padding:16px 10px; text-align:center; box-shadow:inset 0 0 0 1px var(--rule) }
.chan__i span{ display:flex; justify-content:center; color:var(--accent); margin-bottom:8px }
.chan__i svg{ width:22px; height:22px }
.chan__i b{ font-weight:400; font-size:12.5px }
.chan__one{ grid-column:1/-1; margin-top:8px; background:var(--accent); color:#fff; border-radius:14px; padding:14px; text-align:center }
.sys{ text-align:center }
.sys__row{ display:flex; gap:8px; justify-content:center }
.sys__b{ background:#fff; border-radius:12px; padding:14px 20px; box-shadow:inset 0 0 0 1px var(--rule) }
.sys__link{ width:1px; height:34px; margin:0 auto; background:var(--rule) }
.sys__cap{ display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:#fff; border-radius:14px; padding:14px 22px }
.sys__cap .mark{ width:20px; height:20px }
.appcard{ background:#fff; border-radius:22px; padding:20px; text-align:left; box-shadow:0 18px 50px rgba(0,0,0,.09), inset 0 0 0 1px var(--rule) }
.appcard__v{ font-size:24px; letter-spacing:-.01em } .appcard__m{ color:var(--fg-muted); font-size:12.5px; margin-top:2px }
.appcard__r{ display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid var(--rule); margin-top:0 }
.appcard__r:first-of-type{ margin-top:14px } .appcard__r span:last-child{ color:var(--fg-muted) }

/* ── stats ──────────────────────────────────────────────────────────── */
.stats{ display:flex; align-items:flex-start; justify-content:center; gap:clamp(24px,5vw,72px); flex-wrap:wrap; margin-top:44px }
.stat{ text-align:center } .stat b{ display:block; font-size:clamp(38px,5.2vw,68px); line-height:1;
                                    letter-spacing:-.03em; font-weight:500; white-space:nowrap }
.stat span{ display:block; color:var(--fg-muted); margin-top:8px }
.stat--solo{ margin-top:44px } .stat--solo b{ color:var(--accent) }

/* ── points ─────────────────────────────────────────────────────────── */
.points{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); text-align:left }
@media (max-width:900px){ .points{ grid-template-columns:1fr; gap:28px } }
.point b{ display:block; font-size:clamp(17px,1.5vw,21px); font-weight:500; letter-spacing:-.01em }
.point p{ color:var(--fg-muted); margin-top:8px; line-height:1.5 }
.point__n{ display:block; color:var(--accent); font-size:12px; letter-spacing:.09em; margin-bottom:10px }

/* ── product list ───────────────────────────────────────────────────── */
.plist{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--pd2); text-align:left; margin-top:8px }
@media (max-width:900px){ .plist{ grid-template-columns:1fr } }
.pcard{ display:block; background:var(--grey); border-radius:var(--br2); padding:22px; transition:background-color .3s var(--ease) }
.pcard:hover{ background:#ededf0 }
.pcard__i{ display:flex; color:var(--accent); margin-bottom:14px } .pcard__i svg{ width:24px; height:24px }
.pcard b{ display:flex; align-items:center; gap:8px; font-weight:500; font-size:17px; letter-spacing:-.01em }
.pcard span{ display:block; margin-top:6px }

/* ── customers ──────────────────────────────────────────────────────── */
.cust{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pd2); margin-top:8px }
@media (max-width:900px){ .cust{ grid-template-columns:1fr } }
.cust__i{ background:#fff; border-radius:var(--br2); padding:26px 20px }
.cust__i b{ display:block; font-size:19px; font-weight:500; letter-spacing:-.01em }
.cust__i span{ display:block; color:var(--fg-muted); margin-top:6px }

/* ── product nav ────────────────────────────────────────────────────── */
.pnav{ display:flex; align-items:center; justify-content:space-between; gap:var(--pd2); flex-wrap:wrap }
.pnav .pill{ max-width:46%; overflow:hidden; text-overflow:ellipsis }

/* ── mobile ─────────────────────────────────────────────────────────── */
@media (min-width:657px){ .rail__back{ display:none } }

/* ── hero photograph ────────────────────────────────────────────────── */
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero__scrim{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(6,8,14,.55) 0%, rgba(6,8,14,.20) 38%, rgba(6,8,14,.72) 100%) }
.hero{ min-height:min(82svh,780px) }
.hero__in{ max-width:22ch }
.hero__in h1{ text-shadow:0 2px 40px rgba(0,0,0,.35) }

/* ── product page: transcript ───────────────────────────────────────── */
.art--wide{ max-width:640px }
.tr{ background:#fff; border-radius:20px; padding:22px; text-align:left;
     box-shadow:0 20px 60px rgba(0,0,0,.08), inset 0 0 0 1px var(--rule) }
.tr__h{ color:var(--fg-muted); font-size:12px; letter-spacing:.04em; margin-bottom:16px; text-align:center }
.tr__m{ max-width:82%; padding:11px 15px; border-radius:17px; margin-bottom:9px; line-height:1.4; font-size:14.5px }
.tr__m.in{ background:#f1f1f3; border-bottom-left-radius:5px }
.tr__m.out{ background:var(--accent); color:#fff; margin-left:auto; border-bottom-right-radius:5px }
.tr__n{ text-align:center; color:var(--fg-muted); font-size:12.5px; padding:9px 12px; margin:4px auto 10px;
        background:var(--grey); border-radius:10px; max-width:92% }

/* ── before / after ─────────────────────────────────────────────────── */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:var(--pd2); text-align:left; margin-top:8px }
@media (max-width:820px){ .ba{ grid-template-columns:1fr } }
.ba__c{ border-radius:var(--br2); padding:26px }
.ba__c--before{ background:#fff; color:var(--fg-muted) }
.ba__c--after{ background:var(--accent); color:#fff }
.ba__l{ display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:16px; opacity:.65 }
.ba__c p{ font-size:clamp(16px,1.4vw,19px); line-height:1.4; padding:9px 0 }
.ba__c p + p{ border-top:1px solid rgba(0,0,0,.07) }
.ba__c--after p + p{ border-top-color:rgba(255,255,255,.22) }

/* ── channel chips ──────────────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:8px }
.chipx{ background:var(--grey); border-radius:40px; padding:10px 18px; color:var(--fg) }

/* ── product cards ──────────────────────────────────────────────────── */

.pcard__i{ display:flex; color:var(--accent); margin:0 } .pcard__i svg{ width:24px; height:24px }



/* ── demo page ──────────────────────────────────────────────────────── */
.sec__in--wide{ max-width:1040px }
.demo{ display:grid; grid-template-columns:300px 1fr; gap:clamp(24px,4vw,56px); text-align:left; align-items:start }
@media (max-width:900px){ .demo{ grid-template-columns:1fr } }
.demo__side .kick{ margin-bottom:16px }
.agenda li{ padding:12px 0; border-top:1px solid var(--rule); color:var(--fg); line-height:1.45 }
.demo__note{ margin-top:20px; color:var(--fg-muted); font-size:13px; line-height:1.5 }
.demo__form{ background:#fff; border-radius:var(--br); padding:clamp(22px,3vw,34px) }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:620px){ .grid-2{ grid-template-columns:1fr } }
.fld{ display:block; margin-bottom:18px }
.fld > span{ display:block; font-size:12px; letter-spacing:.04em; color:var(--fg-muted); margin-bottom:7px }
.fld input,.fld select,.fld textarea{
  width:100%; font:inherit; color:var(--fg); background:var(--grey); border:1px solid transparent;
  border-radius:10px; padding:13px 14px; outline:none; transition:border-color .2s,background-color .2s; appearance:none }
.fld textarea{ resize:vertical; line-height:1.45 }
.fld select{ background-image:linear-gradient(45deg,transparent 50%,var(--fg-muted) 50%),linear-gradient(135deg,var(--fg-muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:38px }
.fld input:focus,.fld select:focus,.fld textarea:focus{ border-color:var(--accent); background:#fff }
.fld input::placeholder,.fld textarea::placeholder{ color:rgba(31,31,31,.32) }
.fld .bad,input.bad,select.bad,textarea.bad{ border-color:#e0342b; background:#fff5f4 }
.picks{ display:flex; flex-wrap:wrap; gap:8px }
.pick{ position:relative; cursor:pointer }
.pick input{ position:absolute; opacity:0; pointer-events:none }
.pick span{ display:inline-block; background:var(--grey); border:1px solid transparent; border-radius:40px;
            padding:9px 16px; transition:.2s; font-size:13.5px }
.pick input:checked + span{ background:var(--accent); border-color:var(--accent); color:#fff }
.pick input:focus-visible + span{ border-color:var(--accent) }
.demo__submit{ margin-top:6px; height:48px; padding:0 24px }
.demo__legal{ color:var(--fg-muted); font-size:12px; margin-top:14px; line-height:1.5 }
.demo__done{ background:#fff; border-radius:var(--br); padding:clamp(32px,5vw,64px); text-align:center }
.demo__tick{ width:56px; height:56px; margin:0 auto 22px; border-radius:50%; background:var(--accent-soft);
             color:var(--accent); display:flex; align-items:center; justify-content:center }
.demo__tick svg{ width:26px; height:26px }
.demo__done .pill{ margin-top:28px }

/* ── rail as a news feed ────────────────────────────────────────────── */
.deck__inner{ align-items:flex-start; height:auto; min-height:var(--card-h); padding:16px }
.deck__meta{ font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:5px }
.deck__txt h2{ display:block; line-height:1.25; font-weight:500 }
.deck__txt p{ -webkit-line-clamp:2 }
.deck__ico{ width:44px; height:44px; border-radius:12px; margin-top:2px }
.deck__ico svg{ width:20px; height:20px }
@media (max-width:768px){ .deck__ico{ width:40px; height:40px } }

/* the company card is always orange; so is whichever card you have open */
.deck__inner.is-pinned,
.deck__inner.is-current{ background:var(--accent); color:#fff }
.deck__inner.is-pinned:hover,
.deck__inner.is-current:hover{ background:#f04000 }
.is-pinned .deck__meta,.is-current .deck__meta{ color:rgba(255,255,255,.72) }
.is-pinned .deck__txt p,.is-current .deck__txt p{ color:rgba(255,255,255,.82) }
.is-pinned .deck__ico,.is-current .deck__ico{ background:rgba(255,255,255,.16); color:#fff }

/* ── home: modules + value ──────────────────────────────────────────── */
.plist{ grid-template-columns:repeat(3,1fr) }
@media (max-width:1100px){ .plist{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:760px){ .plist{ grid-template-columns:1fr } }
.vgrid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--pd2); text-align:left; margin-top:8px }
@media (max-width:820px){ .vgrid{ grid-template-columns:1fr } }
.vcard{ background:#fff; border-radius:var(--br2); padding:28px }
.vcard b{ display:block; font-size:clamp(17px,1.5vw,21px); font-weight:500; letter-spacing:-.01em; color:var(--accent) }
.vcard p{ color:var(--fg-muted); margin-top:10px; line-height:1.5 }

/* ── news article prose ─────────────────────────────────────────────── */
.prose{ text-align:left; max-width:62ch; margin:0 auto }
.prose p{ font-size:clamp(16px,1.4vw,19px); line-height:1.6; color:var(--fg) }
.prose p + p{ margin-top:1.1em }

/* ── hero film ──────────────────────────────────────────────────────── */
.hero{ min-height:min(84svh,820px); align-items:flex-end; justify-content:flex-start;
       padding:clamp(28px,4vw,52px) }
.hero__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero__scrim{ background:
  linear-gradient(180deg, rgba(6,8,14,.42) 0%, rgba(6,8,14,.12) 34%, rgba(6,8,14,.80) 100%) }
.hero__in{ position:relative; flex:none; max-width:none; width:min(660px,54%); text-align:left;
            transition:opacity .6s var(--ease), transform .6s var(--ease) }
.hero__in h1{ font-size:clamp(28px,3.5vw,54px); line-height:1.06 }
.hero__in p{ margin:18px 0 0; max-width:40ch; font-size:clamp(15px,1.25vw,19px) }
.hero.is-ending .hero__in{ opacity:0; transform:translateY(-8px) }

/* the customer's messages, going out and never read */
.hero__chat{ position:absolute; right:clamp(20px,3.5vw,52px); top:clamp(20px,4vw,56px);
             width:min(330px,42%); display:flex; flex-flow:column; align-items:flex-end; gap:8px; z-index:2 }
.cb{ background:#dcf7c5; color:#0f2a12; border-radius:15px; border-bottom-right-radius:5px;
     padding:9px 12px 6px; font-size:13.5px; line-height:1.35; text-align:left;
     box-shadow:0 6px 22px rgba(0,0,0,.22);
     opacity:0; transform:translateY(8px) scale(.97); transform-origin:100% 100%;
     transition:opacity .45s var(--ease), transform .45s var(--ease) }
.cb.on{ opacity:1; transform:none }
.cb__t{ display:block; text-align:right; font-style:normal; font-size:10px; color:#7e8b76; margin-top:3px }
.hero__chat .cb--emoji{ background:none; box-shadow:none; padding:0 2px; line-height:1;
  font-size:clamp(34px,3.4vw,54px) }
.hero__chat .cb--emoji .cb__t{ font-size:10px; color:rgba(255,255,255,.75); margin-top:2px;
                   text-shadow:0 1px 8px rgba(0,0,0,.6) }

.hero__punch{ position:absolute; left:clamp(28px,4vw,52px); bottom:clamp(28px,4vw,52px);
  width:min(660px,54%); z-index:3; color:#fff; text-align:left; pointer-events:none;
  font-size:clamp(26px,3.5vw,54px); line-height:1.06; letter-spacing:-.022em; font-weight:500;
  opacity:0; transform:translateY(12px); transition:opacity .8s var(--ease), transform .8s var(--ease);
  text-shadow:0 2px 40px rgba(0,0,0,.5) }
.hero__punch.on{ opacity:1; transform:none }

@media (max-width:1100px){ .hero__in,.hero__punch{ width:min(560px,66%) } }
@media (max-width:760px){
  .hero__chat{ width:min(250px,58%); top:16px; right:16px }
  .cb{ font-size:12.5px }
  /* .hero__in is in flow — a `right` here would drag it back over the padding */
  .hero__in{ width:100% }
  .hero__punch{ width:100%; right:clamp(20px,4vw,52px) }
  .hero__in p{ max-width:none }
}
@media (prefers-reduced-motion:reduce){ .cb,.hero__punch{ transition:none } }

/* ── real logo ──────────────────────────────────────────────────────── */
.logo{ gap:0 }
.logo__img{ width:154px; height:auto; color:var(--fg) }
@media (max-width:768px){ .logo__img{ width:131px } }
.mark{ width:20px; height:20px; flex:0 0 auto }
.pill .mark{ width:19px; height:19px }
.pill--accent .mark{ filter:brightness(0) invert(1) }
.hero__in .pill .mark{ filter:none }
.deck__ico img.mark,.demo__tick img.mark{ width:22px; height:22px }
.sys__cap .mark{ width:20px; height:20px; filter:brightness(0) invert(1) }

/* ── funnel (deck slide 3) ──────────────────────────────────────────── */
.fun{ max-width:560px; margin:44px auto 0 }
.fun__s{ background:var(--grey); border-radius:var(--br2); padding:22px }
.fun__s b{ display:block; font-size:clamp(30px,3.6vw,44px); line-height:1; letter-spacing:-.03em;
           font-weight:500; white-space:nowrap }
.fun__s span{ display:block; color:var(--fg-muted); margin-top:8px }
.fun__s--out{ background:var(--accent); color:#fff }
.fun__s--out span{ color:rgba(255,255,255,.82) }
.fun__a{ color:var(--fg-muted); padding:10px 0; font-size:18px }

/* ── three branches (deck slide 5) ──────────────────────────────────── */
.br{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pd2); text-align:left; margin-top:8px }
@media (max-width:900px){ .br{ grid-template-columns:1fr } }
.br__c{ background:#fff; border-radius:var(--br2); padding:28px }
.br__i{ display:flex; color:var(--accent); margin-bottom:18px } .br__i svg{ width:26px; height:26px }
.br__chip{ display:inline-block; background:var(--accent); color:#fff; border-radius:40px;
           padding:8px 15px; font-size:13.5px; line-height:1.25 }
.br__c p{ color:var(--fg-muted); margin-top:14px; line-height:1.5 }
.br__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:18px }
.br__tags span{ background:var(--grey); border-radius:40px; padding:7px 13px; font-size:12.5px; color:var(--fg) }

/* ── roles (deck slide 6) ───────────────────────────────────────────── */
.roles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pd2); text-align:left; margin-top:36px }
@media (max-width:900px){ .roles{ grid-template-columns:1fr } }
.role{ background:var(--grey); border-radius:var(--br2); padding:28px }
.role__i{ display:flex; color:var(--fg); margin-bottom:16px } .role__i svg{ width:24px; height:24px }
.role > b{ display:block; font-size:clamp(17px,1.5vw,21px); font-weight:500; letter-spacing:-.01em; margin-bottom:20px }
.role__l{ display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:6px }
.role__was{ color:var(--fg-muted); line-height:1.5; margin-bottom:20px }
.role__now{ color:var(--accent); line-height:1.5 }

.surf__none{ margin-top:14px; padding-top:12px; border-top:1px solid var(--rule);
             color:var(--alert); font-size:12.5px; text-align:center }

/* ════════════════════════════════════════════════════════════════════
   Vertical rhythm — one scale, used everywhere.
   eyebrow → 14px → headline → 28px → lede → 72px → content → 56px → note
   ════════════════════════════════════════════════════════════════════ */
:root{
  --sp-eyebrow: 14px;                        /* kicker → headline        */
  --sp-lede: clamp(20px,2.2vw,30px);         /* headline → lede          */
  --sp-content: clamp(48px,6vw,88px);        /* headline block → content */
  --sp-note: clamp(36px,4.5vw,64px);         /* content → closing note   */
}

.sec{ padding:clamp(76px,10vw,148px) clamp(20px,5vw,64px) }
.sec--top{ padding-top:clamp(56px,7vw,104px) }

.kick{ margin-bottom:var(--sp-eyebrow) }
.big{ text-wrap:balance }
.lede{ margin-top:var(--sp-lede) }

/* anything that follows the headline block gets real air */
.big + .art, .big + .fun, .big + .br, .big + .roles, .big + .plist, .big + .flow,
.big + .vgrid, .big + .cust, .big + .points, .big + .stats,
.lede + .art, .lede + .br, .lede + .roles, .lede + .plist, .lede + .flow,
.lede + .vgrid, .lede + .cust, .lede + .points, .lede + .stats{ margin-top:var(--sp-content) }

/* the closing line under a grid */
.br + .lede, .roles + .lede, .plist + .lede, .vgrid + .lede, .flow + .lede,
.cust + .lede, .points + .lede, .fun + .lede, .stats + .lede{ margin-top:var(--sp-note) }

.sec__in > .pill{ margin-top:clamp(32px,3.5vw,48px) }

/* ── cards breathe ──────────────────────────────────────────────────── */
.br__c, .role, .vcard, .cust__i, .pcard{ padding:clamp(28px,2.6vw,40px) }
.br__i{ margin-bottom:26px } .br__i svg{ width:28px; height:28px }
.br__chip{ padding:10px 18px; line-height:1.3; text-wrap:balance }
.br__c p{ margin-top:22px; line-height:1.55 }
.br__tags{ margin-top:28px; gap:8px }
.br__tags span{ padding:9px 15px }

.role__i{ margin-bottom:24px } .role__i svg{ width:26px; height:26px }
.role > b{ margin-bottom:26px }
.role__l{ margin-bottom:8px }
.role__was{ margin-bottom:26px; line-height:1.55 }
.role__now{ line-height:1.55 }



.vcard p{ margin-top:14px }
.points{ gap:clamp(28px,3.5vw,56px) }
.point p{ margin-top:12px }
.fun{ margin-top:0 } .fun__s{ padding:26px } .fun__a{ padding:14px 0 }
.stats{ gap:clamp(32px,6vw,88px) }

/* ── hero: size the headline against the hero itself, so it always fits ── */
.hero{ container-type:inline-size }
.hero__in{ width:min(680px,62cqw); max-width:100% }
.hero__in h1{ font-size:clamp(26px,4.6cqw,56px) }
.hero__in p{ margin-top:clamp(16px,1.6cqw,24px) }
.hero__punch{ width:min(680px,62cqw); max-width:calc(100% - 2*clamp(28px,4vw,52px));
              font-size:clamp(26px,4.6cqw,56px) }
@media (max-width:760px){ .hero__in,.hero__punch{ width:100% } }

/* ── hero: more room around the copy on narrow windows ──────────────── */
.hero{ padding:clamp(26px,5.5cqw,60px) }
.hero__in p{ max-width:min(42ch,90%) }
.hero__punch{ left:clamp(26px,5.5cqw,60px); bottom:clamp(26px,5.5cqw,60px) }
@media (max-width:760px){
  .hero__in,.hero__punch{ width:calc(100% - 2*clamp(26px,5.5cqw,60px)) }
  .hero__chat{ top:clamp(20px,5cqw,40px); right:clamp(20px,5cqw,40px) }
}

/* ── flow: customer → Captain → your systems → your team ────────────── */
.sec__in--full{ max-width:1280px }
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--pd2); text-align:left;
       align-items:stretch }
.flow__col{ display:flex; flex-flow:column; min-width:0 }
.flow__h{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-muted);
          margin-bottom:14px }
.flow__h em{ font-style:normal; color:var(--accent) }
.flow__h--accent{ color:var(--accent) }

.flow__card{ flex:1; background:var(--grey); border-radius:var(--br2);
             padding:clamp(24px,2.2vw,34px); display:flex; flex-flow:column; gap:20px }
.flow__col--captain .flow__card{ background:var(--accent-soft); align-items:flex-start }

.chip{ width:clamp(84px,7.5vw,108px); height:auto }
.flow__lines{ display:flex; flex-flow:column; gap:10px; color:var(--accent); line-height:1.4 }

.flow__ico{ display:flex; color:var(--fg) } .flow__ico svg{ width:26px; height:26px }
.flow__list{ display:flex; flex-flow:column; gap:12px; line-height:1.4 }
.flow__list li{ color:var(--fg) }
.flow__list--icons{ gap:16px }
.flow__list--icons li{ display:flex; align-items:center; gap:12px }
.flow__list--icons span{ display:flex; flex:0 0 auto; color:var(--accent) }
.flow__list--icons svg{ width:20px; height:20px }

@media (max-width:1080px){ .flow{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .flow{ grid-template-columns:1fr } }

.pill--dark{ background:var(--fg); color:#fff }
.pill--dark:hover{ background:#000 }

/* ── careers ────────────────────────────────────────────────────────── */
.kick--gap{ margin-top:clamp(44px,5vw,72px) }
.jobs{ display:flex; flex-flow:column }
.job{ display:grid; grid-template-columns:1fr auto; gap:4px 20px; align-items:center;
      padding:26px 0; border-top:1px solid var(--rule); text-align:left; width:100%;
      transition:opacity .3s }
.job:last-child{ border-bottom:1px solid var(--rule) }
.job b{ font-size:clamp(18px,1.7vw,24px); font-weight:500; letter-spacing:-.01em }
.job span{ grid-column:1; color:var(--fg-muted) }
.job em{ grid-column:2; grid-row:1/3; font-style:normal; color:var(--accent) }
a.job:hover b{ color:var(--accent) }
.job--closed{ opacity:.45 } .job--closed em{ color:var(--fg-muted) }

.stack-tree{ display:flex; flex-flow:column; text-align:left }
.stack-row{ display:grid; grid-template-columns:110px 1fr; gap:20px; align-items:baseline;
            padding:16px 0; border-top:1px solid var(--rule) }
.stack-row:last-child{ border-bottom:1px solid var(--rule) }
.stack-row span{ color:var(--fg-muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase }
.stack-row b{ font-weight:400; line-height:1.5 }
@media (max-width:620px){ .stack-row{ grid-template-columns:1fr; gap:6px } }

/* ── about photo ────────────────────────────────────────────────────── */
.photo{ margin:0; border-radius:var(--br); overflow:hidden; position:relative }
.photo img{ width:100%; height:auto; display:block; filter:grayscale(1) contrast(1.06) }
.photo figcaption{ padding:16px 4px 0; color:var(--fg-muted); font-size:12.5px; text-align:center }

/* the rail head without a clock */
.rail__mid{ row-gap:0 }

/* a short jolt on the frame he goes */
@keyframes blast{
  0%{ transform:none } 18%{ transform:translate3d(-5px,3px,0) scale(1.008) }
  38%{ transform:translate3d(4px,-3px,0) scale(1.006) }
  60%{ transform:translate3d(-3px,-2px,0) scale(1.004) }
  80%{ transform:translate3d(2px,1px,0) } 100%{ transform:none }
}
.hero.is-blast .hero__vid{ animation:blast .5s var(--ease) }
@media (prefers-reduced-motion:reduce){ .hero.is-blast .hero__vid{ animation:none } }

/* ════════════════════════════════════════════════════════════════════
   Calm pass — orange is an accent, not a surface.
   Solid orange is reserved for one thing per screen: the primary action.
   Everywhere else it becomes a soft tint, a rule, or just coloured text.
   ════════════════════════════════════════════════════════════════════ */

/* rail: the current section is marked by a rule and a tinted icon,
   not by flooding the whole card */
.deck__inner.is-pinned,
.deck__inner.is-current,
.deck__inner.is-pinned:hover,
.deck__inner.is-current:hover{ background:#fff; color:var(--fg);
  box-shadow:inset 0 0 0 1px var(--rule), inset 3px 0 0 var(--accent) }
.is-pinned .deck__meta,.is-current .deck__meta{ color:var(--accent) }
.is-pinned .deck__txt p,.is-current .deck__txt p{ color:var(--fg-muted) }
.is-pinned .deck__ico,.is-current .deck__ico{ background:var(--accent-soft); color:var(--accent) }
.deck__ico{ background:#fff; color:var(--fg-muted) }
.deck__inner{ background:var(--grey) }
.deck__inner:hover{ background:#ededf0 }

/* the three chips read as labels, not as three orange bars */
.br__chip{ background:var(--accent-soft); color:var(--accent);
           box-shadow:inset 0 0 0 1px rgba(255,68,0,.18) }

/* before / after: the "with Captain" side is a tint with orange type */
.ba__c--after{ background:var(--accent-soft); color:var(--fg) }
.ba__c--after .ba__l{ color:var(--accent); opacity:1 }
.ba__c--after p{ color:var(--fg) }
.ba__c--after p + p{ border-top-color:rgba(255,68,0,.16) }

/* the funnel's closing number: tint, orange figure */
.fun__s--out{ background:var(--accent-soft); color:var(--accent) }
.fun__s--out span{ color:var(--accent); opacity:.75 }

/* transcripts: Captain's side is a tint, so a long thread stays readable */
.tr__m.out{ background:var(--accent-soft); color:#8a2a08 }

/* form chips */
.pick input:checked + span{ background:var(--accent-soft); border-color:rgba(255,68,0,.35); color:var(--accent) }

/* legacy solid blocks */
.chan__one,.sys__cap{ background:var(--accent-soft); color:var(--accent) }
.sys__cap .mark{ filter:none }

/* module cards are descriptive now — not links */
.pcard{ cursor:default }
.pcard:hover{ background:var(--grey) }
.pcard__i{ display:flex; color:var(--accent); margin:0 0 22px } .pcard__i svg{ width:26px; height:26px }

/* ════════════════════════════════════════════════════════════════════
   Rail, rebuilt: small action on top, nav, logo pinned to the bottom
   ════════════════════════════════════════════════════════════════════ */
.rail__head{ display:flex; flex-flow:column; align-items:center; justify-content:center;
             gap:44px; text-align:center; padding:0 var(--pd2);
             min-height:calc(100svh - var(--pd2)*2) }
.rail__mid{ display:none }

.pill--sm{ height:34px; padding:0 14px; font-size:13px; gap:7px }
.pill--sm .mark{ width:16px; height:16px }

.rail__nav{ display:flex; flex-flow:column; align-items:center; gap:2px; width:100% }
.rail__nav a{ display:flex; align-items:center; gap:9px; padding:7px 14px 7px 0;
              color:var(--fg-muted); background:none; box-shadow:none; transition:color .25s }
.rail__nav a::before{ content:''; width:5px; height:5px; border-radius:50%;
                      background:transparent; flex:0 0 auto; transition:background-color .25s }
.rail__nav a:hover{ color:var(--fg) }
.rail__nav a.is-current{ color:var(--fg) }
.rail__nav a.is-current::before{ background:var(--accent) }

@media (max-width:656px){
  .rail__head{ min-height:0 }
  .rail__nav{ margin:20px 0 } 
}

/* rail: logo → menu → button */
.rail__head > .logo{ margin:0 }
.rail__head > .logo .logo__img{ width:140px }



/* ── the closing line: centred, quieter, and it holds ───────────────── */
.hero__punch{
  position:absolute; inset:0; left:0; bottom:0;
  display:flex; align-items:center; justify-content:center;
  width:auto; max-width:none; padding:0 clamp(24px,6cqw,64px);
  text-align:center; pointer-events:none;
  font-size:clamp(18px,2.6cqw,34px); line-height:1.2; letter-spacing:-.012em; font-weight:500;
  opacity:0; transform:translateY(10px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  text-shadow:0 2px 40px rgba(0,0,0,.55);
}
.hero__punch.on{ opacity:1; transform:none }
@media (max-width:1100px){ .hero__punch{ width:auto } }
@media (max-width:760px){ .hero__punch{ width:auto; right:0 } }

/* ════════════════════════════════════════════════════════════════════
   Mobile — last word. The rail stops being a column and becomes a
   plain top bar; everything below reads as one scroll.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:656px){
  .rail{ flex:none; width:auto; align-self:stretch; position:static;
         max-height:none; overflow:visible; padding:var(--pd2) var(--pd2) 0 }
  .rail__head{ min-height:0; display:grid; gap:12px; padding:0; text-align:left;
               grid-template-columns:1fr auto; align-items:center }
  .rail__head > .logo{ grid-column:1; grid-row:1; margin:0 }
  .rail__head > .logo .logo__img{ width:114px }
  .rail__cta{ grid-column:2; grid-row:1; justify-self:end }
  .rail__nav{ grid-column:1/-1; grid-row:2; flex-flow:row; align-items:center; justify-content:flex-start;
              gap:2px; width:auto; overflow-x:auto; scrollbar-width:none;
              border-bottom:1px solid var(--rule) }
  .rail__nav::-webkit-scrollbar{ display:none }
  .rail__nav a{ padding:6px 12px 12px 0; white-space:nowrap; gap:6px }
  .rail__back{ display:none }
  .content{ width:100%; min-width:0; padding:var(--pd2) }

  /* hero: a phone does not need 84svh of video */
  .hero{ min-height:calc(60svh + 50px); padding:clamp(24px,7cqw,34px) }
  .hero__in{ width:100% }
  .hero__in h1{ font-size:clamp(26px,7.4vw,36px) }
  .hero__in p{ font-size:15px; margin-top:12px; max-width:none }
  .hero{ flex-flow:column; justify-content:flex-end; align-items:stretch }
  .hero__chat{ position:absolute; top:16px; right:16px; left:auto; width:76% }
  .cb{ font-size:12.5px; max-width:88% }
  .hero__chat .cb--emoji{ font-size:34px }
  .hero__punch{ font-size:clamp(17px,5.2vw,24px); padding:0 22px }

  /* sections: tighter but still airy */
  .sec{ padding:56px 20px } .sec--top{ padding-top:36px }
  .big{ font-size:clamp(26px,7.2vw,34px) }
  .lede{ font-size:16px }
  :root{ --sp-content:40px; --sp-note:32px; --sp-lede:16px }

  /* everything that was a row becomes a column */
  .br, .roles, .plist, .vgrid, .cust, .points, .flow, .steps, .ba, .grid-2, .demo{ grid-template-columns:1fr }
  .flow__card{ padding:22px }
  .br__c, .role, .vcard, .cust__i, .pcard{ padding:24px }
  .stats{ gap:28px } .stat b{ font-size:40px }
  .fun{ max-width:none }
  .art{ margin-top:32px } .art--wide{ max-width:none }
  .job{ grid-template-columns:1fr auto; padding:20px 0 }
  .job b{ font-size:18px }
  .pnav{ flex-flow:column; align-items:stretch }
  .pnav .pill{ max-width:none; justify-content:center }
  .photo figcaption{ text-align:left }
  .demo__form{ padding:20px }
}

/* ── headline tracking, a touch tighter ─────────────────────────────── */
.big, .hero__in h1, .hero__punch, .stat b, .fun__s b{ letter-spacing:-.032em }

/* headlines wrap themselves — no hand-placed breaks on the Russian site */
.big, .hero__in h1, .hero__punch{ text-wrap:balance }

/* ── the case figures sit in one row, not 2 + 1 ─────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,48px); align-items:start }
.stats .stat{ min-width:0 }
.stat b{ font-size:clamp(34px,4.4vw,60px) }
@media (max-width:640px){ .stats{ grid-template-columns:1fr; gap:28px } }

/* ── hero copy can never reach the edge ─────────────────────────────── */
.hero__in{ width:min(680px,62cqw); max-width:100% }
@media (max-width:760px){
  .hero{ padding:clamp(24px,7cqw,34px) }
  .hero__in{ width:100% }
  .hero__in h1{ font-size:clamp(22px,6.4cqw,34px) }
  .hero__in p{ font-size:clamp(13px,2.6cqw,16px); margin-top:12px }
  .hero__chat{ width:min(300px,66%); top:14px; right:14px }
  .cb{ font-size:12px; padding:8px 11px 6px }
  .hero__chat .cb--emoji{ font-size:30px }
}

/* ════════════════════════════════════════════════════════════════════
   Closing section — heading across the top, then device + features
   ════════════════════════════════════════════════════════════════════ */
.app__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px);
            align-items:center; margin-top:var(--sp-content) }

.app__art{ display:flex; align-items:center; justify-content:center }
.appvid{ display:block; width:auto; height:min(70svh,630px); max-width:100%; background:var(--grey) }

.app__points{ display:flex; flex-flow:column; text-align:left }
.app__point{ padding:22px 0; border-top:1px solid var(--rule) }
.app__point:last-child{ border-bottom:1px solid var(--rule) }
.app__point b{ display:block; font-size:clamp(17px,1.5vw,21px); font-weight:500; letter-spacing:-.016em }
.app__point p{ color:var(--fg-muted); margin-top:7px; line-height:1.5 }

@media (max-width:900px){
  /* one column, phone straight under the heading, features below it */
  .app__grid{ grid-template-columns:1fr; gap:36px }
  .app__art{ order:1 } .app__points{ order:2 }
  .appvid{ height:auto; width:min(76%,320px) }
}
@media (prefers-reduced-motion:reduce){ .appvid{ display:none } }