/* ==========================================================================
   Cyboq — /ai-leads  AI Lead Conversion System landing page

   Loaded AFTER style.css, so it inherits every design token and shared
   component (.btn, .field, .faq, .footer, .wrap, .mono …). Every selector
   here is prefixed `ail-` so this page can never affect the rest of the site.

   One deliberate departure from the main site: the product mockups sit on a
   LIGHT surface. A contractor's real website is light, so showing the
   assistant on a light browser chrome against the dark page reads as a real
   screenshot rather than a decorative panel — and gives the page its contrast.
   ========================================================================== */

.ail{
  --ail-light:#F7F8F5;          /* the "customer's website" surface */
  --ail-light-2:#ECEEE8;
  --ail-ink:#14171B;            /* text on the light surface */
  --ail-ink-2:#5B6167;
  --ail-ink-3:#8A9096;
  --ail-warn:#E8894A;           /* problem / "before" state — never lime */
  --ail-warn-soft:rgba(232,137,74,.11);
  --ail-warn-line:rgba(232,137,74,.30);
  --ail-good:#BBF340;
}

/* Grid/flex children default to min-width:auto, so one wide child pries its
   column open and the whole page scrolls sideways. Same guard the main
   stylesheet applies site-wide. */
.ail-calc>*,.ail-calc__in>*,.ail-demo>*,.ail-offer>*,.ail-price>*,
.ail-vs>*,.ail-hero__grid>*,.ail-wf__row>*{min-width:0}

/* ------------------------------------------------------- Page rhythm */
.ail-sec{padding-block:clamp(64px,8vw,120px);position:relative}
.ail-sec--tight{padding-block:clamp(48px,6vw,84px)}
.ail-sec--panel{background:var(--panel);border-block:1px solid var(--line)}

.ail-head{max-width:780px;margin-bottom:clamp(36px,4.5vw,60px)}
.ail-head.is-center{margin-inline:auto;text-align:center}
.ail-head h2{font-size:clamp(1.9rem,4.2vw,3.3rem);letter-spacing:-.04em;margin-bottom:18px}
.ail-head p{font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.65;color:var(--paper-2);max-width:62ch}
.ail-head.is-center p{margin-inline:auto}

.ail-kicker{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  font-family:var(--ff-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal);
}
.ail-kicker::before{content:"";width:18px;height:1px;background:var(--signal)}

/* =============================================================== HEADER
   A funnel header: product nav plus two CTAs, not the main site nav. */
.ail-hdr{
  position:fixed;inset:0 0 auto;z-index:900;padding-block:16px;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s,padding .45s var(--ease),backdrop-filter .45s;
}
.ail-hdr.is-stuck{
  background:rgba(7,8,10,.86);backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom-color:var(--line);padding-block:9px;
}
.ail-hdr__in{display:flex;align-items:center;gap:20px}
.ail-hdr__brand{display:flex;align-items:center;gap:10px;flex:none}
.ail-hdr__brand img{width:32px;height:32px}
.ail-hdr__name{font-family:var(--ff-display);font-weight:750;font-variation-settings:'wdth' 108;font-size:1.16rem;letter-spacing:-.045em;line-height:1}
.ail-hdr__sub{font-family:var(--ff-mono);font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-3);margin-top:4px;display:block}
.ail-hdr__nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.ail-hdr__nav a{
  font-family:var(--ff-mono);font-size:.7rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--paper-2);padding:10px 12px;border-radius:100px;
  transition:color .25s;
}
.ail-hdr__nav a:hover,.ail-hdr__nav a.is-here{color:var(--signal)}
.ail-hdr__cta{flex:none;display:flex;align-items:center;gap:9px}

