/* SWOOP website — design system aligned with the SWOOP app (design system v2).
   Layout concept: dark-first "agent console" — wide editorial type over a blue glow,
   app screens in phone frames that follow the site theme, monospace tool calls as the signature detail. */
:root{
  --bg:#19191D; --bg-2:#1F1F24; --card:#242428; --card-2:#2B2B31; --line:#34343A; --line-2:#45454D;
  --ink:#F2F2F4; --sub:#A1A1A9; --mute:#7C7C85;
  --a1:#3D8FEA; --a2:#22C9A0; --acc:#6AAAF0; --acc-ink:#0E1A2B;
  --grad:linear-gradient(100deg,var(--a1),var(--a2));
  --glow-1:#1D5FD6; --glow-2:#12347A;
  --pos:#2EC27E; --neg:#F0555A; --warn:#F0B865;
  --glass:rgba(255,255,255,.06); --glass-line:rgba(255,255,255,.14);
  --shadow:0 30px 80px -30px rgba(0,0,0,.7);
  --show-d:block; --show-l:none;
  --f-body:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --f-mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --wrap:1200px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#F5F4F1; --bg-2:#EEEDE8; --card:#FFFFFF; --card-2:#F8F8F6; --line:rgba(40,52,64,.12); --line-2:rgba(40,52,64,.2);
  --ink:#1D2328; --sub:#5E666E; --mute:#7A828A;
  --a1:#2F6E9A; --a2:#3F8E7C; --acc:#2F6E9A; --acc-ink:#FFFFFF;
  --glow-1:#BFD8EA; --glow-2:#D6E9E1;
  --pos:#3E8A63; --neg:#B9474B; --warn:#A06B2A;
  --glass:rgba(255,255,255,.55); --glass-line:rgba(40,52,64,.12);
  --shadow:0 30px 70px -34px rgba(30,50,70,.35);
  --show-d:none; --show-l:block; color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#F5F4F1; --bg-2:#EEEDE8; --card:#FFFFFF; --card-2:#F8F8F6; --line:rgba(40,52,64,.12); --line-2:rgba(40,52,64,.2);
  --ink:#1D2328; --sub:#5E666E; --mute:#7A828A;
  --a1:#2F6E9A; --a2:#3F8E7C; --acc:#2F6E9A; --acc-ink:#FFFFFF;
  --glow-1:#BFD8EA; --glow-2:#D6E9E1;
  --pos:#3E8A63; --neg:#B9474B; --warn:#A06B2A;
  --glass:rgba(255,255,255,.55); --glass-line:rgba(40,52,64,.12);
  --shadow:0 30px 70px -34px rgba(30,50,70,.35);
  --show-d:none; --show-l:block; color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-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:60;background:var(--bg)}
img{max-width:100%;display:block}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.mono{font-family:var(--f-mono)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type scale */
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sub);font-weight:500;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.h-display{font-size:clamp(44px,7.2vw,92px);line-height:1.0;font-weight:300;letter-spacing:-.035em}
.h1{font-size:clamp(38px,5.4vw,68px);line-height:1.04;font-weight:300;letter-spacing:-.03em}
.h2{font-size:clamp(30px,3.6vw,46px);line-height:1.1;font-weight:300;letter-spacing:-.02em}
.h3{font-size:22px;line-height:1.25;font-weight:500}
.lede{font-size:clamp(18px,1.6vw,21px);color:var(--sub);max-width:60ch;line-height:1.55}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.small{font-size:14px;color:var(--sub)}
.tnum{font-variant-numeric:tabular-nums}

/* buttons — app style: pill with gradient outline */
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 26px;border-radius:999px;font:500 16px/1 var(--f-body);color:var(--ink);text-decoration:none;cursor:pointer;border:1.5px solid transparent;white-space:nowrap;transition:transform .15s ease,box-shadow .2s ease,background .2s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad) border-box;box-shadow:0 0 0 0 rgba(61,143,234,0)}
.btn-primary:hover{box-shadow:0 10px 40px -10px var(--a1)}
.btn-fill{background:var(--grad);color:#fff;border:0}
.btn-ghost{background:var(--glass);border-color:var(--glass-line);backdrop-filter:blur(12px)}
.btn-sm{--h:44px;padding:0 18px;font-size:15px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:72px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:26px;width:auto}
.logo .ld{display:var(--show-d)} .logo .ll{display:var(--show-l)}
.nav{display:flex;align-items:center;gap:2px;margin-inline-start:8px}
.nav>li{list-style:none;position:relative}
.nav{padding:0;margin-block:0}
.nav-btn{display:flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:22px;background:none;border:0;color:var(--ink);font:400 15px var(--f-body);cursor:pointer;text-decoration:none}
.nav-btn:hover,.nav-btn[aria-expanded="true"]{background:var(--glass);text-decoration:none}
.nav-btn.is-active{color:var(--acc)}
.nav-btn svg{width:12px;height:12px;transition:transform .2s}
.nav-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 10px);inset-inline-start:-20px;min-width:560px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mega[hidden]{display:none!important}
.mega a{display:flex;gap:14px;padding:14px;border-radius:14px;color:var(--ink);text-decoration:none;align-items:flex-start}
.mega a:hover{background:var(--card-2)}
.mega .mi{flex-shrink:0;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-line);color:var(--acc)}
.mega .mi svg{width:20px;height:20px}
.mega b{display:block;font-weight:500;font-size:15px}
.mega span{display:block;font-size:13px;color:var(--sub);line-height:1.4;margin-top:2px}
.mega .mega-foot{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding:12px 14px 4px;font-size:13px;color:var(--sub);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.top-right{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.icon-btn{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;background:none;border:0;color:var(--ink);cursor:pointer;position:relative}
.icon-btn:hover{background:var(--glass)}
.icon-btn svg{width:20px;height:20px}
.theme-btn .i-sun{display:var(--show-d)} .theme-btn .i-moon{display:var(--show-l)}
.lang{position:relative}
.lang-btn{width:auto;padding:0 12px;gap:6px;display:flex;font:500 13px var(--f-body);letter-spacing:.06em}
.lang-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;width:260px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:8px;max-height:70vh;overflow:auto}
.lang-menu a,.lang-menu span.lo{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;color:var(--ink);font-size:15px;text-decoration:none}
.lang-menu a:hover{background:var(--card-2)}
.lang-menu small{font-size:11px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.lang-menu .cur{color:var(--acc)}
.lang-menu p{font-size:12px;color:var(--mute);padding:8px 12px 4px;line-height:1.45}
.burger{display:none}
.drawer{position:fixed;inset:0;z-index:70;background:var(--bg);overflow:auto;padding:env(safe-area-inset-top,0px) 0 calc(24px + env(safe-area-inset-bottom,0px))}
.drawer .wrap{padding-block:12px}
.drawer-head{display:flex;justify-content:space-between;align-items:center;height:60px}
.drawer h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sub);margin:22px 0 6px;font-weight:500}
.drawer a.dl{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:18px;text-decoration:none}
.drawer a.dl span{color:var(--sub);font-size:14px}
.drawer .btn-row{margin-top:24px}
@media (max-width:1080px){.nav,.top-right .hide-m{display:none!important}.burger{display:grid}}

