/* Feature pages (/ai-chat-bot, /cookie-consent-solution): a hero with a hands-on demo, the steps,
   and the parts only these pages need. Everything else comes from sections.css (section kit,
   alternating rows, coded illustrations, backdrops, reviews) and site.css (tokens, FAQ). */

/* ---------- Hero: copy on the left, a demo you can use on the right ---------- */
.fh{padding:calc(var(--hdr) + var(--rb-offset,0px) + clamp(28px,5vw,64px)) 0 clamp(56px,7vw,96px)}
.fh-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:center}
.fh-kick{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:6px 12px 6px 7px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:500 13.5px/1 var(--sans);color:var(--ink-2)}
.fh-kick i{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--tint);color:var(--brand-ink)}
.fh-kick svg{width:15px;height:15px}
.fh h1{margin:0;font:600 calc(clamp(36px,4.6vw,62px) * min(var(--u),1.15))/1.02 var(--display);letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.fh-sub{margin:20px 0 0;max-width:34em;font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:var(--muted);text-wrap:pretty}
.fh-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.fh-ctas .d-btn{height:48px;padding:0 22px;border-radius:12px;font-size:15px}
.fh-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:24px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink-2)}
.fh-trust li{display:inline-flex;align-items:center;gap:7px}
.fh-trust svg{width:16px;height:16px;color:var(--ok)}
.fh-demo{position:relative;aspect-ratio:1/1.02;border-radius:26px;overflow:hidden;container-type:inline-size;box-shadow:var(--lift-lg)}
.fh-demo-in{position:absolute;inset:0;font-size:clamp(9px,2.3cqw,14px);line-height:1.35;color:#1d1b26}
.fh-demo-in b,.fh-demo-in small,.fh-demo-in em{font-style:normal}
.fh-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;font-size:13px;color:var(--muted)}
.fh-note svg{width:15px;height:15px;color:var(--brand-ink)}