.ail-burger{
  display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:11px;
  flex:none;flex-direction:column;align-items:center;justify-content:center;
}
.ail-burger span{display:block;width:17px;height:1.5px;background:var(--paper);border-radius:2px;transition:transform .35s var(--ease),opacity .2s}
.ail-burger span+span{margin-top:5px}
.ail-burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.ail-burger.is-open span:nth-child(2){opacity:0}
.ail-burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.ail-drawer{
  position:fixed;inset:0;z-index:890;background:var(--void);
  padding:92px var(--pad) 40px;overflow-y:auto;
  transform:translateY(-100%);transition:transform .5s var(--ease);visibility:hidden;
}
.ail-drawer.is-open{transform:none;visibility:visible}
.ail-drawer a{
  display:block;font-family:var(--ff-display);font-size:1.6rem;font-weight:650;
  font-variation-settings:'wdth' 110;letter-spacing:-.035em;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.ail-drawer__foot{margin-top:28px;display:grid;gap:12px}

/* ================================================================= HERO */
.ail-hero{position:relative;overflow:hidden;padding-top:clamp(118px,13vw,168px);padding-bottom:clamp(56px,7vw,96px)}
.ail-hero__field{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(56px,7vw,92px) clamp(56px,7vw,92px);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 30% 0%,#000 10%,transparent 70%);
  mask-image:radial-gradient(ellipse 80% 60% at 30% 0%,#000 10%,transparent 70%);
}
.ail-hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,4.5vw,64px);align-items:center}
.ail-hero h1{font-size:clamp(2.35rem,5.1vw,4.15rem);letter-spacing:-.045em;line-height:1.02;margin-bottom:22px}
.ail-hero h1 em{font-style:normal;color:var(--signal)}
.ail-hero__sub{font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.62;color:var(--paper-2);max-width:56ch}
.ail-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ail-hero__trust{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--paper-3);
}
.ail-hero__trust span{display:flex;align-items:center;gap:7px}
.ail-hero__trust svg{width:13px;height:13px;color:var(--signal);flex:none}