/* sections */
section{position:relative}
.sec{padding-block:clamp(72px,10vw,128px)}
.sec-tight{padding-block:clamp(48px,6vw,80px)}
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.sec-head.center{margin-inline:auto;text-align:center;align-items:center}
.band{background:var(--bg-2);border-block:1px solid var(--line)}
.glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.glow::before{content:"";position:absolute;width:1100px;height:800px;left:50%;top:-360px;transform:translateX(-30%);background:radial-gradient(ellipse at center,var(--glow-1) 0%,var(--glow-2) 38%,transparent 70%);opacity:.85;filter:blur(10px)}
.glow.alt::before{left:auto;right:-400px;top:auto;bottom:-500px;transform:none;opacity:.5}
.rel{position:relative;z-index:1}

/* hero */
.hero{padding-block:clamp(56px,8vw,110px) clamp(56px,7vw,96px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:26px;min-width:0}
.hero-copy .lede{max-width:54ch}
.pill{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;height:36px;padding:0 16px 0 8px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);font-size:14px;color:var(--sub)}
.pill .dot{width:22px;height:22px;border-radius:11px;background:var(--grad);display:grid;place-items:center}
.pill .dot::after{content:"";width:6px;height:6px;border-radius:3px;background:#fff;animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.3}}
.hero-meta{display:flex;flex-wrap:wrap;gap:28px;padding-top:8px}
.hero-meta div{display:flex;flex-direction:column}
.hero-meta b{font-size:30px;font-weight:300;letter-spacing:-.02em}
.hero-meta span{font-size:13px;color:var(--sub)}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}}

/* phones */
.phone{position:relative;margin:0;width:min(300px,78vw);aspect-ratio:390/844;border-radius:46px;padding:10px;background:linear-gradient(160deg,var(--line-2),var(--line));box-shadow:var(--shadow),inset 0 0 0 1px var(--glass-line);flex-shrink:0;max-width:100%}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:37px;background:var(--card)}
.phone .shot-d{display:var(--show-d)} .phone .shot-l{display:var(--show-l)}
.phone figcaption{position:absolute;bottom:-34px;left:0;right:0;text-align:center;font-size:13px;color:var(--sub)}
.phone.sm{width:min(240px,62vw);border-radius:38px;padding:8px}
.phone.sm img{border-radius:31px}
.phones{display:flex;justify-content:center;align-items:flex-end;gap:0;position:relative;min-height:0}
.phones .phone{width:min(260px,62vw)}
.phones .phone.sm{width:min(190px,46vw);border-radius:34px;padding:7px}
.phones .phone.sm img{border-radius:28px}
.phones .phone:nth-child(1){transform:rotate(-6deg);margin-inline-end:-70px;margin-bottom:-14px;z-index:1}
.phones .phone:nth-child(2){z-index:2}
.phones .phone:nth-child(3){transform:rotate(6deg);margin-inline-start:-70px;margin-bottom:-14px;z-index:1}
@media (max-width:640px){.phones .phone:nth-child(1),.phones .phone:nth-child(3){display:none}}

