/* Scoped v19b app.css + v11/v16/v17/v18/v19: approved first three screens only. */
/* Tobira main landing v8 (20.10, built over v7): hero by layout A (A-1020-eccb): centred text, five future clients, the chosen client's own AI
   chat opened wide, the agents' talk card on the right. Example data only.
   Values: prod hero Open Air (sky, nav, form, liquid button), approved onboarding v4.2 chat (.chat, .m-u, .m-b, .tool,
   .composer, .s-cl, .s-tgm; orb = the thinking mark), approved booking card (A-1020-0beb). */

@font-face{font-family:"Landing B Inter";font-weight:400 800;font-display:swap;src:url(/agentic-site/assets/fonts/inter-dd8a4575be.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Landing B Inter";font-weight:400 800;font-display:swap;src:url(/agentic-site/assets/fonts/inter-8bc9dee39d.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Landing B Fraunces";font-weight:400 500;font-display:swap;src:url(/agentic-site/assets/fonts/fraunces-48282a415e.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
.lab-b{
  color-scheme:light;
  --ink:#12161C;--ink-2:#39414C;--mut:#6B7480;--faint:#A7B0BA;
  --line:rgba(18,22,28,.08);--line-2:rgba(18,22,28,.12);
  --air:#F4F8FC;--air-2:#EAF2FA;--paper:#FFFFFF;
  --y:#FFC21A;--y-2:#FFB000;--y-soft:#FFF5D6;--y-plate:#FFF7DD;--y-glow:rgba(255,186,20,.55);
  --gpt-ink:#0D0D0D;--gpt-bubble:#F1F1F1;
  --ease:cubic-bezier(.3,.7,.2,1);--out:cubic-bezier(.16,1,.3,1);
  --f:"Landing B Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--fd:"Landing B Fraunces",Georgia,serif;--fm:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;
  --wrap:1320px;--win:880px;--col:600px;
}
.lab-b *{box-sizing:border-box}
.lab-b,.lab-b{margin:0}
.lab-b{background:var(--paper);color:var(--ink);font:15px/1.5 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.lab-b button{font:inherit;color:inherit}
.lab-b img{max-width:100%}
.lab-b [hidden]{display:none!important}
.lab-b .form-note:empty{display:none}
/* v19b clips at the page edge, not the 1320px hero: keep the tilted neighbours and
   their fading edges intact. Vertical overflow lets the sky reach the shared header. */
.lab-b:has(.lab-b-hero){overflow-x:clip;overflow-y:visible}
.lab-b:has(.lab-b-hero) .sky{top:-100px;height:min(1280px,calc(140vh + 100px))}
.lab-b .lab-b-hero{overflow:visible}
.lab-b .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
{position:relative;overflow-x:clip;padding:0 24px}
/* ---------- sky (prod .hoa-bg) ---------- */
{position:relative;isolation:isolate;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.lab-b .sky{position:absolute;inset:0 0 auto;height:min(1180px,140vh);z-index:-1;pointer-events:none}
.lab-b .sky > i{position:absolute;inset:0}
.lab-b .sky .s1{background:url(/agentic-site/assets/landing-b/img/sky.webp) center 30%/cover}
.lab-b .sky .s2{background:linear-gradient(180deg,rgba(244,248,252,.50) 0%,rgba(244,248,252,.26) 42%,rgba(255,255,255,.50) 100%)}
.lab-b .sky .s3{top:auto;height:40%;background:linear-gradient(180deg,rgba(244,248,252,0) 0%,rgba(248,250,253,.75) 55%,#FFFFFF 100%)}

/* ---------- nav (prod G21 floating glass) ---------- */
{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding-top:16px}
{max-width:var(--wrap);margin:0 auto;height:64px;display:flex;align-items:center;gap:20px;padding:0 10px 0 18px;border-radius:20px;
  background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 10px 30px -18px rgba(30,60,100,.45)}
{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font:650 21px/1 var(--f);letter-spacing:-.03em}
{width:30px;height:30px}
{flex:1;display:flex;justify-content:center;gap:28px}
{font:500 15px var(--f);color:var(--ink-2);text-decoration:none}
{color:var(--ink)}
{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.7);font:500 14px var(--f);color:var(--ink-2)}
{width:16px;height:16px}
{margin-left:auto}
.lab-b .btn-dark{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border:0;border-radius:999px;background:#12161C;color:#fff;font:600 15px var(--f);cursor:pointer;text-decoration:none}
.lab-b .btn-dark:focus-visible,.lab-b .liq:focus-visible,.lab-b .seg button:focus-visible,.lab-b .stp:focus-visible,.lab-b .ctl:focus-visible{outline:2px solid var(--y-2);outline-offset:3px}
.lab-b .btn-dark:focus-visible,.lab-b .liq:focus-visible,.lab-b .pc:focus-visible,.lab-b .tl:focus-visible{outline:2px solid var(--y-2);outline-offset:3px}

/* ---------- hero text, centred (A-1020-4385) ---------- */
.lab-b .hero{max-width:var(--wrap);margin:0 auto;padding-top:14px;text-align:center}
.lab-b .eyebrow{margin:0;font:500 14.5px/1.3 var(--f);color:var(--ink-2)}
.lab-b .h1{margin:10px auto 0;max-width:1000px;font:400 clamp(34px,min(3vw,5.3vh),48px)/1.04 var(--fd);font-variation-settings:"opsz" 120;letter-spacing:-.025em;color:var(--ink)}
.lab-b .h1 .ln{display:block}
.lab-b .lead{margin:8px auto 0;font:400 17px/1.45 var(--f);color:var(--ink-2)}
.lab-b .form{display:flex;align-items:center;gap:10px;width:min(540px,100%);margin:14px auto 0;padding:5px 5px 5px 18px;border-radius:999px;background:#fff;text-align:left;
  box-shadow:inset 0 0 0 1px rgba(18,22,28,.06),0 24px 50px -24px rgba(30,60,100,.5)}
.lab-b .form > svg{flex:none;width:18px;height:18px;color:var(--faint)}
.lab-b .form .pre{color:var(--faint);font-size:16px}
.lab-b .form input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:8px 0;font:500 16px/1.5 var(--f);color:var(--ink)}
.lab-b .form input::placeholder{color:#8C959F;font-weight:400}
.lab-b .liq{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;font:600 15px var(--f);color:#fff;white-space:nowrap;cursor:pointer;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%) 160% 0/250% 100% no-repeat,linear-gradient(135deg,#4A525D 0%,#1D2229 48%,#0C0F13 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 1px rgba(0,0,0,.25),0 12px 24px -12px rgba(12,15,19,.55),0 2px 5px -3px rgba(12,15,19,.4);
  transition:transform .18s var(--ease),background-position .8s cubic-bezier(.2,.8,.2,1)}
.lab-b .liq::after{content:"\2192";font-weight:500;transition:transform .2s var(--ease)}
.lab-b .liq:hover{background-position:-60% 0,0 0;transform:translateY(-1px)}
.lab-b .liq:hover::after{transform:translateX(3px)}
.lab-b .under{margin:7px 0 0;font:400 13.5px/1.45 var(--f);color:var(--mut)}
.lab-b .form-note{margin:8px 0 0;font:500 13px/1.4 var(--f);color:var(--ink-2)}

/* ---------- future clients: five cards in one row (A-1020-c81c) and the note that they are outside people (A-1020-95bb) ---------- */
.lab-b .clients{position:relative;z-index:2;max-width:var(--win);margin:16px auto 0;text-align:left}
.lab-b .cl-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 2px 8px}
.lab-b .lbl{margin:0;font:600 12px/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.lab-b .aside{display:flex;align-items:center;gap:8px;margin:0;font:italic 400 16px/1.25 var(--fd);color:var(--ink-2);text-align:right}
.lab-b .aside .hand{flex:none;width:30px;height:22px;fill:none;stroke:var(--y-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:translateY(5px)}
.lab-b .cl-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.lab-b .pc{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:7px 10px 7px 7px;border:0;border-radius:16px;cursor:pointer;text-align:left;overflow:hidden;
  background:rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 6px 16px -12px rgba(30,60,100,.35);
  transition:background .3s,box-shadow .3s,transform .2s var(--ease)}
.lab-b .pc:hover{background:rgba(255,255,255,.85)}
.lab-b .pc.on{background:#fff;box-shadow:inset 0 0 0 1.5px var(--y),0 14px 30px -16px rgba(30,60,100,.45)}
.lab-b .pc .bar{position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:transparent;overflow:hidden}
.lab-b .pc.on .bar i{display:block;height:100%;width:0;background:var(--y-2)}
.lab-b .ava{position:relative;flex:none;width:38px;height:38px}
.lab-b .ava > img{width:38px;height:38px;border-radius:50%;object-fit:cover;display:block}
.lab-b .lg{position:absolute;right:-4px;bottom:-3px;width:19px;height:19px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1.5px #fff,0 1px 3px rgba(0,0,0,.18)}
.lab-b .lg img{width:12px;height:12px}
.lab-b .lg.dot::after{content:"";position:absolute;right:-2px;top:-2px;width:7px;height:7px;border-radius:50%;background:#0D0D0D;box-shadow:0 0 0 1.5px #fff}
.lab-b .lg.own{background:#12161C}
.lab-b .lg.own svg{width:11px;height:11px;fill:#fff}
.lab-b .pc .tx{min-width:0;display:flex;flex-direction:column}
.lab-b .pc .tx b{font:600 14px/1.25 var(--f);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-b .pc .tx small{font:400 12px/1.3 var(--f);color:var(--mut);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- the stage: the client's own chat, wide, on an optional backdrop (A-1020-009f) ---------- */
.lab-b .stage{position:relative;max-width:var(--wrap);margin:26px auto 0;text-align:left}
.lab-b .plate{position:absolute;left:calc(50% - var(--win)/2 - 52px);width:calc(var(--win) + 104px);top:-18px;bottom:0;border-radius:34px;z-index:0;pointer-events:none;opacity:.8;
  background:url(/agentic-site/assets/landing-b/img/hills.webp) center 70%/cover;-webkit-mask-image:linear-gradient(#000 45%,transparent 96%);mask-image:linear-gradient(#000 45%,transparent 96%)}
.lab-b .no-plate .plate{display:none}
.lab-b .win{position:relative;z-index:1;width:min(var(--win),100%);margin:0 auto;height:var(--chat-h,520px);display:flex;flex-direction:column;border-radius:22px 22px 0 0;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(18,22,28,.05),0 30px 70px -30px rgba(30,50,80,.45);transition:opacity .6s var(--ease),filter .6s var(--ease),transform .6s var(--ease)}
.lab-b .no-plate .win{box-shadow:0 0 0 1px rgba(18,22,28,.07),0 30px 70px -34px rgba(30,50,80,.38)}
/* the window melts into the white page; the spacer keeps every message and the composer above it (A-1020-f517) */
.lab-b .wm{position:relative;z-index:1;margin:-24px -70px 0;padding:24px 70px 0;-webkit-mask-image:linear-gradient(#000 calc(100% - 58px),transparent);mask-image:linear-gradient(#000 calc(100% - 58px),transparent)}
/* focus moves to the agents' card for a few seconds: the chat goes quiet under a white veil, then comes back (A-1020-f254) */
.lab-b .win::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:rgba(255,255,255,.66);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:opacity .6s var(--ease)}
.lab-b .stage.focus .win::after{opacity:1}

/* whose chat: in the chat header, not the address bar (A-1020-8e70) */
.lab-b .wh{flex:none;display:flex;align-items:center;gap:11px;height:56px;padding:0 16px 0 14px;border-bottom:1px solid #EEF1F4;background:#fff}
.lab-b .wh .ava,.lab-b .wh .ava > img{width:34px;height:34px}
.lab-b .wh .t{min-width:0;flex:1;display:flex;flex-direction:column}
.lab-b .wh .t b{font:600 14.5px/1.25 var(--f);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-b .wh .t small{font:400 12.5px/1.3 var(--f);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-b .wh .ex{flex:none;font:500 12px var(--f);color:var(--faint)}
.lab-b .tl{flex:none;border:0;background:none;padding:6px 4px;cursor:pointer;font:600 13px var(--f);color:var(--ink-2);text-decoration:underline;text-decoration-color:rgba(18,22,28,.2);text-underline-offset:3px}
.lab-b .tl:hover{color:var(--ink)}
@media (min-width:1181px){.lab-b .wh{padding-right:150px}}

/* ---------- their AI app (approved onboarding v4.2 values) ---------- */
.lab-b .app{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:#fff}
.lab-b .chat-sc{flex:1;min-height:0;overflow:auto;scrollbar-width:none;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(transparent 0,#000 22px);mask-image:linear-gradient(transparent 0,#000 22px)}
.lab-b .chat-sc::-webkit-scrollbar{display:none}
.lab-b .chat-col{position:relative;width:min(var(--col),calc(100% - 40px));margin:0 auto;padding:20px 0 16px;display:flex;flex-direction:column;gap:14px}
.lab-b .rv:not(.in){display:none!important}
.lab-b .rv.in{display:flex;animation:labB-msg-in .5s var(--out) both}
.lab-b .instant .rv.in{animation:none}
@keyframes labB-msg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lab-b .m-u{align-self:flex-end;max-width:82%;flex-direction:column;align-items:flex-end}
.lab-b .m-u p{margin:0;padding:10px 16px;border-radius:20px;background:var(--gpt-bubble);font:15px/1.5 var(--f);color:var(--gpt-ink)}
.lab-b .m-a{flex-direction:column;max-width:100%}
.lab-b .m-b{font:15px/1.6 var(--f);color:var(--gpt-ink)}
.lab-b .m-b p{margin:0}.lab-b .m-b p + p,.lab-b .m-b ol + p{margin-top:8px}
.lab-b .m-b ol{margin:6px 0 0;padding-left:22px}.lab-b .m-b li{margin:4px 0;padding:1px 6px 1px 2px;border-radius:8px}
.lab-b .m-b li.me{margin-left:-8px;padding-left:10px;background:rgba(255,245,214,.9)}
.lab-b .m-b a{color:inherit;text-decoration:underline;text-decoration-color:rgba(13,13,13,.35);text-underline-offset:3px;font-weight:500}
.lab-b .src{display:inline-flex;align-items:center;margin-left:6px;padding:0 8px;border-radius:999px;background:#F3F3F3;font:500 11.5px/1.7 var(--f);color:#5D5D5D;vertical-align:1px;text-decoration:none!important}
.lab-b .think{font:14px/1.4 var(--f);color:var(--mut)}
.lab-b .think span{margin-left:4px}
.lab-b .tool{display:flex;align-items:center;gap:8px;font:13.5px/1.4 var(--f);color:var(--mut)}
.lab-b .tool b{font-weight:600;color:var(--ink-2)}
.lab-b .tool .sp{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid rgba(18,22,28,.15);border-top-color:var(--ink-2);animation:labB-spin .8s linear infinite}
.lab-b .tool > svg{flex:none;display:none;width:13px;height:13px;fill:none;stroke:var(--ink-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lab-b .tool.ok .sp{display:none}.lab-b .tool.ok > svg{display:block}
.lab-b .tool .st{transition:opacity .25s}
.lab-b .tool .st.swap{opacity:0}
.lab-b .tool.live:not(.ok) .st{background:linear-gradient(90deg,var(--mut) 0%,var(--mut) 40%,#C9CED5 50%,var(--mut) 60%,var(--mut) 100%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:labB-shim 1.6s linear infinite}
@keyframes labB-shim{from{background-position:100% 0}to{background-position:-50% 0}}
@keyframes labB-spin{to{transform:rotate(360deg)}}
.lab-b .favs{display:inline-flex;margin-left:2px}
.lab-b .favs i + i{margin-left:-5px}
.lab-b .flogo{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font:600 9.5px/1 var(--f);font-style:normal;color:#6B6B6B;background:#EFEFEF;box-shadow:0 0 0 1.5px #fff}
.lab-b .composer{flex:none;width:min(var(--col),calc(100% - 40px));margin:4px auto 0;display:flex;align-items:center;gap:8px;height:46px;padding:0 6px 0 16px;border-radius:26px;background:#fff;
  box-shadow:0 0 0 1px rgba(18,22,28,.1),0 8px 20px -14px rgba(0,0,0,.25);font:15px var(--f);color:#9A9A9A}
.lab-b .composer span{flex:1;white-space:nowrap;overflow:hidden}
.lab-b .composer .tag{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:#fff;color:var(--gpt-ink);box-shadow:inset 0 0 0 1px rgba(13,13,13,.16);font:500 13px var(--f)}
.lab-b .composer .tag i{width:7px;height:7px;border-radius:50%;background:#0D0D0D}
.lab-b .composer > em{flex:none;width:34px;height:34px;border-radius:50%;background:#E6E6E6}
.lab-b .spacer{flex:none;height:64px}
/* Claude (.s-cl), Gemini, own agent in a messenger (.s-tgm) */
.lab-b .app.t-cl{background:#FAF9F5}
.lab-b .t-cl .m-u p{background:#F0EEE6;color:#2B2A26;border-radius:14px}
.lab-b .t-cl .m-b{color:#2B2A26;font-family:Georgia,"Landing B Fraunces",serif;font-size:15.5px}
.lab-b .t-cl .composer{border-radius:18px}.lab-b .t-cl .composer > em{border-radius:9px;background:#E8C3B3}
.lab-b .t-gm .m-u p{background:#E9EEF6;border-radius:22px 4px 22px 22px;color:#1F1F1F}
.lab-b .t-gm .m-b{color:#1F1F1F}
.lab-b .t-gm .composer{background:#F0F4F9;box-shadow:none;border-radius:28px}.lab-b .t-gm .composer > em{background:transparent}
.lab-b .app.t-tg{background:linear-gradient(180deg,#E4EDF3,#EAF1E6)}
.lab-b .t-tg .chat-sc{-webkit-mask-image:none;mask-image:none}
.lab-b .t-tg .m-u p{background:#E2F7CB;border-radius:16px 16px 4px 16px;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.lab-b .t-tg .m-b{padding:10px 14px;border-radius:16px 16px 16px 4px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.lab-b .t-tg .m-a{align-self:flex-start;max-width:88%}
.lab-b .t-tg .composer{border-radius:22px}.lab-b .t-tg .composer > em{background:#9CD3F2}
.lab-b .t-tg .tool,.lab-b .t-tg .think{align-self:flex-start;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.7)}

/* ---------- our notes over their chat: dark, large, the thinking orb, no logo in the plate (A-1020-b422, 6bfa, 51b8) ---------- */
.lab-b .note{position:absolute;z-index:6;display:flex;align-items:center;gap:12px;width:max-content;max-width:300px;padding:13px 18px 14px 14px;border-radius:18px;background:#12161C;color:#fff;
  box-shadow:0 24px 50px -18px rgba(12,15,19,.7);pointer-events:none;
  opacity:0;transform:translateY(12px) scale(.92);filter:blur(8px);transition:opacity .45s var(--ease),transform .7s cubic-bezier(.34,1.45,.64,1),filter .45s var(--ease)}
.lab-b .note.in{opacity:1;transform:none;filter:none}
.lab-b .note > span{display:flex;flex-direction:column;gap:2px;text-align:left}
.lab-b .note b{font:600 17px/1.25 var(--f);letter-spacing:-.01em}
.lab-b .note small{font:400 14px/1.35 var(--f);color:rgba(255,255,255,.72)}
.lab-b .orb{position:relative;flex:none;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#FFE07A 0 34%,rgba(255,194,26,.22) 35% 100%);box-shadow:inset 0 0 0 1.5px rgba(255,186,20,.65);animation:labB-orb 1.6s ease-in-out infinite}
@keyframes labB-orb{50%{box-shadow:inset 0 0 0 1.5px rgba(255,186,20,.65),0 0 0 5px rgba(255,194,26,.18)}}
.lab-b .note::before{content:"";position:absolute;width:14px;height:14px;background:inherit;transform:rotate(45deg);border-radius:3px}
.lab-b .note.r::before{right:-6px;top:calc(50% - 7px)}
.lab-b .note.dn::before{left:26px;bottom:-6px}

/* ---------- right side: the agents' talk (A-1020-b0b8, adb8, 5b9a) and the owner's card (A-1020-0beb) ---------- */
.lab-b .side{position:absolute;z-index:7;left:calc(50% + var(--col)/2 + 6px);width:360px;top:4px;pointer-events:none}
.lab-b .ac{opacity:0;transform:translateX(26px) scale(.96);filter:blur(6px);transition:opacity .6s var(--ease),transform .8s var(--out),filter .6s var(--ease)}
.lab-b .ac.in{opacity:1;transform:none;filter:none}
.lab-b .ac-cap{margin:0 4px 8px}
.lab-b .ac-cap .lbl{color:var(--ink-2)}
.lab-b .ac-cap .lite{display:block;margin-top:3px;font:italic 400 16px/1.3 var(--fd);color:var(--ink-2)}
.lab-b .ac-box{padding:14px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(18,22,28,.06),0 34px 80px -30px rgba(30,50,80,.5)}
.lab-b .ac-h{display:flex;align-items:center;gap:8px;padding:0 2px 10px;font:600 13px/1.2 var(--f);color:var(--ink)}
.lab-b .ac-h .pair{display:flex;align-items:center}
.lab-b .ac-h .pair img{width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #fff}
.lab-b .ac-h .pair .wire{width:22px;height:2px;margin:0 2px;background:repeating-linear-gradient(90deg,var(--y-2) 0 4px,transparent 4px 7px);animation:labB-wire .6s linear infinite}
@keyframes labB-wire{to{background-position:7px 0}}
.lab-b .ac-h small{margin-left:auto;font:500 11.5px var(--f);color:var(--faint)}
.lab-b .js{display:flex;flex-direction:column;gap:5px}
.lab-b .jl{display:flex;align-items:flex-start;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .45s var(--out)}
.lab-b .jl.in{opacity:1;transform:none}
.lab-b .jl > img{flex:none;width:16px;height:16px;margin-top:4px;border-radius:4px}
.lab-b .jl code{flex:1;min-width:0;padding:6px 9px;border-radius:10px;background:#F4F6F9;font:500 11px/1.45 var(--fm);color:#2A313A;white-space:pre-wrap;word-break:break-word}
.lab-b .jl.a code{background:#FFF8E2}
.lab-b .jl code .k{color:#6B7480}
.lab-b .hum{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #F0F2F5;font:600 14px/1.3 var(--f);color:var(--ink);opacity:0;transition:opacity .4s var(--ease)}
.lab-b .hum.in{opacity:1}
.lab-b .hum img{width:18px;height:18px;border-radius:5px}
.lab-b .side .ncard{position:absolute;left:0;top:66px}
/* ---------- booking notification (approved card, A-1020-0beb) ---------- */
.lab-b .ncard{width:320px;border-radius:20px;opacity:0;transform:translateY(22px) scale(.94);filter:blur(6px);pointer-events:none;
  transition:opacity .8s var(--ease),transform 1s var(--out),filter .8s var(--ease)}
.lab-b .ncard.in{opacity:1;transform:none;filter:none}
.lab-b .k-tobira,.lab-b .k-tg,.lab-b .k-mail{padding:14px 16px;background:#fff;box-shadow:0 34px 80px -30px rgba(30,50,80,.45),0 2px 8px rgba(27,23,19,.08)}
.lab-b .k-h{display:flex;align-items:center;gap:8px;font:700 14px/1 var(--f)}
.lab-b .k-h img{width:20px;height:20px;border-radius:6px}
.lab-b .k-h span{margin-left:auto;font:500 12px/1 var(--f);color:#8B8279}
.lab-b .k-t{margin:12px 0 0;font:600 15px/1.25 var(--f)}
.lab-b .k-r{margin-top:10px;display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:#FAF7F3}
.lab-b .k-r img{width:34px;height:34px;border-radius:10px}
.lab-b .k-r div{flex:1;display:grid;gap:2px}
.lab-b .k-r b{font:600 14px/1.2 var(--f)}
.lab-b .k-r small{font:400 12.5px/1.2 var(--f);color:#8B8279}
.lab-b .k-r > span{flex:none;height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;background:#E8F4EC;color:#2E6B48;font:600 12.5px/1 var(--f)}
.lab-b .k-s{margin:9px 0 0;font:400 13px/1.45 var(--f);color:#4B443D}
.lab-b .k-also{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:9px;border-top:1px solid #F1ECE6;font:500 12.5px var(--f);color:#6E655C}
.lab-b .k-also img{width:15px;height:15px}
.lab-b .k-tgi{width:22px;height:22px;border-radius:50%;background:#229ED9;display:grid;place-items:center}
.lab-b .k-tgi img{width:13px;height:13px;filter:brightness(0) invert(1)}
.lab-b .k-b{margin:10px 0 0;padding:10px 12px;border-radius:14px 14px 14px 4px;background:#EFF7FC;font:400 13.5px/1.5 var(--f);color:#1B1713}
.lab-b .k-mi{width:22px;height:22px;border-radius:6px;background:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #EEE}
.lab-b .k-mi img{width:15px;height:15px}
.lab-b .k-sub{margin:10px 0 0;font:600 14.5px/1.3 var(--f)}

.lab-b .ncard{width:340px}
.lab-b .k-r > span.lead-t{background:var(--y-soft);color:#7A5600}

/* ---------- second screen, scheme C with Vlad's edit (A-1020-a556, f1f6) ---------- */
.lab-b .scr2{max-width:var(--wrap);margin:0 auto;padding:clamp(70px,10vh,120px) 0 clamp(70px,10vh,120px)}
.lab-b .s2c{max-width:980px;margin:0 auto;text-align:left}
.lab-b .s2c p{margin:0;font:400 clamp(28px,3.2vw,46px)/1.2 var(--fd);letter-spacing:-.02em;color:var(--mut);text-wrap:pretty}
.lab-b .s2c p b{font-weight:400;color:var(--ink)}
.lab-b .s2c p .num{display:inline-block;padding:0 .12em;border-radius:.18em;background:linear-gradient(transparent 62%,rgba(255,194,26,.38) 0);color:var(--ink)}
.lab-b .s2c p + p{margin-top:.6em}
.lab-b .s2c sup{font:500 .4em var(--f);color:var(--faint);vertical-align:super}
.lab-b .notes{margin:26px auto 0;max-width:980px;font:12px/1.6 var(--f);color:var(--faint)}

/* ---------- prototype bar (outside the design) ---------- */
{position:fixed;z-index:90;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:6px;padding:6px;border-radius:14px;
  background:rgba(18,22,28,.9);color:#fff;font:500 12.5px var(--f);box-shadow:0 18px 40px -16px rgba(0,0,0,.55);max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none}
{display:none}
{padding:0 6px;color:rgba(255,255,255,.55);white-space:nowrap}
{flex:none;height:28px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:rgba(255,255,255,.8);cursor:pointer;white-space:nowrap;font:500 12.5px var(--f)}
{background:#fff;color:var(--ink)}
{width:1px;height:18px;background:rgba(255,255,255,.18);margin:0 2px}
{display:none}

/* =================================================================================================
   v8 (Vlad 17:35Z, 17:37Z): lighter, tidier, slower. Pills and chip from the live hero (hero-openair.css .hoa-chip,
   .hoa-cap, .hoa-agent); 8 px grid; chat line-height 1.6 with 18 px between messages.
   ================================================================================================= */
.lab-b .hero{position:relative;padding-top:20px}
/* the sky turns white early: by the middle of the chat window the page is white (A-1020-b080) */
.lab-b .sky{height:min(740px,90vh)}
.lab-b .sky .s3{height:62%;background:linear-gradient(180deg,rgba(244,248,252,0) 0%,rgba(248,250,253,.82) 44%,#FFFFFF 84%)}
/* chip: prod .hoa-chip (A-1020-e4f6) */
.lab-b .chip{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 6px 16px -10px rgba(30,60,100,.35);font:500 13px/1.4 var(--f);color:var(--ink-2);white-space:nowrap}
.lab-b .chip i{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--y);box-shadow:0 0 8px var(--y-glow)}
.lab-b .h1{margin:14px auto 0;max-width:1240px;font-size:clamp(32px,min(3.05vw,5.4vh),46px);line-height:1.08}
@media (min-width:1181px){.lab-b .h1 .ln{white-space:nowrap}}
.lab-b .lead{max-width:690px;margin:12px auto 0;font-size:17px;line-height:1.55}
.lab-b .form{margin-top:20px}
/* future clients: label and a calm note in the same Inter (A-1020-699a) */
.lab-b .clients{margin-top:26px}
.lab-b .cl-h{align-items:baseline;justify-content:flex-start;gap:12px;margin:0 8px 10px}
.lab-b .aside{font:400 14px/1.4 var(--f);color:var(--mut);text-align:left}
.lab-b .cl-row{gap:10px}
/* the pills: prod .hoa-cap, a little smaller, no white rings (A-1020-e4f3, d64b) */
.lab-b .pc{height:56px;padding:0 12px 0 8px;gap:10px;border-radius:999px;overflow:visible;background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 5px rgba(30,60,100,.07),0 0 0 1px rgba(18,22,28,.05),0 14px 28px -16px rgba(30,60,100,.45);
  transition:transform .35s var(--out),box-shadow .35s var(--ease),border-radius .35s var(--ease)}
.lab-b .pc:hover{background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%);transform:translateY(-1px)}
.lab-b .pc .bar{display:none}
.lab-b .pc .tx{gap:3px}
.lab-b .pc .tx b{font-size:14px;line-height:1.2;letter-spacing:-.01em}
.lab-b .pc .tx small{font-size:12px;line-height:1.25}
.lab-b .ava,.lab-b .ava > img{width:36px;height:36px}
.lab-b .lg{width:22px;height:22px;right:-7px;bottom:-5px;box-shadow:0 2px 6px rgba(18,22,28,.2)}
.lab-b .lg img{width:14px;height:14px}
.lab-b .lg.own svg{width:12px;height:12px}
.lab-b .lg.dot::after{right:-1px;top:-1px;width:7px;height:7px;box-shadow:none}

/* link a) Tab: the chosen pill drops onto the window's top edge and shares its white */
.lab-b[data-link="tab"] .cl-row .pc.on{border-radius:20px 20px 0 0;background:#fff;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(18,22,28,.05),0 -12px 26px -20px rgba(30,60,100,.55)}
.lab-b[data-link="tab"] .cl-row .pc.on::after{content:"";position:absolute;left:0;right:0;top:100%;height:21px;background:#fff;box-shadow:-1px 0 0 rgba(18,22,28,.05),1px 0 0 rgba(18,22,28,.05)}
/* link c) Echo: lifted with the yellow halo of prod .hoa-agent; the same pill sits in the chat header */
.lab-b[data-link="echo"] .cl-row .pc.on,.lab-b .who-e .pc{background:#fff;box-shadow:0 0 0 2px var(--y),0 0 22px 4px rgba(255,194,26,.45),0 10px 22px -12px rgba(60,40,0,.45)}
.lab-b[data-link="echo"] .cl-row .pc.on{transform:translateY(-3px)}
/* link b) Thread: a soft yellow curve to the header avatar */
.lab-b .thread{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3;display:none}
.lab-b[data-link="thread"] .thread{display:block}
.lab-b .thread path{fill:none;stroke:var(--y);stroke-width:2;stroke-linecap:round;opacity:.85;filter:drop-shadow(0 0 4px rgba(255,186,20,.55))}
.lab-b .thread circle{fill:#FFD55A;opacity:0;filter:drop-shadow(0 0 6px rgba(255,186,20,.95))}
.lab-b[data-link="thread"] .cl-row .pc.on{box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px var(--y),0 14px 28px -16px rgba(30,60,100,.45)}

/* stage, backdrop (A-1020-009f, b080): 56 px wider each side, radius 32, the picture at full colour */
.lab-b .stage{margin-top:20px}
.lab-b .plate{left:calc(50% - var(--win)/2 - 56px);width:calc(var(--win) + 112px);top:-12px;border-radius:32px;opacity:1;
  -webkit-mask-image:linear-gradient(#000 62%,transparent 98%);mask-image:linear-gradient(#000 62%,transparent 98%)}
.lab-b .plate,.lab-b[data-plate="pic"] .plate{background:url(/agentic-site/assets/img/blur-2.webp) center 40%/cover}
.lab-b[data-plate="hills"] .plate{background:url(/agentic-site/assets/landing-b/img/hills.webp) center 70%/cover}
.lab-b[data-plate="off"] .plate{display:none}
.lab-b .win{border-radius:22px 22px 0 0}
.lab-b .win::after{content:none}
/* while the agents talk, the chat blurs like widget screens: softly, stronger at the sides (A-1020-ceb4) */
.lab-b .veil{position:absolute;z-index:4;left:calc(50% - var(--win)/2);width:min(var(--win),100%);top:0;bottom:0;border-radius:22px 22px 0 0;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);
  background:rgba(255,255,255,.3);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 58px),transparent);mask-image:linear-gradient(#000 calc(100% - 58px),transparent)}
.lab-b .veil i{position:absolute;inset:0;border-radius:inherit;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,.18);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 32%,transparent 68%,#000 100%);mask-image:linear-gradient(90deg,#000 0%,transparent 32%,transparent 68%,#000 100%)}
.lab-b .stage.focus .veil{opacity:1}

/* whose chat */
.lab-b .wh{height:64px;padding:0 20px 0 16px;gap:12px}
.lab-b .who-a{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.lab-b .who-a .ava,.lab-b .who-a .ava > img{width:36px;height:36px}
.lab-b .who-a .t{gap:2px}
.lab-b .who-e{display:none;flex:1;min-width:0;align-items:center;gap:14px}
.lab-b .who-e .pc{flex:none;height:44px;padding:0 16px 0 6px;cursor:default}
.lab-b .who-e .pc .ava,.lab-b .who-e .pc .ava > img{width:32px;height:32px}
.lab-b .who-e > small{font:400 12.5px/1.3 var(--f);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-b[data-link="echo"] .who-a{display:none}
.lab-b[data-link="echo"] .who-e{display:flex}

/* chat air (A-1020-151c) */
.lab-b .chat-col{gap:18px;padding:24px 0 20px}
.lab-b .m-u p{padding:11px 18px;line-height:1.6}
.lab-b .m-b{line-height:1.6}
.lab-b .m-b ol{margin-top:8px}.lab-b .m-b li{margin:6px 0}
.lab-b .m-b p + p,.lab-b .m-b ol + p{margin-top:10px}

/* the agents' card */
.lab-b .side{left:calc(50% + 96px);width:420px;top:22px}
.lab-b .ac{transform:translateY(18px) scale(.97);filter:blur(8px);transition:opacity .7s var(--ease),transform .9s var(--out),filter .7s var(--ease)}
.lab-b .ac.in{transform:translateY(-4px);filter:none}
.lab-b .ac-box{padding:20px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(18,22,28,.05),0 2px 6px rgba(18,22,28,.05),0 44px 90px -30px rgba(30,50,80,.55)}
.lab-b .ac-t{margin:0;font:400 26px/1.12 var(--fd);font-variation-settings:"opsz" 72;letter-spacing:-.018em;color:var(--ink)}
.lab-b .ac-s{margin:6px 0 0;font:500 13px/1.4 var(--f);color:var(--mut)}
.lab-b .js{margin-top:16px;gap:10px}
.lab-b .jl{max-width:92%;align-items:flex-end;gap:8px;transform:translateY(8px)}
.lab-b .jl.c{align-self:flex-start}
.lab-b .jl.a{align-self:flex-end}
.lab-b .jl code{flex:0 1 auto;padding:10px 12px;font:500 12.5px/1.55 var(--fm);color:#2A313A;border-radius:16px 16px 16px 6px;background:#F2F4F7}
.lab-b .jl.a code{border-radius:16px 16px 6px 16px;background:#FFF5D6;color:#3A3220}
.lab-b .who-l{flex:none;width:24px;height:24px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 1px 4px rgba(18,22,28,.16)}
.lab-b .who-l img{width:15px;height:15px}
.lab-b .who-l.own{background:#12161C}.lab-b .who-l.own svg{width:12px;height:12px;fill:#fff}
.lab-b .orb.sm{width:22px;height:22px}
.lab-b .hum{display:block;width:fit-content;margin:16px auto 0;padding:6px 14px;border-top:0;border-radius:999px;background:#F4F6F9;font:500 12.5px/1.4 var(--f);color:var(--ink-2)}

/* outcome cards, one skeleton (A-1020-58d7, approved Tobira card 0beb) */
.lab-b .side .ncard{left:210px;top:56px}
.lab-b .ncard{width:340px;padding:16px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(18,22,28,.05),0 34px 80px -30px rgba(30,50,80,.5),0 2px 8px rgba(18,22,28,.06)}
.lab-b .k-l{display:flex;align-items:baseline;gap:8px;margin:0;font:600 14px/1.3 var(--f);color:var(--ink)}
.lab-b .k-l img{width:20px;height:20px;border-radius:6px;align-self:center}
.lab-b .k-l span{margin-left:auto;font:500 12px/1.3 var(--f);color:var(--mut)}
.lab-b .k-t{margin:12px 0 0;font:600 15px/1.35 var(--f)}
.lab-b .k-r{margin-top:12px;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:#FAF7F3}
.lab-b .k-r img{width:36px;height:36px;border-radius:10px;object-fit:cover}
.lab-b .k-r div{gap:3px}
.lab-b .k-r b{font:600 14px/1.3 var(--f)}
.lab-b .k-r small{font:400 12.5px/1.35 var(--f);color:#8B8279}
.lab-b .k-r > span{height:26px;padding:0 10px;border-radius:999px;background:#E8F4EC;color:#2E6B48;font:600 12.5px/1 var(--f)}
.lab-b .k-r > span.lead-t{background:var(--y-soft);color:#7A5600}
.lab-b .k-s{margin:12px 0 0;font:400 13.5px/1.5 var(--f);color:#4B443D}
.lab-b .k-also{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding-top:12px;border-top:1px solid #F1ECE6;font:500 12.5px/1.3 var(--f);color:#6E655C}
.lab-b .k-also img{width:16px;height:16px}
.lab-b .k-tg,.lab-b .k-mail{display:flex;align-items:flex-start;gap:12px;border-radius:22px;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.lab-b .k-ic{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;margin-top:-4px}
.lab-b .k-ic.tg{background:#229ED9}.lab-b .k-ic.tg img{width:15px;height:15px;filter:brightness(0) invert(1)}
.lab-b .k-ic.gm{background:#fff;box-shadow:0 1px 4px rgba(18,22,28,.16)}.lab-b .k-ic.gm img{width:16px;height:16px}
.lab-b .k-c{flex:1;min-width:0}
.lab-b .k-1{margin:4px 0 0;font:600 14px/1.4 var(--f);color:var(--ink)}
.lab-b .k-2{margin:4px 0 0;font:400 13.5px/1.45 var(--f);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lab-b .k-mail .k-2{-webkit-line-clamp:1}

/* ---------- narrower: the card and the notes sit over the chat instead of beside it ---------- */
@media (max-width:1180px){
  {display:none}
  .lab-b .side{left:50%;width:min(360px,calc(100% - 24px));transform:translateX(-50%);top:auto;bottom:60px}
  .lab-b .side .ncard{position:relative;top:auto}
  .lab-b .ac-cap{padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.92);box-shadow:0 10px 24px -16px rgba(30,50,80,.5)}
}
@media (max-width:760px){
  {padding:0 16px}
  {padding-top:10px}
  {height:54px;padding:0 6px 0 12px;border-radius:16px}
  {font-size:19px}{width:26px;height:26px}
  .lab-b .btn-dark{height:40px;padding:0 14px;font-size:14px}
  .lab-b .hero{padding-top:20px}
  .lab-b .eyebrow{font-size:13px}
  .lab-b .h1{font-size:31px;line-height:1.08}
  .lab-b .lead{font-size:15.5px}
  .lab-b .form{padding:5px 5px 5px 14px}
  .lab-b .form .pre,.lab-b .form > svg{display:none}
  .lab-b .liq{padding:11px 16px;font-size:14px}
  .lab-b .liq::after{display:none}
  .lab-b .cl-h{flex-direction:column;align-items:flex-start;gap:4px}
  .lab-b .aside{text-align:left;font-size:15px}
  .lab-b .aside .hand{display:none}
  .lab-b .cl-row{gap:6px}
  .lab-b .pc{flex-direction:column;gap:5px;padding:8px 2px 9px;text-align:center}
  .lab-b .pc .tx small{display:none}
  .lab-b .pc .tx b{font-size:12.5px}
  .lab-b .win{height:var(--chat-h,560px)}
  .lab-b .wh{height:52px;padding:0 12px}
  .lab-b .wh .ex{display:none}
  .lab-b .chat-col,.lab-b .composer{width:calc(100% - 28px)}
  .lab-b .m-u{max-width:90%}
  .lab-b .m-b,.lab-b .m-u p{font-size:14.5px}
  .lab-b .note{max-width:260px;padding:11px 14px 12px 12px}
  .lab-b .note b{font-size:15.5px}.lab-b .note small{font-size:13px}
  .lab-b .ncard{width:100%}
  .lab-b .stage{margin-top:22px}
  .lab-b .plate{left:-16px;right:-16px;width:auto;top:0;border-radius:0}
  .lab-b .side{bottom:46px}
  .lab-b .ac-cap .lbl{font-size:11px}
  .lab-b .ac-cap .lite{font-size:14.5px}
  .lab-b .ac-box{padding:12px}
  .lab-b .ac-h small{display:none}
  .lab-b .s2c p{font-size:26px}
}
/* v8 narrower and phone */
@media (max-width:1180px){
  .lab-b .side{left:50%;width:min(400px,calc(100% - 24px));transform:translateX(-50%);top:auto;bottom:56px}
  .lab-b .side .ncard{position:absolute;left:0;right:0;top:auto;bottom:0;width:100%}
  .lab-b .veil{left:0;width:100%}
}
@media (max-width:760px){
  .lab-b .hero{padding-top:20px}
  .lab-b .h1{font-size:30px;line-height:1.1}
  .lab-b .lead{font-size:15.5px;margin-top:14px}
  .lab-b .form{margin-top:20px}
  .lab-b .clients{margin-top:28px}
  .lab-b .cl-h{flex-direction:column;align-items:flex-start;gap:4px;margin:0 4px 10px}
  .lab-b .aside{font-size:13px}
  .lab-b .cl-row{gap:6px}
  .lab-b .pc{height:auto;flex-direction:column;gap:6px;padding:10px 2px;border-radius:20px;text-align:center}
  .lab-b .pc .tx small{display:none}
  .lab-b .pc .tx b{font-size:12.5px}
  .lab-b .plate{left:-16px;right:-16px;width:auto;top:-8px;border-radius:24px}
  .lab-b .wh{height:60px;padding:0 12px}
  .lab-b .who-e > small{display:none}
  .lab-b .ac-box{padding:16px}
  .lab-b .ac-t{font-size:22px}
  .lab-b .jl code{font-size:11.5px;padding:8px 10px}
  .lab-b .js{gap:8px;margin-top:12px}
  .lab-b .hum{margin-top:12px}
  .lab-b .side{bottom:40px}
  .lab-b .who-e .pc{flex-direction:row;height:44px;padding:0 14px 0 6px;border-radius:999px;text-align:left}
  .lab-b .who-e .pc .tx small{display:block}
}

/* =================================================================================================
   v9 (Vlad 19:04Z): header with Amplemarket spacing (chip 24 title 16 lead 28 field), one readable line over the clients,
   a carousel of client windows, composers as the apps draw them, Grow intro, the outcome in focus, Picture blue-green, Grass.
   ================================================================================================= */
.lab-b .hero{padding-top:40px}
.lab-b .h1{margin-top:24px}
.lab-b .lead{max-width:640px;margin-top:16px}
.lab-b .form{margin-top:28px;width:min(480px,100%)}
.lab-b .clients{margin-top:48px}
.lab-b .cl-t{margin:0 0 18px;text-align:center;font:600 22px/1.3 var(--f);letter-spacing:-.015em;color:var(--ink)}
.lab-b .stage{margin-top:20px}
/* the carousel: windows between the picture and the viewer. Vlad 26.10 (A-1026-af68): the side windows sit on a wheel, each one
   tilted to its own side, and a switch turns them along the arc. --wheel is the distance to the hub below the middle window:
   10deg on it puts a side window about 560 px out and 50 px down, as far as the old translateX(64%) */
.lab-b .car{--chat-h:460px;--wheel:3240px;position:relative;z-index:1;height:calc(var(--chat-h) + 24px);margin:-24px -420px 0;perspective:1900px;perspective-origin:50% 30%;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 58px),transparent);mask-image:linear-gradient(#000 calc(100% - 58px),transparent)}
.lab-b .car .win{position:absolute;top:24px;left:calc(50% - var(--win)/2);width:var(--win);height:var(--chat-h);margin:0;background:transparent;overflow:visible;
  transition:transform 1s cubic-bezier(.45,.05,.2,1),opacity .9s var(--ease),box-shadow .9s var(--ease),-webkit-mask-position 1s cubic-bezier(.45,.05,.2,1),mask-position 1s cubic-bezier(.45,.05,.2,1)}
.lab-b .wi{height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:22px 22px 0 0;background:#fff;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:50% 0;mask-position:50% 0;transition:-webkit-mask-position 1s cubic-bezier(.45,.05,.2,1),mask-position 1s cubic-bezier(.45,.05,.2,1)}
/* the middle window stays untransformed (sharp text): it never travels to a side with a transition, the switch moves it
   without one (placeCar) */
.lab-b .win[data-pos="0"]{z-index:3;transform:none}
.lab-b .win[data-pos="1"],.lab-b .win[data-pos="-1"]{z-index:2;opacity:.94;cursor:pointer;box-shadow:none}
.lab-b .win[data-pos="1"]{transform:translateY(var(--wheel)) rotate(10deg) translateY(calc(var(--wheel)*-1)) rotateY(-22deg) scale(.82)}
.lab-b .win[data-pos="-1"]{transform:translateY(var(--wheel)) rotate(-10deg) translateY(calc(var(--wheel)*-1)) rotateY(22deg) scale(.82)}
.lab-b .win[data-pos="1"] .wi{-webkit-mask-position:100% 0;mask-position:100% 0}
.lab-b .win[data-pos="-1"] .wi{-webkit-mask-position:0% 0;mask-position:0% 0}
.lab-b .win[data-pos="2"],.lab-b .win[data-pos="-2"]{z-index:1;opacity:0;pointer-events:none;box-shadow:none}
.lab-b .win[data-pos="2"]{transform:translateY(var(--wheel)) rotate(20deg) translateY(calc(var(--wheel)*-1)) rotateY(-36deg) scale(.66)}
.lab-b .win[data-pos="-2"]{transform:translateY(var(--wheel)) rotate(-20deg) translateY(calc(var(--wheel)*-1)) rotateY(36deg) scale(.66)}
.lab-b .win[data-pos="2"] .wi{-webkit-mask-position:100% 0;mask-position:100% 0}
.lab-b .win[data-pos="-2"] .wi{-webkit-mask-position:0% 0;mask-position:0% 0}
.lab-b .win:not([data-pos="0"]) .tl{visibility:hidden}
.lab-b .win[data-pos="1"]:hover,.lab-b .win[data-pos="-1"]:hover{opacity:1}
.lab-b .veil{height:var(--chat-h,460px);bottom:auto;z-index:4}
.lab-b .car ~ .veil{height:460px}
/* backdrops */
/* composers */
.lab-b .cmp{flex:none;width:min(var(--col),calc(100% - 40px));margin:4px auto 0;display:flex;align-items:center;gap:6px;color:#5D5D5D}
.lab-b .cmp .ph{flex:1;min-width:0;padding:0 4px;font:15px/1.4 var(--f);color:#8F8F8F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-b .ib{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-style:normal}
.lab-b .ib svg,.lab-b .send svg,.lab-b .mdl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lab-b .send{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff}
.lab-b .send svg{width:18px;height:18px;stroke-width:2.2}
.lab-b .cmp-gpt{height:56px;padding:0 10px 0 8px;border-radius:28px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 4px 14px -6px rgba(0,0,0,.12)}
.lab-b .send.gpt{background:#0D0D0D}
.lab-b .cmp .tag{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;color:#0D0D0D;box-shadow:inset 0 0 0 1px rgba(13,13,13,.14);font:500 13px var(--f)}
.lab-b .cmp .tag i{width:7px;height:7px;border-radius:50%;background:#0D0D0D}
.lab-b .cmp-cl{flex-direction:column;align-items:stretch;gap:12px;padding:14px 12px 10px 14px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(31,30,29,.13),0 4px 20px -8px rgba(0,0,0,.1)}
.lab-b .cmp-cl .ph{color:#8A8984}
.lab-b .cmp-cl .row{display:flex;align-items:center;gap:6px}
.lab-b .cmp-cl .ib{width:32px;height:32px;border-radius:9px;color:#5E5D59;box-shadow:inset 0 0 0 1px rgba(31,30,29,.14)}
.lab-b .cmp-cl .ib svg{width:17px;height:17px}
.lab-b .cmp-cl .fx{flex:1}
.lab-b .send.cl{width:32px;height:32px;border-radius:9px;background:#D97757}
.lab-b .cmp-gm{height:60px;padding:0 12px 0 10px;border-radius:30px;background:#fff;color:#444746;box-shadow:0 2px 10px -3px rgba(60,64,67,.22),0 0 0 1px rgba(60,64,67,.07)}
.lab-b .cmp-gm .ph{font-size:16px;color:#5F6368}
.lab-b .mdl{flex:none;display:inline-flex;align-items:center;gap:4px;padding:0 6px;font:500 14px var(--f);color:#1F1F1F}
.lab-b .mdl svg{width:16px;height:16px;stroke-width:2}
.lab-b .cmp-tg{height:48px;padding:0 8px;border-radius:24px;background:#fff;color:#8A9AA9;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.lab-b .cmp-tg .ph{color:#9AA5B1}
/* Grow intro: their AI's status line comes to the front, then shrinks back (V9 brief 6) */
.lab-b .grow{position:absolute;z-index:6;left:50%;top:44%;display:flex;align-items:center;gap:14px;padding:18px 28px 18px 22px;border-radius:999px;background:#fff;white-space:nowrap;pointer-events:none;
  font:500 23px/1.3 var(--f);color:var(--ink-2);box-shadow:0 0 0 1px rgba(18,22,28,.05),0 40px 90px -30px rgba(30,50,80,.55);
  opacity:0;transform:translate(-50%,-50%) translateY(150px) scale(.42);filter:blur(4px);transition:opacity .6s var(--ease),transform .9s cubic-bezier(.3,1.25,.5,1),filter .6s var(--ease)}
.lab-b .grow.in{opacity:1;transform:translate(-50%,-50%);filter:none}
.lab-b .grow .sp{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(18,22,28,.15);border-top-color:var(--ink-2);animation:labB-spin .8s linear infinite}
.lab-b .grow .gt{background:linear-gradient(90deg,var(--ink-2) 0%,var(--ink-2) 40%,#B9C0C8 50%,var(--ink-2) 60%,var(--ink-2) 100%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:labB-shim 1.8s linear infinite}
.lab-b .stage.growing .veil{opacity:1}
/* the outcome in focus (V9 brief 7) */
.lab-b .won{position:absolute;z-index:6;left:50%;top:42%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 40px 24px;border-radius:28px;background:#fff;text-align:center;pointer-events:none;
  box-shadow:0 0 0 1px rgba(18,22,28,.05),0 50px 100px -30px rgba(30,50,80,.55);opacity:0;transform:translate(-50%,-50%) translateY(40px) scale(.86);filter:blur(6px);
  transition:opacity .6s var(--ease),transform .9s cubic-bezier(.3,1.3,.5,1),filter .6s var(--ease)}
.lab-b .won.in{opacity:1;transform:translate(-50%,-50%);filter:none}
.lab-b .won-ic{display:grid;place-items:center;width:46px;height:46px;margin-bottom:6px;border-radius:50%;background:var(--y);box-shadow:0 0 22px 4px rgba(255,194,26,.45)}
.lab-b .won-ic svg{width:22px;height:22px;fill:none;stroke:#12161C;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lab-b .won b{font:400 34px/1.12 var(--fd);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.lab-b .won small{font:500 15px/1.4 var(--f);color:var(--mut)}
.lab-b .stage.winning .veil{opacity:1}
/* Grass (P2): a bounded block, the meadow at the bottom rides a little over the window */
.lab-b .grass{display:none}
.lab-b[data-style="grass"] .stage{padding-bottom:70px}
.lab-b[data-style="grass"] .plate{left:calc(50% - 620px);width:1240px;top:-36px;bottom:0;border-radius:32px;background:url(/agentic-site/assets/landing-b/img/hills.webp) center 35%/cover;-webkit-mask-image:none;mask-image:none}
.lab-b[data-style="grass"] .grass{display:block;position:absolute;z-index:5;left:calc(50% - 620px);width:1240px;bottom:0;height:136px;border-radius:0 0 32px 32px;pointer-events:none;
  background:url(/agentic-site/assets/landing-b/img/hills.webp) center 100%/1240px auto;-webkit-mask-image:linear-gradient(transparent 0%,#000 55%);mask-image:linear-gradient(transparent 0%,#000 55%)}
.lab-b[data-style="grass"] .car{-webkit-mask-image:none;mask-image:none}

@media (max-width:1180px){
  .lab-b .win[data-pos="1"],.lab-b .win[data-pos="-1"]{opacity:0;pointer-events:none}
}
@media (max-width:760px){
  .lab-b .hero{padding-top:28px}
  .lab-b .h1{margin-top:18px}
  .lab-b .form{margin-top:22px}
  .lab-b .clients{margin-top:36px}
  .lab-b .cl-t{font-size:18px;margin-bottom:14px}
  .lab-b .car{--chat-h:560px;margin:-24px -16px 0}
  .lab-b .car .win{left:16px;width:calc(100% - 32px)}
  .lab-b .car ~ .veil{height:560px}
  .lab-b .grow{font-size:17px;padding:14px 20px 14px 16px;white-space:normal;width:86%}
  .lab-b .won{padding:22px 24px}
  .lab-b .won b{font-size:26px;white-space:normal}
  .lab-b[data-style="grass"] .plate,.lab-b[data-style="grass"] .grass{left:-16px;width:calc(100% + 32px);border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  .lab-b *,.lab-b *::before,.lab-b *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* v9 fit at 1512×860: the story and the agents' card stay inside the first screen */
@media (min-width:761px){
  .lab-b .hero{padding-top:30px}
  .lab-b .h1{font-size:clamp(32px,min(2.95vw,5.2vh),44px)}
  .lab-b .lead{max-width:720px}
  .lab-b .clients{margin-top:36px}
  .lab-b .cl-t{margin-bottom:14px}
  .lab-b .pc{height:52px}
  .lab-b .side{top:2px}
  .lab-b .ac-t{font-size:23px}
  .lab-b .ac-box{padding:18px}
  .lab-b .ac-t{font-size:24px}
  .lab-b .js{margin-top:12px;gap:8px}
  .lab-b .hum{margin-top:12px}
  .lab-b .won{top:200px}
  .lab-b .grow{top:176px}
  .lab-b .side .ncard{top:40px}
}
/* waiting windows: soft at the outer side and at the top, so no hard edge shows on the sky */
.lab-b .wi{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%),linear-gradient(transparent 0%,#000 24%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%),linear-gradient(transparent 0%,#000 24%);
  -webkit-mask-size:300% 100%,100% 200%;mask-size:300% 100%,100% 200%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-position:50% 0,0 100%;mask-position:50% 0,0 100%}
.lab-b .win[data-pos="1"] .wi,.lab-b .win[data-pos="2"] .wi{-webkit-mask-position:100% 0,0 0;mask-position:100% 0,0 0}
.lab-b .win[data-pos="-1"] .wi,.lab-b .win[data-pos="-2"] .wi{-webkit-mask-position:0% 0,0 0;mask-position:0% 0,0 0}
.lab-b .win[data-pos="1"],.lab-b .win[data-pos="-1"]{opacity:.9}
.lab-b[data-style="grass"] .side{bottom:auto}
@media (max-width:1180px){.lab-b[data-style="grass"] .side{bottom:110px}}
@media (max-width:1180px){.lab-b .car .win[data-pos="1"],.lab-b .car .win[data-pos="-1"]{opacity:0;pointer-events:none}}
@media (max-width:760px){.lab-b .won{width:86%}}

/* =================================================================================================
   v10 (Vlad 19:38Z, A-1020-dd54…8b4e): screens beside the window, soft corners, a gliding tab, prod headline weight,
   Fraunces line with a drawn arrow, thinking + streaming, the widget's booked modal, the Logos headline.
   ================================================================================================= */
/* headline: the live landing's Fraunces as is (shell.js FRAUNCES: weight 400, tracking -0.025em, optical size from the font size) */
.lab-b .h1{font-weight:400;font-variation-settings:normal;font-optical-sizing:auto;letter-spacing:-.025em}
@media (min-width:761px){.lab-b .h1{font-size:clamp(34px,min(3.4vw,5.85vh),54px);line-height:1.04}}
/* the line over the clients: the headline's Fraunces, more room to the windows, a thin drawn arrow in ink (A-1020-121e) */
.lab-b .cl-t{position:relative;display:table;margin:0 auto 34px;font:400 30px/1.15 var(--fd);font-optical-sizing:auto;letter-spacing:-.022em;color:var(--ink)}
.lab-b .arw{position:absolute;left:calc(100% + 10px);top:52%;width:62px;height:56px;overflow:visible;fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.82}
.lab-b:not(.shot) .arw .a1{stroke-dasharray:90;stroke-dashoffset:90;animation:labB-arw .9s 1.1s cubic-bezier(.5,0,.3,1) forwards}
.lab-b:not(.shot) .arw .a2{stroke-dasharray:30;stroke-dashoffset:30;animation:labB-arw .35s 1.9s ease-out forwards}
@keyframes labB-arw{to{stroke-dashoffset:0}}
/* waiting windows read as screens: dense, a soft fade only at the outer side, a light hush, a shadow that fades with them (A-1020-dd54, d62e) */
.lab-b .wi{position:relative;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.1) 0%,#000 13.3%,#000 86.7%,rgba(0,0,0,.1) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,.1) 0%,#000 13.3%,#000 86.7%,rgba(0,0,0,.1) 100%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-over;mask-composite:add;
  -webkit-mask-position:50% 0;mask-position:50% 0}
.lab-b .win[data-pos="1"] .wi,.lab-b .win[data-pos="2"] .wi{-webkit-mask-position:100% 0;mask-position:100% 0}
.lab-b .win[data-pos="-1"] .wi,.lab-b .win[data-pos="-2"] .wi{-webkit-mask-position:0 0;mask-position:0 0}
.lab-b .wi::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;background:rgba(234,239,246,.4);opacity:0;transition:opacity .9s var(--ease)}
.lab-b .win:not([data-pos="0"]) .wi::after{opacity:1}
.lab-b .car .win{filter:drop-shadow(0 0 0 rgba(30,50,80,0));transition:transform 1s cubic-bezier(.45,.05,.2,1),opacity .9s var(--ease),filter .9s var(--ease)}
.lab-b .win[data-pos="1"],.lab-b .win[data-pos="-1"]{opacity:1;filter:drop-shadow(0 26px 30px rgba(30,50,80,.16)) drop-shadow(0 0 1px rgba(18,22,28,.14))}
.lab-b .win[data-pos="1"]:hover,.lab-b .win[data-pos="-1"]:hover{filter:drop-shadow(0 26px 30px rgba(30,50,80,.22)) drop-shadow(0 0 1px rgba(18,22,28,.18))}
.lab-b .win[data-pos="1"]:hover .wi::after,.lab-b .win[data-pos="-1"]:hover .wi::after{opacity:.55}
/* one white tab shared by the chosen pill and the window, with concave corners where it meets the window (A-1020-a679, b946) */
.lab-b .cl-row{position:relative}
.lab-b .cl-row .pc{z-index:1}
.lab-b[data-link="tab"] .cl-row .pc.on{background:transparent;box-shadow:none;border-radius:999px}
.lab-b[data-link="tab"] .cl-row .pc.on::after{content:none}
.lab-b .tabbg{display:none;position:absolute;left:0;top:0;z-index:0;pointer-events:none;transform:translate(var(--x,0),var(--y,0));border-radius:22px 22px 0 0;background:#fff;
  box-shadow:0 -12px 26px -20px rgba(30,60,100,.55),0 0 0 1px rgba(18,22,28,.05);
  transition:transform .74s cubic-bezier(.32,1.28,.42,1),width .74s cubic-bezier(.32,1.28,.42,1),border-radius .3s var(--ease),box-shadow .4s var(--ease)}
.lab-b[data-link="tab"] .tabbg{display:block}
.lab-b .tabbg::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--gap,20px);background:#fff;transform-origin:50% 0;transition:transform .42s cubic-bezier(.3,1.15,.45,1)}
.lab-b .tabbg .fl{position:absolute;bottom:calc(-1 * var(--gap,20px));width:18px;height:18px;transition:opacity .3s var(--ease),transform .42s cubic-bezier(.3,1.15,.45,1)}
.lab-b .tabbg .fl.l{right:100%;transform-origin:100% 100%;background:radial-gradient(circle at 0 0,transparent 17.4px,#fff 18px)}
.lab-b .tabbg .fl.r{left:100%;transform-origin:0 100%;background:radial-gradient(circle at 100% 0,transparent 17.4px,#fff 18px)}
.lab-b .tabbg.first .fl.l,.lab-b .tabbg.last .fl.r{opacity:0}
.lab-b .tabbg.mv{border-radius:999px;box-shadow:0 0 0 1.5px rgba(255,194,26,.55),0 0 24px 4px rgba(255,194,26,.3),0 12px 24px -14px rgba(30,60,100,.45);
  transition:transform .74s cubic-bezier(.32,1.28,.42,1),width .74s cubic-bezier(.32,1.28,.42,1),border-radius .18s var(--ease),box-shadow .2s var(--ease)}
.lab-b .tabbg.mv::after{transform:scaleY(0);transition-duration:.2s}
.lab-b .tabbg.mv .fl{opacity:0;transform:scale(.3);transition-duration:.15s}
.lab-b[data-sw="pop"] .tabbg{transition:border-radius .2s var(--ease)}
/* Pop (fallback A-1020-6e6c): the chosen pill swells for a moment with a soft yellow glow at its sides */
.lab-b .pc.pop{animation:labB-pcpop 1s cubic-bezier(.3,1.5,.5,1)}
.lab-b .pc.pop::before{content:"";position:absolute;inset:-2px;border-radius:999px;pointer-events:none;
  box-shadow:-16px 0 26px -6px rgba(255,196,40,.55),16px 0 26px -6px rgba(255,196,40,.55),0 0 0 1.5px rgba(255,196,40,.45);animation:labB-pchalo 1s ease-out forwards}
@keyframes labB-pcpop{0%{transform:scale(1)}22%{transform:scale(1.09)}60%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes labB-pchalo{0%{opacity:0}18%{opacity:1}70%{opacity:.8}100%{opacity:0}}
/* answers: "Thinking" shimmers, then the words fade in one by one (A-1020-2a8e) */
.lab-b .m-a .thk{display:none;font:500 15px/1.6 var(--f);background:linear-gradient(90deg,#8F98A3 0%,#8F98A3 38%,#D5DAE0 50%,#8F98A3 62%,#8F98A3 100%) 0 0/300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:labB-shim 1.6s linear infinite}
.lab-b .m-a.thinking .thk{display:block}
.lab-b .m-a.thinking .m-b{display:none}
.lab-b .streaming .w{opacity:0;filter:blur(2.5px);transition:opacity .42s ease,filter .42s ease}
.lab-b .streaming .w.on{opacity:1;filter:none}
/* Grow: the live line travels to the front (transform comes from the line's own place, set in app.js) */
.lab-b .grow{transition:none;filter:none;transform:translate(-50%,-50%);opacity:0;padding:16px 28px 16px 20px;font-size:22px}
.lab-b .grow.in{opacity:1}
.lab-b .chat-col .rv.live.lifted{opacity:0!important;transition:opacity .15s}
/* the outcome: the widget's booked screen (approved widget-guest-studio 2026-10-14, widget.html:530-541, 852-857, 1199) */
.lab-b .won{padding:0;border-radius:0;background:none;box-shadow:none;filter:none;width:auto;transform:translate(-50%,-50%) translateY(24px) scale(.94);
  transition:opacity .4s var(--ease),transform .7s cubic-bezier(.2,1.25,.4,1)}
.lab-b .won.in{filter:none;transform:translate(-50%,-50%)}
.lab-b .won-c{width:344px;display:flex;flex-direction:column;align-items:center;padding:28px 22px 20px;border-radius:26px;text-align:center;
  background:rgba(255,255,255,.84);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(18,22,28,.04),0 26px 48px -26px rgba(0,0,0,.5)}
.lab-b .okb{position:relative;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;color:#12161C;background:var(--y);box-shadow:0 14px 30px -12px rgba(255,170,0,.55)}
.lab-b .okb .ic{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
.lab-b .okb::before{content:"";position:absolute;inset:-8px;border-radius:50%;box-shadow:0 0 0 2px var(--y);opacity:0}
.lab-b .won.in .okb{animation:labB-okp .7s cubic-bezier(.2,1.6,.4,1) both}
.lab-b .won.in .okb .ic{animation:labB-okdraw .5s .35s ease forwards}
.lab-b .won.in .okb::before{animation:labB-okring 1.2s .3s ease-out}
.lab-b .shot .won.in .okb .ic,.lab-b .instant .won.in .okb .ic{stroke-dashoffset:0}
@keyframes labB-okp{from{transform:scale(.3);opacity:0}}
@keyframes labB-okdraw{to{stroke-dashoffset:0}}
@keyframes labB-okring{0%{opacity:.6;transform:scale(.8)}100%{opacity:0;transform:scale(1.6)}}
.lab-b .won h4{margin:14px 0 0;font:650 24px/1.2 var(--f);letter-spacing:-.02em;color:var(--ink)}
.lab-b .won-s{margin:3px 0 0;font:400 14px/1.4 var(--f);color:var(--mut)}
.lab-b .tkw{align-self:stretch;margin-top:18px;filter:drop-shadow(0 16px 22px rgba(0,0,0,.12)) drop-shadow(0 1px 1px rgba(0,0,0,.05))}
.lab-b .won.in .tkw{animation:labB-tkin .7s .25s cubic-bezier(.2,.9,.2,1) both}
@keyframes labB-tkin{from{opacity:0;transform:translateY(24px) rotate(-1.5deg)}}
.lab-b .tkt{display:flex;align-items:center;gap:12px;padding:14px 16px 20px;border-radius:18px 18px 0 0;background:#fff;text-align:left;
  -webkit-mask:radial-gradient(circle 7px at 50% 100%,transparent 96%,#000) 0 0/22px 100% repeat-x;mask:radial-gradient(circle 7px at 50% 100%,transparent 96%,#000) 0 0/22px 100% repeat-x}
.lab-b .tk-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lab-b .tk-t b{font:600 14.5px/1.25 var(--f);color:var(--ink)}
.lab-b .tk-t small{font:400 12.5px/1.3 var(--f);color:var(--mut)}
.lab-b .tkt em{flex:none;font:600 13.5px/1.2 var(--f);font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums}
/* Logos headline: one large tile in the line, the logo springs in with a turn (A-1020-8b4e; small logos were rejected, A-1020-1632) */
.lab-b .lt{position:relative;display:inline-block;vertical-align:-.17em;width:1.08em;height:1.08em;margin:0 .1em 0 .04em;border-radius:.27em;overflow:hidden;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(18,22,28,.07),0 .14em .34em -.14em rgba(30,50,80,.4)}
.lab-b .lt i{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(70%) rotate(-28deg) scale(.5);transition:transform .75s cubic-bezier(.3,1.55,.45,1),opacity .3s ease}
.lab-b .lt i.on{opacity:1;transform:none}
.lab-b .lt i.out{opacity:0;transform:translateY(-70%) rotate(24deg) scale(.5);transition:transform .45s cubic-bezier(.55,0,.8,.2),opacity .32s ease}
.lab-b .lt img{width:60%;height:60%}
.lab-b .lt.bump{animation:labB-ltb .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes labB-ltb{35%{transform:scale(.93) rotate(-4deg)}}
@media (max-width:760px){
  .lab-b .cl-t{font-size:23px;margin-bottom:30px;padding:0 12px}
  .lab-b .arw{left:auto;right:-6px;top:calc(100% - 4px);width:40px;height:36px}
  .lab-b .won-c{width:100%}
  .lab-b .won{width:86%}
}

/* v10 polish pass 1 */
.lab-b .arw{top:38%}
.lab-b .lt{margin:0 .03em 0 .04em}
.lab-b .wi::after{background:rgba(232,238,245,.3)}
.lab-b .win[data-pos="1"],.lab-b .win[data-pos="-1"]{filter:drop-shadow(0 22px 34px rgba(30,50,80,.2)) drop-shadow(0 0 1px rgba(18,22,28,.26))}
@media (min-width:761px){.lab-b .won{top:132px}}
.lab-b .won-c{padding:22px 20px 16px}
.lab-b .okb{width:58px;height:58px}
.lab-b .okb .ic{width:27px;height:27px}
.lab-b .won h4{margin-top:12px}
.lab-b .tkw{margin-top:14px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.08)) drop-shadow(0 1px 1px rgba(0,0,0,.05))}
.lab-b .tkt{padding:12px 14px 16px;-webkit-mask:radial-gradient(circle 5px at 50% 100%,transparent 96%,#000) 0 0/18px 100% repeat-x;mask:radial-gradient(circle 5px at 50% 100%,transparent 96%,#000) 0 0/18px 100% repeat-x}
@media (max-width:760px){.lab-b .won-c{background:rgba(255,255,255,.95)}}
/* v10 polish pass 1b: the bridge hangs with rounded ends while it drops, square only when it meets the window (no sharp corner in flight) */
.lab-b .tabbg::after{transition:transform .42s cubic-bezier(.3,1.15,.45,1),border-radius .42s ease}
.lab-b .tabbg.mv::after{border-radius:0 0 14px 14px}
/* v10 polish pass 2: on the phone the hush under the Grow line and the booked modal covers the whole window */
@media (max-width:760px){.lab-b .veil,.lab-b .car ~ .veil{left:16px;right:16px;width:auto}}
/* phone: WebKit does not blur under the masked veil in our frames, so the hush itself carries the contrast */
@media (max-width:760px){.lab-b .veil{background:rgba(255,255,255,.7)}.lab-b .veil i{display:none}}

/* =================================================================================================
   v11 (Vlad 20:30Z, A-1020-2001): whole page for the pitch. Hero bug fix, scan screen, prod feature grid, final call.
   ================================================================================================= */
/* 1. the hero's live layers stay inside the hero; off screen they hide (app.js pauses the story) */
.lab-b #hero{overflow-x:visible;overflow-y:clip}
.lab-b.hero-off .stage .grow,.lab-b.hero-off .stage .won,.lab-b.hero-off .stage .veil,.lab-b.hero-off .stage [data-note]{opacity:0!important;transition:opacity .25s}
{position:relative;z-index:2}

/* 3. scan: the live hero split and the approved onboarding Reading step (onboarding-v42 app.css .split/.beam-core/.site), calmer */
{max-width:1240px;margin:0 auto;padding:clamp(30px,5vh,70px) 32px clamp(90px,12vh,140px);text-align:center}
{margin:0 auto;max-width:980px;font:400 clamp(28px,3.2vw,46px)/1.2 var(--fd);font-optical-sizing:auto;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
{display:flex;justify-content:center;gap:12px;min-height:56px;margin:40px auto 20px}
{display:flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 8px;border-radius:999px;text-align:left;background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 5px rgba(30,60,100,.07),0 0 0 1px rgba(18,22,28,.05),0 14px 28px -16px rgba(30,60,100,.45);
  opacity:0;transform:translateY(14px) scale(.92);transition:opacity .5s var(--ease),transform .8s cubic-bezier(.3,1.4,.5,1)}
{opacity:1;transform:none}
{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--y-soft)}
{width:20px;height:20px;fill:none;stroke:#8A5D00;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
{display:block;font:600 14px/1.2 var(--f);color:var(--ink)}
{display:block;margin-top:2px;font:400 12px/1.25 var(--f);color:var(--mut)}
{display:grid;grid-template-columns:minmax(0,860px) 300px;gap:24px;justify-content:center;align-items:start;text-align:left}
{position:relative;height:460px;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(18,22,28,.05),0 30px 70px -30px rgba(30,50,80,.45)}
{position:absolute;inset:0;--x:56%}
{position:absolute;inset:0;overflow:hidden;background:#fff}
{padding-top:44px;font:14px/1.5 var(--f);color:#1F2A2A;transition:transform 11s cubic-bezier(.45,0,.55,1)}
{transform:translateY(-300px)}
.lab-b .sn{display:flex;align-items:center;gap:22px;height:56px;padding:0 28px;border-bottom:1px solid #EEF0EE;font-size:13px;color:#56635F}
.lab-b .sl{display:flex;align-items:center;gap:8px;margin-right:auto;font:700 15px var(--f);letter-spacing:-.01em;color:#134E4A}
.lab-b .sl i{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#134E4A;color:#F6E7C8;font:700 13px/1 var(--f);font-style:normal}
.lab-b .sn b{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:#134E4A;color:#fff;font:600 12.5px var(--f)}
.lab-b .shero{padding:40px 28px 28px;background:linear-gradient(180deg,#F3F7F5,#fff)}
.lab-b .shero small{font:600 11.5px var(--f);letter-spacing:.04em;text-transform:uppercase;color:#3E7C74}
.lab-b .shero h4{margin:10px 0 0;max-width:420px;font:600 30px/1.12 var(--f);letter-spacing:-.02em;color:#1F2A2A}
.lab-b .shero p{margin:10px 0 0;max-width:380px;color:#56635F}
.lab-b .shero b{display:inline-flex;align-items:center;height:38px;margin-top:18px;padding:0 18px;border-radius:999px;background:#134E4A;color:#fff;font:600 13px var(--f)}
.lab-b .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:8px 28px 24px}
.lab-b .sgrid div{padding:16px;border-radius:14px;background:#F6F8F7}
.lab-b .sgrid b{display:block;font:600 14px var(--f)}
.lab-b .sgrid span{display:block;margin-top:4px;font-size:13px;color:#3E7C74}
.lab-b .ssec{padding:14px 28px 18px;border-top:1px solid #EEF0EE}
.lab-b .ssec h5{margin:0 0 8px;font:600 15px var(--f)}
.lab-b .ssec p{margin:0 0 4px;font-size:13.5px;color:#56635F}
.lab-b .steam{display:flex;gap:10px}
.lab-b .steam i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#E3EEEA;color:#134E4A;font:600 13px var(--f);font-style:normal}
{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 0 var(--x));background:linear-gradient(90deg,#FFF6DA 0%,#FFFCF2 30%,#FFFDF8 100%)}
{position:absolute;top:0;bottom:0;left:var(--x);right:0;padding:56px 22px 20px 30px;overflow:hidden}
{margin:0;padding-left:calc(var(--i,0) * 16px);font:400 12.5px/1.75 var(--fm);color:#2E2823;opacity:0;filter:blur(4px);transform:translateX(-8px);
  transition:opacity .6s ease-out,filter .6s ease-out,transform .6s var(--out)}
{opacity:1;filter:none;transform:none}
{font-weight:600}
{color:#A87100;font-weight:500}
{position:absolute;top:12px;z-index:5;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font:600 11.5px var(--f);pointer-events:none}
{left:12px;background:rgba(18,22,28,.72);color:#fff}
{right:12px;background:rgba(255,255,255,.92);color:#6B5310;box-shadow:0 4px 12px -8px rgba(30,60,100,.4)}
{position:absolute;right:14px;bottom:12px;z-index:7;font:500 12px var(--f);color:var(--faint)}
{position:absolute;top:0;bottom:0;left:calc(var(--x) - 22px);width:44px;z-index:6;pointer-events:none}
{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,194,26,.2),#FFC21A 7%,#FFE27A 50%,#FFC21A 93%,rgba(255,194,26,.2));
  box-shadow:0 0 10px 1px rgba(255,194,26,.95),0 0 26px 5px rgba(255,186,20,.55),0 0 70px 14px rgba(255,186,20,.22);animation:labB-sc-breathe 2.6s ease-in-out infinite}
{content:"";position:absolute;top:0;bottom:0;right:3px;width:160px;background:linear-gradient(90deg,transparent,rgba(255,194,26,.08) 55%,rgba(255,194,26,.24));
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);opacity:.8}
{content:"";position:absolute;top:0;bottom:0;left:3px;width:34px;background:linear-gradient(90deg,rgba(255,194,26,.22),transparent);
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
@keyframes labB-sc-breathe{50%{box-shadow:0 0 12px 2px rgba(255,194,26,1),0 0 34px 8px rgba(255,186,20,.62),0 0 90px 20px rgba(255,186,20,.28)}}
/* a few slow small sparks drifting into the agents' side (calmer than the live hero) */
{position:absolute;left:22px;width:3px;height:3px;border-radius:50%;background:#FFD23F;box-shadow:0 0 6px 1px rgba(255,194,26,.7);opacity:0;animation:labB-sc-drift 6.5s linear infinite}
{top:18%}
{top:37%;animation-delay:1.3s}
{top:55%;animation-delay:2.6s}
{top:71%;animation-delay:3.9s}
{top:86%;animation-delay:5.2s}
@keyframes labB-sc-drift{0%{opacity:0;transform:translate(0,0)}12%{opacity:.85}100%{opacity:0;transform:translate(76px,-16px)}}
{padding:18px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(18,22,28,.05),0 30px 60px -34px rgba(30,50,80,.45)}
.lab-b .kb-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 12px;font:600 15px var(--f);color:var(--ink)}
.lab-b .kb-h span{font:400 13px var(--f);color:var(--mut)}
.lab-b .kb-h em{font-style:normal;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
{list-style:none;margin:0;padding:0;display:grid;gap:6px}
{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:#F7F8FA;font:500 13.5px/1.3 var(--f);color:var(--ink-2);
  opacity:0;transform:translateX(-10px);transition:opacity .5s var(--ease),transform .7s cubic-bezier(.3,1.3,.5,1)}
{opacity:1;transform:none}
{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--y)}
.lab-b .kb-ok svg{width:12px;height:12px;fill:none;stroke:#12161C;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lab-b .kb-ag{position:relative;display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(18,22,28,.07);overflow:hidden;transition:box-shadow .5s var(--ease)}
.lab-b .kb-ag img{width:34px;height:34px;border-radius:10px}
.lab-b .kb-ag div{flex:1;min-width:0}
.lab-b .kb-ag b{display:block;font:600 14px/1.25 var(--f);color:var(--ink)}
.lab-b .kb-ag small{display:block;font:400 12.5px/1.3 var(--f);color:var(--mut)}
.lab-b .kb-ok{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--y);opacity:0;transform:scale(.4);transition:opacity .4s,transform .7s cubic-bezier(.2,1.6,.4,1)}
.lab-b .kb-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(18,22,28,.06)}
.lab-b .kb-bar i{display:block;width:0;height:100%;background:var(--y);transition:width 9.6s linear}
{width:92%}
{width:100%;transition-duration:.5s}
{opacity:1;transform:none}
{box-shadow:0 0 0 1.5px var(--y),0 0 22px 2px rgba(255,194,26,.3)}
{opacity:0!important;transition:opacity .6s ease!important}

/* 4. the prod feature grid (sections/aifeat.*, copied whole) on prod tokens, inside its beige group */
{--sheet:#FFFFFF;--soft:#F8F1E8;--ink:#1B1713;--ink-2:#4B443D;--muted:#8B8279;--faint:#B9AFA4;--line:#EEE5DA;--line-2:#E4D8CA;
  --brand-grad:linear-gradient(135deg,#FFD9C2 0%,#FFD1E4 50%,#E3D9FF 100%);--tag-ok-bg:#E8F4EC;--tag-ok-ink:#2E6B48;--r-pill:999px;
  --shadow-card:0 1px 2px rgba(27,23,19,.05),0 14px 34px -14px rgba(60,30,10,.18);--ease:cubic-bezier(.2,.7,.2,1);
  --font:"Landing B Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--h-font:"Landing B Fraunces",Georgia,serif;--h-weight:400;--h-track:-.025em;--bg-beige:#F7F1E9;font-family:var(--font);color:var(--ink)}
{margin:0 16px;padding-bottom:96px;border-radius:40px;background:var(--bg-beige)}
{padding-top:110px}
{max-width:1240px;margin:0 auto;padding:0 32px}
{margin:0;font:var(--h-weight) clamp(32px,4vw,56px)/1.04 var(--h-font);font-optical-sizing:auto;letter-spacing:var(--h-track);color:var(--ink);text-wrap:balance}
{font:400 clamp(17px,1.35vw,20px)/1.5 var(--font);color:var(--ink-2);text-wrap:pretty}
{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
@media (hover:hover){{transform:translateY(-3px)}}
{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;background:var(--soft)}
{width:26px;height:26px}
{font-variant-numeric:tabular-nums lining-nums}
{font-family:var(--font);font-weight:560}
/* the second bright card, beside the orange one (A-1020-6a26): the same warm picture, another crop */
{position:relative;background:#EFC39B url(/agentic-site/assets/landing-b/pimg/abstract-1.webp) 85% 80%/260% auto no-repeat}
{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,250,244,.1),rgba(60,30,10,.12))}
{position:relative}

/* 5. final: the prod final frame (sections/final.css .fin-frame / .fin-card) with the site field */
{max-width:1240px;margin:0 auto;padding:110px 32px 80px}
{position:relative;overflow:hidden;padding:clamp(16px,2.2vw,30px);border-radius:32px;background-color:#FFD9B0;
  background-image:radial-gradient(38% 60% at 4% 6%,#FFE04F 0%,transparent 72%),radial-gradient(34% 70% at 98% 8%,#B9A4FF 0%,transparent 72%),radial-gradient(40% 60% at 94% 96%,#FFE35C 0%,transparent 72%),radial-gradient(42% 70% at 22% 98%,#FF9CC6 0%,transparent 72%),radial-gradient(34% 60% at 62% 100%,#C2AEFF 0%,transparent 72%),radial-gradient(36% 60% at 55% 0%,#FFB0CF 0%,transparent 72%),linear-gradient(110deg,#FFB98F 0%,#FFC2DA 35%,#FFE58C 65%,#FFB28E 100%);
  background-size:140% 140%;background-position:0 0;animation:labB-fin-flow 16s ease-in-out infinite alternate}
@keyframes labB-fin-flow{to{background-position:100% 100%}}
{position:relative;padding:clamp(64px,8vw,112px) 32px;border-radius:20px;background:#fff;text-align:center}
{margin:0 auto;max-width:860px;font:400 clamp(34px,4.2vw,58px)/1.04 var(--fd);font-optical-sizing:auto;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
{padding:0 .08em;border-radius:.18em;background:linear-gradient(transparent 62%,rgba(255,194,26,.38) 0)}
{margin:18px auto 0;max-width:620px;font:400 18px/1.5 var(--f);color:var(--ink-2)}
{margin:32px auto 0}
{margin:12px 0 0;font:14px/1.4 var(--f);color:var(--mut)}

@media (max-width:760px){
  {padding:24px 16px 80px}
  {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:24px 0 14px}
  {height:50px;padding-right:10px}
  {width:34px;height:34px}
  {grid-template-columns:1fr;gap:14px}
  {height:400px}
  {--x:50%}
  {padding:50px 10px 14px 14px}
  {font-size:10.5px;line-height:1.7;padding-left:calc(var(--i,0) * 8px)}
  .lab-b .sn span{display:none}
  .lab-b .sn{padding:0 16px}
  .lab-b .shero{padding:28px 16px 20px}
  .lab-b .shero h4{font-size:21px}
  .lab-b .sgrid{grid-template-columns:1fr;padding:8px 16px 18px}
  .lab-b .ssec{padding:12px 16px}
  {margin:0;border-radius:28px;padding-bottom:56px}
  {padding-top:64px}
  {padding:0 16px}
  {padding:72px 16px 48px}
  {padding:48px 18px}
  {font-size:16px}
}

/* polish pass 1: a calm strip under the scan tags so they never sit on the scrolling site text */
{content:"";position:absolute;left:0;right:0;top:0;height:50px;z-index:1;background:linear-gradient(#fff 62%,rgba(255,255,255,0))}

/* =================================================================================================
   v12 polish (V12-POLISH-task): one rhythm between screens, the final form on narrow phones
   ================================================================================================= */
/* content to content: 120 px on desktop and tablet, 80 px on the phone (the second screen keeps its own padding) */
{padding-top:max(0px,calc(120px - clamp(70px,10vh,120px)));padding-bottom:120px}
{padding-top:120px}
@media (max-width:760px){
  {padding-top:max(0px,calc(80px - clamp(70px,10vh,120px)));padding-bottom:80px}
  {padding-top:80px}
}
/* narrow phones: the site field and the button stack, so the address is never cut */
@media (max-width:480px){
  {padding:10px}
  {padding:44px 14px}
  {flex-wrap:wrap;gap:6px;padding:6px;border-radius:24px}
  {flex:1 1 100%;padding:12px 14px;font-size:16px;text-align:center}
  {flex:1 1 100%;justify-content:center}
}
/* v12 polish pass 2: "Example" on the site side, so it never sits on the agents' lines (phone) */
{left:14px;right:auto;bottom:10px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.86)}

/* =================================================================================================
   v13 (Vlad 20:46Z, ledger fa8125): one tab that flows, longer Grow in 4 steps, the agents' card with air, the widget's confetti,
   Gmail → Telegram → WhatsApp → Tobira, see-through neighbours, composers after Vlad's screenshots, no scan screen.
   ================================================================================================= */
/* 2. the tab never disappears: it keeps its bridge, glides and morphs with a spring, the bridge flows into the moving window (9d65, 29eb) */
.lab-b .tabbg.mv{border-radius:22px 22px 0 0;box-shadow:0 0 0 1.5px rgba(255,194,26,.45),0 0 22px 3px rgba(255,194,26,.25),0 -12px 26px -20px rgba(30,60,100,.55)}
.lab-b .tabbg::after{transition:height .35s ease}
.lab-b .tabbg.mv::after{transform:none;border-radius:0;height:calc(var(--gap,20px) + 22px);-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent);transition:height .3s ease}
.lab-b .tabbg.mv .fl{opacity:0;transform:none;transition-duration:.25s}
/* 3. Grow: four steps of the agents' talk, with step dots (d6bf) */
.lab-b .grow{min-width:600px;justify-content:center}
.lab-b .grow .gt{transition:opacity .22s ease,transform .22s ease}
.lab-b .grow .gt.sw{opacity:0;transform:translateY(-6px)}
.lab-b .grow .gd{display:inline-flex;gap:5px;margin-left:6px}
.lab-b .grow .gd i{width:7px;height:7px;border-radius:50%;background:rgba(18,22,28,.14);transition:background .3s ease}
.lab-b .grow[data-step="0"] .gd i:nth-child(1),.lab-b .grow[data-step="1"] .gd i:nth-child(-n+2),.lab-b .grow[data-step="2"] .gd i:nth-child(-n+3),.lab-b .grow[data-step="3"] .gd i{background:var(--y);box-shadow:0 0 6px rgba(255,194,26,.6)}
/* 4. the agents' card stands free of the pills (f8ec, f94b) */
@media (min-width:1181px){.lab-b .side{left:calc(50% + 150px);top:72px}}
/* 5. booked: the widget's success screen, an ink circle with a white check, its ring and the confetti burst (809a, 4780) */
.lab-b .okb{background:#16171A;color:#fff;box-shadow:0 16px 34px -12px rgba(18,22,28,.45)}
.lab-b .okb::before{box-shadow:0 0 0 2px #16171A}
.lab-b .won-cf{position:absolute;left:0;right:0;top:-40px;bottom:0;z-index:8;pointer-events:none;overflow:visible}
.lab-b .won-cf i{position:absolute;width:9px;height:13px;border-radius:2px;will-change:transform,opacity}
/* 6. notifications one after another: Gmail, Telegram, WhatsApp, then the approved Tobira card (fe2a, 166b) */
.lab-b .nst{position:absolute;left:150px;top:40px;width:340px}
.lab-b .side .nst .nn{position:absolute;left:0;top:0;width:340px;opacity:0;transform:translateY(-18px) scale(.94);transform-origin:50% 100%;filter:none;
  transition:transform .6s cubic-bezier(.3,1.3,.45,1),opacity .4s ease}
.lab-b .nn:not(.ncard){display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 0 0 1px rgba(18,22,28,.05),0 24px 50px -24px rgba(30,50,80,.5),0 2px 6px rgba(18,22,28,.05)}
.lab-b .nn-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(18,22,28,.08)}
.lab-b .nn-ic img{width:22px;height:22px}
.lab-b .nn-c{flex:1;min-width:0}
.lab-b .nn-l{display:flex;justify-content:space-between;margin:0;font:500 12px/1.3 var(--f);color:var(--mut)}
.lab-b .nn-l b{font-weight:600;color:var(--ink-2)}
.lab-b .nn-t{margin:2px 0 0;font:600 14px/1.3 var(--f);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-b .nn-s{margin:1px 0 0;font:400 13px/1.35 var(--f);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 7. neighbours: half see-through with a light blur, gone at the outer edge, dissolved towards the bottom; the bottom fade moves with the flip (c4c7, b0a1) */
.lab-b .wi{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16.7%,#000 83.3%,transparent 100%),linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 16.7%,#000 83.3%,transparent 100%),linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
  -webkit-mask-size:300% 100%,100% 200%;mask-size:300% 100%,100% 200%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-position:50% 0,0 0;mask-position:50% 0,0 0;
  transition:-webkit-mask-position 1s cubic-bezier(.45,.05,.2,1),mask-position 1s cubic-bezier(.45,.05,.2,1),filter .9s ease,opacity .9s ease}
.lab-b .win[data-pos="1"] .wi,.lab-b .win[data-pos="2"] .wi{-webkit-mask-position:100% 0,0 100%;mask-position:100% 0,0 100%}
.lab-b .win[data-pos="-1"] .wi,.lab-b .win[data-pos="-2"] .wi{-webkit-mask-position:0 0,0 100%;mask-position:0 0,0 100%}
.lab-b .win:not([data-pos="0"]) .wi{filter:blur(.8px);opacity:.8}
.lab-b .wi::after{background:rgba(236,241,247,.16)}
.lab-b .win[data-pos="1"],.lab-b .win[data-pos="-1"],.lab-b .win[data-pos="1"]:hover,.lab-b .win[data-pos="-1"]:hover{filter:drop-shadow(0 16px 26px rgba(30,50,80,.1))}
/* 8. composers after Vlad's screenshots (ref-vlad/28 ChatGPT, 29 Gemini, 30 Claude), light theme (8fd4, 024f) */
.lab-b .cmp-gpt{height:52px;gap:4px;padding:0 8px 0 10px;border-radius:26px;background:#fff;box-shadow:0 0 0 1px rgba(13,13,13,.1),0 4px 16px -8px rgba(0,0,0,.14)}
.lab-b .cmp-gpt .ph{font-size:16px;color:#8F8F8F}
.lab-b .cmp .mdl{flex:none;display:inline-flex;align-items:center;gap:3px;padding:0 6px;font:500 14px var(--f);color:#5D5D5D}
.lab-b .cmp .mdl svg{width:15px;height:15px}
.lab-b .cmp-gm{width:min(calc(var(--col) - 40px),calc(100% - 40px));height:56px;border-radius:28px}
.lab-b .cmp-cl2{flex-direction:column;align-items:stretch;gap:6px;padding:0;background:none;box-shadow:none}
.lab-b .cmp-cl2 .box{display:flex;align-items:center;gap:8px;height:48px;padding:0 8px 0 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(31,30,29,.15),0 4px 16px -8px rgba(0,0,0,.1)}
.lab-b .cmp-cl2 .ph{flex:1;padding:0;font-size:15px;color:#8A8984}
.lab-b .cmp-cl2 .live{width:7px;height:7px;border-radius:50%;background:#3DAA6A}
.lab-b .cmp-cl2 .ret{display:grid;place-items:center;width:28px;height:28px;color:#73726C}
.lab-b .cmp-cl2 .ret svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lab-b .cmp-cl2 .foot{display:flex;align-items:center;gap:2px;padding:0 4px;color:#73726C}
.lab-b .cmp-cl2 .foot .ib{width:28px;height:28px}
.lab-b .cmp-cl2 .foot .ib svg{width:16px;height:16px}
.lab-b .cmp-cl2 .vw{width:auto!important;padding:0 4px;display:inline-flex;gap:0}
.lab-b .cmp-cl2 .vw svg + svg{width:12px!important;height:12px!important}
.lab-b .cmp-cl2 .fx{flex:1}
.lab-b .cmp-cl2 .mdl{font-size:12.5px;color:#73726C}
/* 9. the scan screen is gone: after the numbers comes the prod grid (0fce, c8a7) */
{display:none}
{padding-top:max(0px,calc(120px - clamp(70px,10vh,120px)))}
@media (max-width:760px){
  {padding-top:max(0px,calc(80px - clamp(70px,10vh,120px)))}
  .lab-b .grow{min-width:0}
  .lab-b .nst{position:relative;left:auto;top:auto;width:100%;height:220px}
  .lab-b .side .nst .nn{width:100%}
}

/* v13 polish pass 1: notification text in two lines instead of an ellipsis */
.lab-b .nn-s{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* =================================================================================================
   v14 (Vlad 21:22Z, ledger 40097a): client tabs like a browser's, grown into a still window; dense blurred neighbours
   ================================================================================================= */
/* the tab strip sits on the window's top edge, inside its width, so the outer wings of the first and last tab lie on the window */
.lab-b .hero .stage{margin-top:0}
@media (min-width:761px){.lab-b .cl-row{margin:0 40px;gap:4px}}
.lab-b .cl-row .pc{border-radius:16px 16px 0 0;background:rgba(255,255,255,.5);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s ease}
@media (min-width:761px){.lab-b .cl-row .pc{padding:0 10px 0 7px;gap:8px}}
.lab-b .cl-row .pc:hover{background:rgba(255,255,255,.75);transform:none}
.lab-b[data-link="tab"] .cl-row .pc.on{background:transparent;box-shadow:none;border-radius:16px 16px 0 0}
/* the active tab: one white shape with the window, Chrome-like concave wings; only its transform and width move (app.js, one spring) */
.lab-b .tabbg,.lab-b .tabbg.mv{border-radius:18px 18px 0 0;box-shadow:0 -10px 24px -18px rgba(30,60,100,.5);transition:border-radius .3s ease}
.lab-b .tabbg::after,.lab-b .tabbg.mv::after{height:var(--gap,1px);transform:none;border-radius:0;-webkit-mask-image:none;mask-image:none;transition:none}
.lab-b .tabbg .fl,.lab-b .tabbg.mv .fl{opacity:1;transform:none;transition:opacity .2s ease}
.lab-b .tabbg.first .fl.l,.lab-b .tabbg.last .fl.r{opacity:0}
/* the window never moves: a still white frame; chats turn over inside it with a short slide and fade */
.lab-b .car .frame{position:absolute;top:24px;left:calc(50% - var(--win)/2);width:var(--win);height:var(--chat-h);z-index:2;pointer-events:none;border-radius:22px 22px 0 0;background:#fff;
  box-shadow:0 0 0 1px rgba(18,22,28,.05),0 30px 70px -30px rgba(30,50,80,.45);transition:border-radius .3s ease}
.lab-b .win[data-pos="0"]{z-index:3;overflow:hidden;border-radius:22px 22px 0 0;transition:opacity .35s ease,border-radius .3s ease}
.lab-b .win[data-pos="1"],.lab-b .win[data-pos="-1"]{z-index:1}
.lab-b .win[data-pos="2"],.lab-b .win[data-pos="-2"]{z-index:0}
.lab-b .wi{transition:-webkit-mask-position 1s cubic-bezier(.45,.05,.2,1),mask-position 1s cubic-bezier(.45,.05,.2,1),filter .9s ease,opacity .45s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.lab-b .win.out-l .wi,.lab-b .win.in-l .wi{transform:translateX(-64px);opacity:0}
.lab-b .win.out-r .wi,.lab-b .win.in-r .wi{transform:translateX(64px);opacity:0}
.lab-b .win.nt,.lab-b .win.nt .wi{transition:none!important}
.lab-b .stage[data-edge="l"] .frame,.lab-b .stage[data-edge="l"] .win[data-pos="0"],.lab-b .stage[data-edge="l"] .win[data-pos="0"] .wi{border-top-left-radius:0}
.lab-b .stage[data-edge="r"] .frame,.lab-b .stage[data-edge="r"] .win[data-pos="0"],.lab-b .stage[data-edge="r"] .win[data-pos="0"] .wi{border-top-right-radius:0}
/* neighbours: dense, softly blurred, gone at the outer edge (as before v13), the approved tilt and action unchanged */
.lab-b .win:not([data-pos="0"]) .wi{filter:blur(12px);opacity:.88}
.lab-b .wi::after{background:rgba(236,241,247,.12)}
@media (max-width:760px){.lab-b .car .frame{left:16px;width:calc(100% - 32px)}}

/* v14 polish pass 1: the old chat leaves quickly before the new one comes (no double exposure); full labels in the tabs */
.lab-b .win.out-l .wi,.lab-b .win.out-r .wi{transition:transform .28s cubic-bezier(.4,0,1,1),opacity .2s ease!important}
.lab-b .wi{transition:-webkit-mask-position 1s cubic-bezier(.45,.05,.2,1),mask-position 1s cubic-bezier(.45,.05,.2,1),filter .9s ease,opacity .32s ease,transform .5s cubic-bezier(.22,1,.36,1)}
@media (min-width:761px){
  .lab-b .cl-row{margin:0 36px}
  .lab-b .cl-row .pc{gap:7px}
  .lab-b .cl-row .ava,.lab-b .cl-row .ava > img{width:32px;height:32px}
  .lab-b .cl-row .pc .tx small{font-size:11.5px}
}

/* v14 polish pass 2: no empty frame and no double exposure: the new chat comes in opaque over the old one, which eases back and dims */
.lab-b .win.in-r .wi{transform:translateX(100%);opacity:1}
.lab-b .win.in-l .wi{transform:translateX(-100%);opacity:1}
.lab-b .win.entering{z-index:4}
.lab-b .win.out-l .wi{transform:translateX(-22%);opacity:.35}
.lab-b .win.out-r .wi{transform:translateX(22%);opacity:.35}
.lab-b .win.out-l .wi,.lab-b .win.out-r .wi{transition:transform .56s cubic-bezier(.22,1,.36,1),opacity .56s ease!important}
.lab-b .wi{transition:-webkit-mask-position 1s cubic-bezier(.45,.05,.2,1),mask-position 1s cubic-bezier(.45,.05,.2,1),filter .9s ease,opacity .32s ease,transform .56s cubic-bezier(.22,1,.36,1)}

/* =================================================================================================
   v15 (Vlad 21:39Z, ledger 24fa1b): careful finishing of the hero. Neighbours seen and blurred, wide tabs with the approved
   onboarding highlight, air inside the tabs, the hush only inside the frame, side windows always behind, Grow from real lines.
   ================================================================================================= */
/* 1. neighbours: fully opaque, blurred 7 px; a soft fade only at the very outer edge and the bottom; tilt and motion unchanged (b755, 7a54) */
.lab-b .win[data-pos="1"],.lab-b .win[data-pos="-1"]{opacity:1}
.lab-b .wi{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,#000 0%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,#000 0%,#000 86%,transparent 100%)}
.lab-b .win:not([data-pos="0"]) .wi{filter:blur(7px);opacity:1}
/* 2. tabs as wide as before v14 (~170 px) with 8 px of air; the active one wears the approved onboarding .tab.on: white, a soft
   shadow and the glowing yellow line at its foot; it stays grown into the window and still glides (a928, b596) */
@media (min-width:761px){
  .lab-b .cl-row{margin:0;gap:8px}
  /* 3. 18 px = the AI badge's 7 px overhang + 11 px of air before the name and the role (125f) */
  .lab-b .cl-row .pc{padding:0 10px 0 7px;gap:18px}
}
.lab-b .tabbg,.lab-b .tabbg.mv{box-shadow:0 -1px 2px rgba(18,22,28,.06),0 -6px 14px -8px rgba(30,60,100,.35)}
.lab-b .tabbg::before{content:"";position:absolute;z-index:2;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px;pointer-events:none;
  background:linear-gradient(90deg,#FFD55A,#FFC21A,#FFB000);box-shadow:0 0 10px rgba(255,186,20,.7)}
.lab-b .cl-row .pc:focus-visible{outline:none}
.lab-b .cl-row .pc:focus-visible:not(.on){background:rgba(255,255,255,.92)}
/* 4. the hush while a card is up covers only the window inside its frame: the top edge, the frame and the tabs stay sharp (7e6c) */
.lab-b .veil,.lab-b .car ~ .veil{top:24px}
.lab-b .stage[data-edge="l"] .veil{border-top-left-radius:0}
.lab-b .stage[data-edge="r"] .veil{border-top-right-radius:0}
/* 5. only the window in the middle may stand above the frame; a side window is always behind it, also during a switch (4ef2, c4b3) */
.lab-b .win:not([data-pos="0"]){z-index:1}
.lab-b .win[data-pos="2"],.lab-b .win[data-pos="-2"]{z-index:0}
.lab-b .win.entering[data-pos="0"]{z-index:4}
/* 6. Grow (b00c, 68ca): the chat's own lines, as ChatGPT draws them: "Thinking" shimmers, then "Thought for Ns ›"; tool lines are grey
   with a small spinner, then a check; the call to the business's agent is the highlighted line (approved onboarding .tool, .tool.hl).
   In Grow these same lines come forward larger over the quiet chat and go back; no pill, no step dots */
.lab-b .proc.rv.in{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.lab-b .proc .tool:not(.in){display:none}
.lab-b .proc .tool.in{animation:labB-msg-in .45s var(--out) both}
.lab-b .instant .proc .tool.in{animation:none}
.lab-b .proc .tool img{flex:none;width:17px;height:17px;border-radius:5px}
.lab-b .proc .tool.hl{padding:7px 12px 7px 9px;border-radius:12px;background:#FFF7DD;color:var(--ink-2)}
.lab-b .pth{font:14px/1.4 var(--f);color:var(--mut)}
.lab-b .pth .ps{background:linear-gradient(90deg,#8F98A3 0%,#8F98A3 38%,#D5DAE0 50%,#8F98A3 62%,#8F98A3 100%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:labB-shim 1.6s linear infinite}
.lab-b .pth .pd{display:none}
.lab-b .proc.ok .pth .ps{display:none}
.lab-b .proc.ok .pth .pd{display:inline}
.lab-b .grow{top:164px;display:block;min-width:0;width:auto;padding:0;border-radius:0;background:none;box-shadow:none;white-space:nowrap;font:inherit;color:inherit;
  transform:translate(-50%,-50%);transform-origin:0 0;filter:none;transition:none}
.lab-b .grow .proc{display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.lab-b .grow .pth{font-size:20.7px}
.lab-b .grow .tool{font-size:20px;gap:12px}
.lab-b .grow .proc .tool:not(.in){display:flex;visibility:hidden}
.lab-b .grow .tool.in{animation:labB-msg-in .45s var(--out) both}
.lab-b .grow .tool .sp{width:18px;height:18px;border-width:3px}
.lab-b .grow .tool > svg{width:19px;height:19px;stroke-width:2.2}
.lab-b .grow .tool img{flex:none;width:25px;height:25px;border-radius:7px}
.lab-b .grow .tool.hl{padding:10px 18px 10px 13px;border-radius:18px;background:#FFF7DD;color:var(--ink-2)}
.lab-b .stage.growing .veil{background:rgba(255,255,255,.76)}
@media (max-width:760px){
  .lab-b .grow{top:176px;width:max-content;max-width:calc(100vw - 56px);white-space:normal}
  .lab-b .grow .proc{gap:12px}
  .lab-b .grow .pth{font-size:17.6px}
  .lab-b .grow .tool{font-size:17px;gap:10px}
  .lab-b .grow .tool .sp{width:15px;height:15px;border-width:2.5px}
  .lab-b .grow .tool > svg{width:16px;height:16px}
  .lab-b .grow .tool img{width:21px;height:21px;border-radius:6px}
  .lab-b .grow .tool.hl{padding:9px 15px 9px 11px;border-radius:15px}
  .lab-b .stage.growing .veil{background:rgba(255,255,255,.82)}
}
/* 3 on the phone: the name stands ~10 px clear of the AI badge (only the paddings change) */
@media (max-width:760px){.lab-b .cl-row .pc{gap:12px;padding-top:8px;padding-bottom:8px}}
@media (max-width:760px){.lab-b .veil,.lab-b .car ~ .veil{left:0;right:0}}
/* v15 polish pass 1: the phone has no blur under the hush (WebKit), so under Grow the hush is almost white and the lines read alone */
@media (max-width:760px){.lab-b .stage.growing .veil{background:rgba(255,255,255,.93)}}
/* v15 polish pass 2: a tool line that wraps on the phone keeps its spinner/check on the first line, as ChatGPT does */
@media (max-width:760px){.lab-b .grow .tool{align-items:flex-start}.lab-b .grow .tool .sp,.lab-b .grow .tool > svg{margin-top:4px}.lab-b .grow .tool img{margin-top:1px}}

/* =================================================================================================
   v15 review fixes (V15-DESIGN-REVIEW.md)
   ================================================================================================= */
/* P1 + P2: on screens up to 940 px tall the story sits 60 px higher, so Grow's last line, the agents' card and the booked answer stay
   above the fold and clear of the prototype panel; Grow's lines sit a little closer */
@media (min-width:761px) and (max-height:940px){
  .lab-b .hero{padding-top:10px}
  .lab-b .h1{margin-top:20px}
  .lab-b .lead{margin-top:12px}
  .lab-b .form{margin-top:28px}
  .lab-b .clients{margin-top:30px}
  .lab-b .cl-t{margin-bottom:8px}
}
.lab-b .grow .proc{gap:12px}
/* P2: Lena's Telegram: the process lines carry no pills; the call to the agent keeps its yellow highlight */
.lab-b .t-tg .proc .tool:not(.hl){padding:0;border-radius:0;background:none}
/* P2: the yellow line rests while the tab glides under the other tabs (no beads in the gaps) and comes back on landing */
.lab-b .tabbg::before{transition:opacity .25s ease .05s}
.lab-b .tabbg.gl::before{opacity:0;transition:opacity .08s ease}
/* P2: the entering chat is fully opaque, no edge fade (no second header or seam); the old one dims away faster */
.lab-b .win.entering .wi{-webkit-mask-image:none;mask-image:none;background:#fff}
.lab-b .win.out-l .wi,.lab-b .win.out-r .wi{opacity:.12;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .22s ease!important}
/* P2: phone: under Grow the chat hides almost fully (WebKit does not blur here) */
@media (max-width:760px){.lab-b .stage.growing .veil{background:rgba(255,255,255,.98)}}
/* P3: inactive tabs: a denser frosted glass over the picture */
.lab-b .cl-row .pc{background:rgba(255,255,255,.66);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.lab-b .cl-row .pc:hover{background:rgba(255,255,255,.82)}

/* v16 (20.10, Vlad 22:38Z, registry d5f0f3): edge tabs follow the window's rounded corner (8f8a, c1f5), stats variant Big (10fe, af47),
   third screen «AI assistants around your site agent» (8833, 92c2, f3d7), use cases instead of the audience screen (cfe9). */

/* ---------- 1. edge tabs: an inactive Maya / Lena reaches down into the window's corner; its outer bottom edge is the window's own curve ---------- */
.lab-b .cl-row .pc[data-sc="0"]::after,.lab-b .cl-row .pc[data-sc="4"]::after,.lab-b[data-link="tab"] .cl-row .pc[data-sc="0"].on::after,.lab-b[data-link="tab"] .cl-row .pc[data-sc="4"].on::after{
  content:"";position:absolute;top:100%;bottom:auto;width:22px;height:22px;pointer-events:none;box-shadow:none;border-radius:0;
  background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  opacity:1;transition:opacity .22s ease .14s,background .25s ease}
.lab-b .cl-row .pc[data-sc="0"]::after,.lab-b[data-link="tab"] .cl-row .pc[data-sc="0"].on::after{left:0;right:auto;
  -webkit-mask:radial-gradient(circle at 22px 22px,transparent 21.5px,#000 22px);mask:radial-gradient(circle at 22px 22px,transparent 21.5px,#000 22px)}
.lab-b .cl-row .pc[data-sc="4"]::after,.lab-b[data-link="tab"] .cl-row .pc[data-sc="4"].on::after{right:0;left:auto;
  -webkit-mask:radial-gradient(circle at 0 22px,transparent 21.5px,#000 22px);mask:radial-gradient(circle at 0 22px,transparent 21.5px,#000 22px)}
.lab-b .cl-row .pc[data-sc="0"]:hover::after,.lab-b .cl-row .pc[data-sc="4"]:hover::after{background:rgba(255,255,255,.82)}
.lab-b .cl-row .pc[data-sc="0"].on::after,.lab-b .cl-row .pc[data-sc="4"].on::after,.lab-b[data-link="tab"] .cl-row .pc[data-sc="0"].on::after,.lab-b[data-link="tab"] .cl-row .pc[data-sc="4"].on::after{opacity:0;transition:opacity .15s ease .62s}
/* the other links (Thread, Echo) keep their own pill tabs: no corner piece there */
.lab-b[data-link="thread"] .cl-row .pc::after,.lab-b[data-link="echo"] .cl-row .pc::after{content:none}

/* ---------- 2. second screen: variant B, the numbers set large (A = the approved yellow underline) ---------- */
.lab-b[data-stats="big"] .s2c p .num{position:relative;display:inline-block;height:.68em;line-height:.68em;overflow:visible;padding:0 .02em;background:none;font-size:1.72em;font-weight:500;letter-spacing:-.045em;
  vertical-align:baseline;color:var(--ink);text-shadow:0 .06em .5em rgba(255,186,20,.28)}
.lab-b[data-stats="big"] .s2c p .num::after{content:"";position:absolute;left:.02em;right:.02em;bottom:-.2em;height:.075em;border-radius:1em;background:linear-gradient(90deg,var(--y),rgba(255,194,26,.25))}

/* ---------- 3. third screen: AI assistants on orbits around the site agent ---------- */
.lab-b .o3{position:relative;overflow:hidden;height:clamp(720px,100vh,900px);margin:0 auto;max-width:1600px}
.lab-b .o3-st{position:absolute;inset:0}
.lab-b .o3-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.lab-b .o3-lines line{stroke:rgba(18,22,28,.16);stroke-width:1;stroke-dasharray:2 5;stroke-linecap:round}
.lab-b .o3-lines line.p1{stroke:rgba(18,22,28,.12)}
.lab-b .o3-lines line.p2{stroke:rgba(18,22,28,.08)}
.lab-b .o3-lines circle{fill:var(--y-2)}
.lab-b .o3-ring{position:absolute;left:50%;top:50%;z-index:1;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,186,20,.5);opacity:0}
.lab-b .o3.in .o3-ring{animation:labB-o3ring 7.5s cubic-bezier(.2,.6,.3,1) infinite}
.lab-b .o3.in .o3-ring.r2{animation-delay:2.5s}.lab-b .o3.in .o3-ring.r3{animation-delay:5s}
@keyframes labB-o3ring{0%{transform:scale(.45);opacity:0}12%{opacity:.75}100%{transform:scale(4.2);opacity:0}}
.lab-b .o3-k{position:absolute;left:0;top:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;will-change:transform,opacity}
.lab-b .o3-k .o3-t{display:grid;place-items:center;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .27);background:#fff;overflow:hidden;
  box-shadow:0 0 0 1px rgba(18,22,28,.05),0 22px 40px -22px rgba(30,60,100,.5),0 4px 10px -6px rgba(30,60,100,.18)}
.lab-b .o3-k .o3-t img{width:48%;height:48%;object-fit:contain}
.lab-b .o3-k .o3-t svg{width:100%;height:100%;display:block}
.lab-b .o3-k small{font:500 13px/1 var(--f);color:var(--ink-2);letter-spacing:-.005em;white-space:nowrap;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.78)}
.lab-b .o3-k.p0{--s:96px}.lab-b .o3-k.p1{--s:74px}.lab-b .o3-k.p2{--s:58px}
.lab-b .o3-k.p1 small{font-size:12px}.lab-b .o3-k.p2 small{font-size:11.5px}
.lab-b .o3-k.p0{z-index:4}.lab-b .o3-k.p1{z-index:3}
/* the text column: narrower than the page's usual headings (f3d7), on a soft white halo so passing cards sink behind it */
.lab-b .o3-c{position:absolute;left:50%;top:50%;z-index:5;width:min(470px,calc(100% - 40px));transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center}
.lab-b .o3-c::before{content:"";position:absolute;z-index:-1;left:-34%;right:-34%;top:-46%;bottom:-46%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.97) 52%,rgba(255,255,255,.75) 72%,rgba(255,255,255,0))}
.lab-b .o3-h{margin:0;font:400 clamp(30px,3.3vw,46px)/1.12 var(--fd);font-optical-sizing:auto;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.lab-b .o3-pill{position:relative;display:inline-flex;align-items:center;gap:10px;margin:30px 0 26px;padding:9px 20px 9px 10px;border-radius:999px;background:#fff;
  font:500 17px/1 var(--f);color:var(--ink);white-space:nowrap;
  box-shadow:0 0 0 2px var(--y),0 0 26px 5px rgba(255,194,26,.45),0 12px 26px -12px rgba(60,40,0,.45)}
.lab-b .o3-pill b{font-weight:600}
.lab-b .o3-orb{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;flex:none;color:var(--ink)}
.lab-b .o3-orb svg{position:absolute;inset:0;width:100%;height:100%}
.lab-b .o3-l{margin:0;font:400 clamp(18px,1.45vw,21px)/1.42 var(--f);color:var(--ink-2);letter-spacing:-.01em;text-wrap:balance}
.lab-b .o3-l b{font-weight:600;color:var(--ink)}
/* the appearance: column first, then the pill lights up, then the cards fly out (JS) */
.lab-b .o3-h,.lab-b .o3-l{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.lab-b .o3-pill{opacity:0;transform:scale(.86);transition:opacity .5s ease .18s,transform .8s cubic-bezier(.3,1.4,.5,1) .18s}
.lab-b .o3-l{transition-delay:.34s,.34s}
.lab-b .o3.in .o3-h,.lab-b .o3.in .o3-l{opacity:1;transform:none}
.lab-b .o3.in .o3-pill{opacity:1;transform:none}
.lab-b .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){
  .lab-b .o3{height:max(760px,100svh)}
  .lab-b .o3-k.p0{--s:66px}.lab-b .o3-k.p1{--s:54px}.lab-b .o3-k.p2{--s:44px}
  .lab-b .o3-k small{font-size:11.5px;padding:4px 7px}.lab-b .o3-k.p2 small{font-size:10.5px}
  .lab-b .o3-c{width:calc(100% - 48px)}
  .lab-b .o3-c::before{left:-14%;right:-14%;top:-30%;bottom:-30%}
  .lab-b .o3-h{font-size:31px}
  .lab-b .o3-pill{margin:24px 0 20px;font-size:16px}
  .lab-b .o3-l{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .lab-b .o3-h,.lab-b .o3-l,.lab-b .o3-pill{opacity:1;transform:none;transition:none}
  .lab-b .o3.in .o3-ring{animation:none}
}

/* ---------- 5. use cases (cfe9): in the prod style, every card marked Example ---------- */
{max-width:1200px;margin:0 auto;padding:120px 24px 40px}
{max-width:760px;margin:0 auto 48px;text-align:center}
{margin:0;font:400 clamp(30px,3.3vw,46px)/1.12 var(--fd);font-optical-sizing:auto;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
{margin:14px auto 0;max-width:560px;font:400 18px/1.45 var(--f);color:var(--mut)}
{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 22px 20px;border-radius:24px;background:#fff;
  box-shadow:0 0 0 1px rgba(18,22,28,.07),0 24px 44px -32px rgba(30,60,100,.45)}
{display:flex;align-items:center;gap:10px}
{font:600 15px/1.2 var(--f);color:var(--ink);letter-spacing:-.01em}
{margin-left:auto;font:500 11px/1 var(--f);font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);padding:5px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}
{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--y-plate);color:#8A5A00;flex:none}
{width:18px;height:18px}
{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:16px;background:#F4F5F7;font:400 15px/1.4 var(--f);color:var(--ink)}
{width:18px;height:18px;margin-top:1px;flex:none}
{display:flex;gap:10px;align-items:flex-start;margin:0;font:400 14.5px/1.45 var(--f);color:var(--ink-2)}
{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:radial-gradient(circle,#FFE07A 0 34%,rgba(255,194,26,.25) 35% 100%);box-shadow:inset 0 0 0 1.5px rgba(255,186,20,.65)}
{display:flex;align-items:center;gap:8px;margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line);font:600 15px/1.3 var(--f);color:var(--ink)}
{flex:none;width:18px;height:18px;color:#1E9E5A}
{margin:22px auto 0;text-align:center;font:400 13px/1.4 var(--f);color:var(--faint)}
@media (max-width:1000px){{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){{padding:88px 16px 24px}{grid-template-columns:1fr}{margin-bottom:32px}{font-size:16px}}

/* prod sections after the grid: they keep their own look under .prod tokens */
{display:block;font-family:var(--font);color:var(--ink)}
{position:relative}

/* ---------- v16 review fixes ---------- */
/* P2 (a, b): the entering chat is opaque from its first frame (covers the leaving one), slides in from 96 px and fades up from .4 */
.lab-b .win.entering[data-pos="0"]{background:#fff}
.lab-b .win.in-r .wi{transform:translateX(96px);opacity:.4}
.lab-b .win.in-l .wi{transform:translateX(-96px);opacity:.4}
.lab-b .win.entering:not(.nt) .wi{transition:transform .52s cubic-bezier(.22,1,.36,1),opacity .2s ease!important}
/* P2 (c): the chosen tab keeps its glass until the white plate has glided under it */
.lab-b[data-link="tab"] .cl-row .pc.on{transition:background .2s ease .62s}
/* P3: the prototype panel in the middle of the screen */
{left:50%;right:auto;transform:translateX(-50%);max-width:calc(100vw - 28px)}
{padding:0 8px}{padding:0 4px}
/* review: the page's own .wrap (v15) narrowed the prod sections; inside .prod it is the prod container again (shell.css) */
{max-width:1240px;margin:0 auto;padding:0 32px}
@media (max-width:760px){{padding:0 18px}}
/* review: the prototype composer class .cmp (app.css) also hit the prod compare section; inside .prod it is the section again */
{flex:initial;width:auto;margin:0;display:block;gap:normal;color:inherit}

/* v17 (Vlad 21.10 10:33Z, A-1021-b0b5…6c9c): no chip over the headline, the drawn arrow in view */
/* the arrow: on screens up to 940 px tall the v15 review left 8 px under the line, and the arrow's head went under Lena's tab.
   The chip is gone and frees 32 px: the line gets its 34 px back, the window still sits 6 px higher than in v16 */
@media (min-width:761px) and (max-height:940px){.lab-b .cl-t{margin-bottom:34px}}
/* phone: the v10 polish rule (top:38%) beat the phone position and laid the arrow over "talking"; back under the line's right end */
@media (max-width:760px){.lab-b .arw{top:calc(100% - 8px)}}
/* narrow desktop 761–920: no room right of the 760 px line, the arrow sat past the screen edge; same place as on the phone */
@media (min-width:761px) and (max-width:920px){.lab-b .arw{left:auto;right:-6px;top:calc(100% - 8px);width:40px;height:36px}}

/* v18 (Vlad 21.10 11:53Z, A-1021-8ba6, 5d54): on the third screen's orbits fly people with their AI assistants, not bare logos.
   Pills (default) = the prod «People» pill (.hoa-cap, .hoa-capics): photo 36, the assistant's mark ~30 beside it, name over role · company.
   Cards = the old prod hero's rich cards (.hin/.hout): photo with the assistant's mark, name, the request and its outcome.
   Orbits, planes, rotation, locators and the centre are v16/v17 as approved; --k sets each plane's size (near 1, mid .87, far .75). */
.lab-b .o3-k{display:block;gap:0}
/* v16 laid the tile and its label out in a column, centred: the pill is a row, the card stretches its rows */
.lab-b .o3-k.p0{--k:1}.lab-b .o3-k.p1{--k:.87}.lab-b .o3-k.p2{--k:.75}
.lab-b .o3-k .o3-av{display:block;flex:none;object-fit:cover;background:#EEF1F5}
.lab-b .o3-k .o3-lg{position:relative;display:grid;place-items:center;flex:none;border-radius:50%;background:#fff;overflow:hidden}
.lab-b .o3-k .o3-lg img{width:56%;height:56%;object-fit:contain}
.lab-b .o3-k .o3-lg.art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.lab-b .o3-k .o3-tx{display:flex;flex-direction:column;min-width:0;white-space:nowrap}
.lab-b .o3-k .o3-tx b{font:600 calc(15px * var(--k))/1.1 var(--f);letter-spacing:-.012em;color:var(--ink)}
.lab-b .o3-k .o3-tx small{display:block;margin-top:calc(3px * var(--k));padding:0;border-radius:0;background:none;font:400 calc(12.5px * var(--k))/1.15 var(--f);letter-spacing:-.003em;color:var(--mut,#6B7480)}

/* ---- Pills ---- */
.lab-b [data-orbit="pills"] .o3-k{display:flex;flex-direction:row;align-items:center;gap:calc(10px * var(--k));height:calc(52px * var(--k));padding:0 calc(20px * var(--k)) 0 calc(7px * var(--k));border-radius:999px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 5px rgba(30,60,100,.07),0 0 0 1px rgba(18,22,28,.05),0 18px 34px -16px rgba(30,60,100,.5),0 0 0 5px rgba(255,255,255,.45)}
.lab-b [data-orbit="pills"] .o3-ics{display:flex;align-items:center;flex:none}
.lab-b [data-orbit="pills"] .o3-av{width:calc(38px * var(--k));height:calc(38px * var(--k));border-radius:50%;box-shadow:0 0 0 2.5px #fff}
.lab-b [data-orbit="pills"] .o3-lg{width:calc(32px * var(--k));height:calc(32px * var(--k));margin-left:calc(-6px * var(--k));box-shadow:0 0 0 2.5px #fff,0 0 0 3.5px rgba(18,22,28,.07)}

/* ---- Cards ---- */
.lab-b [data-orbit="cards"] .o3-k{display:flex;flex-direction:column;align-items:stretch;gap:calc(9px * var(--k));width:calc(236px * var(--k));padding:calc(12px * var(--k)) calc(14px * var(--k)) calc(12px * var(--k)) calc(12px * var(--k));
  border-radius:calc(18px * var(--k));background:#fff;
  box-shadow:0 0 0 1px rgba(27,23,19,.06),0 18px 40px -24px rgba(30,60,100,.42),0 8px 18px -14px rgba(27,23,19,.1)}
.lab-b [data-orbit="cards"] .o3-who{display:flex;align-items:center;gap:calc(10px * var(--k));min-width:0}
.lab-b [data-orbit="cards"] .o3-ph{position:relative;flex:none;width:calc(42px * var(--k));height:calc(42px * var(--k))}
.lab-b [data-orbit="cards"] .o3-av{width:100%;height:100%;border-radius:calc(12px * var(--k));box-shadow:0 0 0 1px rgba(27,23,19,.06)}
.lab-b [data-orbit="cards"] .o3-lg{position:absolute;right:calc(-7px * var(--k));bottom:calc(-6px * var(--k));width:calc(22px * var(--k));height:calc(22px * var(--k));
  box-shadow:0 0 0 2px #fff,0 3px 8px -4px rgba(27,23,19,.35)}
.lab-b [data-orbit="cards"] .o3-tx b{font-size:calc(14.5px * var(--k))}
.lab-b [data-orbit="cards"] .o3-tx small{font-size:calc(12px * var(--k))}
.lab-b [data-orbit="cards"] .o3-q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:400 calc(13.5px * var(--k))/1.36 var(--f);color:var(--ink-2);letter-spacing:-.005em}
.lab-b [data-orbit="cards"] .o3-r{display:flex;align-items:center;gap:calc(6px * var(--k));padding:calc(6px * var(--k)) calc(9px * var(--k)) calc(6px * var(--k)) calc(7px * var(--k));border-radius:calc(10px * var(--k));
  background:#F1F7F2;font:600 calc(12.5px * var(--k))/1.2 var(--f);color:#2E6B48;white-space:nowrap}
.lab-b [data-orbit="cards"] .o3-r svg{flex:none;width:calc(14px * var(--k));height:calc(14px * var(--k))}

/* ---- phone: the same pills and cards, smaller; text never below 10 px ---- */
@media (max-width:760px){
  .lab-b .o3-k.p0{--k:.8}.lab-b .o3-k.p1{--k:.72}.lab-b .o3-k.p2{--k:.65}
  .lab-b .o3-k .o3-tx b{font-size:max(11.5px,calc(15px * var(--k)))}
  .lab-b .o3-k .o3-tx small{font-size:max(10px,calc(12.5px * var(--k)))}
  .lab-b [data-orbit="cards"] .o3-k.p0{--k:.74}.lab-b [data-orbit="cards"] .o3-k.p1{--k:.68}.lab-b [data-orbit="cards"] .o3-k.p2{--k:.62}
  .lab-b [data-orbit="cards"] .o3-k{width:calc(236px * var(--k))}
  .lab-b [data-orbit="cards"] .o3-q{font-size:max(11px,calc(13.5px * var(--k)))}
  .lab-b [data-orbit="cards"] .o3-r{font-size:max(10.5px,calc(12.5px * var(--k)))}
}

/* v19 (Vlad 21.10 12:42Z, A-1021-88d8, 5760, 38a9, c007, 721c, 63c3): the third screen.
   Cards by default, in the Pills' volume (the same shadows, light rim and background, with a card's radius); the assistant's mark beside
   the photo, its glyph about 2/3 of the photo; the assistants' own logos fly too (v17 tiles); no line under the pill; the title is wider
   (two lines on 1512); the site agent pill's ring Shimmer or Booking. Orbits, planes, rotation, locators and the fly-out are as approved. */

/* ---- the assistant's mark: the glyph fills its circle (v18: 56 %, a small badge) ---- */
.lab-b .o3-k .o3-lg img{width:76%;height:76%}
.lab-b .o3-k .o3-ics{display:flex;align-items:center;flex:none}

/* ---- Cards: the pill surface, a card's radius; photo and mark side by side as in Pills ---- */
.lab-b [data-orbit="cards"] .o3-k:not(.o3-z){background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 5px rgba(30,60,100,.07),0 0 0 1px rgba(18,22,28,.05),0 18px 34px -16px rgba(30,60,100,.5),0 0 0 5px rgba(255,255,255,.45)}
.lab-b [data-orbit="cards"] .o3-av{width:calc(42px * var(--k));height:calc(42px * var(--k));border-radius:calc(12px * var(--k));box-shadow:0 0 0 2.5px #fff,0 0 0 3.5px rgba(18,22,28,.06)}
.lab-b [data-orbit="cards"] .o3-lg{position:relative;right:auto;bottom:auto;width:calc(34px * var(--k));height:calc(34px * var(--k));margin-left:calc(-7px * var(--k));
  box-shadow:0 0 0 2.5px #fff,0 0 0 3.5px rgba(18,22,28,.07)}
/* the role and the company keep one line when they fit, otherwise the company goes under the role (the dot stays with the role) */
.lab-b .o3-k .o3-tx small span{white-space:nowrap}
.lab-b [data-orbit="cards"] .o3-tx{white-space:normal}
.lab-b [data-orbit="cards"] .o3-tx b{white-space:nowrap}
.lab-b [data-orbit="cards"] .o3-tx small{white-space:normal;line-height:1.2}

/* ---- the assistants' own logos (v17 tiles, labels and planes); not a pill, not a card ---- */
.lab-b [data-orbit] .o3-k.o3-z{display:flex;flex-direction:column;align-items:center;gap:8px;width:auto;height:auto;padding:0;border-radius:0;background:none;box-shadow:none}
/* a step smaller than in v17 (96/74/58), so the people stay the main thing */
.lab-b .o3-k.o3-z.p0{--s:84px}.lab-b .o3-k.o3-z.p1{--s:66px}.lab-b .o3-k.o3-z.p2{--s:52px}
/* the prototype panel grew by Title and Ring: tighter, so it fits a 1512 screen */
{gap:3px}{padding:0 7px}{padding:0 3px}

/* ---- the centre: heading and pill only; the pill stays where it was in v18 (24 px under the orbit centre, 12 on a phone) ---- */
.lab-b .o3-c{top:calc(50% + 48px);width:min(640px,calc(100% - 40px));transform:translate(-50%,-100%)}
.lab-b .o3-pill{margin:30px 0 0}

/* ---- Ring: the pill's ring is drawn by ::before, so it can shimmer ---- */
.lab-b .o3-pill::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
/* Shimmer: the yellow ring of v18, a soft light runs along it like the widget capsule's tbwp-sheen (5.5 s, rests 55 % of the time) */
.lab-b [data-ring="shimmer"] .o3-pill{box-shadow:0 0 26px 5px rgba(255,194,26,.45),0 12px 26px -12px rgba(60,40,0,.45)}
.lab-b [data-ring="shimmer"] .o3-pill::before{background:linear-gradient(105deg,transparent 40%,rgba(255,227,138,.55) 46%,rgba(255,227,138,.92) 50%,rgba(255,227,138,.55) 54%,transparent 60%) 160% 0/250% 100% no-repeat,var(--y);
  animation:labB-o3sheen 5.5s ease-in-out infinite} /* v19b (review P2): the light lies over the yellow, never lighter than #FFE38A, so the ring never breaks */
@keyframes labB-o3sheen{0%,55%{background-position:160% 0,0 0}100%{background-position:-60% 0,0 0}}
/* Booking: the widget's chosen slot (.cal .d.is-on, .times .is-on): linear-gradient(135deg, --cg1, --cg2 50%, --cg3) and its shadow;
   the ring flows slowly through the gradient, the pill's face is the same gradient, very light */
.lab-b [data-ring="booking"] .o3-pill{background:linear-gradient(90deg,#FFF7F1 0%,#FCEADF 25%,#FFF7F1 50%,#FCEADF 75%,#FFF7F1 100%) 0 0/200% 100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -6px rgba(204,106,63,.32),0 0 24px 4px rgba(238,149,102,.2),0 12px 26px -12px rgba(110,50,20,.32);
  animation:labB-o3flow 9s linear infinite} /* v19b (review P3): the 50 % stop = the 0 % and 100 % stops, the loop has no jump */
/* v19b (review P3): the ring's gradient really runs round the pill, a conic gradient turned through @property, 8 s a turn; soft
   stops and no hard edge, so the ends do not blink. Without @property it stands still */
@property --o3a{syntax:"<angle>";inherits:false;initial-value:0deg}
.lab-b [data-ring="booking"] .o3-pill::before{background:conic-gradient(from var(--o3a),#EE9566 0deg,#F6B08A 50deg,#CC6A3F 130deg,#B04F2E 185deg,#CC6A3F 240deg,#EE9566 310deg,#EE9566 360deg);
  animation:labB-o3spin 8s linear infinite}
@keyframes labB-o3spin{to{--o3a:360deg}}
@keyframes labB-o3flow{from{background-position:0 0}to{background-position:-100% 0}}

@media (max-width:760px){
  .lab-b .o3-k.o3-z.p0{--s:58px}.lab-b .o3-k.o3-z.p1{--s:48px}.lab-b .o3-k.o3-z.p2{--s:40px}
  .lab-b .o3-c{top:calc(50% + 36px);width:calc(100% - 48px)}
  .lab-b .o3-pill{margin:24px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .lab-b .o3-pill,.lab-b .o3-pill::before{animation:none!important}
}

/* ---- v19b (21.10, the review of v19) ---- */
/* people above the logos (review P3): a logo never draws over a card or a pill */
.lab-b .o3-k.o3-z.p0,.lab-b .o3-k.o3-z.p1,.lab-b .o3-k.o3-z.p2{z-index:2}
.lab-b .o3-k:not(.o3-z).p2{z-index:3}.lab-b .o3-k:not(.o3-z).p1{z-index:4}.lab-b .o3-k:not(.o3-z).p0{z-index:5}
.lab-b .o3-c{z-index:6}
/* Cards (review P2): name, the role, under it the company, no dot; the request always takes two lines' room; the same padding left
   and right, the outcome inside it; so every card of a plane has one height */
.lab-b [data-orbit="cards"] .o3-k:not(.o3-z){width:calc(252px * var(--k));padding:calc(12px * var(--k)) calc(13px * var(--k))}
.lab-b [data-orbit="cards"] .o3-r{font-size:calc(12px * var(--k))} /* 16 px wider and a touch smaller: «Booked Thu 10:30 · Alma Dental» fits one line */
.lab-b [data-orbit="cards"] .o3-tx small{white-space:nowrap;line-height:1.2}
.lab-b [data-orbit="cards"] .o3-tx small+small{margin-top:calc(1px * var(--k))}
.lab-b [data-orbit="cards"] .o3-q{min-height:2.72em}
.lab-b [data-orbit="cards"] .o3-r{min-width:0}
.lab-b [data-orbit="cards"] .o3-rt{display:block;min-width:0;white-space:nowrap}

@media (max-width:760px){
  /* phone Cards (review P2): smaller, so three people and more show at once; no text under 11 px; the outcome on two lines */
  .lab-b [data-orbit="cards"] .o3-k:not(.o3-z){gap:5px;padding:8px 9px;border-radius:13px}
  .lab-b [data-orbit="cards"] .o3-k.p0{width:160px}.lab-b [data-orbit="cards"] .o3-k.p1{width:156px}.lab-b [data-orbit="cards"] .o3-k.p2{width:152px}
  .lab-b [data-orbit="cards"] .o3-who{gap:7px}
  .lab-b [data-orbit="cards"] .o3-k.p0 .o3-av{width:26px;height:26px;border-radius:8px}.lab-b [data-orbit="cards"] .o3-k.p0 .o3-lg{width:21px;height:21px;margin-left:-5px}
  .lab-b [data-orbit="cards"] .o3-k.p1 .o3-av{width:25px;height:25px;border-radius:8px}.lab-b [data-orbit="cards"] .o3-k.p1 .o3-lg{width:20px;height:20px;margin-left:-5px}
  .lab-b [data-orbit="cards"] .o3-k.p2 .o3-av{width:24px;height:24px;border-radius:7px}.lab-b [data-orbit="cards"] .o3-k.p2 .o3-lg{width:19px;height:19px;margin-left:-5px}
  .lab-b [data-orbit="cards"] .o3-tx b{font-size:12px;line-height:1.15}
  .lab-b [data-orbit="cards"] .o3-tx small{font-size:11px;margin-top:1px}
  .lab-b [data-orbit="cards"] .o3-tx small{line-height:1.15}
  .lab-b [data-orbit="cards"] .o3-q{font-size:11px;line-height:1.25;min-height:2.5em}
  .lab-b [data-orbit="cards"] .o3-r{gap:5px;padding:3px 7px 3px 6px;border-radius:8px;font-size:11px;line-height:1.15}
  .lab-b [data-orbit="cards"] .o3-r svg{width:12px;height:12px}
  .lab-b [data-orbit="cards"] .o3-rt{display:flex;flex-direction:column}
  .lab-b [data-orbit="cards"] .o3-rd{display:none}
}

/* Product section wrappers: keep B isolated from shared navigation and later sections. */
.lab-b{position:relative;isolation:isolate;padding:0 max(16px,env(safe-area-inset-left,0px));overflow:clip;font:15px/1.5 var(--f);color:var(--ink)}
.lab-b [hidden]{display:none!important}
[data-landing-variant="b"] #hero,[data-landing-variant="b"] #problem,[data-landing-variant="b"] #aifeat{padding:0;max-width:none}
[data-landing-variant="b"] #hero > .tbv-body,[data-landing-variant="b"] #problem > .tbv-body,[data-landing-variant="b"] #aifeat > .tbv-body{max-width:none;width:100%;margin:0}

/* LANDFIX: the first search is active; its completed status stays quiet. */
.lab-b .think:not(.ok) { animation: labB-search-thinking 1.2s ease-in-out infinite; }
@keyframes labB-search-thinking { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .lab-b .think { animation: none; } }

/* A-1026-57b8 / a49464: the features block keeps A's beige plate (inset, 40px radius) inside the B aifeat section. */
[data-landing-variant="b"] #aifeat .landing-b-features { position: relative; isolation: isolate; margin-top: 72px; padding-block: 104px; }
[data-landing-variant="b"] #aifeat .landing-b-features::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; bottom: 0;
  left: 50%; width: min(1400px, calc(100vw - 32px)); transform: translateX(-50%); background: var(--bg-beige); border-radius: 40px; }