/* --------------------------------------------- Browser mockup (light) */
.ail-browser{
  border-radius:14px;overflow:hidden;background:var(--ail-light);
  border:1px solid var(--line-2);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04);
}
.ail-browser__bar{
  display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:var(--ail-light-2);border-bottom:1px solid rgba(0,0,0,.09);
}
.ail-browser__dot{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.16)}
.ail-browser__url{
  margin-left:8px;flex:1;background:#fff;border-radius:100px;padding:5px 12px;
  font-family:var(--ff-mono);font-size:.64rem;color:var(--ail-ink-3);
  border:1px solid rgba(0,0,0,.07);display:flex;align-items:center;gap:7px;
}
.ail-browser__url svg{width:10px;height:10px;flex:none;color:#4a9a4a}
.ail-browser__body{position:relative;background:var(--ail-light);min-height:340px}

/* The fictional contractor site behind the assistant */
.ail-site{padding:18px 20px 0}
.ail-site__nav{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid rgba(0,0,0,.07)}
.ail-site__logo{
  width:26px;height:26px;border-radius:6px;background:#1F3A5F;flex:none;
  display:grid;place-items:center;color:#fff;font-family:var(--ff-display);font-weight:700;font-size:.62rem;
}
.ail-site__name{font-family:var(--ff-display);font-weight:700;font-size:.82rem;color:var(--ail-ink);letter-spacing:-.02em}
.ail-site__links{margin-left:auto;display:flex;gap:12px}
.ail-site__links i{display:block;width:34px;height:6px;border-radius:3px;background:rgba(0,0,0,.11)}
.ail-site__hero{padding:22px 0 18px}
.ail-site__h{font-family:var(--ff-display);font-weight:700;font-variation-settings:'wdth' 104;font-size:1.18rem;color:var(--ail-ink);letter-spacing:-.03em;line-height:1.15}
.ail-site__p{font-size:.76rem;color:var(--ail-ink-2);margin-top:8px;max-width:34ch;line-height:1.5}
.ail-site__btn{
  display:inline-block;margin-top:14px;background:#1F3A5F;color:#fff;
  font-size:.68rem;font-weight:600;padding:9px 16px;border-radius:6px;
}
.ail-site__strip{display:flex;gap:8px;margin-top:20px;opacity:.5}
.ail-site__strip i{flex:1;height:42px;border-radius:6px;background:rgba(0,0,0,.07)}

/* --------------------------------------------------- Assistant widget */
.ail-chat{
  position:absolute;right:14px;bottom:14px;width:min(286px,72%);
  background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.32);border:1px solid rgba(0,0,0,.08);
}
.ail-chat__top{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#1F3A5F;color:#fff}
.ail-chat__av{width:24px;height:24px;border-radius:50%;background:var(--signal);display:grid;place-items:center;flex:none}
.ail-chat__av svg{width:13px;height:13px;color:#0A0B09}
.ail-chat__ttl{font-size:.72rem;font-weight:600;line-height:1.2}
.ail-chat__st{font-size:.58rem;opacity:.75;display:flex;align-items:center;gap:5px;margin-top:1px}
.ail-chat__st::before{content:"";width:5px;height:5px;border-radius:50%;background:#7CE07C}
.ail-chat__log{padding:12px;display:flex;flex-direction:column;gap:8px;max-height:214px;overflow:hidden}

.ail-msg{max-width:86%;font-size:.72rem;line-height:1.48;padding:8px 11px;border-radius:11px;animation:ailPop .42s var(--ease) both}
.ail-msg--ai{background:var(--ail-light-2);color:var(--ail-ink);border-bottom-left-radius:4px;align-self:flex-start}
.ail-msg--user{background:#1F3A5F;color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
@keyframes ailPop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.ail-typing{display:flex;gap:3px;padding:10px 12px;background:var(--ail-light-2);border-radius:11px;border-bottom-left-radius:4px;align-self:flex-start;animation:ailPop .3s var(--ease) both}
.ail-typing i{width:5px;height:5px;border-radius:50%;background:var(--ail-ink-3);animation:ailBlink 1.3s infinite}
.ail-typing i:nth-child(2){animation-delay:.18s}
.ail-typing i:nth-child(3){animation-delay:.36s}
@keyframes ailBlink{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

/* ------------------------------------------------ Qualified lead card */
.ail-qual{
  position:absolute;inset:0;background:rgba(13,15,18,.95);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;flex-direction:column;justify-content:center;padding:26px;
  opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility .55s;
}
.ail-qual.is-on{opacity:1;visibility:visible}
.ail-qual__tag{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:var(--ff-mono);font-size:.6rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-signal);background:var(--signal);padding:5px 11px;border-radius:100px;margin-bottom:18px;
}
.ail-qual__tag svg{width:11px;height:11px}
.ail-qual__rows{display:grid;gap:10px}
.ail-qual__row{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding-bottom:9px;border-bottom:1px solid var(--line)}
.ail-qual__k{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-3)}
.ail-qual__v{font-family:var(--ff-display);font-weight:600;font-size:.92rem;color:var(--paper);text-align:right;letter-spacing:-.01em}
.ail-qual__v.is-urgent{color:var(--ail-warn)}
.ail-qual__sent{
  display:flex;align-items:center;gap:9px;margin-top:18px;
  font-family:var(--ff-mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);
}
.ail-qual__sent svg{width:14px;height:14px}
.ail-replay{
  position:absolute;top:12px;right:12px;z-index:3;
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper-2);background:rgba(7,8,10,.7);border:1px solid var(--line-2);
  padding:6px 11px;border-radius:100px;opacity:0;transition:opacity .4s;
}
.ail-replay.is-on{opacity:1}
.ail-replay:hover{color:var(--signal);border-color:var(--signal-line)}

/* ========================================================== VALUE STRIP */
.ail-strip{border-block:1px solid var(--line);background:var(--panel)}
.ail-strip__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line)}
.ail-strip__i{background:var(--panel);padding:26px 20px;display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.ail-strip__i svg{width:19px;height:19px;color:var(--signal)}
.ail-strip__i b{font-family:var(--ff-display);font-weight:600;font-size:.92rem;letter-spacing:-.015em;line-height:1.25}
.ail-strip__i span{font-size:.79rem;color:var(--paper-3);line-height:1.45}

/* ============================================================== PROBLEM */
.ail-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(18px,3vw,40px);align-items:start}
.ail-flow{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px);background:var(--panel)}
.ail-flow--bad{border-color:var(--ail-warn-line)}
.ail-flow--good{border-color:var(--signal-line);background:linear-gradient(180deg,rgba(187,243,64,.05),var(--panel) 60%)}
.ail-flow__h{
  display:flex;align-items:center;gap:9px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line);
  font-family:var(--ff-mono);font-size:.66rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
}
.ail-flow--bad .ail-flow__h{color:var(--ail-warn)}
.ail-flow--good .ail-flow__h{color:var(--signal)}
.ail-flow__h svg{width:15px;height:15px}
.ail-step{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:.92rem;color:var(--paper-2)}
.ail-step i{
  width:7px;height:7px;border-radius:50%;flex:none;background:var(--line-3);
}
.ail-flow--bad .ail-step:last-child{color:var(--ail-warn);font-weight:600}
.ail-flow--bad .ail-step:last-child i{background:var(--ail-warn)}
.ail-flow--good .ail-step i{background:var(--signal-dim)}
.ail-flow--good .ail-step:last-child{color:var(--signal);font-weight:600}
.ail-flow--good .ail-step:last-child i{background:var(--signal)}
.ail-vs__mid{display:grid;place-items:center;padding-top:70px;color:var(--paper-3)}
.ail-vs__mid svg{width:26px;height:26px}

