/* AI BotKit — WordPress-chatbot landing page. * * Ported verbatim from the marketing HTML mockup * `aibotkit-landing-light (4).html`, with two deliberate changes and nothing else: * * 1. The eight green/ink tokens are remapped to the brand palette in `theme.json`. * Four hardcoded greens that bypassed the tokens were remapped too. * 2. `.btn` matches `styles.elements.button` in `theme.json` — 8px radius, * 12px/24px padding, 15px. The mockup used a 999px pill at 15px/30px. * * EVERY rule is scoped under `#abk`, which the page's outermost group emits as its * anchor. That is why this sheet can be copied verbatim and cannot collide with the * theme: `#abk .sec` is specificity 1,1,0 and beats core's `body .is-layout-flex` * at 0,1,1. No spacing is written into any block attribute, so the static-block * padding trap (gotcha 16) cannot occur on this page. * * Loaded by the `abk-wp-lp` marker hook in functions.php — NOT by post ID, because a * page created on staging gets a different ID and an ID-keyed file would silently * load nowhere. * * Hand-authored. It is deliberately NOT under assets/css/pages/, which is generated * by docs/archive/scripts/extract-elementor-css.py and would overwrite it. */ /* ══════════════════════════════════════════════════════════ AiBotKit — WordPress landing page (LIGHT) Everything scoped under #abk so no theme collision. ══════════════════════════════════════════════════════════ */ #abk{ --bg:#ffffff; --bg2:#f5f7f8; --panel:#ffffff; --dark:#143B2D; --ink:#1A1A1A; --ink2:#5b6775; --ink3:#8b95a3; --green:#17976E; --green-dk:#008858; --green-br:#22B98C; --green-lt:#E3FFF6; --green-bd:#A8E0CE; --line:rgba(12,21,32,.10); --line2:rgba(12,21,32,.18); --amber:#FDC830; --ff:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; font-family:var(--ff); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; isolation:isolate; /* The demo CTA is an in-page link now, not a new tab. */ scroll-behavior:smooth; } @media(prefers-reduced-motion:reduce){#abk{scroll-behavior:auto;}} #abk *,#abk *::before,#abk *::after{box-sizing:border-box;margin:0;padding:0;} #abk img{max-width:100%;display:block;} #abk a{text-decoration:none;font-family:inherit;color:inherit;} #abk button,#abk input{font-family:inherit;} #abk ul{list-style:none;} #abk :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px;} #abk .wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4.5vw,56px);} #abk .sec{padding:clamp(64px,9vw,130px) 0;position:relative;} #abk .band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} /* eyebrow */ #abk .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:12.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase; color:var(--ink3);margin-bottom:22px; } #abk .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--green);display:block;flex:none;} /* headings */ #abk h2{ font-size:clamp(25px,3.5vw,45px);font-weight:400;line-height:1.2; letter-spacing:-.022em;color:var(--ink);text-wrap:pretty; } #abk h3{font-size:clamp(18px,1.7vw,23px);font-weight:500;letter-spacing:-.012em;line-height:1.34;color:var(--ink);} #abk .lede{font-size:clamp(15px,1.55vw,18px);line-height:1.7;color:var(--ink2);margin-top:20px;max-width:62ch;} #abk .hl{color:var(--green);} /* buttons */ #abk .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-size:15px;font-weight:500;padding:12px 24px;border-radius:8px; transition:background .18s ease,border-color .18s ease,transform .14s ease; } #abk .btn:active{transform:translateY(1px);} /* ⛔ THE `.btn.` PREFIX IS LOAD-BEARING. It is not redundant tidying. core/button emits
, so a bare `.btn--solid` ALSO matches that WRAPPER -- which carries no `.btn` class and therefore none of the radius or padding above it. Measured 2026-09-03: the wrapper painted a SQUARE #17976E rectangle behind the rounded link, so the 8px radius existed and was invisible; and every ghost drew TWO borders 1px apart, one on the wrapper and one on the link. Requiring `.btn` keeps these rules on the mockup's real anchors. The block bridge at the end of this file styles core's link. Gotcha 26, running the other way. */ #abk .btn.btn--solid{background:var(--green);color:#fff;} #abk .btn.btn--solid:hover{background:var(--green-dk);} #abk .btn.btn--white{background:#fff;color:var(--dark);} #abk .btn.btn--white:hover{background:#e9edf1;} /* White fill, not transparent -- matches `Book Demo` on /ai-chatbot-for-wordpress/. `.final` overrides it back to transparent; see the dark band below. */ #abk .btn.btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--line2);} #abk .btn.btn--ghost:hover{border-color:var(--ink);} #abk .ctarow{display:flex;flex-wrap:wrap;gap:12px;} #abk .micro{font-size:13px;color:var(--ink3);margin-top:16px;} /* ── ASSET PLACEHOLDERS (swap for real files) ── */ /* ══════════ NAV ══════════ */ #abk .nav{ position:sticky;top:0;z-index:80; background:rgba(255,255,255,.88);backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } #abk .nav-in{display:flex;align-items:center;gap:38px;padding:16px clamp(20px,4.5vw,56px);max-width:1440px;margin:0 auto;} #abk .logo img{height:25px;width:auto;} #abk .navlinks{display:flex;gap:28px;} #abk .navlinks a{font-size:14.5px;color:var(--ink2);transition:color .18s;} #abk .navlinks a:hover{color:var(--ink);} #abk .nav-end{margin-left:auto;display:flex;align-items:center;gap:20px;} #abk .nav-end .login{font-size:14.5px;color:var(--ink2);} #abk .nav-end .login:hover{color:var(--ink);} #abk .nav-pill{background:var(--dark);color:#fff;font-size:14.5px;font-weight:500;padding:11px 24px;border-radius:999px;white-space:nowrap;} #abk .nav-pill:hover{background:#1a2838;} @media(max-width:1060px){#abk .navlinks{display:none;}} @media(max-width:640px){#abk .nav-end .login{display:none;}} /* ══════════ HERO ══════════ */ #abk .hero{position:relative;overflow:hidden;text-align:center;padding:clamp(58px,10vh,120px) 0 clamp(52px,8vh,96px);background:var(--bg);} #abk .dots{ position:absolute;top:-10%;height:120%;width:46vw;z-index:0;pointer-events:none;opacity:.34; background-image:radial-gradient(circle,rgba(12,21,32,.42) .85px,transparent 1px); background-size:9px 9px; } #abk .dots.l{left:-9vw; -webkit-mask-image:radial-gradient(ellipse 46% 40% at 46% 34%,#000 0%,rgba(0,0,0,.5) 42%,transparent 74%),radial-gradient(ellipse 38% 34% at 62% 70%,#000 0%,transparent 72%); mask-image:radial-gradient(ellipse 46% 40% at 46% 34%,#000 0%,rgba(0,0,0,.5) 42%,transparent 74%),radial-gradient(ellipse 38% 34% at 62% 70%,#000 0%,transparent 72%);} #abk .dots.r{right:-9vw; -webkit-mask-image:radial-gradient(ellipse 44% 42% at 54% 40%,#000 0%,rgba(0,0,0,.5) 44%,transparent 76%),radial-gradient(ellipse 34% 30% at 38% 74%,#000 0%,transparent 70%); mask-image:radial-gradient(ellipse 44% 42% at 54% 40%,#000 0%,rgba(0,0,0,.5) 44%,transparent 76%),radial-gradient(ellipse 34% 30% at 38% 74%,#000 0%,transparent 70%);} #abk .bloom{position:absolute;top:36%;left:50%;width:min(1100px,120vw);height:600px;transform:translate(-50%,-50%); background:radial-gradient(ellipse at center,rgba(23,151,110,.10) 0%,transparent 66%);z-index:0;pointer-events:none;} #abk .hero-in{position:relative;z-index:2;} #abk .hero-badge{ display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600; letter-spacing:.9px;text-transform:uppercase;color:var(--ink2);white-space:nowrap; background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 17px;margin-bottom:clamp(26px,4vh,42px); } #abk .hero-badge i{width:6px;height:6px;border-radius:50%;background:var(--green);display:block;} #abk h1{ /* 5.2vw/64px in the mockup. Our self-hosted DM Sans has no optical-size axis and measures 13.9% wider per pixel than the Google copy the mockup loads (1007px vs 884px for this headline at 53px, measured at 1024). Scaled by 0.878 so the headline breaks on the same widths it does in the mockup: verified 1 line at 768-1440 and 2 lines at 390-600, matching. Do NOT move this to the end of the file — the mobile rule below must still win under 769px. */ font-size:clamp(31px,4.6vw,56px);font-weight:400;line-height:1.14; letter-spacing:-.026em;color:var(--ink);max-width:none;margin:0 auto;text-wrap:pretty; } #abk .kicker{ font-size:clamp(21px,3.9vw,50px);font-weight:400;line-height:1.1;letter-spacing:-.03em; color:var(--ink3);margin-top:clamp(10px,1.6vh,20px);text-wrap:balance; } #abk .hero .ctarow{justify-content:center;margin-top:clamp(32px,5vh,50px);} #abk .stats{ display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:center; gap:clamp(32px,6.5vw,92px);margin-top:clamp(50px,8vh,104px);text-align:left; } #abk .stat{padding-left:19px;border-left:2px solid var(--green);} #abk .stat b{display:block;font-size:clamp(28px,3.5vw,44px);font-weight:400;letter-spacing:-.035em;line-height:1;color:var(--ink);} #abk .stat span{display:block;font-size:clamp(12.5px,1.25vw,14.5px);color:var(--ink2);margin-top:9px;line-height:1.35;} @media(max-width:720px){#abk .dots{width:70vw;opacity:.22;}#abk .hero .btn{flex:1 1 auto;}} @media(max-width:600px){#abk .stats{grid-template-columns:1fr;gap:20px;max-width:330px;margin-left:auto;margin-right:auto;}} /* ══════════ MARQUEE ══════════ */ #abk .marq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden;background:var(--bg2);} #abk .marq-label{text-align:center;font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);margin-bottom:20px;} #abk .marq-track{display:flex;gap:0;width:max-content;align-items:stretch;animation:abkslide 44s linear infinite;} #abk .marq:hover .marq-track{animation-play-state:paused;} @keyframes abkslide{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* fixed-width slots: even rhythm regardless of logo proportions */ #abk .marq-item{ flex:none; width:190px;height:68px; display:flex;align-items:center;justify-content:center; padding:0 16px; filter:grayscale(1);opacity:.55; transition:filter .25s ease,opacity .25s ease; } #abk .marq-item:hover{filter:grayscale(0);opacity:1;} #abk .lg{display:block;width:auto;max-width:100%;object-fit:contain;} /* heights tuned per aspect ratio so every logo reads at the same optical weight */ #abk .lg-xs{max-height:25px;} /* ~6:1 wordmarks */ #abk .lg-s{max-height:31px;} /* ~3-4:1 */ #abk .lg-sm{max-height:35px;} /* ~2.8:1 */ #abk .lg-m{max-height:41px;} /* ~1.8-2:1 */ #abk .lg-l{max-height:52px;} /* near-square, stacked */ @media(max-width:640px){ #abk .marq-item{width:150px;height:56px;padding:0 12px;} #abk .lg-xs{max-height:20px;}#abk .lg-s{max-height:25px;}#abk .lg-sm{max-height:28px;} #abk .lg-m{max-height:33px;}#abk .lg-l{max-height:42px;} } /* ══════════ PROBLEM ══════════ */ #abk .prob-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5.5vw,78px);align-items:start;} #abk .prob-list{margin-top:30px;display:flex;flex-direction:column;} #abk .prob-list li{ padding:17px 0 17px 30px;border-top:1px solid var(--line);position:relative; font-size:15px;line-height:1.65;color:var(--ink2); } #abk .prob-list li:last-child{border-bottom:1px solid var(--line);} #abk .prob-list li::before{ content:'';position:absolute;left:4px;top:25px;width:7px;height:7px;border-radius:50%; background:var(--amber); } #abk .prob-list li b{color:var(--ink);font-weight:600;} #abk .punch-sec{ padding:clamp(56px,8vw,112px) 0; border-top:1px solid var(--line); } #abk .punch{text-align:center;} #abk .punch-rule{ display:block;width:40px;height:2px;background:var(--green); margin:0 auto clamp(26px,3vw,40px); } #abk .punch p{ font-size:clamp(23px,3.4vw,43px); font-weight:400; letter-spacing:-.022em; line-height:1.28; max-width:34ch; margin-left:auto;margin-right:auto; } /* line 1 — faded back */ #abk .punch .punch-a{color:var(--ink3);} /* line 2 — full weight, with the brand sheen travelling across it */ #abk .punch .punch-b{color:var(--ink);margin-top:.22em;} @supports ((-webkit-background-clip:text) or (background-clip:text)){ #abk .punch .punch-b{ background-image:linear-gradient(100deg, var(--ink) 0%, var(--ink) 30%, var(--green) 44%, var(--green-br) 50%, var(--green) 56%, var(--ink) 70%, var(--ink) 100%); background-size:260% 100%; background-position:150% 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:abkSheen 7s linear infinite; } } @keyframes abkSheen{ from{background-position:150% 0;} to{background-position:-50% 0;} } @media (prefers-reduced-motion:reduce){ #abk .punch .punch-b{ animation:none !important; background-image:none !important; -webkit-text-fill-color:var(--ink) !important; color:var(--ink) !important; } } @media(max-width:940px){#abk .prob-grid{grid-template-columns:1fr;gap:34px;}} /* ══════════ HOW WE HELP (numbered) ══════════ */ #abk .help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;} #abk .help-card{ background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden; display:flex;flex-direction:column;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease; } #abk .help-card:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(12,21,32,.4);} #abk .help-num{ font-size:12px;font-weight:600;letter-spacing:1.2px;color:var(--green); padding:22px 24px 0; } #abk .help-card h3{padding:10px 24px 0;} #abk .help-card p{padding:12px 24px 22px;font-size:14px;line-height:1.7;color:var(--ink2);flex:1;} #abk .help-img{background:var(--bg2);border-top:1px solid var(--line);padding:18px;} #abk .help-img img, #abk .help-img video{border-radius:10px;width:100%;height:auto;aspect-ratio:8/5;display:block;} #abk .help-tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 24px 22px;} #abk .help-tag{ font-size:11.5px;font-weight:500;color:var(--ink2); border:1px solid var(--line);border-radius:999px;padding:4px 11px; } @media(max-width:900px){#abk .help-grid{grid-template-columns:1fr;}} /* ══════════ PULL QUOTE ══════════ */ #abk .pull{text-align:center;max-width:900px;margin:0 auto;} #abk .pull q{ display:block;font-size:clamp(21px,2.9vw,36px);font-weight:400;line-height:1.32; letter-spacing:-.028em;color:var(--ink);quotes:'“' '”'; } #abk .pull-by{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:30px;} #abk .pull-by img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center top;} #abk .pull-by div{text-align:left;} #abk .pull-by b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);} #abk .pull-by span{display:block;font-size:13px;color:var(--ink3);margin-top:2px;} /* ══════════ INDUSTRIES ══════════ */ /* ══════════ INDUSTRY: what it gets asked ══════════ */ /* ══════════ INDUSTRIES — Jotform-style live frame ══════════ */ #abk #industries{padding-top:clamp(50px,5.6vw,84px);} #abk .ind-head{text-align:center;max-width:1000px;margin:0 auto;} #abk .ind-head .lede{max-width:60ch;margin-left:auto;margin-right:auto;} #abk .ind-head h2{margin-top:2px;} #abk .ind-head .eyebrow{justify-content:center;} #abk .ind-head .lede{margin:12px auto 0;font-size:15px;max-width:56ch;} #abk .ind-head .lede{margin-left:auto;margin-right:auto;} /* ── frame ── */ #abk .wsf-stage{position:relative;margin-top:30px;} #abk .wsframe{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff; box-shadow:0 2px 5px rgba(12,21,32,.05),0 34px 70px -34px rgba(12,21,32,.4); } /* .armed is added by script — with no JS the frame simply shows, never hidden */ #abk .wsframe.armed{ opacity:0;transform:translateY(30px) scale(.986); transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1); will-change:opacity,transform; } #abk .wsframe.armed.in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ #abk .wsframe.armed{opacity:1 !important;transform:none !important;} } #abk .wsf-bar{ height:42px;background:var(--bg2);border-bottom:1px solid var(--line); display:flex;align-items:center;gap:7px;padding:0 13px; } #abk .wsf-dot{width:8px;height:8px;border-radius:50%;background:#d6dbe1;flex:none;} /* ── industry switcher, living in the browser chrome ── */ #abk .wsf-tabs{display:flex;align-items:flex-end;gap:3px;margin-left:11px;height:100%;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;} #abk .wsf-tabs::-webkit-scrollbar{display:none;} #abk .wsf-tab{ display:flex;align-items:center;gap:6px;flex:none; height:31px;padding:0 12px;margin-bottom:-1px; background:#e9ecf0;border:1px solid var(--line);border-bottom-color:transparent; border-radius:8px 8px 0 0;cursor:pointer; font-size:12px;font-weight:500;color:var(--ink3);letter-spacing:-.005em; transition:background .16s ease,color .16s ease;white-space:nowrap; } #abk .wsf-tab:hover{background:#f1f3f6;color:var(--ink2);} #abk .wsf-tab i{width:6px;height:6px;border-radius:50%;background:#c3cad2;flex:none;transition:background .16s;} #abk .wsf-tab.on{background:#fff;color:var(--ink);font-weight:600;} #abk .wsf-tab.on i{background:var(--green);} #abk .wsf-hint{margin-left:10px;font-size:11px;color:var(--ink3);flex:none;} #abk .wsf-view{position:relative;height:clamp(430px,66vh,660px);background:#fff;overflow:hidden;} #abk .wsf-view iframe{position:absolute;top:0;left:0;border:0;display:block;transform-origin:top left;background:#fff;} /* ── capability strip, overlaid on the frame ── */ #abk .wsf-strips{ position:absolute;left:14px;right:14px;bottom:12px;z-index:4;pointer-events:none; } #abk .wsf-strip{display:none;} #abk .wsf-strip.on{ display:grid;grid-template-columns:repeat(3,1fr); border-radius:16px; background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); border:1px solid rgba(255,255,255,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(12,21,32,.05), 0 10px 34px -14px rgba(12,21,32,.3); animation:wsfIn .3s ease both; } /* browsers without backdrop-filter get a solid panel instead of a washed-out one */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #abk .wsf-strip.on{background:rgba(255,255,255,.96);border-color:var(--line);} } #abk .wsf-snip{ padding:11px 18px; box-shadow:inset 1px 0 0 rgba(12,21,32,.07); } #abk .wsf-snip:first-child{box-shadow:none;} #abk .wsf-snip b{ display:block;font-size:12px;font-weight:600;color:var(--ink); letter-spacing:-.006em;line-height:1.35;padding-left:13px;position:relative; } #abk .wsf-snip b::before{ content:'';position:absolute;left:0;top:5.5px;width:5px;height:5px;border-radius:50%; background:var(--green); } #abk .wsf-snip span{ display:block;font-size:11px;line-height:1.45;color:rgba(12,21,32,.56); margin-top:2px;padding-left:13px; } @keyframes wsfIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} /* chat floats clear of the strip */ #abk .wsf-chat{ position:absolute;right:20px;bottom:94px;width:336px;max-height:calc(100% - 126px); background:#fff;border:1px solid var(--line);border-radius:16px; box-shadow:0 20px 54px -18px rgba(12,21,32,.45); display:flex;flex-direction:column;overflow:hidden;z-index:6; transition:opacity .2s ease,transform .2s ease; } #abk .wsf-chat.hide{opacity:0;transform:translateY(10px) scale(.97);pointer-events:none;} #abk .wsf-chead{background:var(--green);padding:12px 14px;display:flex;align-items:center;gap:10px;flex:none;} #abk .wsf-cav{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex:none;} #abk .wsf-cwho b{display:block;font-size:13.5px;font-weight:700;color:#fff;line-height:1.2;} #abk .wsf-cwho em{display:block;font-style:normal;font-size:10.5px;color:rgba(255,255,255,.75);} #abk .wsf-min{margin-left:auto;background:transparent;border:0;color:rgba(255,255,255,.85);font-size:20px;line-height:1;cursor:pointer;padding:0 4px;} #abk .wsf-min:hover{color:#fff;} #abk .wsf-msgs{flex:1;min-height:130px;overflow-y:auto;padding:11px 14px;display:flex;flex-direction:column;gap:9px;scroll-behavior:smooth;} #abk .wsf-msgs::-webkit-scrollbar{width:4px;} #abk .wsf-msgs::-webkit-scrollbar-thumb{background:#dfe3e8;border-radius:99px;} #abk .wsf-m{display:flex;gap:8px;align-items:flex-end;animation:wsfIn .28s ease both;} #abk .wsf-m.u{flex-direction:row-reverse;} #abk .wsf-ava{width:24px;height:24px;border-radius:50%;flex:none;background:var(--green-lt);border:1px solid var(--green-bd);display:flex;align-items:center;justify-content:center;} #abk .wsf-b{font-size:12.5px;line-height:1.55;padding:9px 12px;max-width:80%;} #abk .wsf-m.b .wsf-b{background:var(--bg2);color:var(--ink);border-radius:4px 13px 13px 13px;} #abk .wsf-m.u .wsf-b{background:var(--green-lt);color:#14532d;border:1px solid var(--green-bd);border-radius:13px 13px 4px 13px;} #abk .wsf-time{display:block;font-size:9.5px;color:var(--ink3);margin-top:4px;} #abk .wsf-m.u .wsf-time{text-align:right;color:#5f8f72;} #abk .wsf-typ span{width:5px;height:5px;background:#c3c9d0;border-radius:50%;display:inline-block;margin-right:4px;animation:wsfDot 1.2s ease-in-out infinite;} #abk .wsf-typ span:nth-child(2){animation-delay:.15s;} #abk .wsf-typ span:nth-child(3){animation-delay:.3s;} @keyframes wsfDot{0%,80%,100%{transform:translateY(0);}40%{transform:translateY(-4px);}} #abk .wsf-lead{background:var(--green-lt);border:1px solid var(--green-bd);border-radius:13px;padding:14px 12px;text-align:center;animation:wsfIn .32s ease both;} #abk .wsf-lead b{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-top:8px;} #abk .wsf-lead span{display:block;font-size:11px;color:var(--ink2);margin-top:4px;line-height:1.5;} #abk .wsf-lead em{font-style:normal;color:var(--green-dk);font-weight:600;} #abk .wsf-check{width:30px;height:30px;border-radius:50%;background:var(--green);margin:0 auto;display:flex;align-items:center;justify-content:center;} #abk .wsf-chips{padding:0 14px 10px;display:flex;flex-wrap:wrap;gap:6px;flex:none;} #abk .wsf-chip{font-size:11.5px;font-weight:500;color:var(--green-dk);background:var(--green-lt);border:1px solid var(--green-bd);border-radius:99px;padding:6px 12px;cursor:pointer;transition:background .15s ease;line-height:1.3;text-align:left;} #abk .wsf-chip:hover{background:#CFF3E6;} #abk .wsf-replay{font-size:11.5px;font-weight:600;color:var(--ink2);background:#fff;border:1px solid var(--line2);border-radius:99px;padding:6px 13px;cursor:pointer;} #abk .wsf-replay:hover{border-color:var(--ink);} #abk .wsf-in{border-top:1px solid var(--line);padding:10px 12px;display:flex;align-items:center;gap:10px;flex:none;} #abk .wsf-in > span{flex:1 1 auto;min-width:0;font-size:11.5px;color:#c2c8cf;} #abk .wsf-send{flex:0 0 30px;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--green);cursor:pointer;display:flex;align-items:center;justify-content:center;} #abk .wsf-send:hover{background:var(--green-dk);} #abk .wsf-bubble{position:absolute;right:20px;bottom:94px;width:54px;height:54px;border-radius:50%;background:var(--green);border:0;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(12,21,32,.5);z-index:6;} #abk .wsf-bubble.show{display:flex;} #abk .wsf-note{text-align:center;font-size:12.5px;color:var(--ink3);margin-top:18px;} @media(max-width:1000px){ #abk .wsf-hint{display:none;} #abk .wsf-tab{padding:0 10px;font-size:11.5px;} } @media(max-width:900px){ #abk .wsf-view{height:clamp(400px,58vh,520px);} #abk .wsf-strip.on{grid-template-columns:1fr;} #abk .wsf-snip{box-shadow:inset 0 1px 0 rgba(12,21,32,.07);padding:10px 16px;} #abk .wsf-snip:first-child{box-shadow:none;} #abk .wsf-chat{width:300px;right:14px;bottom:14px;max-height:calc(100% - 28px);} #abk .wsf-bubble{right:14px;bottom:14px;} #abk .wsf-strips{display:none;} /* strip moves below the frame on small screens */ } @media(max-width:560px){ #abk .wsf-view{height:clamp(380px,56vh,470px);} #abk .wsf-chat{left:12px;right:12px;width:auto;} } /* ══════════ SCROLL REVEAL — the frame rises into place ══════════ */ #abk .wsf-reveal{ transform-origin:50% 0; will-change:transform,opacity; } @media (prefers-reduced-motion:reduce){ #abk .wsf-reveal{transform:none !important;opacity:1 !important;} } /* a human colleague joining the product-demo chat */ #abk .cjoin{ align-self:center;display:flex;align-items:center;gap:7px; font-size:10.5px;font-weight:600;color:#8a6d1f; background:#fdf6e3;border:1px solid #efe0b8;border-radius:99px;padding:5px 12px; animation:abkin .3s ease both; } #abk .cjoin span{width:6px;height:6px;border-radius:50%;background:#d9a13b;flex:none;} #abk .cm.agent{justify-content:flex-start;gap:7px;align-items:flex-end;} #abk .cav{ width:24px;height:24px;border-radius:50%;flex:none; background:#1e3a5f;color:#fff;font-size:10px;font-weight:700; display:flex;align-items:center;justify-content:center; } #abk .cm.agent .cb{ background:#eef3f9;color:#14243a;border:1px solid #d3e0ee; border-radius:3px 13px 13px 13px; } /* ══════════ SECURITY ══════════ */ #abk .sec-security .ind-head{margin-bottom:38px;} #abk .sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} #abk .scard{ background:#fff;border:1px solid var(--line);border-radius:14px; padding:24px 22px 26px;position:relative;overflow:hidden; transition:transform .2s ease,box-shadow .2s ease; } #abk .scard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;} #abk .scard--a::before{background:#3b82f6;} #abk .scard--b::before{background:#eab308;} #abk .scard--c::before{background:var(--green);} #abk .scard--d::before{background:#8b5cf6;} #abk .scard:hover{transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(12,21,32,.4);} #abk .scard-i{ display:flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:12px;margin-bottom:20px; } #abk .scard-i svg{width:21px;height:21px;display:block;} #abk .scard--a .scard-i{background:#eaf1fe;color:#2563eb;} #abk .scard--b .scard-i{background:#fdf6e0;color:#a16207;} #abk .scard--c .scard-i{background:var(--green-lt);color:var(--green-dk);} #abk .scard--d .scard-i{background:#f2ecfe;color:#7c3aed;} #abk .scard h3{font-size:16.5px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink);} #abk .scard p{font-size:13px;line-height:1.65;color:var(--ink2);margin-top:11px;} /* the memorable half: what it never does */ #abk .nevers{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px; margin-top:26px;padding:18px 20px; background:var(--ink);border-radius:14px; } #abk .nevers-l{ font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase; color:#8b9ab0;margin-right:4px; } #abk .never{ font-size:13.5px;font-weight:500;color:#dbe3ec; padding-left:24px;position:relative; } #abk .never + .never{margin-left:8px;} #abk .never::before{ content:'';position:absolute;left:0;top:50%;width:15px;height:15px; transform:translateY(-50%);border-radius:50%; border:1.5px solid #4c5c70; } #abk .never::after{ content:'';position:absolute;left:4px;top:50%;width:7px;height:1.5px; transform:translateY(-50%);background:#8b9ab0; } @media(max-width:1000px){#abk .sgrid{grid-template-columns:repeat(2,1fr);}} @media(max-width:768px){ #abk .sgrid{grid-template-columns:1fr;gap:12px;} #abk .scard{padding:20px 18px 22px;} #abk .scard-i{margin-bottom:14px;width:40px;height:40px;} #abk .nevers{flex-direction:column;align-items:flex-start;gap:12px;padding:18px;} #abk .never + .never{margin-left:0;} } /* ══════════ LOOPING EXPLAINER VIDEOS ══════════ */ #abk .vid{ margin:0;border-radius:16px;overflow:hidden; border:1px solid var(--line);background:var(--bg2); box-shadow:0 2px 4px rgba(12,21,32,.04),0 20px 46px -26px rgba(12,21,32,.3); line-height:0; } #abk .vid video{width:100%;height:auto;display:block;background:var(--bg2);} /* the 3 AM clip is portrait; cap it so it can't tower over the copy beside it */ #abk .vid--tall{max-width:460px;margin-inline:auto;} @media(max-width:940px){#abk .vid--tall{max-width:380px;}} /* ══════════ PRODUCT DEMO ══════════ */ #abk .demo-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,5vw,70px);align-items:center;} #abk .demo-steps{margin-top:30px;} #abk .demo-step{padding:18px 0;border-top:1px solid var(--line);cursor:pointer;} #abk .demo-step:last-child{border-bottom:1px solid var(--line);} #abk .demo-step.on .ds-t{color:var(--ink);} #abk .demo-step .ds-t{font-size:15.5px;font-weight:500;color:var(--ink3);display:flex;align-items:center;gap:12px;transition:color .2s;} #abk .demo-step .ds-n{ font-size:11px;color:var(--green-dk);background:var(--green-lt);border:1px solid var(--green-bd); border-radius:999px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex:none; } #abk .demo-step .ds-d{font-size:13.5px;line-height:1.65;color:var(--ink2);margin-top:8px;padding-left:34px;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s,opacity .25s;} #abk .demo-step.on .ds-d{max-height:120px;opacity:1;} /* chat widget */ #abk .chat{ width:100%;max-width:400px;margin:0 auto;background:#fff;border-radius:20px;overflow:hidden; display:flex;flex-direction:column;height:480px;border:1px solid var(--line); box-shadow:0 2px 4px rgba(12,21,32,.04),0 30px 60px -30px rgba(12,21,32,.35); } #abk .chat-head{background:var(--green);padding:14px 17px;display:flex;align-items:center;gap:11px;flex:none;} #abk .chat-av{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#fff;flex:none;} #abk .chat-name{font-size:13.5px;font-weight:600;color:#fff;} #abk .chat-on{font-size:10.5px;color:rgba(255,255,255,.68);margin-top:1px;display:flex;align-items:center;gap:5px;} #abk .chat-on::before{content:'';width:5px;height:5px;border-radius:50%;background:#22B98C;} #abk .chat-body{flex:1;overflow-y:auto;padding:15px 13px;display:flex;flex-direction:column;gap:8px;background:#f4f5f6;scrollbar-width:none;} #abk .chat-body::-webkit-scrollbar{display:none;} #abk .cm{display:flex;animation:abkin .32s cubic-bezier(.34,1.3,.64,1) both;} @keyframes abkin{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} #abk .cm.bot{justify-content:flex-start;} #abk .cm.user{justify-content:flex-end;} #abk .cb{font-size:13px;line-height:1.55;padding:10px 13px;max-width:86%;} #abk .cm.bot .cb{background:#fff;color:#141414;border-radius:3px 13px 13px 13px;box-shadow:0 1px 2px rgba(0,0,0,.07);} #abk .cm.user .cb{background:var(--green);color:#fff;border-radius:13px 13px 3px 13px;} #abk .cb b{font-weight:600;} #abk .ctyp{display:flex;animation:abkin .3s ease both;} #abk .ctyp div{background:#fff;border-radius:3px 13px 13px 13px;padding:11px 14px;display:flex;gap:4px;box-shadow:0 1px 2px rgba(0,0,0,.07);} #abk .ctyp span{width:4px;height:4px;background:#c4c4c4;border-radius:50%;animation:abkdot 1.3s ease-in-out infinite;} #abk .ctyp span:nth-child(2){animation-delay:.15s;} #abk .ctyp span:nth-child(3){animation-delay:.3s;} @keyframes abkdot{0%,80%,100%{transform:translateY(0);}40%{transform:translateY(-4px);}} #abk .clead{ background:var(--green-lt);border:1px solid var(--green-bd);border-radius:12px;padding:12px 14px; align-self:flex-start;max-width:90%;animation:abkin .35s ease both; } #abk .clead-t{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--green);margin-bottom:8px;} #abk .clead-r{font-size:11.5px;color:#4b5563;display:flex;gap:9px;padding:2px 0;} #abk .clead-r b{color:#111;font-weight:600;min-width:52px;} #abk .chat-foot{padding:11px 13px;background:#fff;border-top:1px solid #eee;display:flex;align-items:center;gap:9px;flex:none;} #abk .chat-fake{flex:1;font-size:12.5px;color:#bcbcbc;} #abk .chat-send{width:28px;height:28px;border-radius:7px;background:var(--green);display:flex;align-items:center;justify-content:center;flex:none;} #abk .chat-scn{display:flex;gap:3px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px;margin:16px auto 0;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;} #abk .chat-scn::-webkit-scrollbar{display:none;} #abk .chat-scn button{ font-size:12.5px;font-weight:500;color:var(--ink3);background:transparent;border:none; border-radius:999px;padding:7px 15px;cursor:pointer;white-space:nowrap;transition:all .2s; } #abk .chat-scn button.on{background:var(--green);color:#fff;} @media(max-width:900px){#abk .demo-grid{grid-template-columns:1fr;gap:34px;}} /* ══════════ LIVE BOT ══════════ The real assistant, reached from the product demo's CTA. ⛔ `scroll-margin-top` IS NOT OPTIONAL. `.wp-site-blocks > header` is `position:sticky; top:0; z-index:120` (style.css, "4. The site header"). Measured 2026-09-03: the header is 68px at 1440px and 57px at 900px and below. Without this the heading scrolls to underneath the header and the visitor arrives at a section whose first line is hidden. Values below are the measured heights plus 8px, never a guess. */ #abk .livebot{scroll-margin-top:76px;} #abk .lb-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,5vw,70px);align-items:center;} /* ⛔ THIS QUERY MUST STAY BELOW THE RULE ABOVE. Same specificity, so the later one wins -- and the first draft put it beside the demo grid's query, 8 lines EARLIER in the file, where the base rule overrode it and the section stayed two columns at 390px. Caught by a screenshot, not by any selector check. Gotcha 24, reproduced inside the comment warning about gotcha 24. The COPY stays first when it stacks: a visitor who followed the CTA should land on the sentence that explains the frame, not on the frame alone. */ @media(max-width:900px){#abk .lb-grid{grid-template-columns:1fr;gap:34px;}} #abk .lb-ask{margin-top:30px;} #abk .lb-ask-t{font-size:13px;font-weight:600;letter-spacing:.4px;color:var(--ink);margin-bottom:12px;} #abk .lb-ask ul{display:flex;flex-direction:column;gap:9px;} #abk .lb-ask li{ font-size:14.5px;line-height:1.5;color:var(--ink2); padding-left:20px;position:relative; } #abk .lb-ask li::before{ content:'';position:absolute;left:4px;top:.62em; width:5px;height:5px;border-radius:50%;background:var(--green-bd); } #abk .lb-label{ display:flex;align-items:center;gap:8px;margin-bottom:16px; font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2); } #abk .lb-pulse{ width:7px;height:7px;border-radius:50%;background:#ef4444;flex:none; box-shadow:0 0 0 0 rgba(239,68,68,.4);animation:lbpulse 2s ease infinite; } @keyframes lbpulse{ 0%{box-shadow:0 0 0 0 rgba(239,68,68,.4);} 70%{box-shadow:0 0 0 8px rgba(239,68,68,0);} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0);} } @media(prefers-reduced-motion:reduce){#abk .lb-pulse{animation:none;}} /* This frame is the ONLY thing on the page served from another host. The background and the fallback line sit BEHIND the iframe, so if app.aibotkit.io fails the section reads as an empty panel with a way out, not as a hole. */ #abk .lb-frame{ position:relative;width:100%;max-width:480px;height:580px;margin:0 auto; border-radius:16px;overflow:hidden;background:var(--bg2); box-shadow:0 8px 24px rgba(12,21,32,.08),0 32px 64px rgba(12,21,32,.06); } #abk .lb-frame iframe{position:relative;z-index:2;width:100%;height:100%;border:none;display:block;} #abk .lb-fallback{ position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center; padding:0 32px;text-align:center;font-size:13.5px;line-height:1.6;color:var(--ink3); } #abk .lb-fallback a{color:var(--green-dk);text-decoration:underline;} #abk .lb-hint{margin-top:14px;font-size:12px;color:var(--ink3);text-align:center;} /* ══════════ TESTIMONIALS ══════════ */ #abk .tst-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px;} #abk .tst{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;} #abk .tst-stars{color:var(--green);font-size:12px;letter-spacing:2px;margin-bottom:14px;} #abk .tst q{font-size:14px;line-height:1.7;color:var(--ink2);flex:1;} #abk .tst-by{display:flex;align-items:center;gap:11px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);} #abk .tst-by img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center top;flex:none;} #abk .tst-by b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);} #abk .tst-by span{display:block;font-size:12px;color:var(--ink3);margin-top:1px;} @media(max-width:1000px){#abk .tst-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:600px){#abk .tst-grid{grid-template-columns:1fr;}} /* ══════════ SPLIT FEATURE ROWS ══════════ */ #abk .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center;} #abk .split + .split{margin-top:clamp(56px,8vw,100px);} #abk .split.flip > div:first-child{order:2;} #abk .split img{border-radius:16px;border:1px solid var(--line);} #abk .split-list{margin-top:24px;} #abk .split-list li{font-size:14.5px;line-height:1.65;color:var(--ink2);padding:8px 0 8px 26px;position:relative;} #abk .split-list li::before{content:'';position:absolute;left:2px;top:16px;width:9px;height:1.5px;background:var(--green);} #abk .split-list li b{color:var(--ink);font-weight:600;} @media(max-width:900px){#abk .split{grid-template-columns:1fr;gap:28px;}#abk .split.flip > div:first-child{order:0;}} /* ══════════ FINAL CTA (dark contrast band) ══════════ */ #abk .final{ position:relative;overflow:hidden;text-align:center; padding:clamp(72px,11vw,140px) 0;background:var(--dark);color:#fff; } #abk .final .dots{opacity:.24;background-image:radial-gradient(circle,rgba(255,255,255,.55) .85px,transparent 1px);} #abk .final .bloom{top:50%;background:radial-gradient(ellipse at center,rgba(23,151,110,.16) 0%,transparent 66%);} #abk .final-in{position:relative;z-index:2;} #abk .final h2{max-width:none;margin:0 auto;color:#fff;} #abk .final .eyebrow{color:#93a2b8;} #abk .final .lede{color:#93a2b8;} #abk .final .micro{color:#5f7089;} /* The dark band keeps a TRANSPARENT ghost. A white fill here would make this button identical to the `btn--white` beside it and destroy the primary/secondary pair, so the white fill above is undone rather than inherited. */ #abk .final .btn.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.22);} #abk .final .btn.btn--ghost:hover{border-color:rgba(255,255,255,.45);} #abk .final .ctarow{justify-content:center;margin-top:36px;} /* ══════════ FAQ ══════════ One column, after the closing band. Modelled on cleanshot.com/faq, measured 2026-09-03: no dividers of any kind, an item that tints itself into a soft rounded card on hover and when open, and a chevron that turns over. ⚠ NO OPEN/CLOSE ANIMATION, ON PURPOSE. `::details-content` and `interpolate-size` are Chrome 131+ and Safari cannot animate a
at all, so a height transition would work for some visitors and not others. The tint and the chevron still move. Decided 2026-09-03. */ #abk .faq{background:var(--bg2);} #abk .faq-in{max-width:800px;margin:0 auto;} #abk .faq-in .eyebrow{display:flex;justify-content:center;} #abk .faq-in h2{text-align:center;margin-bottom:36px;} #abk .faq .wp-block-details{ border-radius:20px; background:transparent; transition:background .15s ease; } #abk .faq .wp-block-details:hover, #abk .faq .wp-block-details[open]{background:rgba(12,21,32,.05);} #abk .faq .wp-block-details > summary{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:18px 22px;cursor:pointer;list-style:none; font-size:18px;font-weight:600;line-height:1.45;color:var(--ink); } /* Safari draws its own triangle through a pseudo-element, which `list-style` alone does not remove. */ #abk .faq .wp-block-details > summary::-webkit-details-marker{display:none;} #abk .faq .wp-block-details > summary::after{ content:'';flex:none;width:9px;height:9px;margin-right:5px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; border-radius:1px; transform:translateY(-2px) rotate(45deg); transition:transform .3s ease; } #abk .faq .wp-block-details[open] > summary::after{transform:translateY(2px) rotate(-135deg);} @media(prefers-reduced-motion:reduce){ #abk .faq .wp-block-details > summary::after{transition:none;} #abk .faq .wp-block-details{transition:none;} } #abk .faq .wp-block-details > :not(summary){ padding:0 22px 20px; font-size:15px;line-height:1.6;color:var(--ink2);max-width:66ch; } /* ══════════ FOOTER ══════════ */ #abk footer{border-top:1px solid var(--line);padding:56px 0 30px;background:var(--bg2);} #abk .ft-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;} #abk .ft-brand img{height:27px;margin-bottom:15px;} #abk .ft-brand p{font-size:13.5px;line-height:1.7;color:var(--ink2);max-width:34ch;} #abk .ft-t{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink);margin-bottom:15px;} #abk footer ul{display:flex;flex-direction:column;gap:9px;} #abk footer ul a{font-size:13.5px;color:var(--ink2);} #abk footer ul a:hover{color:var(--green-dk);} #abk .ft-bot{margin-top:46px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;} #abk .ft-bot p{font-size:11.5px;color:var(--ink3);line-height:1.6;} @media(max-width:900px){#abk .ft-top{grid-template-columns:1fr 1fr;}} @media(max-width:560px){#abk .ft-top{grid-template-columns:1fr;gap:28px;}} /* ════════════════════════════════════════════════════════════ MOBILE · everything below 768px. Desktop rules are untouched. ════════════════════════════════════════════════════════════ */ @media(max-width:768px){ /* long copy out, terse copy in */ #abk .m-long{display:none;} #abk .m-short{display:inline;} /* — nav — */ #abk .nav-in{padding:12px 16px;gap:12px;} #abk .logo img{height:22px;} #abk .nav-pill{font-size:13px;padding:10px 18px;} /* — hero — */ #abk .hero{padding:40px 0 46px;} #abk h1{max-width:none;font-size:clamp(29px,8.4vw,36px);letter-spacing:-.03em;} #abk .kicker{font-size:clamp(19px,5.4vw,24px);} #abk .hero-badge{ font-size:clamp(9px,2.9vw,11px);letter-spacing:.6px; padding:6px 13px;margin-bottom:22px;gap:7px; } #abk .hero-badge i{width:5px;height:5px;} #abk .dots{opacity:.16;width:88vw;} #abk .hero .ctarow{flex-direction:column;gap:10px;margin-top:26px;} /* core's `.is-layout-flex` sets `align-items:center` on the row, so the wrapper does not stretch on its own. Measured at 390px before this: 163px and 132px against a 350px row. The wrapper AND the link both need the width. */ #abk .hero .wp-block-button{width:100%;} #abk .hero .btn, #abk .hero .wp-block-button__link{width:100%;padding:15px 20px;} #abk .stats{ grid-template-columns:1fr;gap:16px;max-width:none; text-align:left;margin-top:38px; } #abk .stat b{font-size:27px;} #abk .stat span{font-size:13px;} /* — trust marquee — */ #abk .marq{padding:18px 0;} #abk .marq-label{font-size:10.5px;margin-bottom:14px;} /* — problem — */ #abk .prob-grid{gap:26px;} #abk .vid--tall{max-width:none;} #abk .prob-list li{font-size:14.5px;padding:15px 0 15px 26px;} /* — the gap statement — */ #abk .punch-sec{padding:44px 0;} #abk .punch p{font-size:clamp(21px,6.4vw,27px);max-width:none;} /* — how it helps — */ #abk .help-card h3{font-size:17px;} #abk .help-img{padding:14px;} #abk .help-tags{padding:0 20px 18px;} /* ── INDUSTRIES: small landscape browser with the chat overlaid ── */ #abk #industries{padding-top:44px;} #abk .ind-head .lede{font-size:14.5px;} /* tabs leave the chrome and become a swipe row above the frame */ #abk .wsf-bar{height:32px;padding:0 10px;} #abk .wsf-bar .wsf-tabs{display:none;} #abk .wsf-hint{display:none;} #abk .wsf-bar::after{ content:'';flex:1;height:13px;margin-left:8px;border-radius:5px;background:#e4e8ec; } #abk .wsf-mtabs{ display:flex;gap:7px;margin:0 0 12px;padding:2px 2px 8px; overflow-x:auto;scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;scrollbar-width:none; } #abk .wsf-mtabs::-webkit-scrollbar{display:none;} #abk .wsf-mtab{ flex:none;scroll-snap-align:start; display:flex;align-items:center;gap:7px; font-size:13px;font-weight:500;color:var(--ink2); background:#fff;border:1px solid var(--line);border-radius:99px; padding:9px 16px;cursor:pointer;white-space:nowrap; } #abk .wsf-mtab i{width:6px;height:6px;border-radius:50%;background:#c3cad2;flex:none;} #abk .wsf-mtab.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600;} #abk .wsf-mtab.on i{background:var(--green-br);} /* landscape window: the site is context, the chat is the message */ #abk .wsf-stage{margin-top:0;} #abk .wsframe{border-radius:14px;} #abk .wsf-view{height:340px;} /* chat keeps overlaying, sized so the site still reads behind it */ #abk .wsf-chat{ position:absolute;left:10px;right:10px;bottom:10px;top:auto; width:auto;max-height:262px;border-radius:14px; box-shadow:0 14px 36px -12px rgba(12,21,32,.5); } #abk .wsf-msgs{min-height:96px;} #abk .wsf-chips{padding:0 12px 9px;} #abk .wsf-chip{font-size:11px;padding:5px 10px;} #abk .wsf-min{display:none;} #abk .wsf-bubble{display:none !important;} /* snippets drop below the frame as a plain list */ #abk .wsf-strips{ position:static;left:auto;right:auto;bottom:auto; margin-top:16px;pointer-events:auto; } #abk .wsf-strip.on{ grid-template-columns:1fr;background:transparent;border:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0; } #abk .wsf-snip{ padding:0 0 0 14px;margin-bottom:13px;box-shadow:none; border-left:2px solid var(--green); } #abk .wsf-snip:last-child{margin-bottom:0;} #abk .wsf-snip b{padding-left:0;font-size:13.5px;} #abk .wsf-snip b::before{display:none;} #abk .wsf-snip span{padding-left:0;font-size:12.5px;color:var(--ink2);} #abk .wsf-note{font-size:12px;margin-top:16px;} /* — product demo: heading, scenario pills, chat, then the steps — */ #abk .demo-grid{display:flex !important;flex-direction:column;gap:0 !important;text-align:center;} #abk .demo-grid > div{display:contents;} #abk .demo-grid .eyebrow{order:1;justify-content:center;} #abk .demo-grid h2{order:2;font-size:clamp(22px,6.2vw,28px);} #abk .demo-grid .lede{order:3;font-size:14.5px;margin:12px auto 0;max-width:44ch;} /* the three scenario pills, sitting above the widget */ #abk .chat-scn{ order:4;display:flex;gap:8px;width:100%;max-width:none; margin:22px 0 0;padding:0;background:transparent;border:0;overflow:visible; } #abk .chat-scn button{ flex:1;padding:10px 4px;font-size:12px;border-radius:10px; background:#fff;border:1px solid var(--line);color:var(--ink2); } #abk .chat-scn button.on{background:var(--green);border-color:var(--green);color:#fff;} #abk .chat{order:5;max-width:none;height:400px;margin:16px 0 0;} /* steps read as plain rows under the demo */ #abk .demo-steps{order:6;margin-top:24px;text-align:left;} #abk .demo-step{padding:14px 0;cursor:default;} #abk .demo-step .ds-t{font-size:14.5px;color:var(--ink);} #abk .demo-step .ds-d{font-size:12.5px;} #abk .demo-step:not(.on) .ds-d{max-height:0;opacity:0;} #abk .demo-grid .ctarow{order:7;margin-top:24px !important;flex-direction:column;gap:10px;} #abk .demo-grid .ctarow .btn{width:100%;} #abk .demo-grid .micro{order:8;text-align:center;} /* — reviews become a swipe carousel — */ #abk .tst-grid{ display:flex;gap:12px;margin-top:32px; overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none; padding-bottom:6px; } #abk .tst-grid::-webkit-scrollbar{display:none;} #abk .tst{flex:0 0 82%;scroll-snap-align:center;padding:20px;} #abk .tst q{font-size:13.5px;} /* — live bot — */ /* The header is 57px below 900px, measured. 8px of clearance on top of it. */ #abk .livebot{scroll-margin-top:65px;} #abk .lb-grid{text-align:center;} #abk .lb-grid .eyebrow{justify-content:center;} #abk .lb-grid h2{font-size:clamp(22px,6.2vw,28px);} #abk .lb-grid .lede{font-size:14.5px;margin-inline:auto;max-width:44ch;} #abk .lb-ask{text-align:left;max-width:320px;margin-inline:auto;} #abk .lb-grid .ctarow{justify-content:center;} #abk .lb-label{justify-content:center;} /* 480px is wider than a 390px viewport once the wrap padding is taken off. */ #abk .lb-frame{max-width:100%;height:min(560px,78vh);} /* — FAQ — */ #abk .faq-in h2{font-size:clamp(22px,6.2vw,28px);margin-bottom:24px;} #abk .faq .wp-block-details > summary{padding:15px 16px;font-size:16px;gap:12px;} #abk .faq .wp-block-details > :not(summary){padding:0 16px 18px;font-size:14.5px;} /* — feature rows become self-contained cards, list dropped — */ #abk .split{ display:block;background:#fff;border:1px solid var(--line); border-radius:18px;padding:22px 18px;text-align:center; box-shadow:0 1px 2px rgba(12,21,32,.04),0 16px 34px -24px rgba(12,21,32,.3); } #abk .split + .split{margin-top:16px;} #abk .split.flip > div:first-child{order:0;} #abk .split .eyebrow{justify-content:center;margin-bottom:12px;} #abk .split h2{font-size:clamp(20px,5.6vw,24px);} #abk .split .lede{font-size:14px;margin-top:10px;margin-inline:auto;} #abk .split-list{display:none;} #abk .split .vid{ margin-top:18px;background:var(--green-lt);border-color:var(--green-bd); border-radius:16px;padding:9px; } #abk .split .vid video{border-radius:9px;} /* — close — */ #abk .final{padding:56px 0;} #abk .final .ctarow{flex-direction:column;gap:10px;} #abk .final .wp-block-button{width:100%;} #abk .final .btn, #abk .final .wp-block-button__link{width:100%;} /* — sticky CTA — */ #abk{padding-bottom:0;} #abk .mcta{ position:fixed;left:0;right:0;bottom:0;z-index:90; display:flex;align-items:center;gap:12px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); border-top:1px solid var(--line); transform:translateY(0);transition:transform .3s ease; } #abk .mcta.away{transform:translateY(105%);} #abk .mcta small{flex:1;font-size:11.5px;line-height:1.35;color:var(--ink2);} #abk .mcta small b{display:block;color:var(--ink);font-size:13px;font-weight:600;} #abk .mcta a{ flex:none;background:var(--green);color:#fff;font-size:14px;font-weight:600; padding:12px 20px;border-radius:99px; } #abk footer{padding-bottom:88px;} } @media(min-width:769px){ #abk .wsf-mtabs, #abk .mcta, #abk .m-short{display:none;} } @media (prefers-reduced-motion:reduce){ #abk *{animation-duration:.01ms !important;transition-duration:.01ms !important;} #abk .marq-track{animation:none;} } /* ══════════════════════════════════════════════════════════ BLOCK BRIDGE — added when this mockup became a block page. Not part of the marketing CSS. Core emits its own wrappers around a button and a video, so the mockup's `.btn` and `. */ #abk .wp-block-button__link{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-size:15px;font-weight:500;padding:12px 24px;border-radius:8px; transition:background .18s ease,border-color .18s ease,transform .14s ease; } #abk .wp-block-button__link:active{transform:translateY(1px);} #abk .btn--solid .wp-block-button__link{background:var(--green);color:#fff;} #abk .btn--solid .wp-block-button__link:hover{background:var(--green-dk);} #abk .btn--white .wp-block-button__link{background:#fff;color:var(--dark);} #abk .btn--white .wp-block-button__link:hover{background:#e9edf1;} #abk .btn--ghost .wp-block-button__link{background:#fff;color:var(--ink);border:1px solid var(--line2);} #abk .btn--ghost .wp-block-button__link:hover{border-color:var(--ink);} /* core/video drops the width and height attributes, which would reintroduce layout shift. The ratio is declared per video instead. */ #abk .ar-10-7 video{aspect-ratio:10/7;} #abk .ar-16-9 video{aspect-ratio:1000/564;} #abk .ar-4-5 video{aspect-ratio:4/5;} /* core/heading and core/group add their own class; neutralise nothing, just make sure the block wrappers never introduce a margin the mockup did not have. */ #abk .wp-block-heading{margin:0;} #abk figure.wp-block-video{margin:0;} /* The dark closing band: core/button puts the classes on the WRAPPER, so the * ported `#abk .final .btn--ghost{color:#fff}` lands on the div and the * keeps the bridge's dark ink — a rule that exists and does nothing. It rendered * as a near-invisible dark button on a dark green band. Same shape as the * two-class specificity trap: the rule was there, it just never reached the * element that paints. */ #abk .final .btn--ghost .wp-block-button__link{background:transparent;color:#fff;border-color:rgba(255,255,255,.22);} #abk .final .btn--ghost .wp-block-button__link:hover{border-color:rgba(255,255,255,.45);} #abk .final .btn--white .wp-block-button__link{background:#fff;color:var(--dark);} #abk .final .btn--white .wp-block-button__link:hover{background:#e9edf1;} /* Three inline styles in the mockup could not survive blockification, because a * core/paragraph writes its own markup. Two are restored here as named rules; * the third (the centred eyebrow) is kept inline inside its core/html block. */ #abk .prob-grid .lede + .lede{margin-top:14px;} #abk .final-lede{margin-left:auto;margin-right:auto;text-align:center;} /* The live AI BotKit widget bubble sits bottom-right on every page of this site. * The mockup was a standalone file and never had it, so its full-width mobile CTA * bar runs straight under the bubble and the "Start free" button is covered. * Measured on a 390px shot. Reserve the bubble's lane. */ @media(max-width:768px){ #abk .mcta{padding-right:82px;} }