/* FlowStructAI site. Dark, teal, Sora display, Inter body, mono labels. Left-aligned 1180px column. */
:root{
  --bg:#0A0D0C; --bg2:#0E1412; --card:#121916; --line:#22302B; --line2:#2E3F39;
  --fg:#F1F4F2; --fg2:#BFCBC7; --mute:#8E9A96; --teal:#00C9A7; --teal2:#0F2E27; --teal3:#00806B;
  --display:'Sora',Arial,sans-serif; --body:'Inter',Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:inherit}
img,video{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.025em}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
section{padding-block:104px}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.h2{font-size:clamp(34px,4.6vw,58px);font-weight:700;line-height:1.05;max-width:17ch}
.h2 em{font-style:normal;color:var(--teal)}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--fg2);max-width:58ch}
.head{display:flex;flex-direction:column;gap:18px;margin-bottom:48px}
.head.row{flex-direction:row;align-items:end;justify-content:space-between;gap:40px}
.head.row .lead{max-width:34ch}
@media(max-width:900px){.head.row{flex-direction:column;align-items:start}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;border:1px solid var(--line2);background:transparent;font-weight:600;font-size:15px;text-decoration:none;transition:background .15s,border-color .15s;white-space:nowrap}
.btn:hover{background:var(--card);border-color:var(--teal3)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#06211B}
.btn.primary:hover{background:#19D9B8}
.pill{display:inline-flex;white-space:nowrap;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line2);color:var(--fg2)}
.pill.live{color:#06211B;background:var(--teal);border-color:var(--teal)}
.pill.wait{color:#F0C36B;border-color:#8A6A24}
.pill.early{color:var(--teal);border-color:var(--teal3)}
.pill.next{color:var(--mute)}

/* nav */
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:rgba(10,13,12,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:28px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;text-decoration:none}
.brand img{width:32px;height:32px;border-radius:8px}
.brand em{font-style:normal}
.brand em span{color:var(--teal)}
.links{display:flex;gap:26px;margin-left:16px;font-size:15px;color:var(--fg2)}
.links a{text-decoration:none}
.links a:hover,.links a[aria-current]{color:var(--fg)}
nav .btn{padding:10px 16px}
nav .sp{margin-left:auto}
@media(max-width:900px){.links{display:none}nav .sp{display:none}nav .btn.primary{margin-left:auto}}

/* hero */
.hero{position:relative;padding-block:120px 0;overflow:hidden;isolation:isolate}
.hero .bgv{position:absolute;inset:0;z-index:-2}
.hero .bgv video,.hero .bgv img{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero .fade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,13,12,.55) 0%,rgba(10,13,12,.35) 40%,var(--bg) 100%)}
.hero h1{font-size:clamp(44px,6.4vw,88px);font-weight:800;line-height:.98;letter-spacing:-.04em;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero .copy{display:flex;flex-direction:column;gap:28px;max-width:720px}
.hero .lead{max-width:44ch;font-size:clamp(18px,1.7vw,22px)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .proof{display:flex;gap:36px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--mute);text-transform:uppercase}
.hero .proof b{color:var(--fg);font-weight:600}

/* desktop + phone composition */
/* desktop + phone composition */
.browser{border-radius:18px 18px 0 0;border:1px solid var(--line2);border-bottom:0;background:#0C1210;box-shadow:0 -10px 80px rgba(0,201,167,.08),0 40px 100px rgba(0,0,0,.7);position:relative}
.browser .bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:#121916;border-radius:18px 18px 0 0}
.browser .bar i{width:11px;height:11px;border-radius:50%;background:#2E3F39;display:block}
.browser .bar i:nth-child(1){background:#E5484D}.browser .bar i:nth-child(2){background:#E08A00}.browser .bar i:nth-child(3){background:#1F9D55}
.browser .bar span{margin-left:10px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;background:#0A0D0C;border:1px solid var(--line);border-radius:8px;padding:5px 12px;font-family:var(--mono);font-size:12px;color:var(--mute)}
.browser img{width:100%;height:auto}
.float{position:absolute;z-index:3;background:#fff;color:#111;border-radius:14px;padding:12px 14px;box-shadow:0 24px 60px rgba(0,0,0,.55);border-top:5px solid var(--c);width:250px;font-size:12.5px;line-height:1.35}
.float .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#777}
.float .v{font-family:var(--display);font-size:22px;font-weight:700;margin:3px 0 6px;color:var(--c)}
.float .kv{display:flex;justify-content:space-between;gap:10px;color:#444;font-size:12px}
.float .kv b{color:#111;font-weight:600}
.compo{position:relative;max-width:980px;margin:88px 0 0 30px}
.compo .phone{position:absolute;right:-235px;bottom:-10px;z-index:3;width:290px;filter:drop-shadow(0 30px 50px rgba(0,0,0,.7))}
.compo .float{width:218px;padding:10px 12px;font-size:12px}
.compo .float .v{font-size:19px}
.compo .float.l{right:70px;top:-54px}
.compo .float.r{left:-90px;bottom:70px}
.browser{overflow:visible}
.browser .clip{overflow:hidden}
@media(max-width:1500px){.compo{max-width:900px;margin-left:20px}.compo .phone{right:-200px}.compo .float.l{right:100px}.compo .float.r{left:-60px}}
@media(max-width:1280px){.compo{max-width:780px;margin-left:10px}.compo .phone{right:-170px;width:260px}.compo .float.l{right:120px}.compo .float.r{left:-30px}}
@media(max-width:1100px){.compo{max-width:none;margin-left:0}.compo .phone{position:relative;right:auto;margin:28px auto 0;filter:none}.float{display:none}}

/* phone */
.phone{width:300px;background:#0e1011;border-radius:50px;padding:11px;box-shadow:0 0 0 2px #2c2f32,0 0 0 4px #0a0b0c,0 40px 90px rgba(0,0,0,.6);flex:none;position:relative}
.phone::before{content:'';position:absolute;inset:3px;border-radius:47px;border:1.5px solid rgba(255,255,255,.08);pointer-events:none}
.phone.big{width:340px;border-radius:56px}
.phone.big::before{border-radius:53px}
.scr{background:#fff;color:#111;border-radius:38px;overflow:hidden;font-size:12.5px;line-height:1.35;display:flex;flex-direction:column;height:600px;position:relative}
.phone.big .scr{height:660px;border-radius:44px;font-size:13.5px}
.scr .di{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:92px;height:28px;background:#000;border-radius:15px;z-index:2}
.scr .sb{display:flex;justify-content:space-between;align-items:center;padding:15px 24px 0;font-weight:600;font-size:14px;letter-spacing:-.01em}
.scr .sb .st{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700}
.scr .sb svg{display:block}
.scr .hi{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:110px;height:5px;border-radius:3px;background:#111;z-index:2}
.scr .hd{text-align:center;padding:8px 12px 10px;border-bottom:1px solid #e6e6ea;background:#f7f7f9;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
.scr .hd .bk{position:absolute;left:14px;top:14px;background:#e8e8ed;border-radius:999px;padding:2px 10px;font-size:12px;color:#111}
.scr .avs{display:flex}
.scr .avs .av{margin-left:-7px;border:2px solid #f7f7f9;width:30px;height:30px}
.scr .avs .av:first-child{margin-left:0}
.scr .gn{font-size:12.5px;font-weight:600;color:#111}
.scr .gs{font-size:10.5px;color:#777}
.av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;background:var(--c,#00A88C)}
.av svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.av img{width:100%;height:100%;border-radius:50%}
.av.scout{box-shadow:inset 0 0 0 2px var(--teal);color:var(--teal)}
.body{padding:12px 12px 10px;display:flex;flex-direction:column;gap:8px;flex:1;overflow:hidden;justify-content:flex-end}
.stamp{text-align:center;color:#8a8a8e;font-size:10.5px;margin:2px 0 4px}
.row{display:flex;gap:7px;align-items:flex-end}
.row.out{justify-content:flex-end}
.row .av{width:24px;height:24px}
.row .av svg{width:12px;height:12px}
.row .av.sp{background:transparent;box-shadow:none}
.nm{font-size:10.5px;font-weight:600;margin:0 0 3px 12px;color:var(--c)}
.b{background:#e9e9eb;color:#111;border-radius:18px;padding:8px 12px;max-width:220px}
.b.me{background:#0a84ff;color:#fff}
.dl{text-align:right;font-size:10px;color:#8a8a8e;margin:-4px 6px 0 0}
.cardm{background:#fff;border:1px solid #e3e3e7;border-top:5px solid var(--c);border-radius:14px;padding:10px 12px;max-width:232px;box-shadow:0 3px 10px rgba(0,0,0,.07)}
.cardm .t{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#777}
.cardm .v{font-family:var(--display);font-weight:700;font-size:18px;margin:2px 0 5px;color:var(--c)}
.cardm .kv{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:#444;padding:2px 0}
.cardm .kv b{color:#111;font-weight:600;text-align:right}
.chips{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.chip{border:1px solid #d6d6db;border-radius:999px;padding:4px 10px;font-size:11px;color:#111;background:#fff}
.chip.on{background:#00A88C;border-color:#00A88C;color:#fff}
.pr{height:5px;border-radius:3px;background:#e4e4e8;margin:5px 0 3px;overflow:hidden}
.pr i{display:block;height:100%;background:var(--c)}
.typing{display:inline-flex;gap:4px;padding:10px 12px;background:#e9e9eb;border-radius:18px}
.typing i{width:6px;height:6px;border-radius:50%;background:#9a9a9e;animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes tp{0%,60%,100%{opacity:.35}30%{opacity:1}}
.ib{margin:4px 12px 20px;display:flex;gap:8px;align-items:center}
.ib span{flex:1;border:1px solid #d8d8dd;border-radius:999px;padding:7px 14px;color:#9a9a9e;font-size:12px}
.ib b{width:30px;height:30px;border-radius:50%;background:#e8e8ed;display:flex;align-items:center;justify-content:center;color:#555;font-weight:500}

/* basics */
.basics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.basic{display:flex;flex-direction:column;gap:14px;min-width:0;text-decoration:none;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);transition:border-color .15s}
.basic:hover{border-color:var(--teal3)}
.basic .im{aspect-ratio:16/10;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.basic .im img{width:100%;height:100%;object-fit:cover;object-position:left top}
.basic .tx{padding:4px 22px 24px;display:flex;flex-direction:column;gap:8px}
.basic b{font-family:var(--display);font-size:21px;font-weight:700}
.basic p{color:var(--fg2);font-size:15px}
.basic .go{color:var(--teal);font-weight:600;font-size:14px;margin-top:4px}
@media(max-width:900px){.basics{grid-template-columns:1fr}}

/* team */
.team{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:start}
.alist{display:flex;flex-direction:column;gap:8px}
.arow{display:flex;align-items:center;gap:16px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;transition:border-color .15s,background .15s;min-width:0}
.arow:hover{border-color:var(--line2)}
.arow[aria-selected=true]{border-color:var(--c);background:var(--teal2)}
.arow .av{width:44px;height:44px}
.arow .av svg{width:20px;height:20px}
.arow .tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.arow b{font-family:var(--display);font-size:19px;font-weight:700}
.arow span{color:var(--mute);font-size:14.5px}
.pstage{position:sticky;top:100px;display:flex;flex-direction:column;align-items:center;gap:22px}
 .pstage .glow{position:absolute;inset:40px 0 auto;height:560px;filter:blur(90px);background:var(--c);opacity:.22;z-index:0;pointer-events:none;transition:background .4s}
.pstage .phone{position:relative;z-index:1}
.pstage .cap{position:relative;z-index:1;text-align:center;color:var(--fg2);font-size:15px;max-width:40ch}
.pstage .cap b{color:var(--fg);font-family:var(--display)}
@media(max-width:900px){.team{grid-template-columns:1fr}.pstage{position:static}}

/* autonomy */
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lvl{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.lvl.on{border-color:var(--teal)}
.lvl .im{aspect-ratio:16/9;overflow:hidden;position:relative}
.lvl .im img{width:100%;height:100%;object-fit:cover}
.lvl .im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,var(--card) 100%)}
.lvl .in{padding:14px 26px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.lvl .top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12.5px;color:var(--mute)}
.lvl h3{font-size:32px;font-weight:700}
.lvl p{color:var(--fg2);font-size:15.5px}
.lvl ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;color:var(--fg2);font-size:14.5px}
.lvl li::before{content:"· ";color:var(--teal)}
.lvl .more{display:none;border-top:1px solid var(--line);padding-top:14px;display:none;flex-direction:column;gap:10px}
.lvl[aria-expanded=true] .more{display:flex}
.lvl .more .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.lvl .act{display:flex;gap:10px;align-items:center;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.lvl .tg{background:none;border:0;padding:0;color:var(--teal);font-weight:600;font-size:14px}
@media(max-width:900px){.levels{grid-template-columns:1fr}}
.next{margin-top:18px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.nx{border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px;min-width:0;background:var(--bg2)}
.nx b{font-family:var(--display);font-size:17px}
.nx span{color:var(--mute);font-size:13.5px}
.nx .pill{align-self:flex-start;margin-bottom:4px}
@media(max-width:900px){.next{grid-template-columns:1fr 1fr}}

/* film */
.film{background:var(--bg2);border-block:1px solid var(--line)}
.film video{width:100%;border-radius:18px;border:1px solid var(--line2);background:#000}

/* cta */
.cta2{background:linear-gradient(180deg,var(--teal2),var(--bg));border-top:1px solid var(--line)}
.cta2 .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
form{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line2);border-radius:18px;padding:26px}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute);font-weight:600;min-width:0}
input,select{width:100%;min-width:0;font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:12px 14px;font-size:15px}
input:focus,select:focus{outline:2px solid var(--teal);outline-offset:0;border-color:var(--teal)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ok{display:none;color:var(--teal);font-weight:600}
form.sent .ok{display:block}
.contact{color:var(--fg2);font-size:15px;display:flex;flex-direction:column;gap:6px}
.contact code{font-family:var(--body);color:var(--fg);user-select:all;background:var(--bg);padding:3px 8px;border-radius:6px;border:1px solid var(--line)}
@media(max-width:900px){.cta2 .wrap{grid-template-columns:1fr}.two{grid-template-columns:1fr}}

footer{padding-block:64px 32px;border-top:1px solid var(--line);color:var(--mute);font-size:14px}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:32px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.fgrid .col{display:flex;flex-direction:column;gap:10px;min-width:0}
.fgrid .col b{font-family:var(--display);color:var(--fg);font-size:14px;font-weight:600;margin-bottom:4px}
.fgrid a{text-decoration:none;color:var(--fg2)}
.fgrid a:hover{color:var(--fg)}
.fgrid .about{display:flex;flex-direction:column;gap:14px;max-width:34ch}
.fgrid .about p{color:var(--mute);font-size:14px}
.soc{display:flex;gap:10px}
.soc a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--fg2)}
.soc a:hover{border-color:var(--teal);color:var(--teal)}
.soc svg{width:17px;height:17px;fill:currentColor}
.fbot{display:flex;flex-wrap:wrap;gap:12px 32px;padding-top:24px;align-items:center}
.fbot .sp{margin-left:auto}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.fgrid .about{grid-column:1/-1}}

/* product page */
.ptabs{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.tablist{display:flex;gap:8px;flex-wrap:wrap}
.tab{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:600;font-size:15px;color:var(--fg2)}
.tab[aria-selected=true]{background:var(--teal);border-color:var(--teal);color:#06211B}
.tabshot{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.tabshot .tx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;align-items:start}
.tabshot h3{font-size:30px;font-weight:700}
.tabshot p{color:var(--fg2);font-size:17px;max-width:62ch}
@media(max-width:900px){.tabshot .tx{grid-template-columns:1fr}}
.how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.hstep{border-top:2px solid var(--line2);padding-top:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.hstep::before{counter-increment:s;content:"0" counter(s);font-family:var(--mono);color:var(--teal);font-size:13px}
.hstep b{font-family:var(--display);font-size:19px;font-weight:600}
.hstep p{color:var(--fg2);font-size:15px}
@media(max-width:900px){.how{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.how{grid-template-columns:1fr}}
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.who div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:10px;min-width:0}
.who b{font-family:var(--display);font-size:20px;font-weight:700}
.who p{color:var(--fg2);font-size:15.5px}
.who ul{margin:0;padding-left:18px;color:var(--fg2);font-size:15px;display:flex;flex-direction:column;gap:4px}
@media(max-width:900px){.who{grid-template-columns:1fr}}
.integr{display:flex;gap:10px;flex-wrap:wrap}
.integr span{border:1px solid var(--line2);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--fg2)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* connect */
.conn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cn{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cn .ic{width:44px;height:44px;border-radius:12px;background:var(--teal2);color:var(--teal);display:flex;align-items:center;justify-content:center}
.cn .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cn b{font-family:var(--display);font-size:20px;font-weight:700}
.cn p{color:var(--fg2);font-size:15px}
.cn .apps{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.cn .apps span{border:1px solid var(--line2);border-radius:10px;padding:7px 12px;font-size:13.5px;font-weight:600;color:var(--fg);background:var(--bg)}
.cn .apps span.soon{color:var(--mute);font-weight:500}
@media(max-width:900px){.conn{grid-template-columns:1fr}}
.flow{margin-top:72px;display:grid;grid-template-columns:200px 1fr 300px 1fr 200px;align-items:center;gap:0}
.flow .io{display:flex;flex-direction:column;gap:8px}
.flow .io span{border:1px solid var(--line2);border-radius:10px;padding:9px 12px;font-size:13.5px;font-weight:600;background:var(--card);display:flex;align-items:center;gap:8px;white-space:nowrap}
.flow .io span i{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none}
.flow .io.out span i{background:#3B6FE0}
.flow .core{border:1px solid var(--teal);border-radius:24px;background:linear-gradient(160deg,#10362E,#0B1A16);padding:28px 24px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;box-shadow:0 0 80px rgba(0,201,167,.15)}
.flow .core img{width:56px;height:56px;border-radius:14px}
.flow .core b{font-family:var(--display);font-size:22px}
.flow .core small{color:var(--fg2);font-size:13px;line-height:1.4}
.flow .core .ags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.flow .core .ags i{width:12px;height:12px;border-radius:50%;display:block}
.flow svg{width:100%;height:100%;display:block;overflow:visible}
.flow .wire{height:100%;min-height:260px}
.flow path{fill:none;stroke:var(--line2);stroke-width:2}
.flow path.dot{stroke:var(--teal);stroke-dasharray:4 80;stroke-linecap:round;animation:dash 2.4s linear infinite}
.flow .out path.dot{stroke:#3B6FE0}
@keyframes dash{to{stroke-dashoffset:-84}}
.flow .lab{display:grid;grid-template-columns:200px 1fr 300px 1fr 200px;margin-top:28px;grid-column:1/-1}
.flow .lab div{text-align:center}
.flow .lab b{font-family:var(--display);font-size:20px;display:block}
.flow .lab span{color:var(--mute);font-size:14px}
@media(max-width:1000px){.flow{grid-template-columns:1fr;gap:16px}.flow .wire{display:none}.flow .io{flex-direction:row;flex-wrap:wrap}.flow .lab{grid-template-columns:1fr 1fr 1fr}.flow .lab div:nth-child(2),.flow .lab div:nth-child(4){display:none}}
.pillars{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:18px;align-items:center;margin-top:72px}
.pl{border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--card);display:flex;flex-direction:column;gap:10px;min-width:0}
.pl.mid{border-color:var(--teal);background:linear-gradient(160deg,#10362E,#0D1915);padding:40px 32px;box-shadow:0 0 80px rgba(0,201,167,.12)}
.pl .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pl.mid .k{color:var(--teal)}
.pl b{font-family:var(--display);font-size:24px;font-weight:700}
.pl.mid b{font-size:30px}
.pl p{color:var(--fg2);font-size:15px}
.pl .apps{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pl .apps span{font-size:12.5px;color:var(--fg2);border:1px solid var(--line2);border-radius:999px;padding:4px 10px}
@media(max-width:900px){.pillars{grid-template-columns:1fr}}
/* live chat */
.body>*{opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.body>.show{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.body>*{opacity:1;transform:none}}
@media(min-width:1600px){body{font-size:18px}.wrap{max-width:1320px}}

/* ===== v7 ===== */
.hero{background:radial-gradient(ellipse 70% 60% at 85% 75%,#0F3A31 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 0% 0%,#0D2620 0%,transparent 70%),var(--bg);padding-bottom:40px}
.hero .grid-bg{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%)}
.hero h1{max-width:15ch}
.scr .ib .snd{width:30px;height:30px;border-radius:50%;background:#16554C;color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:14px}
.b.me{background:#16554C}
.scr .hd{background:#fff}
.body{background:#f4f6f5}
.b{background:#fff;border:1px solid #e3e7e5}
.typing{background:#fff;border:1px solid #e3e7e5}
.arow .chev{color:var(--mute);font-size:22px;line-height:1}
.arow[aria-selected=true] .chev{color:var(--teal)}
.levels{grid-template-columns:repeat(4,minmax(0,1fr))}
.lvl h3{font-size:26px}
@media(max-width:1200px){.levels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.levels{grid-template-columns:1fr}}
.next{grid-template-columns:repeat(4,minmax(0,1fr))}
a.nx{text-decoration:none;transition:border-color .15s}
a.nx:hover{border-color:var(--teal3)}
@media(max-width:900px){.next{grid-template-columns:1fr 1fr}}

/* integrations flow */
.flow2{position:relative;display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr) minmax(0,330px);gap:0;align-items:center;margin-top:8px}
.flow2 .wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.flow2 .wires path{fill:none;stroke:var(--line2);stroke-width:1.6}
.flow2 .wires path.dot{stroke:var(--teal);stroke-width:2.4;stroke-dasharray:5 120;stroke-linecap:round;animation:dash2 2.6s linear infinite}
.flow2 .wires path.dot.o{stroke:#5B8DEF}
@keyframes dash2{to{stroke-dashoffset:-125}}
.fcol{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.fk{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.src,.dst{background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.src .k,.dst .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.dst .k{color:#8FB0F5}
.src small{color:var(--mute);font-size:13px}
.dst b{font-size:14.5px;font-weight:600;color:var(--fg)}
.lg{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tile{height:46px;min-width:46px;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;padding:7px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.tile img{height:100%;width:auto;max-width:120px;object-fit:contain}
.tile.wide{padding:10px 12px}
.tile.wide img{height:22px}
.dst.fb .tile{align-self:flex-start}
.tile.ic{background:var(--teal2);box-shadow:none;border:1px solid var(--teal3);color:var(--teal);width:46px}
.tile.ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile svg.sheet{width:28px;height:28px;stroke:#1D7A46;fill:none;stroke-width:2}
.flow2 .core{position:relative;z-index:1;justify-self:center;width:min(100%,380px);margin:0 48px;border:1px solid var(--teal);border-radius:26px;background:linear-gradient(160deg,#10362E,#0B1A16);padding:30px 24px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;box-shadow:0 0 100px rgba(0,201,167,.18)}
.flow2 .core>img{width:60px;height:60px;border-radius:15px}
.flow2 .core>b{font-family:var(--display);font-size:24px}
.flow2 .core small{color:var(--fg2);font-size:13.5px;line-height:1.45;max-width:30ch}
.agrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 6px;margin-top:12px;width:100%}
.agrid .ag{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.agrid .av{width:36px;height:36px}
.agrid .av svg{width:17px;height:17px}
.agrid em{font-style:normal;font-size:11.5px;color:var(--fg2);white-space:nowrap}
.flab{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr) minmax(0,330px);margin-top:28px;text-align:center}
.flab b{font-family:var(--display);font-size:20px;display:block}
.flab span{color:var(--mute);font-size:14px}
@media(max-width:1000px){.flow2{grid-template-columns:1fr;gap:22px}.flow2 .wires{display:none}.flow2 .core{margin:0;justify-self:stretch;width:auto}.flab{grid-template-columns:1fr 1fr 1fr}}

/* form note */
form .ok{font-weight:500;color:var(--fg2);font-size:14.5px;line-height:1.6}
form .ok a{color:var(--teal)}
form .ok code{font-family:var(--body);color:var(--fg);user-select:all;background:var(--bg);padding:2px 8px;border-radius:6px;border:1px solid var(--line);word-break:break-all}
form .ok .copy{background:none;border:1px solid var(--line2);border-radius:999px;padding:2px 10px;font-size:12.5px;color:var(--teal);margin-left:4px}

/* simple pages */
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;align-items:start}
.doc .toc{position:sticky;top:100px;display:flex;flex-direction:column;gap:8px}
.doc .toc a{color:var(--fg2);text-decoration:none;font-size:15px}
.doc .toc a:hover{color:var(--teal)}
.doc article{display:flex;flex-direction:column;gap:64px}
.doc article section{padding:0;scroll-margin-top:100px;display:flex;flex-direction:column;gap:14px}
.doc h2{font-size:clamp(28px,3vw,38px);font-weight:700}
.doc p,.doc li{color:var(--fg2);font-size:16.5px;max-width:68ch}
.doc ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.doc .card2{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.doc .card2 b{font-family:var(--display);font-size:18px}
.doc .card2 span{color:var(--mute);font-size:13px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.doc .sw{display:flex;gap:12px;flex-wrap:wrap}
.doc .sw div{width:120px;border-radius:12px;overflow:hidden;border:1px solid var(--line2);font-family:var(--mono);font-size:12px;color:var(--fg2)}
.doc .sw i{display:block;height:64px}
.doc .sw small{display:block;padding:8px 10px}
@media(max-width:900px){.doc{grid-template-columns:1fr}.doc .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:14px}}
.hero h1{font-size:clamp(40px,5.2vw,76px);max-width:16ch}
.hero .compo{margin-top:72px}

/* ---- v8 ---- */
nav .btn.login{order:3}
@media(max-width:900px){nav .btn.login{display:inline-flex;padding:9px 13px}nav .wrap{gap:10px}}
.hero .bgv video{opacity:.42}
.hero .fade{background:linear-gradient(180deg,rgba(10,13,12,.62) 0%,rgba(10,13,12,.5) 45%,var(--bg) 100%)}
@media(max-width:900px){.hero .bgv,.hero .fade{display:none}}

/* phone, cover style */
.scr{background:#F2F4F3}
.scr .sb{background:#fff}
.scr .hd{flex-direction:row;align-items:center;text-align:left;gap:9px;padding:8px 12px 10px;background:#fff;border-bottom:1px solid #E4E8E6}
.scr .hd .bk{position:static;width:28px;height:28px;flex:none;border-radius:50%;background:#EEF1F0;display:grid;place-items:center;padding:0;font-size:19px;font-weight:600;line-height:1;color:#0C1513}
.scr .avs .av{width:26px;height:26px;margin-left:-8px;border:2px solid #fff}
.scr .avs .av svg{width:13px;height:13px}
.scr .ti{min-width:0}
.scr .gn{font-size:13.5px;font-weight:700;color:#0C1513;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr .gs{font-size:10.5px;color:#6B7A76;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone.big .scr .gn{font-size:14.5px}.phone.big .scr .gs{font-size:11.5px}
.scr .body{gap:9px;padding:12px 11px 10px}
.scr .stamp{font-weight:500;color:#8A9592}
.scr .row .av{width:26px;height:26px}
.scr .row .av svg{width:13px;height:13px}
.scr .nm{font-weight:600;font-size:10.5px;margin:0 0 3px 4px}
.scr .b{background:#fff;border:1px solid #E3E7E5;border-radius:16px;padding:8px 12px;color:#0C1513;max-width:214px}
.scr .b.me{background:#16554C;border-color:#16554C;color:#fff}
.scr .dl{color:#8A9592}
.scr .cardm{border:1px solid #E3E7E5;border-radius:16px;padding:10px 12px 10px 14px;max-width:226px;box-shadow:0 1px 2px rgba(12,21,19,.05);position:relative;overflow:hidden}
.scr .cardm::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.scr .cardm .t{font-family:var(--body);font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:#5B6A66}
.scr .cardm .v{font-size:17px;margin:1px 0 4px;color:#0C1513}
.scr .cardm .kv{font-size:11px;color:#5B6A66}
.scr .cardm .kv b{color:#0C1513}
.scr .pr{background:#E8ECEA}
.scr .chip{border-color:#D9DEDC;color:#0C1513;font-weight:500}
.scr .chip.on{background:#16554C;border-color:#16554C;color:#fff}
.scr .typing{background:#fff;border:1px solid #E3E7E5}
.scr .ib{padding:8px 11px 20px;margin:0;background:#F2F4F3;gap:7px}
.scr .ib b{width:30px;height:30px;background:#E8ECEA;color:#41504C;font-size:17px}
.scr .ib span{background:#fff;border-color:#D9DEDC;color:#9AA4A1;padding:7px 13px}

/* form status */
.ok{font-weight:500;color:var(--fg2);font-size:14.5px;line-height:1.5}
.ok.done{color:var(--fg)}.ok.done b{color:var(--teal);margin-right:4px}
.ok code{font-family:var(--mono);font-size:13px;color:var(--fg);user-select:all}
.ok .copy{margin-left:6px;font:inherit;font-size:13px;background:transparent;color:var(--teal);border:1px solid var(--line2);border-radius:999px;padding:3px 10px;cursor:pointer}
.ok a{color:var(--teal)}
form button[disabled]{opacity:.6;cursor:progress}

/* product tabs: text panels */
.txp{background:var(--card);border:1px solid var(--line2);border-radius:18px;padding:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.txp .pk{grid-column:1/-1;font-family:var(--display);font-size:15px;font-weight:600;color:var(--teal);margin:0}
.txp .pt{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line2);padding-top:16px}
.txp .pt b{font-family:var(--display);font-size:19px;font-weight:600}
.txp .pt span{color:var(--fg2);font-size:15.5px;line-height:1.55}
@media(max-width:900px){.txp{grid-template-columns:1fr;padding:22px}}

/* v9 nav: logo left, links centred, actions right */
nav .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:24px}
nav .links{margin:0;justify-self:center}
nav .acts{justify-self:end;display:flex;gap:10px;align-items:center}
nav .btn.login{order:0}
@media(max-width:900px){nav .wrap{grid-template-columns:minmax(0,1fr) auto}nav .acts{gap:8px}nav .acts .btn{padding:9px 13px}nav .btn.primary{margin-left:0}}
@media(max-width:400px){nav .brand em{display:none}}

/* v10 partners / clients / media strip */
.brands{padding-block:40px 44px;border-block:1px solid var(--line);background:var(--bg)}
.bgrid{display:grid;grid-template-columns:repeat(7,auto);justify-content:space-between;align-items:center;row-gap:18px}
.bgrid .bk{grid-row:1;font-size:13px;font-weight:500;color:var(--mute);letter-spacing:.01em}
.bgrid img{grid-row:2;height:var(--h);width:auto;max-width:180px;opacity:.72;transition:opacity .2s}
.bgrid img:hover{opacity:1}
@media(max-width:900px){.bgrid{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px}.bgrid .bk{flex-basis:100%;margin-top:10px}.bgrid .bk:first-child{margin-top:0}.bgrid img{height:calc(var(--h)*.78)}}

/* v11 chat: unshown and trimmed messages take no space */
.body{overflow:hidden}
.body>*:not(.show),.body>.gone{display:none}
.body>.show{animation:msgin .25s ease-out}
@keyframes msgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.body>.show{animation:none}}
.body{justify-content:flex-start}
.body::before{content:'';flex:1 1 auto}

/* v12 hero: designs centred, phone same size as the site team phone */
.compo{display:flex;justify-content:center;align-items:flex-end;max-width:none;margin:88px auto 0}
.compo .browser{flex:0 1 860px;min-width:0}
.compo .phone{position:relative;right:auto;bottom:-10px;flex:none;width:340px;margin-left:-110px}
.compo .float.l{right:150px;top:-54px}
.compo .float.r{left:-60px;bottom:70px}
@media(max-width:1280px){.compo .browser{flex-basis:740px}.compo .phone{margin-left:-90px}}
@media(max-width:1100px){.compo{flex-direction:column;align-items:center}.compo .browser{flex-basis:auto;width:100%}.compo .phone{margin:28px auto 0;bottom:0}}
@media(max-width:400px){.compo .phone{width:min(340px,100%)}}

/* v13 hero: bigger desktop, smaller phone, more of the robot video */
.compo{margin-top:150px}
.compo .browser{flex-basis:1010px}
.compo .phone{zoom:.8;margin-left:-150px;bottom:-12px}
.compo .float.l{right:90px;top:-58px}
.hero .bgv video{opacity:.62}
.hero .fade{background:linear-gradient(180deg,rgba(10,13,12,.5) 0%,rgba(10,13,12,.22) 38%,rgba(10,13,12,.35) 60%,var(--bg) 100%)}
@media(max-width:1280px){.compo .browser{flex-basis:820px}.compo .phone{margin-left:-120px}}
@media(max-width:1100px){.compo{margin-top:88px}.compo .phone{zoom:1;margin:28px auto 0}}

/* Mobile layout fixes */
@media(max-width:600px){
  .compo .browser{flex-basis:auto;height:auto}
  nav .wrap{height:64px;gap:7px;padding-left:12px;padding-right:12px}
  nav .brand{min-width:0;gap:7px;font-size:16px;letter-spacing:-.03em;white-space:nowrap}
  nav .brand em{display:inline}
  nav .brand img{width:30px;height:30px}
  nav .acts{gap:6px;min-width:0}
  nav .acts .btn{padding:8px 9px;font-size:13px;white-space:nowrap}
  nav .acts .btn.login{padding-inline:9px}
  nav .acts .btn.primary{padding-inline:11px}
  .fbot{flex-direction:column;align-items:flex-start;gap:8px}
  .fbot .sp{margin-left:0}
  .film video{display:block;aspect-ratio:16/9;height:auto;min-height:0;object-fit:cover;background:transparent}
}

@media(max-width:370px){
  nav .brand{font-size:15px}
  nav .brand img{width:28px;height:28px}
  nav .acts .btn{font-size:12px;padding-inline:7px}
}
.hero .fade{background:linear-gradient(90deg,rgba(10,13,12,.72) 0%,rgba(10,13,12,.35) 45%,rgba(10,13,12,0) 70%),linear-gradient(180deg,rgba(10,13,12,.45) 0%,rgba(10,13,12,.15) 38%,rgba(10,13,12,.35) 62%,var(--bg) 100%)}