/* ========================================================= REVENUE LEAKS */
.ail-leaks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ail-leak{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,28px);
  background:var(--panel);position:relative;overflow:hidden;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.ail-leak:hover{border-color:var(--ail-warn-line);background:var(--raise)}
.ail-leak__n{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;color:var(--ail-warn);display:block;margin-bottom:14px}
.ail-leak h3{font-family:var(--ff-mono);font-size:.72rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--paper);margin-bottom:11px;line-height:1.4}
.ail-leak p{font-size:.93rem;color:var(--paper-2);line-height:1.6}

/* =============================================================== WORKFLOW */
.ail-wf{display:grid;gap:0;counter-reset:wf}
.ail-wf__row{
  display:grid;grid-template-columns:82px 1fr 1fr;gap:clamp(16px,3vw,44px);
  padding-block:clamp(22px,2.6vw,32px);border-top:1px solid var(--line);align-items:start;
  position:relative;
}
.ail-wf__row:last-child{border-bottom:1px solid var(--line)}
.ail-wf__n{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;color:var(--signal);padding-top:5px}
.ail-wf__t{font-family:var(--ff-display);font-weight:600;font-variation-settings:'wdth' 106;font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:-.025em;line-height:1.2}
.ail-wf__d{font-size:.95rem;color:var(--paper-2);line-height:1.62}
.ail-wf__d ul{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.ail-wf__d ul li{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-2);border:1px solid var(--line);padding:5px 10px;border-radius:100px;
}

/* ======================================================= INTERACTIVE DEMO */
.ail-demo{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3.4vw,48px);align-items:start}
.ail-demo__pick{display:grid;gap:9px}
.ail-pick{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:15px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);color:var(--paper-2);transition:.3s var(--ease);
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
}
.ail-pick svg{width:17px;height:17px;color:var(--paper-3);flex:none;transition:color .3s}
.ail-pick:hover{border-color:var(--line-2);color:var(--paper)}
.ail-pick.is-on{background:var(--signal-soft);border-color:var(--signal-line);color:var(--signal)}
.ail-pick.is-on svg{color:var(--signal)}

