/* Citelx — design system.
 *
 * DARK AND LIGHT, ALTERNATING WITH PURPOSE. Dark carries the AI moments: the
 * hero, the surfaces, the proof, the close. Light carries the explanation: the
 * shift, the method, the offer. The eye reads the rhythm as "this is the world,
 * this is how it works" without being told.
 *
 * Every animation is additive. The page is complete and readable with this
 * stylesheet's motion disabled and with JavaScript off — nothing important is
 * revealed by a transition.
 */

:root{
  /* Ink (on light) */
  --ink:#0B0D12;
  --ink-2:#414A59;
  --ink-3:#6B7484;

  /* Paper */
  --paper:#FFFFFF;
  --paper-2:#F5F7FB;
  --paper-3:#EBEEF6;

  /* Night */
  --night:#070912;
  --night-2:#0E1226;
  --night-3:#171C36;
  --night-ink:#F4F5FC;
  --night-ink-2:#9AA3C0;

  /* Accent */
  --violet:#7C6CFF;
  --violet-2:#9B8CFF;
  --cyan:#4FD8FF;
  --green:#3ADFA5;
  --amber:#FFB65C;
  --grad:linear-gradient(100deg,var(--violet),var(--cyan));

  --line:rgba(11,13,18,.10);
  --line-2:rgba(11,13,18,.06);
  --line-dark:rgba(255,255,255,.12);
  --line-dark-2:rgba(255,255,255,.07);

  --shadow-sm:0 1px 2px rgba(11,13,18,.04), 0 4px 14px rgba(11,13,18,.05);
  --shadow:0 12px 44px rgba(11,13,18,.10);
  --shadow-lg:0 34px 90px rgba(11,13,18,.16);
  --glow:0 0 40px rgba(124,108,255,.45);

  --r:14px;
  --r-lg:22px;
  --r-xl:30px;
  --wrap:1200px;
  --gut:clamp(20px,5vw,44px);
}

*{margin:0;padding:0;box-sizing:border-box}
/* [hidden] lives in the UA stylesheet, and ANY author rule that sets display
   beats it. .btn sets display:inline-flex, so a hidden button kept rendering —
   the enquiry form showed Back, Continue and Send all at once on step one.
   Anything given the attribute should be gone, whatever else it is. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:rgba(124,108,255,.24)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:'Unbounded',Inter,sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.025em}
h1{font-size:clamp(38px,5.8vw,70px)}
h2{font-size:clamp(29px,3.9vw,48px)}
h3{font-size:clamp(19px,2vw,25px);line-height:1.25}
h4{font-size:17px;line-height:1.35;letter-spacing:-.01em}
p{color:var(--ink-2)}
.lead{font-size:clamp(17px,1.75vw,21px);line-height:1.6;color:var(--ink-2)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--violet);
  padding:7px 15px;border-radius:99px;
  background:rgba(124,108,255,.08);border:1px solid rgba(124,108,255,.2);
}
.eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--violet);flex:none}
/* The eyebrow as a kicker inside the hero heading. The pill names the page in
   the words people search for; the heading is written to be read. Inside the
   h1 both hold and nothing moves: a flex box breaks the line after the pill,
   and the line-height is pinned so the pill keeps its height off the heading's
   tighter leading. */
h1 > .eyebrow{display:flex;width:max-content;max-width:100%;margin:0 0 22px;line-height:1.65}
.sv-hero h1 > .eyebrow{margin-bottom:20px}
.sv-hero h1:has(> .eyebrow),.hero h1:has(> .eyebrow){margin-top:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:820px;margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
/* 128px top and bottom put 256px of dead air between every pair of sections,
   which reads as the page having stopped. 88px each side is still a clear
   break and returns roughly a third of the scroll. */
.sec{padding:clamp(52px,6.4vw,88px) 0}
.sec-tight{padding:clamp(38px,4.4vw,60px) 0}
.alt{background:var(--paper-2)}
.sec-head{max-width:760px;margin-bottom:clamp(28px,3.4vw,44px)}
.sec-head .eyebrow{margin-bottom:20px}
.sec-head h2{margin-bottom:16px}
.center{text-align:center;margin-inline:auto}

/* ---------- DARK sections ---------- */
.night{background:var(--night);color:var(--night-ink);overflow:hidden}
.night h1,.night h2,.night h3,.night h4{color:#fff}
.night p,.night .lead{color:var(--night-ink-2)}
.night .eyebrow{color:var(--violet-2);background:rgba(155,140,255,.12);border-color:rgba(155,140,255,.28)}
.night .eyebrow::before{background:var(--violet-2)}
.night::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 460px at 10% -12%,rgba(124,108,255,.26),transparent 62%),
    radial-gradient(700px 420px at 92% 108%,rgba(79,216,255,.13),transparent 60%);
}
.night > *{position:relative;z-index:1}

/* subtle grid texture on dark */
.night.grid::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-dark-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-dark-2) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 75%);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15px;line-height:1;
  padding:17px 28px;border-radius:99px;border:1px solid transparent;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
  /* No will-change here. The transform is a 2px hover lift, so the hint bought
     nothing and cost every button a permanent compositor layer, which renders
     its label off the pixel grid on a fractional device pixel ratio. The
     browser promotes on hover by itself. */
  position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px rgba(124,108,255,.34)}