/* agent console (hero chat) */
.console{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.console-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);font:500 13px var(--f-mono);color:var(--sub)}
.console-head .live{margin-inline-start:auto;display:flex;align-items:center;gap:6px;color:var(--pos)}
.console-head .live::before{content:"";width:7px;height:7px;border-radius:4px;background:var(--pos);animation:pulse 1.6s infinite}
.console-body{padding:18px;display:flex;flex-direction:column;gap:12px;height:430px;overflow:hidden;justify-content:flex-end}
.msg{max-width:88%;padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.5;animation:rise .35s ease both}
.msg.you{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:6px}
.msg.agent{align-self:flex-start;background:var(--card-2);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.tool{align-self:flex-start;font:400 12.5px var(--f-mono);color:var(--acc);background:transparent;border:1px dashed var(--line-2);padding:8px 12px;border-radius:10px}
.msg.ok{align-self:flex-start;display:flex;gap:10px;align-items:center;background:color-mix(in srgb,var(--pos) 12%,transparent);border:1px solid color-mix(in srgb,var(--pos) 40%,transparent);color:var(--ink)}
.msg.ok::before{content:"✓";color:var(--pos);font-weight:700}
.msg.approve{align-self:flex-start;display:flex;gap:12px;align-items:center;background:var(--glass);border:1px solid var(--glass-line)}
.msg.approve .fid{width:30px;height:30px;border-radius:10px;background:var(--grad);display:grid;place-items:center;flex-shrink:0}
.msg.approve .fid svg{width:18px;height:18px;color:#fff}
.typing{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:var(--card-2);border-radius:18px;border:1px solid var(--line)}
.typing i{width:7px;height:7px;border-radius:4px;background:var(--sub);animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{40%{opacity:.25;transform:translateY(-2px)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.console-input{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 18px;border-top:1px solid var(--line)}
.console-input .ph{flex:1;color:var(--mute);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mic{width:44px;height:44px;border-radius:22px;background:var(--grad);display:grid;place-items:center;flex-shrink:0;border:0;color:#fff;cursor:pointer}
.mic svg{width:20px;height:20px}
.mic.on{box-shadow:0 0 0 0 var(--a2);animation:ring 1.4s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a2) 60%,transparent)}100%{box-shadow:0 0 0 16px transparent}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font:400 14px var(--f-body);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--acc)}
.chip[aria-pressed="true"]{background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad) border-box;border-color:transparent;color:var(--acc)}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.stats>div{padding:26px 24px;display:flex;flex-direction:column;gap:4px;border-inline-start:1px solid var(--line)}
.stats>div:first-child{border-inline-start:0}
.stats b{font-size:36px;font-weight:300;letter-spacing:-.02em;line-height:1.1}
.stats span{font-size:14px;color:var(--sub);line-height:1.4}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats>div{border-inline-start:0;border-top:1px solid var(--line)}.stats>div:nth-child(-n+2){border-top:0}.stats>div:nth-child(even){border-inline-start:1px solid var(--line)}.stats>div:last-child:nth-child(odd){grid-column:1/-1}}

/* grids & cards */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card p{color:var(--sub);font-size:16px}
.card .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-line);color:var(--acc)}
.card .ic svg{width:22px;height:22px}
.card h3{font-size:19px;font-weight:500}
.card code,.tool{font:500 13px var(--f-mono);color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent);padding:3px 8px;border-radius:7px;white-space:nowrap}
a.card{color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
a.card:hover{border-color:var(--acc);transform:translateY(-2px);text-decoration:none}
a.card .more{margin-top:auto;padding-top:8px;font-size:14px;color:var(--acc);display:flex;align-items:center;gap:6px}

/* product tiles (home) */
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tile{grid-column:span 2;position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none;min-height:250px;transition:border-color .2s}
.tile:hover{border-color:var(--acc);text-decoration:none}
.tile.wide{grid-column:span 3}
.tile.big{grid-column:span 3;grid-row:span 2;min-height:520px}
.tile h3{font-size:24px;font-weight:400}
.tile p{color:var(--sub);font-size:15px;max-width:34ch;position:relative;z-index:1}
.tile .tag{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.tile .tile-shot{position:absolute;right:-30px;bottom:-200px;width:220px;border-radius:30px;overflow:hidden;border:6px solid var(--line);transform:rotate(-8deg);transition:transform .3s}
.tile:hover .tile-shot{transform:rotate(-5deg) translateY(-8px)}
.tile .tile-shot img{width:100%}
.tile .tile-shot .shot-d{display:var(--show-d)} .tile .tile-shot .shot-l{display:var(--show-l)}
.tile.big .tile-shot{position:relative;right:auto;bottom:auto;width:250px;margin:22px auto -230px;transform:rotate(-4deg)}
.tile.big:hover .tile-shot{transform:rotate(-2deg) translateY(-8px)}
.tile.big .go{order:0}
.tile .go{margin-top:auto;font-size:14px;color:var(--acc);position:relative;z-index:1}
@media (max-width:980px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile,.tile.wide,.tile.big{grid-column:span 1;grid-row:auto;min-height:260px}.tile.big .tile-shot{width:200px;margin-bottom:-200px}}
@media (max-width:640px){.tiles{grid-template-columns:1fr}}

/* feature rows (screen walkthroughs) */
.rows{display:flex;flex-direction:column;gap:clamp(64px,9vw,120px)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.row.flip .row-media{order:2}
.row-media{display:flex;justify-content:center;padding-bottom:30px}
.row-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.row-copy h3{font-size:clamp(26px,2.6vw,34px);font-weight:300;line-height:1.15;letter-spacing:-.015em}
.row-copy p{color:var(--sub)}
.checks{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.checks li::before{content:"";flex-shrink:0;width:20px;height:20px;margin-top:3px;border-radius:10px;background:var(--grad);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.3 14.2L4.6 10.1l1.4-1.4 2.7 2.7 5.3-5.3 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.3 14.2L4.6 10.1l1.4-1.4 2.7 2.7 5.3-5.3 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.say{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line)}
.say q{font-size:16px;quotes:"“" "”"}
.say .tool{align-self:flex-start}
@media (max-width:860px){.row{grid-template-columns:1fr}.row.flip .row-media{order:0}}

/* say-it strip */
.says{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.says .say{padding:22px;gap:12px;background:var(--card);border-color:var(--line)}
.says .say q{font-size:18px;line-height:1.45}
.says .say .res{font-size:14px;color:var(--sub)}
@media (max-width:900px){.says{grid-template-columns:1fr}}

/* gaps / comparison */
.gaps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.gap{padding:30px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;border-top:1px solid var(--line)}
.gap:nth-child(-n+2){border-top:0}
.gap:nth-child(even){border-inline-start:1px solid var(--line)}
.gap .was{font-size:14px;color:var(--sub);display:flex;gap:10px}
.gap .was::before{content:"";flex-shrink:0;width:14px;height:2px;background:var(--neg);margin-top:11px;border-radius:2px}
.gap h3{font-size:20px;font-weight:500}
.gap p{color:var(--sub);font-size:15px}
@media (max-width:760px){.gaps{grid-template-columns:1fr}.gap:nth-child(2){border-top:1px solid var(--line)}.gap:nth-child(even){border-inline-start:0}}

.vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.vs .card ol{margin:0;padding-inline-start:20px;color:var(--sub);font-size:15px;display:flex;flex-direction:column;gap:6px}
.vs .count{font-size:56px;font-weight:300;letter-spacing:-.03em;line-height:1}
.vs .old .count{color:var(--mute)}
.vs .new{background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;border:1.5px solid transparent}
@media (max-width:760px){.vs{grid-template-columns:1fr}}

/* MCP diagram */
.mcp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:center}
.mcp-col{display:flex;flex-direction:column;gap:10px}
.mcp-col .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-bottom:4px}
.node{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:15px}
.node i{width:30px;height:30px;border-radius:9px;background:var(--glass);border:1px solid var(--glass-line);display:grid;place-items:center;font-style:normal;font:500 12px var(--f-mono);color:var(--acc);flex-shrink:0}
.core{position:relative;padding:28px;border-radius:var(--r-lg);background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;border:1.5px solid transparent;display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center}
.core .fns{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.inf{width:86px;height:44px}
.inf path{fill:none;stroke:url(#gInf);stroke-width:5;stroke-linecap:round;stroke-dasharray:240;animation:draw 4s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:240}45%,60%{stroke-dashoffset:0}100%{stroke-dashoffset:-240}}
@media (max-width:900px){.mcp{grid-template-columns:1fr}}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:620px}
th,td{text-align:start;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);font-weight:500;background:var(--card-2)}
tr:last-child td{border-bottom:0}
td .tier{display:inline-flex;height:26px;align-items:center;padding:0 10px;border-radius:13px;font-size:12px;border:1px solid var(--line-2);color:var(--sub);white-space:nowrap}
td .tier.act{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent)}
td .tier.read{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 50%,transparent)}
.yes{color:var(--pos);font-weight:500}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:st}
.steps.s4{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.step{counter-increment:st;padding:24px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;min-width:0}
.step::before{content:counter(st,decimal-leading-zero);font:500 13px var(--f-mono);color:var(--acc)}
.step h3{font-size:17px;font-weight:500}
.step p{font-size:14px;color:var(--sub)}
@media (max-width:980px){.steps,.steps.s4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps,.steps.s4,.steps.s3{grid-template-columns:1fr}}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.plan{position:relative;padding:32px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.plan.hot{background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:var(--shadow)}
.plan .badge{position:absolute;top:-13px;inset-inline-start:28px;height:26px;padding:0 12px;border-radius:13px;background:var(--grad);color:#fff;font-size:12px;font-weight:500;display:flex;align-items:center}
.plan h3{font-size:16px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--sub)}
.plan .price{display:flex;align-items:baseline;gap:6px}
.plan .price b{font-size:60px;font-weight:300;letter-spacing:-.04em;line-height:1}
.plan .price span{color:var(--sub)}
.plan .alloc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan .alloc div{padding:14px;border-radius:14px;background:var(--card-2);border:1px solid var(--line)}
.plan .alloc b{display:block;font-size:26px;font-weight:400}
.plan .alloc span{font-size:13px;color:var(--sub)}
.meter{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--grad);border-radius:3px}
.plan .checks li{font-size:15px}
.plan .btn{margin-top:auto}
@media (max-width:900px){.plans{grid-template-columns:1fr}}

/* widgets */
.widget{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px;min-width:0}
.widget .wh{display:flex;justify-content:space-between;align-items:center;gap:12px}
.widget .wh b{font-weight:500}
.seg{display:inline-flex;padding:4px;gap:4px;border-radius:24px;background:var(--card-2);border:1px solid var(--line)}
.seg button{height:40px;padding:0 18px;border-radius:20px;border:1.5px solid transparent;background:none;color:var(--sub);font:400 15px var(--f-body);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;color:var(--acc)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}
.field .in{display:flex;align-items:center;gap:10px;height:58px;padding:0 16px;border-radius:16px;background:var(--card-2);border:1px solid var(--line)}
.field .in:focus-within{border-color:var(--acc)}
.field input,.field select{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:400 22px var(--f-body);outline:none;font-variant-numeric:tabular-nums}
.field select{font-size:16px;flex:0 0 auto;cursor:pointer}
.field select option{background:var(--card);color:var(--ink)}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding:10px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--sub)}
.ringw{display:flex;align-items:center;gap:14px}
.ring{width:54px;height:54px;flex-shrink:0}
.ring circle{fill:none;stroke-width:5}
.ring .bgc{stroke:var(--line)}
.ring .fg{stroke:url(#gRing);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1s linear}
.ring text{fill:var(--ink);font:500 15px var(--f-body);text-anchor:middle;dominant-baseline:central}
input[type=range]{width:100%;accent-color:var(--a1);height:28px}
.big-num{font-size:clamp(40px,5vw,58px);font-weight:300;letter-spacing:-.03em;line-height:1}
.note{font-size:12.5px;color:var(--mute);line-height:1.5}
canvas{max-width:100%;display:block}

/* calendar heatmap */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dh{font-size:11px;color:var(--sub);text-align:center;letter-spacing:.08em}
.cal .d{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;justify-content:space-between;padding:6px;font-size:11px;background:var(--card-2);border:1px solid var(--line);min-width:0;overflow:hidden}
.cal .d b{font-weight:500;font-size:11px;font-variant-numeric:tabular-nums}
.cal .d.p{background:color-mix(in srgb,var(--pos) calc(var(--v)*1%),var(--card-2));border-color:color-mix(in srgb,var(--pos) 40%,transparent)}
.cal .d.n{background:color-mix(in srgb,var(--neg) calc(var(--v)*1%),var(--card-2));border-color:color-mix(in srgb,var(--neg) 40%,transparent)}
.cal .d.e{opacity:.35}
@media (max-width:480px){.cal .d b{display:none}}

/* team */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.person{display:flex;flex-direction:column;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 14px 24px;min-width:0}
.person img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;filter:saturate(.92)}
.person .pc{padding:0 10px;display:flex;flex-direction:column;gap:10px}
.person h3{font-size:20px;font-weight:500}
.person .role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:500}
.person p{font-size:14.5px;color:var(--sub);line-height:1.55}
.person ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.person li{font-size:12px;padding:4px 10px;border-radius:12px;border:1px solid var(--line-2);color:var(--sub)}
@media (max-width:1080px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.team{grid-template-columns:1fr}}