.ail-demo__stage{
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:0 34px 70px -34px rgba(0,0,0,.85);
}
.ail-demo__log{
  padding:20px;display:flex;flex-direction:column;gap:10px;
  min-height:330px;max-height:430px;overflow-y:auto;scroll-behavior:smooth;
}
.ail-demo__log .ail-msg{font-size:.86rem;max-width:82%;padding:10px 14px;border-radius:13px}
.ail-demo__opts{
  padding:14px 20px 20px;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid rgba(0,0,0,.08);
  background:var(--ail-light);
}
.ail-opt{
  font-size:.8rem;font-weight:500;padding:9px 15px;border-radius:100px;
  border:1px solid rgba(31,58,95,.28);color:#1F3A5F;background:#fff;
  transition:.25s var(--ease);min-height:38px;
}
.ail-opt:hover{background:#1F3A5F;color:#fff;border-color:#1F3A5F}
.ail-demo__input{display:flex;gap:8px;width:100%}
.ail-demo__input input{
  flex:1;min-width:0;padding:10px 14px;border-radius:100px;border:1px solid rgba(0,0,0,.16);
  background:#fff;color:var(--ail-ink);font-size:.86rem;
}
.ail-demo__input input:focus{outline:none;border-color:#1F3A5F}
.ail-demo__input button{
  padding:10px 18px;border-radius:100px;background:#1F3A5F;color:#fff;
  font-size:.8rem;font-weight:600;flex:none;
}
.ail-demo__done{padding:22px;background:var(--void);border-top:1px solid var(--line)}
.ail-demo__note{
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--paper-3);margin-top:14px;text-align:center;
}

/* ============================================================== FEATURES */
.ail-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ail-feat__i{background:var(--panel);padding:clamp(22px,2.4vw,30px);transition:background .35s var(--ease)}
.ail-feat__i:hover{background:var(--raise)}
.ail-feat__i svg{width:20px;height:20px;color:var(--signal);margin-bottom:16px}
.ail-feat__i h3{font-family:var(--ff-display);font-weight:600;font-size:1rem;letter-spacing:-.02em;margin-bottom:8px}
.ail-feat__i p{font-size:.89rem;color:var(--paper-2);line-height:1.58}

/* ============================================================ INDUSTRIES */
.ail-inds{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ail-ind{
  border:1px solid var(--line);border-radius:var(--r);padding:20px 16px;background:var(--panel);
  display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;
  transition:.35s var(--ease);
}
.ail-ind:hover{border-color:var(--signal-line);background:var(--raise);transform:translateY(-2px)}
.ail-ind svg{width:20px;height:20px;color:var(--signal)}
/* Type-led rather than iconned: twelve invented trade icons would read as
   clip-art. A single calibration mark keeps them premium and honest. */
.ail-ind i{display:block;width:20px;height:2px;border-radius:2px;background:var(--signal-dim);transition:background .35s var(--ease),width .35s var(--ease)}
.ail-ind:hover i{background:var(--signal);width:28px}
.ail-ind span{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-2);line-height:1.4}

/* =========================================================== BEFORE/AFTER */
.ail-ba{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ail-ba__row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.ail-ba__row:first-child{border-top:0}
.ail-ba__hd{
  padding:16px 22px;font-family:var(--ff-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;background:var(--raise);
}
.ail-ba__hd:first-child{color:var(--ail-warn)}
.ail-ba__hd:last-child{color:var(--signal);border-left:1px solid var(--line)}
.ail-ba__c{padding:16px 22px;font-size:.93rem;color:var(--paper-2);display:flex;align-items:flex-start;gap:11px;line-height:1.55}
.ail-ba__c+.ail-ba__c{border-left:1px solid var(--line)}
.ail-ba__c svg{width:15px;height:15px;flex:none;margin-top:3px}
.ail-ba__c--b svg{color:var(--ail-warn)}
.ail-ba__c--a svg{color:var(--signal)}
.ail-ba__c--a{color:var(--paper)}

/* ================================================================ DEMO CTA */
.ail-offer{
  border:1px solid var(--signal-line);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(150deg,#161D08,#0B0D08 55%,var(--panel));
  display:grid;grid-template-columns:.92fr 1.08fr;
}
.ail-offer__l{padding:clamp(30px,4vw,52px);display:flex;flex-direction:column;justify-content:center}
.ail-offer__l h2{font-size:clamp(1.75rem,3.2vw,2.6rem);letter-spacing:-.04em;margin-bottom:18px}
.ail-offer__l p{color:var(--paper-2);font-size:1.02rem;line-height:1.65}
.ail-offer__pts{margin-top:26px;display:grid;gap:12px}
.ail-offer__pts div{display:flex;align-items:center;gap:11px;font-size:.92rem;color:var(--paper-2)}
.ail-offer__pts svg{width:15px;height:15px;color:var(--signal);flex:none}
.ail-offer__r{padding:clamp(26px,3.4vw,42px);background:rgba(7,8,10,.55);border-left:1px solid var(--line)}
.ail-offer__r h3{font-family:var(--ff-display);font-size:1.15rem;margin-bottom:6px;letter-spacing:-.02em}
.ail-offer__r>p{font-size:.88rem;color:var(--paper-3);margin-bottom:22px}
.ail-fine{
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-3);text-align:center;margin-top:14px;line-height:1.7;
}

/* The success state replaces the form entirely. */
.ail-sent{display:none;text-align:center;padding:26px 0}
.ail-sent.is-on{display:block;animation:ailPop .5s var(--ease) both}
.ail-sent__ico{
  width:56px;height:56px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;
  background:var(--signal-soft);border:1px solid var(--signal-line);color:var(--signal);
}
.ail-sent__ico svg{width:26px;height:26px}
.ail-sent h3{font-size:1.3rem;margin-bottom:10px;letter-spacing:-.025em}
.ail-sent p{color:var(--paper-2);font-size:.94rem;max-width:34ch;margin-inline:auto;line-height:1.6}

/* ================================================================ PRICING */
.ail-price{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,34px);align-items:start}
.ail-card{
  border:1px solid var(--signal-line);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(165deg,rgba(187,243,64,.055),var(--panel) 55%);
}
.ail-card__top{padding:clamp(28px,3.4vw,42px);border-bottom:1px solid var(--line)}
.ail-card__nm{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);display:block;margin-bottom:16px}
.ail-card__amt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ail-card__amt b{font-family:var(--ff-display);font-weight:700;font-variation-settings:'wdth' 100;font-size:clamp(2.6rem,5vw,3.9rem);letter-spacing:-.05em;line-height:1}
.ail-card__amt span{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-3)}
.ail-card__from{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-3);display:block;margin-bottom:10px}
.ail-card__inc{padding:clamp(26px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.ail-card__inc div{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--paper-2);line-height:1.5}
.ail-card__inc svg{width:14px;height:14px;color:var(--signal);flex:none;margin-top:4px}
.ail-card__foot{padding:0 clamp(26px,3vw,36px) clamp(28px,3.4vw,38px)}
.ail-note{
  border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;background:var(--panel);
}
.ail-note+.ail-note{margin-top:14px}
.ail-note h4{font-family:var(--ff-mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);margin-bottom:10px}
.ail-note p{font-size:.88rem;color:var(--paper-3);line-height:1.62}

/* ============================================================ CALCULATOR */
.ail-calc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,48px);align-items:center}
.ail-calc__in{display:grid;gap:24px}
.ail-calc__f label{
  display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin-bottom:12px;
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-2);
}
.ail-calc__f output{font-family:var(--ff-display);font-weight:700;font-variation-settings:'wdth' 100;font-size:1.25rem;color:var(--signal);letter-spacing:-.03em}
.ail-calc__f input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;
  background:transparent;outline:none;cursor:pointer;margin:0;
}
.ail-calc__f input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:3px;background:var(--raise-2);
}
.ail-calc__f input[type=range]::-moz-range-track{
  height:3px;border-radius:3px;background:var(--raise-2);
}
.ail-calc__f input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--signal);cursor:pointer;border:3px solid var(--void);
  box-shadow:0 0 0 1px var(--signal-line);margin-top:-9.5px;
}
.ail-calc__f input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--signal);cursor:pointer;
  border:3px solid var(--void);box-shadow:0 0 0 1px var(--signal-line);
}
.ail-calc__f input[type=range]:focus-visible{outline:2px solid var(--signal);outline-offset:6px}
.ail-calc__out{
  border:1px solid var(--signal-line);border-radius:var(--r-xl);padding:clamp(28px,3.6vw,44px);
  background:linear-gradient(160deg,rgba(187,243,64,.07),var(--panel) 60%);text-align:center;
}
.ail-calc__lab{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--paper-3);display:block}
.ail-calc__big{
  font-family:var(--ff-display);font-weight:700;font-variation-settings:'wdth' 100;
  font-size:clamp(2.6rem,6vw,4.2rem);letter-spacing:-.05em;line-height:1;color:var(--signal);
  margin-block:14px 6px;display:block;
}
.ail-calc__vs{font-size:.92rem;color:var(--paper-2);line-height:1.6;max-width:36ch;margin-inline:auto}
.ail-disc{
  margin-top:22px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);font-size:.8rem;color:var(--paper-3);line-height:1.6;
}
.ail-disc b{color:var(--paper-2);font-weight:600}