/* A sample website behind each demo (fixed colours: it is the customer's site) */
.sx{position:absolute;inset:7% 7% -4%;display:flex;flex-direction:column;border-radius:1em;background:#fdf1e6;color:#2a1a10;box-shadow:0 2.4em 4.4em -1.6em rgba(25,12,40,.55),0 0 0 1px rgba(0,0,0,.06);overflow:hidden}
.sx-bar{display:flex;align-items:center;gap:.5em;padding:.7em 1em;background:#fff8f1;border-bottom:1px solid #f1dfcf}
.sx-bar i{width:.65em;height:.65em;border-radius:50%;background:#ead6c5}
.sx-bar span{margin-left:.6em;padding:.35em .8em;border-radius:.5em;background:#fff;font-size:.85em;color:#9a7c66}
.sx-nav{display:flex;align-items:center;gap:1.4em;padding:1.1em 1.4em 0;font-size:.95em}
.sx-nav b{margin-right:auto;font:700 1.2em/1 var(--display);letter-spacing:-.02em}
.sx-nav em{color:#e2733a}
.sx-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:1.2em;align-items:center;padding:1.6em 1.4em}
.sx-tag{display:block;font-size:.78em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#b4592a}
.sx-h{display:block;margin-top:.5em;font:700 2.3em/1.02 var(--display);letter-spacing:-.035em}
.sx-p{display:block;margin-top:.7em;font-size:.95em;line-height:1.5;color:#6b4c38}
.sx-cta{display:inline-block;margin-top:1em;padding:.65em 1.1em;border-radius:999px;background:#e2733a;color:#fff;font-weight:600}
.sx-art{position:relative;height:11em;display:flex;justify-content:center;align-items:flex-end}

/* ---------- Chatbot demo ---------- */
.cb{position:absolute;right:4%;bottom:4%;width:min(64%,26em);display:flex;flex-direction:column;border-radius:1.2em;background:#fff;box-shadow:0 2em 4em -1.2em rgba(20,10,50,.55),0 0 0 1px rgba(20,10,50,.08);overflow:hidden}
.cb-head{display:flex;align-items:center;gap:.75em;padding:1em 1.1em;background:var(--cb-c,#5b3df5);color:#fff}
.cb-ava{position:relative;display:grid;place-items:center;flex:none;width:2.4em;height:2.4em;border-radius:50%;background:#fff;color:var(--cb-c,#5b3df5);font:700 1em/1 var(--display)}
.cb-ava::after{content:"";position:absolute;right:-.05em;bottom:-.05em;width:.7em;height:.7em;border-radius:50%;background:#3fd08f;box-shadow:0 0 0 .18em var(--cb-c,#5b3df5)}
.cb-head b{display:block;font-size:1.05em;font-weight:600}
.cb-head small{display:block;margin-top:.15em;font-size:.82em;opacity:.85}
.cb-msgs{display:flex;flex-direction:column;gap:.6em;height:17em;padding:1em 1em .4em;overflow-y:auto;scroll-behavior:smooth;background:#fafafb}
.cb-msg{max-width:86%;padding:.65em .85em;border-radius:1em;font-size:.95em;line-height:1.45;animation:cb-in .35s var(--ease) both}
.cb-msg.ai{align-self:flex-start;border-bottom-left-radius:.3em;background:#fff;color:#1d1b26;box-shadow:0 0 0 1px #ececf1}
.cb-msg.me{align-self:flex-end;border-bottom-right-radius:.3em;background:var(--cb-c,#5b3df5);color:#fff}
.cb-msg.sys{align-self:center;max-width:none;padding:.35em .8em;border-radius:999px;background:#eef9f2;color:#15803d;font-size:.82em}
.cb-src{display:inline-flex;align-items:center;gap:.35em;margin-top:.5em;padding:.25em .55em;border-radius:.4em;background:#f2f0ff;color:#5b3df5;font-size:.8em;font-weight:500}
.cb-src svg{width:.95em;height:.95em}
.cb-typing{display:inline-flex;gap:.25em;padding:.75em .9em}
.cb-typing i{width:.45em;height:.45em;border-radius:50%;background:#b8b4c8;animation:cb-dot 1s infinite}
.cb-typing i:nth-child(2){animation-delay:.15s}
.cb-typing i:nth-child(3){animation-delay:.3s}
.cb-chips{display:flex;flex-wrap:wrap;gap:.4em;padding:.5em 1em .8em;background:#fafafb}
.cb-chip{padding:.5em .8em;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #dcd8f0;font:500 .88em/1.1 var(--sans);color:#3b2fb0;cursor:pointer;transition:background .2s,box-shadow .2s,transform .25s var(--spring)}
.cb-chip:hover{background:#f2f0ff;box-shadow:inset 0 0 0 1px #b9b0f5;transform:translateY(-1px)}
.cb-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cb-chip[disabled]{opacity:.45;cursor:default;transform:none}
.cb-chip.go{background:var(--cb-c,#5b3df5);color:#fff;box-shadow:none}
.cb-input{display:flex;align-items:center;gap:.6em;padding:.7em .8em .7em 1.1em;border-top:1px solid #efeff3;font-size:.92em;color:#9c98ac}
.cb-input span{flex:1}
.cb-input i{display:grid;place-items:center;width:2em;height:2em;border-radius:.6em;background:var(--cb-c,#5b3df5);color:#fff}
.cb-input svg{width:1em;height:1em}
.cb-brand{padding:0 1em .6em;font-size:.72em;color:#a8a4b8;text-align:center}
@keyframes cb-in{from{opacity:0;translate:0 .5em}}
@keyframes cb-dot{0%,60%,100%{opacity:.35;translate:0 0}30%{opacity:1;translate:0 -.25em}}
.cb-swatches{position:absolute;left:4%;top:4%;display:flex;align-items:center;gap:.45em;padding:.45em .6em;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 .6em 1.4em -.6em rgba(20,10,50,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cb-swatches small{padding:0 .3em 0 .2em;font-size:.82em;font-weight:500;color:#4a4560}
.cb-sw{width:1.5em;height:1.5em;padding:0;border:0;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);cursor:pointer;transition:transform .25s var(--spring),box-shadow .2s}
.cb-sw:hover{transform:scale(1.12)}
.cb-sw[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sw)}
.cb-sw:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ---------- Cookie banner demo ---------- */
.ck-ctrl{position:absolute;left:4%;right:4%;top:3.6%;z-index:3;display:flex;flex-wrap:wrap;gap:.5em}
.ck-seg{display:inline-flex;padding:.25em;border-radius:.8em;background:rgba(255,255,255,.88);box-shadow:0 .6em 1.4em -.6em rgba(20,10,50,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ck-seg button{padding:.45em .75em;border:0;border-radius:.6em;background:none;font:500 .88em/1 var(--sans);color:#5d5870;cursor:pointer;transition:background .2s,color .2s}
.ck-seg button[aria-pressed="true"]{background:#1d1b26;color:#fff}
.ck-seg button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ck-sws{align-items:center;gap:.65em;padding:.25em .65em}
.ck-sws .cb-sw{flex:none;width:1.35em;height:1.35em;padding:0;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.ck-sws .cb-sw[aria-pressed="true"]{background:var(--sw);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--sw)}
.ck-demo .sx{inset:15% 7% -4%}
.ck-banner{position:absolute;z-index:2;display:grid;gap:.7em;padding:1.1em 1.2em;background:#fff;color:#1d1b26;box-shadow:0 1.6em 3.4em -1em rgba(20,10,50,.5),0 0 0 1px rgba(20,10,50,.08);transition:opacity .35s var(--ease),translate .45s var(--ease),left .45s var(--ease),right .45s var(--ease),bottom .45s var(--ease),width .45s var(--ease),border-radius .45s}
.ck-banner b{display:flex;align-items:center;gap:.45em;font-size:1.05em;font-weight:600}
.ck-banner b svg{width:1.1em;height:1.1em;color:var(--ck-c,#5b3df5)}
.ck-banner p{margin:0;font-size:.9em;line-height:1.5;color:#5d5870}
.ck-btns{display:flex;flex-wrap:wrap;gap:.45em}
.ck-btns button{flex:1 1 auto;padding:.65em .8em;border:0;border-radius:.6em;background:#f1f0f5;font:600 .88em/1 var(--sans);color:#1d1b26;cursor:pointer;white-space:nowrap;transition:filter .2s,transform .2s var(--spring)}
.ck-btns button:hover{filter:brightness(.96);transform:translateY(-1px)}
.ck-btns button:focus-visible{outline:2px solid var(--ck-c,#5b3df5);outline-offset:2px}
.ck-btns .pri{background:var(--ck-c,#5b3df5);color:#fff}
.ck-banner[data-layout="bar"]{left:7%;right:7%;bottom:4%;border-radius:.9em}
.ck-banner[data-layout="box"]{left:10%;bottom:6%;width:min(58%,22em);border-radius:1em}
.ck-banner[data-layout="popup"]{left:50%;bottom:22%;width:min(70%,24em);translate:-50% 0;border-radius:1.1em}
.ck-demo[data-layout="popup"] .sx::after{content:"";position:absolute;inset:0;background:rgba(20,10,30,.35)}
.ck-banner .ck-mode{display:none}
.ck-demo[data-mode="gdpr"] .ck-mode.gdpr,.ck-demo[data-mode="ccpa"] .ck-mode.ccpa,.ck-demo[data-mode="strict"] .ck-mode.strict{display:contents}
.ck-demo.decided .ck-banner{opacity:0;pointer-events:none;translate:0 1em}
.ck-demo.decided[data-layout="popup"] .ck-banner{translate:-50% 1em}
.ck-demo.decided .sx::after{opacity:0}
.ck-fab{position:absolute;left:10%;bottom:6%;z-index:2;display:grid;place-items:center;width:2.6em;height:2.6em;border:0;border-radius:50%;background:#fff;color:var(--ck-c,#5b3df5);box-shadow:0 .8em 1.6em -.6em rgba(20,10,50,.5),0 0 0 1px rgba(20,10,50,.08);cursor:pointer;opacity:0;scale:.6;pointer-events:none;transition:opacity .3s,scale .4s var(--spring)}
.ck-fab svg{width:1.3em;height:1.3em}
.ck-demo.decided .ck-fab{opacity:1;scale:1;pointer-events:auto}
.ck-scripts{position:absolute;right:9%;top:24%;z-index:1;display:grid;gap:.35em;width:min(46%,17em);padding:.9em;border-radius:1em;background:rgba(255,255,255,.92);box-shadow:0 1.2em 2.4em -1em rgba(20,10,50,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ck-scripts>small{margin-bottom:.2em;font-size:.78em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8a85a0}
.ck-row{display:flex;align-items:center;justify-content:space-between;gap:.6em;font-size:.88em;color:#1d1b26}
.ck-row em{display:inline-flex;align-items:center;gap:.3em;padding:.2em .5em;border-radius:999px;font-size:.88em;font-weight:500;transition:background .3s,color .3s}
.ck-row em::before{content:"";width:.45em;height:.45em;border-radius:50%;background:currentColor}
.ck-row em.held{background:#fff4e5;color:#b45309}
.ck-row em.on{background:#e7f8ee;color:#15803d}

/* Icons are inline here (the homepage fills its icon slots with script) */
.h-checks svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--ok)}
.h-ic svg{width:21px;height:21px}
.d-btn svg{width:17px;height:17px;transition:transform .3s var(--spring)}
.d-btn:hover svg{transform:translateX(2px)}
.f-rel a,.h-who li{text-decoration:none}

/* ---------- Steps ---------- */
.fs-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;counter-reset:st}
.fs-steps li{position:relative;padding:24px 22px 26px;border-radius:20px;background:var(--paper);box-shadow:var(--lift);transition:transform .35s var(--spring)}
.fs-steps li:hover{transform:translateY(-3px)}
.fs-steps li::before{counter-increment:st;content:"0" counter(st);display:block;margin-bottom:18px;font:600 13px/1 var(--sans);letter-spacing:.06em;color:var(--brand-ink)}
.fs-steps li:not(:last-child)::after{content:"";position:absolute;top:31px;left:52px;right:-6px;height:1px;background:linear-gradient(90deg,var(--line-3),transparent)}
.fs-steps h3{margin:0;font:600 18px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}
.fs-steps p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* ---------- Closing call to action ---------- */
.f-end{padding:clamp(64px,8vw,104px) 0}
.f-end-in{position:relative;display:grid;justify-items:center;gap:16px;padding:clamp(40px,6vw,72px) clamp(20px,4vw,48px);border-radius:28px;overflow:hidden;text-align:center;container-type:inline-size}
.f-end-in>*{position:relative}
.f-end h2{max-width:18em;margin:0;font:600 calc(clamp(28px,3.4vw,46px) * min(var(--u),1.15))/1.06 var(--display);letter-spacing:-.035em;color:#fff;text-wrap:balance}
.f-end p{max-width:36em;margin:0;font-size:clamp(15px,1.25vw,17px);line-height:1.6;color:rgba(255,255,255,.88)}
.f-end .d-btn{height:48px;padding:0 24px;border-radius:12px;background:#fff;color:#141416;font-size:15px}
.f-end .d-btn:hover{box-shadow:0 0 0 5px rgba(255,255,255,.25)}
.f-end small{font-size:13px;color:rgba(255,255,255,.8)}

/* Deep backdrop for white text: the same soft fields and grain, at night */
.st-deep{background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.08) 36%,transparent 50%),radial-gradient(60% 60% at 88% 0%,#7a5cff 0%,rgba(122,92,255,0) 70%),radial-gradient(70% 70% at 0% 100%,#2f6fe0 0%,rgba(47,111,224,0) 70%),radial-gradient(50% 50% at 60% 70%,#c04fd0 0%,rgba(192,79,208,0) 70%),#1b1546}

.st-deep::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") 0 0/180px;opacity:.3;mix-blend-mode:soft-light;pointer-events:none}

/* ---------- Related tools ---------- */
.f-rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.f-rel a{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px;border-radius:16px;background:var(--paper);box-shadow:var(--lift);color:var(--ink);transition:transform .3s var(--spring),box-shadow .3s}
.f-rel a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line-3),var(--lift)}
.f-rel b{font:600 16px/1.3 var(--display);letter-spacing:-.015em}
.f-rel span{font-size:14px;line-height:1.5;color:var(--muted)}

/* ---------- Coded illustrations for the feature rows ---------- */
/* chatbot: appearance */
.fx-form{left:7%;top:7%;width:60%;padding:1.4em;display:grid;gap:.95em}
.fx-l{display:block;margin-bottom:.4em;font-size:.95em;font-weight:600;color:var(--ink-2)}
.fx-in{display:flex;align-items:center;gap:.6em;padding:.65em .8em;border-radius:.6em;box-shadow:inset 0 0 0 1px var(--line-3);font-size:1em;color:var(--ink)}
.fx-in.area{min-height:3.6em;align-items:flex-start;color:var(--ink-2)}
.fx-ava{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:#5b3df5;color:#fff;font:700 .95em/1 var(--display)}
.fx-chips{display:flex;flex-wrap:wrap;gap:.4em}
.fx-chips span{padding:.4em .7em;border-radius:999px;background:var(--fill);font-size:.88em;color:var(--ink-2)}
.fx-sws{display:flex;gap:.45em}
.fx-sws i{width:1.6em;height:1.6em;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.fx-sws i.on{box-shadow:0 0 0 .14em var(--paper),0 0 0 .28em var(--c)}
.fx-pos{display:inline-flex;padding:.22em;border-radius:.6em;background:var(--fill)}
.fx-pos span{padding:.4em .8em;border-radius:.45em;font-size:.9em;color:var(--muted)}
.fx-pos span.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.fx-mini{position:absolute;right:6%;bottom:8%;width:42%;border-radius:1em;background:#fff;overflow:hidden;box-shadow:0 1.6em 3em -1em rgba(20,10,50,.5)}
.fx-mini .cb-head{padding:.8em .9em}
.fx-mini .cb-msgs{height:auto;gap:.45em;padding:.8em}
.fx-mini .cb-msg{font-size:.85em;animation:none}
.fx-mini .cb-chips{padding:.2em .8em .8em}
.fx-mini .cb-chips span{padding:.4em .65em;border-radius:999px;box-shadow:inset 0 0 0 1px #dcd8f0;font-size:.78em;color:#3b2fb0}
/* chatbot: training sources */
.fx-src{display:flex;align-items:center;gap:.9em;padding:.9em 0;border-bottom:1px solid var(--line)}
.fx-src:last-of-type{border-bottom:0}
.fx-ic{display:grid;place-items:center;flex:none;width:2.4em;height:2.4em;border-radius:.65em;background:var(--tint);color:var(--brand-ink)}
.fx-ic svg{width:1.25em;height:1.25em}
.fx-src b{display:block;font-size:1.02em;font-weight:600}
.fx-src small{display:block;margin-top:.15em;font-size:.88em;color:var(--muted)}
.fx-src em{margin-left:auto;padding:.25em .55em;border-radius:.4em;background:var(--ok-bg);color:var(--ok-ink);font-size:.82em;font-weight:500;white-space:nowrap}
.fx-tog{position:relative;margin-left:auto;flex:none;width:2.4em;height:1.4em;border-radius:999px;background:var(--brand)}
.fx-tog::after{content:"";position:absolute;right:.2em;top:.2em;width:1em;height:1em;border-radius:50%;background:#fff}
.fx-tog.off{background:var(--line-3)}
.fx-tog.off::after{right:auto;left:.2em}
.fx-tone{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-top:.8em;padding-top:.9em;border-top:1px solid var(--line);font-size:.95em;font-weight:600;color:var(--ink-2)}
/* install: tabs and a snippet */
.fx-tabs{display:flex;gap:.3em;padding:.3em;border-radius:.7em;background:var(--fill)}
.fx-tabs span{flex:1;padding:.5em .4em;border-radius:.5em;font-size:.9em;text-align:center;color:var(--muted)}
.fx-tabs span.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.fx-code{display:block;margin-top:1em;padding:1em 1.1em;border-radius:.7em;background:#17161d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:#d6d3e6;font:500 .9em/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;overflow:hidden}
.fx-code .t{color:#9f8cff}.fx-code .a{color:#7cd4b0}.fx-code .s{color:#f5c27a}
.fx-copy{display:inline-flex;align-items:center;gap:.4em;margin-top:.8em;padding:.5em .85em;border-radius:.55em;background:var(--ink);color:var(--bg);font-size:.88em;font-weight:500}
.fx-copy svg{width:1em;height:1em}
.fx-site{display:flex;align-items:center;gap:.8em;margin-top:.9em;padding:.8em .9em;border-radius:.7em;box-shadow:inset 0 0 0 1px var(--line)}
.fx-site b{font-weight:600}
.fx-site small{display:block;font-size:.85em;color:var(--muted)}
/* inbox */
.fx-filt{display:flex;gap:.35em;margin-top:1em}
.fx-filt span{padding:.45em .75em;border-radius:999px;font-size:.88em;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.fx-filt span.on{background:var(--ink);color:var(--bg);box-shadow:none}
.fx-conv{display:flex;align-items:center;gap:.8em;padding:.85em .2em;border-bottom:1px solid var(--line)}
.fx-who{display:grid;place-items:center;flex:none;width:2.3em;height:2.3em;border-radius:50%;background:var(--c,#eae6ff);color:#2d2a3a;font:600 .85em/1 var(--sans)}
.fx-cm{display:block;min-width:0;flex:1}
.fx-conv b{display:flex;justify-content:space-between;gap:.5em;font-size:.98em;font-weight:600}
.fx-conv b small{font-weight:400;color:var(--faint)}
.fx-cm>span{display:block;margin-top:.15em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.9em;color:var(--muted)}
.fx-tag{flex:none;padding:.2em .5em;border-radius:.4em;font-size:.78em;font-weight:500}
.fx-tag.ai{background:#f2f0ff;color:#5b3df5}
.fx-tag.you{background:#fff4e5;color:#b45309}
.fx-tag.done{background:var(--ok-bg);color:var(--ok-ink)}
/* cookie: scan results */
.fx-scan{display:flex;align-items:center;gap:.9em;padding:.9em 1em;border-radius:.8em;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.fx-scan b{display:block;font-weight:600}
.fx-scan small{display:block;margin-top:.15em;font-size:.88em;color:var(--muted)}
.fx-prog{flex:1;height:.45em;margin-left:.5em;border-radius:999px;background:var(--line);overflow:hidden}
.fx-prog i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--ok);transform-origin:0 50%}
.fx-cat{display:inline-block;padding:.2em .5em;border-radius:.4em;font-size:.85em;font-weight:500}
.fx-cat.an{background:#eef2ff;color:#4338ca}.fx-cat.mkt{background:#fdf2f8;color:#be185d}.fx-cat.fn{background:#ecfeff;color:#0e7490}.fx-cat.es{background:var(--fill);color:var(--ink-2)}
/* cookie: rules */
.fx-rule{display:flex;align-items:center;gap:.8em;padding:.85em 0;border-bottom:1px solid var(--line);font-size:1em}
.fx-rule b{font-weight:600}
.fx-rule small{display:block;margin-top:.15em;font-size:.88em;color:var(--muted)}
.fx-regions{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.5em}
.fx-regions span{padding:.35em .65em;border-radius:999px;background:var(--tint);color:var(--brand-ink);font-size:.85em;font-weight:500}
.fx-path{display:inline-block;padding:.2em .45em;border-radius:.35em;background:var(--fill);font:500 .85em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2)}
/* cookie: records */
.fx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;margin-top:1em}
.fx-stats span{padding:.8em .7em;border-radius:.7em;box-shadow:inset 0 0 0 1px var(--line)}
.fx-stats b{display:block;font:600 1.5em/1 var(--sans);letter-spacing:-.02em}
.fx-stats small{display:block;margin-top:.35em;font-size:.82em;color:var(--muted)}
.fx-pad{padding:1.6em calc(9cqw + 1.6em) 0 1.6em}

/* Motion for the illustrations (only where the reveal runs) */
.h-rv-on .h-rv.in .fx-prog i{animation:mk-grow-x 1.6s var(--ease) .3s backwards}
.h-rv-on .h-rv.in .fx-conv,.h-rv-on .h-rv.in .fx-src,.h-rv-on .h-rv.in .fx-rule{animation:mk-rise .5s var(--ease) calc(.15s + var(--i,0) * 90ms) backwards}
@keyframes mk-grow-x{from{transform:scaleX(.05)}}

@media (max-width:980px){
  .fh-in{grid-template-columns:1fr}
  .fh-demo{max-width:560px;width:100%;justify-self:center}
  .fs-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fs-steps li:not(:last-child)::after{display:none}
  .f-rel{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .fs-steps,.f-rel{grid-template-columns:1fr}
  .fh-ctas .d-btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .cb-msg,.cb-typing i{animation:none}
  .ck-banner,.ck-fab,.cb-chip,.fs-steps li,.f-rel a{transition:none}
}