/* gallery (home app tour) */
.tour{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,70px);align-items:center}
.tour-list{display:flex;flex-direction:column;gap:6px}
.tour-list button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:18px;border:1px solid transparent}
.tour-list button:hover{background:var(--glass)}
.tour-list button[aria-selected="true"]{background:var(--card);border-color:var(--line)}
.tour-list button b{font-weight:500;font-size:18px}
.tour-list button span{font-size:15px;color:var(--sub)}
.tour-list button:focus-visible{outline:2px solid var(--acc)}
.tour-stage{display:flex;justify-content:center;gap:24px;padding-bottom:40px}
.tour-stage .phone{transition:opacity .3s}
.theme-switch{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--sub);margin-top:14px}
@media (max-width:900px){.tour{grid-template-columns:1fr}.tour-stage .phone:nth-child(2){display:none}}

/* faq */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;font-weight:300;color:var(--acc);transition:transform .2s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--sub);max-width:75ch}
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,6vw,80px)}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}}

/* CTA */
.cta{position:relative;overflow:hidden;border-radius:36px;padding:clamp(40px,7vw,90px);background:var(--card);border:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
.cta .glow::before{top:-300px;left:20%;opacity:.7}
.cta form{display:flex;flex-direction:column;gap:12px}
.cta input,.form input,.form select,.form textarea{height:56px;padding:0 20px;border-radius:28px;border:1px solid var(--line-2);background:var(--card-2);color:var(--ink);font:400 16px var(--f-body);width:100%}
.form textarea{height:120px;border-radius:20px;padding:16px 20px;resize:vertical}
.cta input:focus,.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--acc)}
.ok-msg{padding:14px 18px;border-radius:18px;background:color-mix(in srgb,var(--pos) 14%,transparent);border:1px solid color-mix(in srgb,var(--pos) 40%,transparent);font-size:15px}
@media (max-width:860px){.cta{grid-template-columns:1fr}}

/* related */
.related{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.related{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.related{grid-template-columns:1fr}}

/* breadcrumb / page hero */
.crumbs{font-size:14px;color:var(--sub);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--sub)}
.risk-bar{font-size:13px;color:var(--sub);background:var(--bg-2);border-bottom:1px solid var(--line);padding-block:10px;line-height:1.45}
.risk-bar b{color:var(--warn);font-weight:500}

/* footer */
footer{border-top:1px solid var(--line);padding-block:72px 40px;background:var(--bg-2)}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:36px}
.foot h5{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);font-weight:500;margin:0 0 14px}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot a{color:var(--ink);font-size:15px}
.foot .brand p{color:var(--sub);font-size:15px;max-width:34ch;margin-top:16px}
.foot address{font-style:normal;color:var(--sub);font-size:14px;line-height:1.6;margin-top:18px}
.foot-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px;font-size:13px;color:var(--mute);line-height:1.6}
.foot-bottom .langs{display:flex;flex-wrap:wrap;gap:6px 16px}
.foot-bottom .langs a,.foot-bottom .langs span{color:var(--sub);font-size:13px}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}.foot .brand{grid-column:1/-1}}