/* ================================================================== WHY */
.ail-why{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ail-why__i{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,2.8vw,34px);background:var(--panel)}
.ail-why__i svg{width:20px;height:20px;color:var(--signal);margin-bottom:18px}
.ail-why__i h3{font-family:var(--ff-display);font-weight:600;font-size:1.1rem;letter-spacing:-.025em;margin-bottom:10px}
.ail-why__i p{font-size:.94rem;color:var(--paper-2);line-height:1.62}

/* ============================================================== PROCESS */
.ail-proc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ail-proc__i{background:var(--panel);padding:clamp(24px,2.8vw,32px)}
.ail-proc__n{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;color:var(--signal);display:block;margin-bottom:16px}
.ail-proc__i h3{font-family:var(--ff-display);font-weight:600;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:9px}
.ail-proc__i p{font-size:.89rem;color:var(--paper-2);line-height:1.58}

/* =========================================================== VIDEO SLOT */
.ail-vid{
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  background:var(--panel);position:relative;
}
.ail-vid__ph{padding:clamp(28px,4vw,48px);display:grid;place-items:center;text-align:center;gap:14px}
.ail-vid__ph p{font-size:.92rem;color:var(--paper-2);max-width:44ch}

/* ============================================================= FINAL CTA */
.ail-final{
  border-radius:var(--r-xl);overflow:hidden;position:relative;text-align:center;
  padding:clamp(44px,6.5vw,92px) clamp(24px,4vw,60px);
  background:linear-gradient(160deg,#161D08,#0B0D08 55%,var(--panel));
  border:1px solid var(--signal-line);
}
.ail-final::before{
  content:"";position:absolute;top:-46%;left:50%;translate:-50% 0;width:660px;height:660px;
  background:radial-gradient(circle,rgba(187,243,64,.2),transparent 62%);pointer-events:none;
}
.ail-final>*{position:relative}
.ail-final h2{font-size:clamp(2rem,4.6vw,3.5rem);letter-spacing:-.045em;margin-block:16px 20px}
.ail-final p{color:var(--paper-2);font-size:clamp(1rem,1.3vw,1.14rem);max-width:56ch;margin-inline:auto;line-height:1.65}
.ail-final__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.ail-final__meta{
  display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;margin-top:28px;
  font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-3);
}