.btn-primary:hover{box-shadow:0 16px 40px rgba(124,108,255,.46)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.night .btn-ghost{color:#fff;border-color:var(--line-dark)}
.night .btn-ghost:hover{background:#fff;color:var(--night);border-color:#fff}
.btn-sm{padding:12px 20px;font-size:14px}
.btn .ar{transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.btn:hover .ar{transform:translateX(4px)}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- header ---------- */
/* Opaque, and no backdrop-filter. The frosted glass promoted the whole header
   to its own compositor layer, which cost every nav label its subpixel
   rendering and left the text looking soft. The background has to be solid
   rather than the old 82% white: the header is sticky and passes over the dark
   hero sections, and without the blur behind it a translucent bar reads as a
   grey smear with the hero showing through. */
.site-head{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease;
}
.site-head.stuck{border-bottom-color:var(--line-2);box-shadow:0 1px 20px rgba(14,17,22,.05)}
.head-in{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Inter Tight',Inter,sans-serif;font-weight:700;font-size:25px;letter-spacing:-.025em;flex:none}
.brand .mark{
  width:42px;height:42px;border-radius:12px;background:var(--grad);flex:none;
  display:grid;place-items:center;color:#fff;font-size:20px;
  box-shadow:0 5px 16px rgba(108,92,231,.38);
}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  position:relative;padding:9px 14px;border-radius:9px;font-size:15px;font-weight:500;
  color:var(--ink-2);transition:color .18s ease,background .18s ease;
}
.nav a:hover{color:var(--ink);background:var(--paper-2)}
.nav a.on{color:var(--ink);font-weight:600}
.head-cta{display:flex;align-items:center;gap:10px;flex:none}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:none;cursor:pointer;place-items:center}
.burger span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .25s ease,background .2s ease}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:17px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger.open span{background:transparent}
.burger.open span::before{transform:translateY(6px) rotate(45deg)}
.burger.open span::after{transform:translateY(-6px) rotate(-45deg)}

/* dropdown for services */
.has-sub{position:relative}
.sub{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:290px;padding:10px;border-radius:16px;background:#fff;
  border:1px solid var(--line-2);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .22s cubic-bezier(.2,.8,.3,1),visibility .2s;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sub a{display:block;padding:10px 12px;border-radius:10px;font-size:14.5px;line-height:1.35}
.sub a b{display:block;font-weight:600;color:var(--ink)}
.sub a span{font-size:12.5px;color:var(--ink-3)}

/* ---------- footer ---------- */
/* No top padding: the strip is the first child and is meant to meet the
   section above it. 70px here left a band of empty dark above the flag. */
.site-foot{background:var(--night);color:var(--night-ink-2);padding:0 0 34px;border-top:1px solid var(--line-dark-2)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:44px}
.foot-grid h4{color:#fff;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;font-weight:500}
/* This is for the plain link lists only. Both exclusions are load-bearing:
   without :not(.btn) it repaints the button label grey on the gradient, and
   without :not(.foot-phone) it is one specificity point heavier than
   .foot-grid .foot-phone and forces the phone row back to display:block —
   which stacked the icon, the label and the number into three lines. */
.foot-grid a:not(.btn):not(.foot-phone){display:block;padding:5px 0;font-size:14.5px;color:var(--night-ink-2);transition:color .18s}
.foot-grid a:not(.btn):not(.foot-phone):hover{color:#fff}
.foot-bar{margin-top:52px;padding-top:26px;border-top:1px solid var(--line-dark-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px}

/* ---------- reveal (gated on html.js so no-JS shows everything) ---------- */
html.js .reveal,html.js .reveal-l,html.js .reveal-r,html.js .reveal-s{opacity:0;will-change:transform,opacity}
html.js .reveal{transform:translateY(26px)}
html.js .reveal-l{transform:translateX(-30px)}
html.js .reveal-r{transform:translateX(30px)}
html.js .reveal-s{transform:scale(.94)}
/* will-change is dropped the moment an element reveals. Left on the base
   selector it never clears, so every revealed element keeps its own compositor
   layer for the life of the page. On a fractional device pixel ratio that
   rasterises text off the pixel grid and softens every glyph: 43 of 43 elements
   on a deep-dive page were stuck that way, and the mocks looked out of focus.
   The browser still promotes a layer on its own for the duration of an opacity
   and transform transition, so nothing about the animation changes. */
html.js .reveal.in,html.js .reveal-l.in,html.js .reveal-r.in,html.js .reveal-s.in{
  opacity:1;transform:none;will-change:auto;
  transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal,html.js .reveal-l,html.js .reveal-r,html.js .reveal-s{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav{
    position:fixed;inset:74px 0 auto 0;background:#fff;flex-direction:column;
    align-items:stretch;padding:14px var(--gut) 26px;gap:2px;
    border-bottom:1px solid var(--line-2);box-shadow:var(--shadow);display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 6px;font-size:16px}
  .burger{display:grid}
  .head-cta .btn-ghost{display:none}
  /* .nav carries margin-left:auto to push the CTA right, but here it is
     position:fixed and therefore out of flow, so it pushes nothing and the bar
     ended up bunched left with 56px of dead space past the burger. */
  .head-cta{margin-left:auto}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .btns .btn{width:100%}
  /* The CTA row must clear the wordmark on a 320px screen. */
  .head-in{gap:12px}
  .head-cta{gap:8px}
  .head-cta .btn-primary{padding:12px 16px}
  .head-cta .btn-primary .ar{display:none}
  /* Full-width buttons are right in a page section, wrong in a 74px bar. */
  .head-cta .btn{width:auto}
}
@media (max-width:380px){
  /* No logo step-down here. It used to drop to 20px/34px, which made a 375px
     phone — the commonest width there is — render the logo SMALLER than
     desktop, which is the opposite of what was asked for. It fits at full size
     down to 320px; measured. */
  .head-cta .btn-primary{padding:11px 13px;font-size:13.5px}
}

/* ---------- services dropdown ----------
 * Built from the same data file as the service pages, so a new service appears
 * here automatically rather than being forgotten in the menu.
 */
.has-sub{position:relative}
.sub{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:290px;padding:10px;border-radius:16px;background:#fff;
  border:1px solid var(--line-2);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .22s cubic-bezier(.2,.8,.3,1),visibility .2s;
  z-index:10;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sub a{display:block;padding:10px 12px;border-radius:10px;font-size:14.5px;line-height:1.35}
.sub a:hover{background:var(--paper-2)}
.sub a b{display:block;font-weight:600;color:var(--ink)}
.sub a span{font-size:12.5px;color:var(--ink-3)}
.nav a.on{color:var(--ink);font-weight:600}


/* Desktop: the row is just a wrapper, and the caret belongs to touch only. */
.sub-head{display:flex;align-items:center}
.sub-toggle{display:none;background:none;border:0;padding:0;color:inherit}
.scr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:900px){
  .sub{position:static;transform:none;opacity:1;visibility:visible;min-width:0;padding:0 0 0 12px;background:none;border:0;box-shadow:none}
  .has-sub:hover .sub{transform:none}

  /* The eight services rendered inline came to 476px, which pushed the open
     menu 24px past the bottom of a 812px screen with no way to scroll to it.
     Collapsed by default, and the panel scrolls if a short screen still runs
     out of room. */
  .sub{display:none}
  .has-sub.open .sub{display:block}

  .sub-head{justify-content:space-between;gap:8px}
  .sub-head > a{flex:1}
  .sub-toggle{
    display:grid;place-items:center;width:38px;height:38px;flex:none;
    border:1px solid var(--line);border-radius:10px;color:var(--ink-2);
    transition:transform .2s ease,background .18s ease,color .18s ease;
  }
  .sub-toggle:hover{background:var(--paper-2);color:var(--ink)}
  .has-sub.open .sub-toggle{transform:rotate(180deg);background:var(--paper-2);color:var(--ink)}

  .nav{
    max-height:calc(100vh - 74px);
    max-height:calc(100dvh - 74px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  /* A sub item is a title plus a tagline; without this the two run together
     into one line of wrapped text. */
  .sub a{padding:11px 8px}
  .sub a b{font-size:15px}
  .sub a span{display:block;margin-top:2px;line-height:1.4}
}

@media (prefers-reduced-motion:reduce){
  .sub-toggle{transition:none}
}

/* ═══════════════ CLOSING CTA BAND ═══════════════ */
.cta-band{border-radius:var(--r-xl);padding:clamp(38px,5vw,66px);text-align:center;position:relative;overflow:hidden}
.cta-band h2{margin-bottom:14px}
.cta-band p{max-width:640px;margin:0 auto 28px}
.cta-band .btns{justify-content:center}

/* ═══════════════ FOOTER ═══════════════
 * The previous version failed on contrast before it failed on design: the intro
 * paragraph rendered near-black on near-black and was effectively invisible.
 * Body copy here is #A7AFC6 against #070912 — a real reading contrast, not a
 * decorative one — and headings are pure white so the columns have structure.
 */
.site-foot{background:var(--night);color:#A7AFC6;position:relative;overflow:hidden}
.site-foot::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(700px 320px at 12% 0%,rgba(124,108,255,.20),transparent 62%),
    radial-gradient(520px 260px at 88% 100%,rgba(79,216,255,.10),transparent 60%);
}
.site-foot > *{position:relative;z-index:1}

/* ---- market strip ---- */
.foot-strip{border-bottom:1px solid var(--line-dark-2);background:rgba(255,255,255,.025)}
/* padding-block for the same reason as .fs-claims below: this element IS the
   .wrap, and a padding shorthand wipes its padding-inline — which is why the
   flag sat 44px left of the footer columns underneath it. */
.foot-strip-in{display:flex;align-items:center;gap:22px;padding-block:24px 20px}

/* Four claims under the positioning line. Cards rather than a row of ticked
   sentences: the figure needs to carry, and four plain lines of equal weight
   read as a checklist nobody finishes.

   padding-block, not the shorthand — this element is the .wrap and a shorthand
   wipes its padding-inline, which ran the row edge-to-edge. */
.fs-claims{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;padding-block:18px 26px;border-top:1px solid var(--line-dark-2);
}
.fs-claims li{
  display:flex;align-items:center;gap:11px;min-width:0;
  padding:12px 14px;border-radius:13px;
  background:rgba(255,255,255,.035);border:1px solid var(--line-dark-2);
  transition:border-color .18s ease,background .18s ease;
}
.fs-claims li:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.fsc-ic{
  width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;
  color:var(--violet-2);background:rgba(124,108,255,.15);border:1px solid rgba(155,140,255,.26);
}
.fsc-tx{display:flex;flex-direction:column;min-width:0}
.fsc-tx b{font-size:14.5px;font-weight:600;color:#fff;line-height:1.25;letter-spacing:-.01em}
.fsc-tx em{font-style:normal;font-size:11.5px;color:#8E97AE;line-height:1.35}
@media (max-width:1000px){ .fs-claims{grid-template-columns:1fr 1fr} }
/* 2x2 beats a stack of four on a phone: it halves the strip height. The cutoff
   is 339 rather than 379 — 375 is the commonest phone width there is, and
   putting it below the breakpoint sent the usual case back to one column. */
@media (max-width:339px){ .fs-claims{grid-template-columns:1fr} }
/* The flag itself, not a tile coloured to suggest one. */
.fs-flag{
  flex:none;display:grid;place-items:center;padding:7px;border-radius:11px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-dark-2);
}
.fs-flag .usflag{display:block;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.fs-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.fs-copy b{color:#fff;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.fs-copy span{font-size:13.5px;color:#8E97AE;line-height:1.5}
.fs-cta{
  margin-left:auto;flex:none;font-size:14px;font-weight:600;color:#fff;
  padding:11px 20px;border-radius:99px;border:1px solid var(--line-dark);
  transition:background .2s ease,border-color .2s ease;
}
.fs-cta:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28)}
.fs-cta .ar{transition:transform .2s cubic-bezier(.2,.8,.3,1);display:inline-block}
.fs-cta:hover .ar{transform:translateX(3px)}

/* ---- columns ---- */
.foot-grid{
  display:grid;grid-template-columns:1.5fr 1.7fr .85fr 1.1fr;
  gap:clamp(26px,3.4vw,54px);
  padding:clamp(46px,5vw,66px) 0 40px;
  border-bottom:1px solid var(--line-dark-2);
}
/* Eight services in one column runs far past everything beside it; two-up
   keeps the row roughly level without splitting the list under two headings
   that do not mean anything. */
.fs-list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(14px,1.6vw,26px)}
@media (max-width:1100px){ .fs-list{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .fs-list{grid-template-columns:1fr} }
.foot-brand .brand{color:#fff;margin-bottom:16px}
.foot-brand p{font-size:14.5px;line-height:1.65;color:#A7AFC6;max-width:33ch;margin-bottom:22px}

.foot-badges{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-badges li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#8E97AE}
.fb-ic{
  width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;
  font-size:11px;color:var(--violet-2);
  background:rgba(124,108,255,.12);border:1px solid rgba(155,140,255,.24);
}

/* The footer's phone line. Deliberately NOT a bordered chip: it sits directly
   under .foot-badges and picks up the same icon-tile-then-label rhythm, so the
   brand column reads as one list instead of a list with a button stuck to it. */
/* Scoped to .foot-grid deliberately. `.foot-grid a` sets display:block and is
   one specificity point heavier than a bare .foot-phone, so an unscoped rule
   loses and the icon stacks on top of the number instead of sitting beside it. */
.foot-grid .foot-phone{display:inline-flex;align-items:center;gap:11px;margin-top:22px;padding:0;transition:.18s;white-space:nowrap}
.fp-ic{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  color:var(--violet-2);
  background:rgba(124,108,255,.12);border:1px solid rgba(155,140,255,.24);
  transition:.18s;
}
.fp-txt{display:flex;flex-direction:column;line-height:1.25}
.fp-txt em{
  font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#7E879E;font-family:'IBM Plex Mono',monospace;
}
/* Tabular figures, and no monospace on the number itself: a mono space is a
   full character wide, which is what turned "+1 786 927 6123" into four
   widely separated groups. */
.foot-phone b{
  font-size:15.5px;font-weight:600;color:#EDF0FA;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.foot-phone:hover .fp-ic{color:#fff;background:rgba(124,108,255,.28);border-color:rgba(155,140,255,.55)}
.foot-phone:hover b{color:#fff}

/* Contact pair, used on the contact page. */
.foot-contact{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.fct{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:11px;
  font-size:13.5px;font-weight:500;color:#D7DCEC;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark-2);
  transition:.18s;
}
.fct svg{flex:none}
.fct:hover{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.fct-tel{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.fct-tel:hover{border-color:rgba(155,140,255,.5);background:rgba(124,108,255,.14)}
/* WhatsApp's own green, so the row is scannable at a glance. */
.fct-wa{color:#8FE3B0;border-color:rgba(37,211,102,.28);background:rgba(37,211,102,.08)}
.fct-wa:hover{color:#fff;background:rgba(37,211,102,.2);border-color:rgba(37,211,102,.5)}

/* The same pair on a light card. Every colour above assumes a dark ground, so
   the contact page needs its own set rather than an inherited one — reusing the
   dark values on white is how the last theme edit produced invisible text. */
.foot-contact.on-light .fct{color:var(--ink);background:#fff;border-color:var(--line)}
.foot-contact.on-light .fct:hover{
  color:var(--ink);background:var(--paper);border-color:var(--violet);
  box-shadow:0 4px 14px rgba(124,108,255,.14);
}
/* Darker than the brand green: on the tinted light chip the brand value
   measured 4.72, which clears AA but leaves nothing spare. */
.foot-contact.on-light .fct-wa{color:#065C2E;background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.4)}
.foot-contact.on-light .fct-wa:hover{color:#04431F;background:rgba(37,211,102,.18);border-color:#1FAF57;box-shadow:none}

/* ---------- floating WhatsApp ----------
   z-index 90 keeps it UNDER .site-head (100). The mobile menu is a fixed panel
   inside that header, so a higher value here would leave a green circle
   floating on top of an open menu. */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#fff;
  box-shadow:0 10px 26px rgba(37,211,102,.4),0 2px 8px rgba(0,0,0,.22);
  transition:transform .2s ease,box-shadow .2s ease;
}
.wa-float svg{position:relative;z-index:1;stroke-width:1.9}
.wa-float:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(37,211,102,.5),0 3px 10px rgba(0,0,0,.26);
}
.wa-float:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* A slow ring rather than a bouncing badge. It has to catch the eye once
   without competing with the page for the whole visit. */
.wa-ring{
  position:absolute;inset:0;border-radius:50%;background:#25D366;
  animation:waRing 2.8s ease-out infinite;
}
@keyframes waRing{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}

.wa-tip{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;padding:8px 13px;border-radius:10px;
  background:var(--night);color:#fff;font-size:13px;font-weight:500;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
}
.wa-float:hover .wa-tip,.wa-float:focus-visible .wa-tip{opacity:1;transform:translateY(-50%) translateX(0)}

@media (max-width:600px){
  .wa-float{right:16px;bottom:16px;width:52px;height:52px}
  /* No room beside a 52px circle on a 375px screen, and it would sit under the
     thumb anyway. */
  .wa-tip{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wa-ring{animation:none;opacity:0}
  .wa-float,.wa-tip{transition:none}
  .wa-float:hover{transform:none}
}

.foot-col h5{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  margin-bottom:16px;font-family:'IBM Plex Mono',monospace;font-weight:500;
}
.foot-col a:not(.btn){
  display:block;padding:6px 0;font-size:14.5px;color:#A7AFC6;
  transition:color .18s ease,transform .18s ease;
}
.foot-col a:not(.btn):hover{color:#fff;transform:translateX(3px)}
.foot-more{color:var(--violet-2)!important;font-weight:600;margin-top:6px}
.foot-more .ar{display:inline-block;transition:transform .2s}
.foot-more:hover .ar{transform:translateX(3px)}

.foot-start .fc-note{font-size:13.5px;color:#8E97AE;line-height:1.55;margin-bottom:16px}
.foot-start .btn{width:100%}
.fc-sign{display:block;margin-top:12px;font-size:13px;color:#8E97AE;transition:color .18s}
.fc-sign:hover{color:#fff}

/* ---- bottom bar ---- */
.foot-bot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:24px 0 30px;font-size:13.5px;flex-wrap:wrap;color:#8E97AE;
}
.fb-left{display:inline-flex;align-items:center;gap:10px}
.fb-left .usflag{flex:none;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.fb-built{font-size:12.5px;color:#7B849C}
/* The floating button is fixed to the viewport corner, so it sits on whatever
   is bottom-right at the end of the page — which was this line. */
@media (min-width:601px){ .foot-bot{padding-right:92px} }
/* Legal row, sitewide. Sits between the copyright and the build line. */
.fb-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.fb-legal a{font-size:13px;color:var(--night-ink-2);transition:color .18s ease}
.fb-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){ .site-foot{padding-bottom:78px} }

@media (max-width:1100px){
  .foot-grid{grid-template-columns:1.4fr 1.6fr .9fr;row-gap:40px}
  .foot-start{grid-column:span 3;max-width:460px}
}
@media (max-width:760px){
  .foot-strip-in{flex-wrap:wrap;gap:13px 14px}
  /* basis 0, not auto: with auto the copy claims a line of its own and strands
     the flag on the row above it. */
  .fs-copy{flex:1 1 0;min-width:0}
  .fs-cta{flex:1 1 100%;margin-left:0;width:100%;text-align:center}
  .fs-claims{padding-block:16px 22px;gap:8px}
  .fs-claims li{padding:11px 12px;gap:9px}
  .fsc-ic{width:26px;height:26px;border-radius:8px}
  .fsc-tx b{font-size:13.5px}
  .fsc-tx em{font-size:11px}
  .foot-grid{grid-template-columns:1fr 1fr;row-gap:36px}
  .foot-brand,.foot-start,.foot-services{grid-column:span 2;max-width:none}
  .foot-bot{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:460px){
  .foot-grid{grid-template-columns:1fr}
  .foot-brand,.foot-start,.foot-services{grid-column:span 1}
}

/* ============================================================
   STICKY SCAN BAR
   A floating card rather than a full-bleed slab: an edge-to-edge black strip
   across the viewport is the shape of an ad, and readers dismiss it on sight.
   Inset, rounded and shadowed, it reads as part of the page.
   z-index 95 sits above the WhatsApp float (90) and under .site-head (100), so
   the open mobile menu still covers it.
   ============================================================ */
.scanbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  padding:0 18px calc(18px + env(safe-area-inset-bottom,0px));
  pointer-events:none;                 /* only the card itself is clickable */
  transform:translateY(120%);
  transition:transform .5s cubic-bezier(.2,.9,.25,1);
}
.scanbar[hidden]{display:none}
.scanbar.is-up{transform:translateY(0)}

.scanbar-in{
  pointer-events:auto;
  position:relative;
  max-width:1060px;margin:0 auto;
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:18px;
  padding:14px 16px 14px 18px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--night-2),var(--night));
  border:1px solid var(--line-dark);
  box-shadow:0 24px 60px rgba(7,9,18,.42),0 4px 14px rgba(7,9,18,.28);
  overflow:hidden;
}
/* The one gradient touch, as a hairline. Anything larger competes with the
   button for the eye. */
.scanbar-in::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad);opacity:.9;
}

/* ---- mark ---- */
.scanbar-mark{
  position:relative;flex:none;
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(124,108,255,.16);
  border:1px solid rgba(124,108,255,.32);
  color:var(--violet-2);
}
.scanbar-mark svg{position:relative;z-index:1}
.scanbar-pulse{
  position:absolute;inset:-1px;border-radius:12px;
  border:1px solid var(--violet);
  animation:scanbarPulse 3.2s ease-out infinite;
}
@keyframes scanbarPulse{
  0%{transform:scale(1);opacity:.6}
  70%{transform:scale(1.28);opacity:0}
  100%{opacity:0}
}

/* ---- copy ---- */
.scanbar-copy{min-width:0;display:grid;gap:3px}
.scanbar-copy strong{
  display:block;color:#fff;font-weight:600;font-size:16px;letter-spacing:-.01em;line-height:1.25;
}
.scanbar-copy span{
  display:block;color:var(--night-ink-2);font-size:13.5px;line-height:1.4;
  /* Clipped rather than wrapped: a second line here turns a 76px toolbar into a
     90px banner, which is the difference between useful and intrusive. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---- form ---- */
.scanbar-form{
  position:relative;flex:none;
  display:flex;align-items:stretch;gap:8px;
}
.scanbar-form input{
  width:230px;min-width:0;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line-dark);
  background:rgba(255,255,255,.06);
  color:#fff;font-family:inherit;font-size:15px;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.scanbar-form input::placeholder{color:#767F9E}
.scanbar-form input:focus{
  outline:none;
  border-color:var(--violet);
  background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(124,108,255,.25);
}
.scanbar[data-state="error"] .scanbar-form input{border-color:#FF7A7A}

.scanbar-go{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border:0;border-radius:12px;
  background:var(--grad);color:#08111C;
  font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.scanbar-go:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(124,108,255,.4)}
.scanbar-go:focus-visible{outline:3px solid #fff;outline-offset:2px}
.scanbar-go-s{display:none}
.scanbar-go .ar{transition:transform .18s ease}
.scanbar-go:hover .ar{transform:translateX(3px)}
.scanbar[data-state="sending"] .scanbar-go{filter:saturate(.7);pointer-events:none}

/* The message takes the sub-line's place rather than floating above the card:
   anchored to the form it escaped the panel entirely and was clipped against the
   page. Swapping one line for another also means the bar cannot change height
   and shove the button out from under the cursor mid-click. */
.scanbar-err{
  display:none;margin:0;
  font-size:13px;line-height:1.4;color:#FF9A9A;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scanbar[data-state="error"] .scanbar-err{display:block}
.scanbar[data-state="error"] .scanbar-copy span{display:none}

/* ---- dismiss ---- */
.scanbar-x{
  flex:none;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  background:transparent;border:1px solid transparent;
  color:var(--night-ink-2);cursor:pointer;
  transition:color .18s ease,background .18s ease,border-color .18s ease;
}
.scanbar-x:hover{color:#fff;background:rgba(255,255,255,.08);border-color:var(--line-dark)}
.scanbar-x:focus-visible{outline:2px solid var(--violet-2);outline-offset:2px}

/* ---- the WhatsApp float gets out of the way ---- */
.wa-float{transition:transform .2s ease,box-shadow .2s ease,bottom .5s cubic-bezier(.2,.9,.25,1)}
body.has-scanbar .wa-float{bottom:calc(22px + var(--scanbar-h,96px))}

/* ---- responsive ---- */
@media (max-width:1080px){
  /* The sub-line is the first thing to go: the headline and the button already
     say what this is. The error line is exempt, it is never decoration. */
  .scanbar-copy span{display:none}
  .scanbar-form input{width:190px}
}
@media (max-width:860px){
  .scanbar{padding:0 12px calc(12px + env(safe-area-inset-bottom,0px))}
  .scanbar-in{
    grid-template-columns:1fr auto;
    grid-template-areas:"copy x" "form form";
    gap:12px;padding:14px;
  }
  .scanbar-mark{display:none}
  .scanbar-copy{grid-area:copy}
  .scanbar-copy strong{font-size:15px}
  /* 32px is a fiddly target on a phone; a mis-tap lands on nothing and the
     visitor jabs at it again. Still smaller than the primary action. */
  .scanbar-x{grid-area:x;align-self:start;width:40px;height:40px;margin:-4px -4px 0 0}
  .scanbar-form{grid-area:form}
  /* On a tablet the stacked row is 700px wide and the field stretched the whole
     way, which reads as a search page rather than a toolbar. */
  .scanbar-form{max-width:560px}
  .scanbar-form input{flex:1 1 auto;width:auto}
  body.has-scanbar .wa-float{bottom:calc(16px + var(--scanbar-h,140px))}
}
@media (max-width:400px){
  /* One notch down keeps the headline on a single line at 360px, which is the
     most common Android width there is. */
  .scanbar-copy strong{font-size:14px}
  .scanbar-go{padding:12px 14px;font-size:14px}
  .scanbar-form input{padding:12px}
}
@media (max-width:380px){
  /* Below this the field is the part that has to win: it is the one the visitor
     has to type into, and the button already reads as the action. */
  .scanbar-go-t{display:none}
  .scanbar-go-s{display:inline}
  .scanbar-go .ar{display:none}
  .scanbar-go{padding:12px 13px}
}

/* With the mobile menu open the bar is clutter behind it, and two dark panels
   on one screen compete. :has() keeps this in CSS rather than adding a body
   class to the nav script; a browser without :has() simply leaves the bar up,
   which is the behaviour that shipped. */
@media (max-width:900px){
  body:has(.nav.open) .scanbar{transform:translateY(120%)}
}

@media (prefers-reduced-motion:reduce){
  .scanbar{transition:none}
  .scanbar-pulse{animation:none;opacity:0}
  .scanbar-go,.scanbar-go .ar,.scanbar-err,.wa-float{transition:none}
  .scanbar-go:hover{transform:none}
}


/* ── whitespace between the last section and the footer CTA ──
   Two full section paddings were stacking: the content section ends with
   clamp(70px,9.5vw,128px) and the CTA section opens with the same again, so a
   reader finished the article and scrolled through 256px of nothing before the
   next thing appeared. The CTA is a self-contained dark card with its own
   generous inner padding, so the space above it is already accounted for. */
.sec-cta{padding-top:0}
/* An article ends on a sentence rather than a component, so it needs less room
   beneath it than a section full of cards does. */
.sec-post{padding-bottom:clamp(30px,4.2vw,52px)}


/* ── a dark section running straight into the CTA ──
   About ends on a full-bleed dark band, and the CTA that follows is a dark card
   on a light section. That put a pale stripe between two dark blocks, which
   reads as a mistake rather than a decision. When the CTA directly follows a
   night section the dark simply continues, and the card takes the same
   treatment the cards inside that section already use, so it still reads as a
   card rather than dissolving into the background. */
.sec.night + .sec-cta{background:var(--night)}
.sec.night + .sec-cta .cta-band{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
}


/* ═══════════ CTA: surfaces panel beside the copy ═══════════
   The closing CTA was a centred block of text. It now argues alongside a panel
   showing, per surface, the searches that surface rewards and what a citation
   looks like there — the depth argument, where the hero makes the breadth one. */
.cta-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,56px);align-items:center;text-align:left}
.cta-split .cta-copy h2{margin-top:18px}
.cta-split .cta-copy p{margin-left:0;margin-right:0;max-width:46ch}
.cta-split .btns{justify-content:flex-start}

.cta-demo{border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg,18px);
  background:rgba(255,255,255,.03);padding:14px;min-height:302px}

/* Tabs wrap rather than scroll: six names at this size fit two rows on a phone,
   and a horizontal scroller hides half the argument behind a gesture. */
.cta-demo-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.cta-demo-tab{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11.5px;
  padding:5px 10px;border-radius:99px;cursor:pointer;white-space:nowrap;
  border:1px solid rgba(255,255,255,.12);background:transparent;color:rgba(255,255,255,.62);
  transition:.16s}
.cta-demo-tab svg{opacity:.8}
.cta-demo-tab:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.cta-demo-tab.on{color:#0B0A1A;background:#fff;border-color:#fff;font-weight:600}
.cta-demo-tab.on svg{opacity:1}

.cta-demo-pan[hidden]{display:none}
.cta-demo-lab{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin:0 0 9px;display:flex;gap:8px;flex-wrap:wrap}
.cta-demo-lab span{color:rgba(255,255,255,.28);text-transform:none;letter-spacing:0}

.cta-demo-kws{list-style:none;margin:0 0 13px;padding:0;display:grid;gap:5px}
.cta-demo-kws li{display:flex;align-items:center;gap:9px;font-size:12.5px;line-height:1.45;
  color:rgba(255,255,255,.72);padding:7px 10px;border-radius:9px;
  border:1px solid transparent;transition:.2s}
.cta-demo-kws li i{width:5px;height:5px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.28)}
/* The active keyword is the one the panel beneath is answering. */
.cta-demo-kws li.on{color:#fff;background:rgba(124,108,255,.12);
  border-color:rgba(124,108,255,.34)}
.cta-demo-kws li.on i{background:var(--violet-2,#9B8CFF);
  box-shadow:0 0 0 3px rgba(155,140,255,.22)}

.cta-demo-out{border-top:1px dashed rgba(255,255,255,.13);padding-top:11px}
.cta-demo-out-lab{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.36);margin-bottom:6px}
.cta-demo-out p{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.78);margin:0;max-width:none}
.cta-demo-out mark{background:rgba(58,223,165,.16);color:#8CF0C8;padding:1px 5px;
  border-radius:5px;font-weight:600}
.cta-demo-out b{color:#fff;font-weight:600}

@media(max-width:900px){
  .cta-split{grid-template-columns:1fr;text-align:center}
  .cta-split .cta-copy p{margin-left:auto;margin-right:auto}
  .cta-split .btns{justify-content:center}
  /* Copy first on a phone: the panel is the evidence, the ask is the point. */
  .cta-split .cta-copy{order:-1}
  .cta-demo{min-height:0}
  .cta-demo-tabs{justify-content:center}
  .cta-demo-kws li{text-align:left}
  .cta-demo-lab{justify-content:center}
}

/* ═══════════ closing CTA: one slim bar ═══════════
   Replaced the tall split panel on 2026-10-07. Heading and one line on the
   left, the store field on the right, the six engines underneath, lit one
   after another. Stacks below 860px. */
.fcta{position:relative;isolation:isolate;overflow:hidden;border-radius:20px;
  padding:22px 22px 20px 30px;
  background:
    radial-gradient(380px 160px at 6% 0%,rgba(124,108,255,.22),transparent 72%),
    radial-gradient(300px 140px at 96% 110%,rgba(79,216,255,.10),transparent 70%),
    linear-gradient(180deg,#0D1022,#080A15);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 44px -32px rgba(18,14,60,.42);
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;row-gap:18px;align-items:center}
.fcta::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(155,140,255,.85) 30%,rgba(79,216,255,.7) 70%,transparent)}

.fcta-kick{display:inline-flex;align-items:center;gap:8px;margin-bottom:9px;
  font:500 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.fcta-dot{width:6px;height:6px;border-radius:50%;background:#3ADFA5;animation:fctaPulse 2.4s ease-out infinite}
@keyframes fctaPulse{0%{box-shadow:0 0 0 0 rgba(58,223,165,.45)}70%{box-shadow:0 0 0 7px rgba(58,223,165,0)}100%{box-shadow:0 0 0 0 rgba(58,223,165,0)}}

.fcta-h{margin:0 0 6px;font-family:'Unbounded',Inter,sans-serif;font-weight:600;
  font-size:clamp(19px,1.75vw,22px);line-height:1.2;letter-spacing:-.02em;color:#fff}
.fcta-sub{margin:0;font-size:14.5px;line-height:1.55;color:rgba(214,219,240,.62)}
.fcta-sub a{color:rgba(255,255,255,.86);text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);
  text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.fcta-sub a:hover{color:#fff;text-decoration-color:#fff}

.fcta-form{display:flex;align-items:center;gap:4px;width:430px;max-width:100%;padding:5px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);transition:border-color .2s,box-shadow .2s}
.fcta-form:focus-within{border-color:rgba(155,140,255,.55);box-shadow:0 0 0 4px rgba(124,108,255,.16)}
.fcta-ic{flex:none;margin-left:11px;color:rgba(255,255,255,.38);display:grid}
.fcta-form input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;color:#fff;
  font:500 14.5px/1.2 Inter,sans-serif;padding:11px 8px}
.fcta-form input::placeholder{color:rgba(255,255,255,.36)}
.fcta-btn{flex:none;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  padding:11px 16px;border-radius:8px;font:600 14px/1 Inter,sans-serif;color:#fff;background:#6E5CF6;
  box-shadow:none;transition:background .2s}
.fcta-btn:hover{background:#7F6FFF}
.fcta-btn .ar{transition:transform .2s}
.fcta-btn:hover .ar{transform:translateX(2px)}
.fcta-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

.fcta-eng{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;padding:16px 0 0;
  list-style:none;border-top:1px solid rgba(255,255,255,.07)}
.fcta-eng-lab{font:500 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-right:6px}
.fcta-chip{--d:0s;display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:99px;
  font:500 13px/1 Inter,sans-serif;color:rgba(255,255,255,.66);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
  animation:fctaScan 7.2s var(--d) infinite}
.fcta-chip svg{width:14px;height:14px;flex:none;animation:fctaIcon 7.2s var(--d) infinite}
@keyframes fctaScan{
  0%,16%,100%{color:rgba(255,255,255,.66);background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.09);box-shadow:none}
  3%,12%{color:#fff;background:rgba(124,108,255,.16);border-color:rgba(155,140,255,.6);box-shadow:0 0 18px -4px rgba(124,108,255,.65)}
}
@keyframes fctaIcon{0%,16%,100%{transform:none;color:inherit}3%,12%{transform:scale(1.12);color:#8CF0C8}}
@media(prefers-reduced-motion:reduce){.fcta-dot,.fcta-chip,.fcta-chip svg{animation:none}}

@media(max-width:860px){
  .fcta{grid-template-columns:1fr;text-align:center;padding:26px 20px;gap:18px}
  .fcta-form{margin:0 auto;width:100%;max-width:460px}
  .fcta-eng{justify-content:center}
  .fcta-eng-lab{flex-basis:100%;text-align:center;margin:0 0 2px}
}
@media(max-width:520px){
  .fcta-form{flex-wrap:wrap;padding:6px}
  .fcta-form input{flex:1 1 60%}
  .fcta-btn{width:100%;justify-content:center;padding:13px 16px}
}

/* Calendly's floating badge (its own markup and colours). Moved to the left,
   because the WhatsApp button owns the bottom right corner. */
.calendly-badge-widget{right:auto!important;left:22px!important;bottom:22px!important}
@media (max-width:560px){
  .calendly-badge-widget{left:14px!important;bottom:14px!important}
}
/* When the scan bar is up the badge rides above it, like the WhatsApp float. */
body.has-scanbar .calendly-badge-widget{bottom:calc(22px + var(--scanbar-h,96px))!important}
@media (max-width:560px){
  body.has-scanbar .calendly-badge-widget{bottom:calc(16px + var(--scanbar-h,140px))!important}
}