/* misc */
.kicker-line{display:flex;align-items:center;gap:14px;color:var(--sub);font-size:14px;flex-wrap:wrap}
.logos{display:flex;flex-wrap:wrap;gap:10px}
.logos span{height:40px;padding:0 16px;display:inline-flex;align-items:center;border-radius:20px;border:1px solid var(--line-2);font-size:14px;color:var(--ink)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.quote-card{padding:28px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line)}
.legal p,.legal li{color:var(--sub);max-width:78ch}
.legal h2{font-size:24px;font-weight:500;margin:36px 0 12px}
.legal ul{padding-inline-start:20px;display:flex;flex-direction:column;gap:8px}
.pos{color:var(--pos)} .neg{color:var(--neg)}
.timeline{display:flex;flex-direction:column;gap:0;border-inline-start:2px solid var(--line);margin-inline-start:8px}
.timeline div{position:relative;padding:0 0 24px 26px}
.timeline div::before{content:"";position:absolute;inset-inline-start:-7px;top:6px;width:12px;height:12px;border-radius:6px;background:var(--grad)}
.timeline b{display:block;font-weight:500}
.timeline span{color:var(--sub);font-size:15px}
.say{min-width:0}
.say .tool{white-space:normal;overflow-wrap:anywhere;max-width:100%}
@media (max-width:640px){.console-body{height:340px}}

/* ================= v2 components ================= */
:root{--img-ink:#F4F6F8;--img-sub:rgba(244,246,248,.74);--img-glass:rgba(20,24,32,.42);--img-line:rgba(255,255,255,.16)}
/* realistic device */
.device{position:relative;margin:0;width:min(290px,72vw);max-width:100%;padding:11px;border-radius:56px;background:#0c0c0f;box-shadow:0 0 0 1.5px #4a4a52,0 0 0 4px #1b1b1f,0 0 0 5px #55555d,0 50px 90px -30px rgba(0,0,0,.65),0 20px 40px -20px rgba(0,0,0,.5);flex-shrink:0}
.device::before,.device::after{content:"";position:absolute;width:4px;border-radius:2px;background:linear-gradient(#5a5a62,#2a2a30)}
.device::before{left:-8px;top:120px;height:56px;box-shadow:0 74px 0 #3a3a40}
.device::after{right:-8px;top:150px;height:86px}
.device .scr{border-radius:46px;overflow:hidden;background:#000;position:relative}
.device .scr::after{content:"";position:absolute;inset:0;border-radius:46px;background:linear-gradient(125deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 32%);pointer-events:none}
.device img{width:100%;height:auto;display:block}
.device .shot-d{display:var(--show-d)} .device .shot-l{display:var(--show-l)}
.device.sm{width:min(236px,60vw);padding:9px;border-radius:46px}
.device.sm .scr,.device.sm .scr::after{border-radius:38px}
.device.xs{width:min(200px,52vw);padding:8px;border-radius:40px}
.device.xs .scr,.device.xs .scr::after{border-radius:33px}
.device.xs::before,.device.xs::after,.device.sm::before,.device.sm::after{display:none}

/* stage hero (centered) */
.stage{position:relative;overflow:hidden;padding-block:clamp(56px,7vw,96px) 0;text-align:center}
.stage-bg{position:absolute;inset:0;z-index:0}
.stage-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.stage-bg .bg-d{display:var(--show-d)} .stage-bg .bg-l{display:var(--show-l)}
.stage-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,transparent) 0%,color-mix(in srgb,var(--bg) 35%,transparent) 40%,color-mix(in srgb,var(--bg) 70%,transparent) 75%,var(--bg) 100%)}
.stage .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:24px}
.stage .lede{margin-inline:auto}
.stage .btn-row{justify-content:center}
.stage-scene{position:relative;width:100%;max-width:1100px;margin:28px auto 0;display:flex;justify-content:center;align-items:flex-end;min-height:420px}
.stage-scene .device{z-index:3}
.stage-scene .device.l{transform:translateY(60px) rotate(-7deg);margin-inline-end:-50px;z-index:2}
.stage-scene .device.r{transform:translateY(60px) rotate(7deg);margin-inline-start:-50px;z-index:2}
.stage-scene .device.mid{margin-bottom:-120px}
.stage-scene .prop{position:absolute;z-index:1;pointer-events:none}
.float{position:absolute;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;background:color-mix(in srgb,var(--card) 78%,transparent);border:1px solid var(--glass-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow);text-align:start;font-size:14px;line-height:1.35;max-width:270px;animation:bob 6s ease-in-out infinite}
.float b{display:block;font-weight:500;font-size:14.5px}
.float small{color:var(--sub);font-size:12.5px}
.float .fi{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--grad);color:#fff;flex-shrink:0}
.float .fi svg{width:18px;height:18px}
.float.ok .fi{background:color-mix(in srgb,var(--pos) 85%,#000)}
.float:nth-of-type(2n){animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (max-width:900px){.float{display:none}.stage-scene .device.l,.stage-scene .device.r{display:none}.stage-scene{min-height:0}}

/* voice bar */
.voicebar{display:flex;align-items:center;gap:12px;width:min(640px,100%);height:64px;padding:0 8px 0 22px;border-radius:32px;background:color-mix(in srgb,var(--card) 80%,transparent);border:1px solid var(--glass-line);backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.voicebar .vt{flex:1;min-width:0;text-align:start;font-size:17px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voicebar .vt::after{content:"";display:inline-block;width:2px;height:20px;background:var(--acc);margin-inline-start:2px;vertical-align:-4px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.voicebar .mic{width:48px;height:48px;border-radius:24px}

/* logo / trust strip */
.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;color:var(--sub);font-size:14px;align-items:center}
.strip b{color:var(--ink);font-weight:500}

/* marquee */
.marquee{overflow:hidden;padding-block:30px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:28px;width:max-content;animation:mq 70s linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse;animation-duration:80s}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:16px}
.bx{position:relative;overflow:hidden;border-radius:30px;background:var(--card);border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none;min-width:0;isolation:isolate;transition:transform .25s,border-color .25s}
a.bx:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--acc)}
.bx h3{font-size:clamp(22px,2.2vw,30px);font-weight:400;line-height:1.15;letter-spacing:-.01em;max-width:18ch}
.bx p{color:var(--sub);font-size:15.5px;max-width:36ch}
.bx .tag{font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.bx .go{margin-top:auto;font-size:14px;color:var(--acc);padding-top:10px}
.bx.img{background:#101216;border-color:transparent;color:var(--img-ink)}
.bx.img p{color:var(--img-sub)} .bx.img .tag{color:#7FC4FF}
.bx.img>img.bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s}
a.bx.img:hover>img.bgi{transform:scale(1.04)}
.bx.img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,12,16,.72) 0%,rgba(10,12,16,.15) 55%,rgba(10,12,16,.55) 100%)}
.bx.img .go{color:#9AD0FF}
.bx .obj{position:absolute;pointer-events:none;z-index:-1}
.bx .peek{position:absolute;bottom:-40%;right:6%;z-index:0}
.bx .peek.c{left:50%;right:auto;transform:translateX(-50%)}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
.r2{grid-row:span 2}.r3{grid-row:span 3}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.c3,.c4,.c5{grid-column:span 1}.c6,.c7,.c8,.c12{grid-column:span 2}.r2,.r3{grid-row:auto}.bx{min-height:300px}}
@media (max-width:620px){.bento{grid-template-columns:1fr}.c3,.c4,.c5,.c6,.c7,.c8,.c12{grid-column:span 1}}

/* image band */
.band-img{position:relative;overflow:hidden;color:var(--img-ink);background:#0d0f13;isolation:isolate}
.band-img>img.bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band-img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,11,15,.88) 0%,rgba(9,11,15,.55) 45%,rgba(9,11,15,.1) 100%)}
.band-img.center::before{background:linear-gradient(180deg,rgba(9,11,15,.25),rgba(9,11,15,.75))}
.band-img .lede,.band-img p{color:var(--img-sub)}
.band-img .eyebrow{color:var(--img-sub)}
.band-img .glass{background:var(--img-glass);border:1px solid var(--img-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:22px;padding:22px;color:var(--img-ink)}
.band-img .glass b{font-size:clamp(30px,3.4vw,44px);font-weight:300;letter-spacing:-.02em;display:block;line-height:1.1}
.band-img .glass span{font-size:14px;color:var(--img-sub)}
.band-img .btn-ghost{background:rgba(255,255,255,.08);border-color:var(--img-line);color:var(--img-ink)}
.band-img .btn-primary{background:linear-gradient(#0d0f13,#0d0f13) padding-box,var(--grad) border-box;color:var(--img-ink)}
.band-img .crumbs,.band-img .crumbs a{color:var(--img-sub)}
.band-img .checks li{color:var(--img-ink)}
.glass-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:860px){.glass-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* band hero (product) */
.bhero{min-height:min(760px,92vh);display:flex;align-items:center;padding-block:clamp(60px,8vw,110px)}
.bhero .wrap{width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.bhero-copy{display:flex;flex-direction:column;gap:24px;min-width:0}
.bhero-media{display:flex;justify-content:center;position:relative}
@media (max-width:920px){.bhero .wrap{grid-template-columns:1fr}.bhero{min-height:0}}

/* carousel */
.carousel{position:relative}
.car-track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px max(20px,calc((100vw - var(--wrap))/2 + 20px)) 40px}
.car-track::-webkit-scrollbar{display:none}
.car-item{scroll-snap-align:center;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:22px;width:300px}
.car-item .cap{text-align:center;display:flex;flex-direction:column;gap:6px;max-width:280px}
.car-item .cap b{font-size:18px;font-weight:500}
.car-item .cap span{font-size:15px;color:var(--sub)}
.car-nav{display:flex;gap:10px;justify-content:flex-end}
.car-nav button{width:48px;height:48px;border-radius:24px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.car-nav button:hover{border-color:var(--acc)}
.car-nav svg{width:20px;height:20px}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.head-row .sec-head{margin-bottom:0}

/* sticky story */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px)}
.story-media{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));align-self:start;display:flex;justify-content:center;padding-block:10px 40px}
.story-media .device img{transition:opacity .35s}
.story-steps{display:flex;flex-direction:column}
.story-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding-block:30px;opacity:.38;transition:opacity .35s}
.story-step.on{opacity:1}
.story-step:first-child{min-height:48vh}
.story-step .num{font:500 13px var(--f-mono);color:var(--acc)}
.story-step h3{font-size:clamp(26px,2.8vw,38px);font-weight:300;line-height:1.12;letter-spacing:-.015em}
.story-step p{color:var(--sub);max-width:46ch}
.story-step .mob{display:none}
@media (max-width:860px){.story{grid-template-columns:1fr}.story-media{display:none}.story-step{min-height:0;opacity:1}.story-step .mob{display:flex;justify-content:center;margin-top:12px}}