/* ========================================================== MOBILE CTA BAR */
.ail-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:880;display:none;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(7,8,10,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-2);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.ail-bar.is-on{transform:none}
.ail-bar .btn{width:100%;padding-block:15px}

/* ================================================================ REVEAL */
.ail-rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.ail-rv.is-in{opacity:1;transform:none}
@media (scripting:none){.ail-rv{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ail-rv{opacity:1;transform:none}
  .ail-msg,.ail-typing,.ail-sent.is-on{animation:none}
  .ail-typing i{animation:none;opacity:.5}
}

/* ============================================================ RESPONSIVE */
@media (max-width:1080px){
  .ail-hdr__nav{display:none}
  .ail-burger{display:flex}
  .ail-hdr__cta .ail-hdr__book{display:none}
  .ail-strip__grid{grid-template-columns:repeat(3,1fr)}
  .ail-inds{grid-template-columns:repeat(4,1fr)}
  .ail-proc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .ail-hero__grid{grid-template-columns:1fr;gap:40px}
  .ail-hero h1{font-size:clamp(2.3rem,8vw,3.2rem)}
  .ail-demo{grid-template-columns:1fr}
  .ail-demo__pick{grid-template-columns:repeat(2,1fr);display:grid}
  .ail-offer{grid-template-columns:1fr}
  .ail-offer__r{border-left:0;border-top:1px solid var(--line)}
  .ail-price{grid-template-columns:1fr}
  .ail-calc{grid-template-columns:1fr;gap:32px}
  .ail-feat{grid-template-columns:repeat(2,1fr)}
  .ail-leaks{grid-template-columns:repeat(2,1fr)}
  .ail-wf__row{grid-template-columns:64px 1fr;gap:14px}
  .ail-wf__d{grid-column:2}
}
@media (max-width:760px){
  .ail-vs{grid-template-columns:1fr;gap:14px}
  .ail-vs__mid{padding:0;transform:rotate(90deg)}
  .ail-why{grid-template-columns:1fr}
  .ail-leaks{grid-template-columns:1fr}
  .ail-feat{grid-template-columns:1fr}
  .ail-inds{grid-template-columns:repeat(3,1fr)}
  .ail-strip__grid{grid-template-columns:repeat(2,1fr)}
  .ail-card__inc{grid-template-columns:1fr}
  .ail-bar{display:block}
  /* Keep the last section clear of the fixed mobile CTA bar. */
  .ail-foot{padding-bottom:84px}

  /* Before/After stops being a two-column table and becomes paired rows. */
  .ail-ba__row{grid-template-columns:1fr}
  .ail-ba__hd:last-child{border-left:0;border-top:1px solid var(--line)}
  .ail-ba__c+.ail-ba__c{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .ail-chat{position:static;width:auto;margin:16px;box-shadow:none}
  /* The whole conversation is statically visible at this width and the lead
     card stacks below it, so Replay adds nothing and would sit on the mock
     site's navigation. */
  .ail-replay{display:none}
  .ail-browser__body{min-height:0}
  .ail-site__strip{display:none}
  .ail-qual{position:static;opacity:1;visibility:visible;display:none;background:var(--panel)}
  .ail-qual.is-on{display:flex}
  .ail-inds{grid-template-columns:repeat(2,1fr)}
  .ail-proc{grid-template-columns:1fr}
  .ail-demo__pick{grid-template-columns:1fr}
  .ail-hero__cta .btn{width:100%}
}
@media (max-width:460px){
  /* Not enough room for logo + CTA + burger. The sticky bottom bar and the
     drawer both offer the demo CTA, so the header keeps only the menu. */
  .ail-hdr__cta .btn{display:none}
}
@media (max-width:380px){
  .ail-strip__grid{grid-template-columns:1fr}
}

/* Touch targets and iOS zoom, matching the rest of the site. */
@media (max-width:900px){
  .ail-hdr__nav a,.ail-drawer a{padding-block:8px}
  .ail-opt{min-height:44px;padding-inline:17px}
  .ail-demo__input input,.ail-demo__input button{min-height:46px;font-size:16px}
  .ail-pick{min-height:52px}
}