/* chat bubbles strip (says) */
.chatwall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.chatcard{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:26px;background:var(--card);border:1px solid var(--line);min-width:0}
.chatcard .you{align-self:flex-end;background:var(--grad);color:#fff;padding:12px 16px;border-radius:18px 18px 6px 18px;font-size:15.5px;max-width:92%}
.chatcard .call{align-self:flex-start;font:400 12.5px var(--f-mono);color:var(--acc);border:1px dashed var(--line-2);padding:7px 11px;border-radius:10px;overflow-wrap:anywhere}
.chatcard .ans{align-self:flex-start;background:var(--card-2);border:1px solid var(--line);padding:12px 16px;border-radius:18px 18px 18px 6px;font-size:15px;max-width:92%}
@media (max-width:900px){.chatwall{grid-template-columns:1fr}}

/* download / QR */
.dl{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:40px;align-items:center}
.qr{width:170px;height:170px;padding:12px;border-radius:24px;background:#fff;box-shadow:var(--shadow)}
.qr img{width:100%;height:100%}
.stores{display:flex;gap:12px;flex-wrap:wrap}
.store{display:flex;align-items:center;gap:10px;height:56px;padding:0 20px;border-radius:16px;background:var(--ink);color:var(--bg);text-decoration:none}
.store:hover{text-decoration:none;opacity:.9}
.store svg{width:24px;height:24px}
.store small{display:block;font-size:10.5px;opacity:.75;line-height:1}
.store b{display:block;font-size:17px;font-weight:500;line-height:1.15}
@media (max-width:760px){.dl{grid-template-columns:1fr}}

/* say-it switcher: spoken command -> agent trail -> app screen */
.ptabs{display:flex;justify-content:center;margin-bottom:40px}
.ppane{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:40px;align-items:center}
.ppane .side{display:flex;flex-direction:column;gap:18px;min-width:0}
.ppane .side.r{text-align:start}
.ppane .mini{padding:18px;border-radius:20px;background:var(--card);border:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
.ppane .mini .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-line);color:var(--acc);flex-shrink:0}
.ppane .mini .ic svg{width:20px;height:20px}
.ppane .mini b{display:block;font-weight:500}
.ppane .mini span{font-size:14px;color:var(--sub)}
@media (max-width:980px){.ppane{grid-template-columns:1fr}.ppane .device{margin-inline:auto}}
.center{text-align:center}
.mx-auto{margin-inline:auto}
[hidden]{display:none!important}
.stage-bg::after{background:radial-gradient(ellipse 60% 48% at 50% 34%,color-mix(in srgb,var(--bg) 82%,transparent) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 60%,transparent 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 40%,transparent) 0%,transparent 45%,color-mix(in srgb,var(--bg) 80%,transparent) 82%,var(--bg) 100%)}
.story-step{min-height:44vh}
.story-step:first-child{min-height:36vh}
.bx h3,.bx p,.bx .tag,.bx .go{position:relative;z-index:1}
.bx:not(.img) h3,.bx:not(.img) p{text-shadow:0 1px 12px var(--card)}
.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex-shrink:0}
@media (max-width:700px){.seg button{padding:0 13px;font-size:14px}}
.band-img .widget,.band-img .float,.band-img .console{color:var(--ink)}
.band-img .widget .small,.band-img .float small,.band-img .widget p{color:var(--sub)}
.band-img .widget .lede{color:var(--sub)}
.saybar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:44px}
.saybar button{display:flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 8px;border-radius:24px;border:1px solid var(--line-2);background:var(--card);color:var(--sub);font:400 15px var(--f-body);cursor:pointer}
.saybar button .m{width:32px;height:32px;border-radius:16px;display:grid;place-items:center;background:var(--card-2);color:var(--sub)}
.saybar button .m svg{width:16px;height:16px}
.saybar button[aria-pressed="true"]{color:var(--ink);background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;border-color:transparent}
.saybar button[aria-pressed="true"] .m{background:var(--grad);color:#fff}
.trail{display:flex;flex-direction:column;gap:12px}
.trail .you{align-self:flex-start;background:var(--grad);color:#fff;padding:14px 18px;border-radius:20px 20px 20px 6px;font-size:17px;max-width:100%}
.trail .t{display:flex;gap:12px;align-items:center;font:400 13px var(--f-mono);color:var(--acc)}
.trail .t::before{content:"";width:8px;height:8px;border-radius:4px;background:var(--a2);flex-shrink:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--a2) 20%,transparent)}
.trail .done{display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:16px;background:color-mix(in srgb,var(--pos) 12%,transparent);border:1px solid color-mix(in srgb,var(--pos) 40%,transparent);font-size:15px}
.trail .done::before{content:"✓";color:var(--pos);font-weight:700}
.person img{height:auto}
.route[hidden]{display:none!important}
/* unified form fields (join beta, contact, footer CTA) */
.form .field{gap:8px}
.form .field input,.form .field select,.form .field textarea,.cta form input{flex:0 0 auto;box-sizing:border-box;width:100%;height:56px;margin:0;padding:0 22px;border:1px solid var(--line-2);border-radius:28px;background:var(--card-2);color:var(--ink);font:400 16px/1.2 var(--f-body);letter-spacing:0;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.form .field textarea{height:132px;padding:16px 22px;border-radius:22px;resize:vertical;line-height:1.5}
.form .field select{padding-inline-end:52px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C7C85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 20px center;background-size:18px}
[dir="rtl"] .form .field select{background-position:left 20px center}
.form .field input::placeholder,.form .field textarea::placeholder,.cta form input::placeholder{color:var(--mute);opacity:1}
.form .field input:focus,.form .field select:focus,.form .field textarea:focus,.cta form input:focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.form .btn{height:56px;margin-top:6px}
.form{gap:20px}

/* ===== transparent overlay header ===== */
:root{--hdr-h:76px;--hdr-scrolled:rgba(11,20,44,.78);--hdr-line:rgba(120,160,255,.14)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--hdr-scrolled:rgba(245,244,241,.84);--hdr-line:rgba(40,52,64,.10)}}
:root[data-theme="light"]{--hdr-scrolled:rgba(245,244,241,.84);--hdr-line:rgba(40,52,64,.10)}
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;background:transparent;border-bottom:1px solid transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .3s,border-color .3s,backdrop-filter .3s}
.top.scrolled{background:var(--hdr-scrolled);border-bottom-color:var(--hdr-line);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.top .wrap{height:var(--hdr-h);gap:28px}
.nav{gap:4px;margin-inline-start:12px}
.nav-btn{white-space:nowrap;height:42px;padding:0 14px;font-size:15.5px;font-weight:400;line-height:1;background:transparent}
.nav-btn:hover,.nav-btn[aria-expanded="true"]{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.top-right{gap:8px}
.top-right .btn-sm{height:42px;white-space:nowrap}
.top .dl-zip.icon-only{width:42px;padding:0;justify-content:center}
.top .dl-zip.icon-only span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.top .lang-btn{height:42px}
@media (max-width:1280px){.nav-btn{padding:0 10px;font-size:15px}.top .wrap{gap:18px}}
/* header over a dark photo hero, any theme */
.top.on-dark:not(.scrolled){--ink:#F4F6F8;--sub:rgba(244,246,248,.75);--glass:rgba(255,255,255,.10);--glass-line:rgba(255,255,255,.22);--acc:#8CC8FF;color:#F4F6F8}
.top.on-dark:not(.scrolled) .logo .ld{display:block}.top.on-dark:not(.scrolled) .logo .ll{display:none}
.top.on-dark:not(.scrolled) .btn-primary{background:linear-gradient(rgba(10,14,22,.35),rgba(10,14,22,.35)) padding-box,var(--grad) border-box;color:#F4F6F8}
.top.on-dark:not(.scrolled) .theme-btn .i-sun{display:block}.top.on-dark:not(.scrolled) .theme-btn .i-moon{display:none}
/* first section slides under the header */
main>section:first-child,.route>section:first-child{padding-top:calc(var(--hdr-h) + clamp(44px,6vw,96px))}
main>.band-img.bhero:first-child,.route>.band-img.bhero:first-child{padding-top:calc(var(--hdr-h) + clamp(40px,5vw,80px))}
.risk-bar{position:relative;z-index:2}
@media (max-width:560px){.band-img .glass{padding:14px 12px;border-radius:16px}.band-img .glass b{font-size:24px}.band-img .glass span{font-size:12px;line-height:1.35;display:block}}

/* ================= unified typography =================
   One family (Roboto) for all text; Roboto Mono only for literal tool/function names.
   Scale: display 92 / h1 68 / h2 46 / h3 24 / card title 20 / body 17 / secondary 15 / small 13 / label 12
   Weights: headlines 400, titles & labels 500, body 400. */
:root{--t-body:17px;--t-sec:15px;--t-small:13px;--t-label:12px;--t-title:20px;--t-h3:24px}
body,button,input,select,textarea{font-family:var(--f-body)}
.h-display{font-size:clamp(44px,7vw,92px);font-weight:400;letter-spacing:-.035em;line-height:1.02}
.h1{font-size:clamp(38px,5.2vw,68px);font-weight:400;letter-spacing:-.03em;line-height:1.06}
.h2{font-size:clamp(30px,3.6vw,46px);font-weight:400;letter-spacing:-.022em;line-height:1.12}
.h3,.row-copy h3,.story-step h3,.bx h3,.tile h3{font-weight:400;letter-spacing:-.015em}
.story-step h3,.row-copy h3{font-size:clamp(26px,2.6vw,34px);line-height:1.15}
.bx h3{font-size:clamp(22px,2vw,28px);line-height:1.18}
.card h3,.gap h3,.step h3,.person h3,.mega b,.car-item .cap b,.tour-list button b,.ppane .mini b,.float b,.plan .alloc b{font-weight:500;letter-spacing:-.005em}
.card h3,.gap h3,.person h3{font-size:var(--t-title);line-height:1.3}
.step h3,.car-item .cap b,.tour-list button b{font-size:18px;line-height:1.3}
.lede{font-size:clamp(18px,1.5vw,20px);font-weight:400;line-height:1.55}
p,.card p,.bx p,.gap p,.row-copy p,.story-step p,.person p,.faq details p{font-size:var(--t-body);line-height:1.6;font-weight:400}
.card p,.bx p,.gap p,.step p,.car-item .cap span,.ppane .mini span,.tour-list button span,.mega span,.person p{font-size:var(--t-sec);line-height:1.55}
.small,.note,.kv,.crumbs,.strip,.stats span,.glass span,.hero-meta span,.float small,.plan .alloc span,.person li,.foot-bottom,.foot address{font-weight:400}
.small,.crumbs,.strip,.hero-meta span,.float small,.stats span,.glass span,.plan .alloc span{font-size:var(--t-small)}
.note,.foot-bottom{font-size:var(--t-small);line-height:1.55}
/* labels: same treatment everywhere (were partly monospace) */
.eyebrow,.bx .tag,.tile .tag,.lbl,.mcp-col .lbl,.plan h3,.person .role,.foot h5,.field label,th,.drawer h4,.step::before,.story-step .num{font-family:var(--f-body);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.step::before,.story-step .num{color:var(--acc);letter-spacing:.12em}
.bx .tag,.tile .tag{color:var(--acc)} .bx.img .tag{color:#8CC8FF}
.console-head{font-family:var(--f-body);font-size:var(--t-small);font-weight:500;letter-spacing:.02em}
/* numbers: one weight */
.hero-meta b,.stats b,.glass b,.plan .price b,.big-num,.vs .count,.band-img .glass b{font-weight:400;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.plan .alloc b{font-size:24px}
/* buttons, chips, nav: same weight */
.btn,.nav-btn,.chip,.seg button,.saybar button,.lang-btn{font-family:var(--f-body);letter-spacing:0}
.btn{font-weight:500}.nav-btn,.chip,.seg button,.saybar button{font-weight:400}
.btn-sm{font-size:var(--t-sec)}
/* monospace only for literal tool names */
.tool,.card code,.chatcard .call,.msg.tool,.trail .t,.mono,.voicebar .tool{font-family:var(--f-mono);font-weight:400;letter-spacing:0;text-transform:none}
.tool,.card code{font-size:var(--t-small)}
.chatcard .call,.msg.tool,.trail .t{font-size:12.5px}
.chatcard .you,.chatcard .ans,.msg,.trail .you{font-size:var(--t-sec);line-height:1.5}
.say q,.says .say q{font-size:18px;font-weight:400}
.faq summary{font-size:18px;font-weight:400}
.kv{font-size:var(--t-sec)}
b,strong{font-weight:500}
.mono{font-family:var(--f-body)!important;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.node i{font-family:var(--f-body);font-size:var(--t-label);font-weight:500;font-style:normal}
/* restore code-style (monospace) details as originally designed */
.bx .tag,.tile .tag{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.1em}
.step::before,.story-step .num{font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:0}
.console-head{font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:0}
.mono{font-family:var(--f-mono)!important;letter-spacing:0}
.node i{font-family:var(--f-mono);font-size:12px;font-weight:500}
.chatcard .call,.msg.tool,.trail .t{font-size:13px}

/* ---------- Market Scanner page: live embeds ---------- */
.livephone{--k:.78;position:relative;width:calc(390px*var(--k));height:calc(844px*var(--k));border-radius:calc(52px*var(--k));padding:calc(9px*var(--k));background:#0b0b0e;box-shadow:0 0 0 1.5px #4a4a52,0 0 0 4px #1b1b1f,0 40px 80px -30px rgba(0,0,0,.6);flex-shrink:0;margin-inline:auto}
.livephone iframe{display:block;width:390px;height:844px;border:0;border-radius:44px;background:#19191D;transform:scale(calc((390*var(--k) - 18*var(--k))/390));transform-origin:0 0}
:root[data-theme="light"] .livephone iframe{background:#F5F4F1}
.livephone.hero{--k:.86}
.alerts-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.alerts-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.flow{list-style:none;margin:6px 0 0;padding:0;counter-reset:fl;display:flex;flex-direction:column;gap:4px}
.flow li{counter-increment:fl;position:relative;padding:12px 0 12px 52px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.flow li:last-child{border-bottom:0}
.flow li::before{content:counter(fl,decimal-leading-zero);position:absolute;left:0;top:12px;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font:500 13px var(--fm,ui-monospace,monospace);color:var(--acc);background:var(--glass);border:1px solid var(--glass-line)}
.flow b{font-weight:500;font-size:17px}.flow span{color:var(--sub);font-size:15px;line-height:1.5}
.alerts-phones{display:flex;gap:24px;justify-content:center;min-width:0}
.alerts-phones figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.alerts-phones .livephone{--k:.72}
.alerts-phones figcaption{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.alerts-phones figcaption b{font-weight:500}.alerts-phones figcaption span{color:var(--sub);font-size:14px}
.replay{margin-top:8px;height:36px;padding:0 16px;border-radius:18px;border:1px solid var(--glass-line);background:var(--glass);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.replay:hover{border-color:var(--acc);color:var(--acc)}
.browser{border-radius:var(--r-lg,24px);border:1px solid var(--line);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
.browser .bar{display:flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-bottom:1px solid var(--line)}
.browser .bar i{width:11px;height:11px;border-radius:6px;background:var(--line)}
.browser .bar span{margin-inline-start:12px;font-size:13px;color:var(--sub);font-family:var(--fm,ui-monospace,monospace)}
.livewide{position:relative;width:100%;aspect-ratio:1440/900;overflow:hidden}
.livewide iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0}
@media (max-width:1080px){.alerts-split{grid-template-columns:1fr;gap:40px}}
@media (max-width:700px){.alerts-phones{gap:12px}.alerts-phones .livephone{--k:.42}.livephone.hero{--k:.74}.livewide{aspect-ratio:1440/1500}.livewide iframe{height:1500px}}