/* KLIKER marketing site — design system derived from the agreed sci-fi HUD template.
   Aesthetic kept, aggression removed: no boot intro, no cursor effects. One scoped
   glitch exists by owner decision (2026-08-24): the reporting-spectrum decode, below.
   All motion honors prefers-reduced-motion. Content is never hidden without html.js. */

/* ---------- tokens ---------- */
:root{
  /* palette sampled from the live KLIKER app: primary #0379b2, logo #1f92d3,
     chart light #75c2e2, chart red #d44c55 — dark theme built on the same hue */
  --bg:#041d2c; --bg-2:#06283c;
  --panel:rgba(9,49,74,.5); --panel-2:rgba(6,36,56,.8);
  --line:rgba(117,194,226,.16); --line-2:rgba(117,194,226,.34);
  --cyan:#1f9ad8; --cyan-2:#8fd3f2; --violet:#0379b2;
  --green:#38c98b; --red:#dd4f59; --amber:#f5b83d;
  /* Fourth hero-diagram lane (telco markets → AI over MCP). Sampled from the owner's
     reference board, 2026-09-03; used by the diagram only, not by page chrome. */
  --mcp:#9b8cf7;
  --txt:#d6e9f7; --muted:#8fb0c6; --white:#eef7fd;
  /* Two voices, 2026-09-04. Exo is a display face; it was carrying headings and body
     text both, so a heading had nothing to be louder with and a paragraph nothing to
     be easier to read with. Exo keeps the headings, the wordmark-ish labels and the
     buttons — the places that hold the link to the application. Inter (already
     self-hosted, 400/500/600) takes running text. */
  --f-display:"Exo","Inter",system-ui,sans-serif;
  --f-head:"Exo","Inter",system-ui,sans-serif;
  --f-body:"Inter","Exo",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --nav-h:70px; --container:1280px; --hero-container:1400px;
  /* 8-px spacing scale — replaces the three ad-hoc margin utilities this file
     used to reach for whenever a block needed air. */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px;
  /* Side gutter. Widened 2026-09-04: at 22px on a 1440px container the text started
     22px from the edge of the screen, which is an application margin, not a marketing
     one. Fluid, so a phone keeps a usable gutter and a desktop gets real margins. */
  --pad:clamp(20px,3.2vw,56px);
  --r:12px; --r-lg:18px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  font-family:var(--f-body);background:var(--bg);color:var(--txt);line-height:1.62;font-size:17px;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1000px 560px at 82% -8%,rgba(3,121,178,.20),transparent 60%),
    radial-gradient(900px 520px at 8% 4%,rgba(31,154,216,.10),transparent 60%);
  background-attachment:fixed;
}
/* faint scanline texture — static, decorative */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(142,211,240,.5) 3px 4px);
}
img,svg,canvas{max-width:100%;display:block}
a{color:var(--cyan-2)}
a:hover{color:var(--white)}
ul[class],ol[class]{list-style:none}
strong{color:var(--white)}
:focus-visible{outline:2px solid var(--cyan-2);outline-offset:3px;border-radius:4px}
.no-scroll{overflow:hidden}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--cyan);color:#03121a;font-family:var(--f-mono);
  font-size:13px;font-weight:700;padding:10px 16px;border-radius:8px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* ---------- type ---------- */
h1,h2,h3,h4{color:var(--white);line-height:1.15;text-wrap:balance}
/* Scale raised 2026-09-04. Exo tightens up well at display sizes, and at 54px the old
   h1 was sized like a heading rather than like the first thing you see. Tracking goes
   negative as the size goes up — at 80px the default spacing reads loose. */
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,5.4vw,64px);letter-spacing:-.02em}
h2{font-family:var(--f-display);font-weight:600;font-size:clamp(27px,3.8vw,50px);letter-spacing:-.02em}
h3{font-family:var(--f-head);font-weight:600;font-size:21px}
h4{font-family:var(--f-head);font-weight:600;font-size:17px}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--amber);box-shadow:0 0 8px rgba(245,184,61,.8)}
.lede{font-size:clamp(17px,1.6vw,19.5px);color:var(--muted);max-width:62ch}
/* Measure. Running text stops at ~72 characters wherever its container would let it
   run wider; inside a card the card is already narrower, so this changes nothing there. */
.prose p,.sec-head p,.split p,.answer p{max-width:72ch}
.center p,.center .lede{margin-left:auto;margin-right:auto}
.mono{font-family:var(--f-mono)}
.small{font-size:14px;color:var(--muted)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:100;height:var(--nav-h);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.site-head.stuck{background:rgba(4,8,18,.9);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.head-in{display:flex;align-items:center;gap:22px;height:var(--nav-h)}
.brand{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:.14em;color:var(--white);text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;margin-right:auto}
.brand-mark{width:12px;height:12px;background:var(--cyan);box-shadow:0 0 12px rgba(31,154,216,.9);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.nav-list{display:flex;gap:4px;align-items:center}
.has-sub{position:relative}
.nav-btn,.nav-link{font-family:var(--f-head);font-size:14.5px;color:var(--txt);background:none;border:0;cursor:pointer;
  padding:10px 13px;border-radius:8px;text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:color .2s,background .2s}
.nav-btn::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .2s}
.nav-btn[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-1px)}
.nav-btn:hover,.nav-link:hover,.nav-btn[aria-expanded="true"]{color:var(--white);background:rgba(31,154,216,.08)}
/* Dropdown panel. Opacity raised from --panel-2 (.8) to .93 and blur from 14px to
   24px on 2026-08-24: over the HUD gradients and scanlines the old value let the
   page read through the menu. Value is set here, not on --panel-2, because the
   .answer block shares that token and must stay lighter. */
.sub{position:absolute;top:calc(100% + 8px);left:0;min-width:280px;background:rgba(6,36,56,.93);
  backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid var(--line-2);border-radius:var(--r);padding:8px;display:none;box-shadow:0 24px 50px -18px rgba(0,0,0,.7)}
/* Where backdrop-filter is unavailable or switched off, drop the translucency
   altogether rather than leaving legible page content behind the menu. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sub{background:#06283c}
}
.sub.sub-right{left:auto;right:0}
.nav-btn[aria-expanded="true"] + .sub{display:block}
/* A fine pointer also opens the menu on hover; site.js keeps aria-expanded in step so
   assistive tech is never told "collapsed" over a menu that is on screen. Coarse
   pointers stay click-only, where a hover rule swallows the first tap. The ::before
   bridges the 8px gap under the button — without it the menu closes while the pointer
   is still travelling towards it. */
@media (hover:hover) and (pointer:fine){
  .has-sub:hover > .sub{display:block}
  .sub::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
}
.sub a{display:block;padding:10px 12px;border-radius:8px;color:var(--txt);text-decoration:none;font-size:14.5px}
.sub a:hover{background:rgba(31,154,216,.1);color:var(--white)}
.sub a[aria-current="page"]{color:var(--cyan-2)}
.head-cta{display:flex;align-items:center;gap:12px}
.login-btn{color:var(--muted)}
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:8px;width:44px;height:44px;flex:none;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:10px;right:10px;height:2px;background:var(--cyan-2)}
.burger span{top:21px}
.burger span::before,.burger span::after{left:0;right:0}
.burger span::before{top:-6px}
.burger span::after{top:6px}

/* ---------- drawer (mobile menu dialog) ---------- */
.drawer{position:fixed;inset:0;z-index:150;background:rgba(3,6,14,.72)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,92vw);background:var(--bg-2);
  border-left:1px solid var(--line-2);padding:20px;overflow-y:auto}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.drawer-close{background:none;border:1px solid var(--line-2);border-radius:8px;color:var(--cyan-2);width:38px;height:38px;
  font-size:20px;cursor:pointer;line-height:1}
.drawer-group{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
  margin:18px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.drawer a{display:block;padding:9px 4px;color:var(--txt);text-decoration:none;font-size:15.5px}
.drawer a:hover{color:var(--cyan-2)}
.drawer .btn{margin-top:20px;width:100%;justify-content:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-head);font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:10px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:.25s var(--ease)}
.btn-primary{background:var(--cyan);color:#03121a;box-shadow:0 0 22px rgba(31,154,216,.28)}
.btn-primary:hover{background:var(--cyan-2);color:#03121a;box-shadow:0 0 30px rgba(31,154,216,.45);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2);color:var(--txt)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--white);background:rgba(31,154,216,.07)}
.btn.is-loading{opacity:.7;pointer-events:none}

/* ---------- sections ---------- */
/* Fluid section rhythm, 2026-09-04. A fixed 88px behaved as a large gap on a phone and
   a small one on a wide screen, and the page read as arrhythmic either way. The figure
   is per side and consecutive sections add up, so 48-80 here is the 96-160px that
   actually lands between two sections. */
.sec{padding:clamp(48px,5vw,80px) 0}
/* The first section after the hero would otherwise carry the hero's bottom padding and
   its own on top of it — the gap that read as "the page has ended". */
.hero + .sec,
.page-hero + .sec{padding-top:clamp(28px,3vw,48px)}
.sec-alt{background:linear-gradient(180deg,transparent,rgba(10,18,36,.5) 12%,rgba(10,18,36,.5) 88%,transparent)}
.sec-head{max-width:840px;margin-bottom:clamp(28px,3.4vw,44px)}
.sec-head .lede{margin-top:12px}
.center{text-align:center}
.center .sec-head{margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}
.center .lede{margin-left:auto;margin-right:auto}

/* ---------- HUD panel (signature) ---------- */
.hud{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
/* Corner brackets are a signature, not a rule — 2026-09-04. They used to sit on every
   .hud, which on the home page meant 41 identical frames and no way for the eye to tell
   a section apart from a card inside it. They now mark the two things worth marking:
   a real screenshot of the product, and the page's answer block. `.sig` opts any other
   block in deliberately. */
.hud.ui-frame::before,.hud.ui-frame::after,
.hud.answer::before,.hud.answer::after,
.hud.sig::before,.hud.sig::after{content:"";position:absolute;width:16px;height:16px;border-color:var(--cyan);border-style:solid;opacity:.85}
.hud.ui-frame::before,.hud.answer::before,.hud.sig::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:2px 0 0 0}
.hud.ui-frame::after,.hud.answer::after,.hud.sig::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 2px 0}
.hud-tag{position:absolute;top:-9px;left:22px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);background:var(--bg);padding:0 8px}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(44px,5.5vw,76px) 0 clamp(44px,5vw,72px);overflow:hidden}
/* The home page opener carries the whole message; it gets the largest setting on the
   site and the tightest tracking. Subpage heroes stay a step down — see .page-hero. */
.hero h1{font-size:clamp(38px,6.1vw,80px);line-height:1.0;letter-spacing:-.035em;max-width:15ch}
/* Constellation field. Moved out of the hero on 2026-08-24: it is now one fixed,
   viewport-sized canvas behind every page, created by JS so no page needs markup.
   z-index 0 keeps it above section backgrounds but below .wrap (z-index 2), so it
   never sits on top of text. The old .hero-net wrapper carried opacity .55; that
   factor is folded into the alpha values in site.js instead. */
#net{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero h1{margin:6px 0 18px}
.hero .lede{margin-bottom:28px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.trust-note{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:baseline}
.trust-note::before{content:"//";color:var(--cyan)}

/* ---------- hero: wide layout + capability and reference bars ----------
   The hero container is widened past --container because the two bars below it need a
   line long enough to read as a strip rather than as a wrapped list. Every other section
   keeps the normal measure, so this does not become a site-wide layout change. */
.hero-wide > .wrap{max-width:var(--hero-container)}
.hero-bars{margin-top:46px;display:grid;gap:18px}
/* The hero body runs to --hero-container so the headline and the diagram get the extra
   room. The two marquees are not hero furniture though — they are content, and a strip
   that scrolls forever reads as loose if it starts outside the column everything else
   sits in. So they take --container, which lines them up with the proof strip directly
   below and with every section on the site. Beats --hero-container on specificity. */
.hero-wide > .wrap.hero-bars{max-width:var(--container)}

/* USP bar. Rendered from content-data.js so what it advertises is governed in one place,
   not typed into the markup. The scroll is a CSS marquee over a track JS duplicates;
   under reduced motion JS skips the duplication and the track simply wraps. */
/* No edge mask. A CSS mask fades the WHOLE element, border and background included, so a
   mask here dissolved the bar's own left and right edges and the strip read as running off
   the screen at every viewport width. overflow:hidden plus the radius clips the moving
   track just as well and leaves the frame intact, which is what tells the eye where the
   bar starts and stops. Do not put a mask back on this element. */
.usp-bar{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r);
  background:rgba(6,36,56,.62);padding:11px 0}
.usp-track{display:flex;align-items:center;width:max-content}
.usp-bar.is-static .usp-track{width:auto;flex-wrap:wrap;justify-content:center;row-gap:7px}
.usp-item{display:inline-flex;align-items:center;gap:11px;padding:0 20px;white-space:nowrap;
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.04em;color:var(--txt)}
.usp-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
  .usp-bar.is-marquee .usp-track{animation:usp-scroll 52s linear infinite}
  .usp-bar.is-marquee:hover .usp-track,
  .usp-bar.is-marquee:focus-within .usp-track{animation-play-state:paused}
}
@keyframes usp-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Reference bar. Renders only logos with status "approved_customer".
   It scrolls like the capability bar above it but in the opposite direction and slower,
   so the pair reads as counter-rotating rather than as a race (owner, 2026-09-03). The
   direction comes from `reverse` on the shared usp-scroll keyframes — there is no second
   set of keyframes to keep in sync. The label stays put; only the list travels. */
/* Framed like the capability bar above it, for the same reason: a strip that scrolls
   forever needs a visible start and end or it reads as escaping the page. Lighter fill so
   the pair is legible as bar + echo rather than two equal slabs. */
/* Light plate, 2026-09-04. The references are real customer logos now, and a logo
   is drawn for a light ground: dropped on the dark hero they either need silhouetting
   (which throws away the brand colour the eye recognises first) or they sit in a halo
   of their own background. The plate also gives the hero its one change of surface.
   The fill is flat #fff, not a tint: TCL and Big Bang ship as opaque white-background
   images, and any tint in the plate draws a visible box around exactly those two. */
.ref-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  position:relative;overflow:hidden;border:1px solid rgba(117,194,226,.28);border-radius:var(--r);
  background:#fff;padding:12px 20px;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.8)}
/* An author display value outranks the UA sheet's [hidden]{display:none}, so the bar
   would show its empty label if JS never ran. Restore the hidden behaviour explicitly. */
.ref-bar[hidden]{display:none}
.ref-bar-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0;flex:0 0 auto}
.ref-bar-list{position:relative;overflow:hidden;flex:1 1 240px;min-width:0}
.ref-track{display:flex;align-items:center;width:max-content}
/* No JS and no marquee: the list is still a plain wrapped row of names. */
.ref-bar-list.is-static .ref-track{width:auto;flex-wrap:wrap;row-gap:8px}
.ref-bar-label{color:#3f5b6b}
.ref-item{font-family:var(--f-head);font-weight:600;font-size:14.5px;letter-spacing:.03em;
  color:#33566b;opacity:.9;padding:0 17px;white-space:nowrap}
/* Optical sizing, not px sizing. A wordmark (Samsung, Emmezeta) is limited by width,
   a square or stacked mark (A1, Beko) by height, so the two read as the same size
   even though their bounding boxes are nothing alike. */
.ref-item.has-logo{display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 20px}
.ref-item.has-logo img{max-height:34px;max-width:118px;width:auto;height:auto;
  object-fit:contain;filter:saturate(.92)}
.ref-item.is-pending{opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .ref-bar-list.is-marquee .ref-track{animation:usp-scroll 64s linear infinite reverse}
  .ref-bar-list.is-marquee:hover .ref-track,
  .ref-bar-list.is-marquee:focus-within .ref-track{animation-play-state:paused}
}

/* Hero diagram — replaces the dashboard screenshot. Colours come from the same tokens
   as the rest of the HUD, so a palette change carries into the diagram too.

   Layout and colour coding follow the owner's reference board (Asana "Dorada contenta",
   subtask "Slika nam se ne sviđa", 2026-09-03): one colour per lane, carried from the
   source box through the curve into the output that source ends up feeding. Every lane
   sets --c on its group and everything inside inherits it, so a lane is recoloured in
   one place. --i is the lane index; it phases that lane inside the shared cycle. */
.hero-viz svg{display:block;width:100%;height:auto}
.viz-l1{--c:var(--cyan)}
.viz-l2{--c:var(--green)}
.viz-l3{--c:var(--amber)}
.viz-l4{--c:var(--mcp)}

.viz-node{fill:rgba(9,49,74,.72);stroke:var(--c,var(--line-2));stroke-opacity:.5;stroke-width:1}
.viz-core{fill:rgba(3,121,178,.13);stroke:var(--cyan);stroke-opacity:.55;stroke-width:1}
.viz-line{fill:none;stroke:var(--c,var(--line-2));stroke-opacity:.4;stroke-width:1.2}
.viz-rule{stroke:var(--line);stroke-width:1}
.viz-dot{fill:var(--c,var(--cyan))}
.viz-mesh circle{fill:var(--cyan);opacity:.2}
.viz-ico{fill:none;stroke:var(--c,var(--cyan));stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.viz-ico-c{stroke:var(--cyan)}
.viz-ico-g{stroke:var(--green)}

.viz-t{font-family:var(--f-mono);font-size:12px;fill:var(--txt)}
.viz-t-step{letter-spacing:.05em;text-transform:uppercase}
.viz-t-ai{fill:var(--mcp)}
.viz-d{font-family:var(--f-mono);font-size:9px;fill:var(--muted)}
.viz-sub{font-family:var(--f-mono);font-size:8.8px;fill:var(--muted)}
.viz-hd{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;fill:var(--cyan)}
.viz-hd-g{fill:var(--green)}
.viz-view{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;fill:var(--cyan-2)}
.viz-t-hd{font-family:var(--f-display);font-weight:700;font-size:16px;fill:var(--white);letter-spacing:.18em}

/* The flow. A packet runs source → core (0–33% of the cycle), the core lights up as it
   lands, then a packet runs core → output (50–84%) and the output pops on arrival. All
   four lanes share one 4s cycle and are phased 1s apart by --i, so something is
   always moving without four packets arriving at once. pathLength="100" normalises every
   curve, so one dash length and one keyframe set drive paths of different real lengths.
   Progressive enhancement: at rest the packets are transparent, so a browser that ignores
   the animation (or a visitor who asked for less motion) still gets the full diagram. */
.viz-pulse{fill:none;stroke:var(--c,var(--cyan));stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:11 100;stroke-dashoffset:11;opacity:0}
@media (prefers-reduced-motion:no-preference){
  .viz-pulse{animation:4s linear infinite;animation-delay:calc(var(--i,0) * -1s)}
  .viz-pulse-in{animation-name:viz-in}
  .viz-pulse-out{animation-name:viz-out}
  .viz-out .viz-lane{transform-box:fill-box;transform-origin:50% 50%;
    animation:viz-pop 4s linear infinite;animation-delay:calc(var(--i,0) * -1s)}
  .viz-out .viz-node{animation:viz-lit 4s linear infinite;animation-delay:calc(var(--i,0) * -1s)}
  /* One core pulse per arriving packet — four lanes, 4s cycle, so every 1s. The whole
     system scales together; changing one figure alone puts the lanes out of phase. */
  .viz-core{animation:viz-core 1s linear infinite}
  .viz-spin{transform-box:fill-box;transform-origin:50% 50%;animation:viz-spin 9s linear infinite}
}
@keyframes viz-in{
  0%{stroke-dashoffset:11;opacity:0}
  3%{opacity:.95}
  33%{stroke-dashoffset:-111;opacity:.95}
  37%,100%{stroke-dashoffset:-111;opacity:0}
}
@keyframes viz-out{
  0%,50%{stroke-dashoffset:11;opacity:0}
  53%{opacity:.95}
  84%{stroke-dashoffset:-111;opacity:.95}
  88%,100%{stroke-dashoffset:-111;opacity:0}
}
@keyframes viz-pop{
  0%,83%{transform:scale(1)}
  89%{transform:scale(1.045)}
  97%,100%{transform:scale(1)}
}
@keyframes viz-lit{
  0%,83%{stroke-opacity:.5}
  89%{stroke-opacity:1}
  97%,100%{stroke-opacity:.5}
}
@keyframes viz-core{
  0%{stroke-opacity:.55}
  32%{stroke-opacity:1}
  62%,100%{stroke-opacity:.55}
}
@keyframes viz-spin{to{transform:rotate(360deg)}}

@media (max-width:1080px){
  .hero-bars{margin-top:32px}
}

/* ---------- product placeholder frames ---------- */
.ui-frame{padding:14px}
.ui-frame .ui-bar{display:flex;gap:6px;align-items:center;padding:0 2px 12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.ui-frame .ui-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.ui-frame .ui-bar span{font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-left:8px;letter-spacing:.08em}
.ui-shot{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
/* A screenshot exists at exactly one resolution. Stretched past it across a full content
   column the numbers go soft, which defeats the point of showing real figures — so a shot
   used at full width is capped near its captured size rather than blown up. */
.ui-frame.shot-native{max-width:960px}

/* ---------- evidence layer (2026-09-04) ----------
   The application is a light interface. Dropped on the dark page it was a bright
   rectangle fighting its surroundings, and every screenshot was shrunk to half a
   column, which is where the numbers stopped being readable. A screenshot now sits
   on its own light plate — the page changes surface where it stops asserting and
   starts showing. .hero-viz is excluded: that frame holds the dark SVG diagram,
   not a screenshot. */
.ui-frame:not(.hero-viz){background:#eef4f8;border-color:rgba(117,194,226,.34);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.85)}
.ui-frame:not(.hero-viz) .ui-bar{border-bottom-color:rgba(12,42,60,.14)}
.ui-frame:not(.hero-viz) .ui-bar i{background:rgba(12,42,60,.2)}
.ui-frame:not(.hero-viz) .ui-bar span{color:#43657a}
.ui-frame:not(.hero-viz) .ui-shot{border-color:rgba(12,42,60,.12)}
/* The caption on a cropped screenshot is the callout. Arrows pinned to pixel
   coordinates drift the moment the image is resized; a line under the crop naming
   what to look at survives every width and reads the same to a screen reader. */
.shot-cap{margin-top:11px;padding-top:10px;padding-right:168px;border-top:1px solid rgba(12,42,60,.12);
  font-family:var(--f-mono);font-size:11.5px;line-height:1.55;color:#43657a;letter-spacing:.01em}
/* The zoom hint is anchored to the bottom-right of the frame, which is now the caption
   row. Reserving that width keeps the two off each other without :has() — and on a
   phone, where there is no width to reserve, the hint gets its own line beneath. */
@media (max-width:640px){
  .shot-cap{padding-right:0;padding-bottom:42px}
}
.hero-viz .shot-cap{border-top-color:var(--line);color:var(--muted)}
/* Evidence gets the larger half of a two-column section. At .85fr the table cells
   in these screenshots render below the size at which a number can be read. */
.split:has(> .ui-frame:first-child){grid-template-columns:1.2fr .8fr}
.split:has(> .ui-frame:last-child){grid-template-columns:.8fr 1.2fr}
/* A table can be cropped to the rows that matter; a chart cannot — cut an axis off and
   the picture starts lying. So chart screenshots are not cropped, they are given the
   whole content width and the copy sits above them. At 1168px a 1341px capture renders
   near 1:1, which is the point. Specificity has to beat the two :has() rules above. */
.split.split-stack,
.split.split-stack:has(> .ui-frame:first-child),
.split.split-stack:has(> .ui-frame:last-child){grid-template-columns:1fr;gap:clamp(22px,2.6vw,34px)}
.split.split-stack > div{max-width:74ch}
/* Copy first, evidence under it, whichever order the markup happens to use. */
.split.split-stack > .ui-frame{order:2}
.split.split-stack > div{order:1}
/* The zoom hint is restyled for the light plate further down, next to its own rule. */
.ui-ph{display:grid;place-items:center;gap:10px;min-height:230px;border:1px dashed var(--line-2);border-radius:8px;
  background:
    linear-gradient(rgba(117,194,226,.05) 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,rgba(117,194,226,.05) 1px,transparent 1px) 0 0/28px 100%;
  text-align:center;padding:26px}
.ui-ph .ph-label{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.ui-ph .ph-file{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.ui-ph .ph-note{font-size:13px;color:var(--muted);max-width:40ch}

/* ---------- screenshot lightbox ----------
   Every app screenshot is shown scaled down inside .ui-frame, which is exactly
   where the detail people ask about disappears. Click opens the same file full
   size. Inert until JS adds .is-zoomable, so no-JS gets a plain image and no
   affordance promising something that will not happen. */
.ui-frame.is-zoomable .ui-shot{cursor:zoom-in;transition:border-color .25s,box-shadow .25s}
.ui-frame.is-zoomable:hover .ui-shot{border-color:var(--line-2);box-shadow:0 0 0 1px rgba(31,154,216,.18)}
.ui-zoom-hint{position:absolute;right:22px;bottom:22px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-2);
  background:rgba(6,36,56,.88);border:1px solid var(--line-2);border-radius:8px;padding:6px 11px;
  opacity:0;transform:translateY(5px);transition:opacity .25s var(--ease),transform .25s var(--ease);pointer-events:none}
.ui-frame.is-zoomable:hover .ui-zoom-hint,
.ui-frame.is-zoomable:focus-within .ui-zoom-hint{opacity:1;transform:none}
/* Shown at rest, not on hover: a phone has no hover, and a reader who never happens to
   point at the image never learns the full screenshot is one click away. On the light
   plate it also has to be dark-on-light to be readable at all. */
.ui-frame.is-zoomable .ui-zoom-hint{opacity:1;transform:none}
.ui-frame:not(.hero-viz) .ui-zoom-hint{color:#1a4a63;background:rgba(255,255,255,.92);
  border-color:rgba(12,42,60,.18)}

.lightbox{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;cursor:zoom-out;
  background:rgba(2,10,17,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:clamp(12px,2.6vw,34px)}
.lightbox[hidden]{display:none}
.lightbox-bar{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.lightbox-name{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:auto}
.lightbox-close{cursor:pointer;background:none;border:1px solid var(--line-2);border-radius:8px;color:var(--cyan-2);
  width:40px;height:40px;font-size:22px;line-height:1;flex:0 0 auto;transition:.2s var(--ease)}
.lightbox-close:hover{border-color:var(--cyan);color:var(--white);background:rgba(31,154,216,.1)}
.lightbox-fig{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;gap:14px;padding:14px 0 0}
.lightbox-fig img{margin:auto;max-width:100%;min-height:0;flex:0 1 auto;object-fit:contain;
  border-radius:10px;border:1px solid var(--line-2);box-shadow:0 44px 90px -34px rgba(0,0,0,.85)}
.lightbox-fig figcaption{flex:0 0 auto;text-align:center;font-size:13px;color:var(--muted);max-width:80ch;margin:0 auto}
@media (prefers-reduced-motion:no-preference){
  .lightbox{animation:lb-in .2s ease-out}
  .lightbox-fig img{animation:lb-img .3s var(--ease)}
}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
@keyframes lb-img{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:none}}

/* ---------- proof bar ---------- */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:rgba(5,36,54,.45)}
.proof-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px}
.proof-static{font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.proof-static a{color:var(--cyan-2)}
.proof-metrics{display:flex;flex-wrap:wrap;gap:14px 34px}
.proof-item strong{font-family:var(--f-display);font-size:19px;color:var(--white);display:block}
.proof-item span{font-size:12.5px;color:var(--muted)}
.proof-item .flag,.is-pending .flag{display:inline-block;font-family:var(--f-mono);font-style:normal;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(245,184,61,.4);border-radius:4px;
  padding:1px 6px;margin-top:4px}

/* ---------- card grids ---------- */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{padding:26px;transition:transform .3s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);border-color:var(--line-2)}
/* Form carries the difference between "you can click this" and "this is a fact".
   A card that links keeps the full frame; a static one recedes half a step. */
.hud.card:not(.card-link){border-color:rgba(117,194,226,.10);background:rgba(9,49,74,.34)}
.hud.card.card-link{border-color:rgba(117,194,226,.22)}
.card .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px;display:block}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:15px}
.card .fields{margin:12px 0 14px;display:flex;flex-wrap:wrap;gap:7px}
/* Quieter: a card can carry seven of these, and at full text contrast the tags shouted
   over the heading they belong to. */
.chip{font-family:var(--f-mono);font-size:11px;color:var(--muted);border:1px solid rgba(117,194,226,.09);border-radius:6px;padding:3px 9px;background:rgba(11,20,38,.45)}
.outcome{display:flex;gap:9px;font-size:14.5px;color:var(--txt);border-top:1px solid var(--line);padding-top:13px;margin-top:auto}
.outcome::before{content:"→";color:var(--green);font-family:var(--f-mono)}
.card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column}

/* ---------- layer cards: 3D layer separation (JS + fine pointer only) ----------
   The layer section claims "six connected intelligence layers", so the hover
   shows them: two decorative planes fan out behind the card while the content
   lifts toward the viewer. The value and audience grids reuse the same effect.
   The planes carry no content, so JS injects them rather than the markup.
   Nothing here applies until JS adds .is-3d — without it, on touch, or with
   reduced motion the cards keep the plain lift they always had. */
.layer-cards.is-3d{perspective:1200px}
.layer-cards.is-3d .card{transform-style:preserve-3d;position:relative;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease),border-color .3s}
.layer-cards.is-3d .card.is-live{transition:transform .1s linear,border-color .3s}
.layer-cards.is-3d .plane{position:absolute;inset:0;border-radius:var(--r);border:1px solid var(--line);
  background:rgba(6,36,56,.55);pointer-events:none;opacity:0;
  transition:transform .55s var(--ease),opacity .45s var(--ease)}
.layer-cards.is-3d .card .k,
.layer-cards.is-3d .card h3,
.layer-cards.is-3d .card p,
.layer-cards.is-3d .card .fields,
.layer-cards.is-3d .card .outcome{transition:transform .5s var(--ease),color .3s}
.layer-cards.is-3d .chip{transition:border-color .3s}
/* the separation itself — mirrored on :focus-visible so keyboard gets it too */
.layer-cards.is-3d .card:hover .plane-1,
.layer-cards.is-3d .card:focus-visible .plane-1{opacity:.75;transform:translateZ(-30px) translate(10px,10px)}
.layer-cards.is-3d .card:hover .plane-2,
.layer-cards.is-3d .card:focus-visible .plane-2{opacity:.45;transform:translateZ(-60px) translate(20px,20px)}
.layer-cards.is-3d .card:hover .k,
.layer-cards.is-3d .card:focus-visible .k{transform:translateZ(52px);color:var(--amber)}
.layer-cards.is-3d .card:hover h3,
.layer-cards.is-3d .card:focus-visible h3{transform:translateZ(34px)}
.layer-cards.is-3d .card:hover p,
.layer-cards.is-3d .card:focus-visible p{transform:translateZ(24px)}
.layer-cards.is-3d .card:hover .fields,
.layer-cards.is-3d .card:focus-visible .fields{transform:translateZ(18px)}
.layer-cards.is-3d .card:hover .outcome,
.layer-cards.is-3d .card:focus-visible .outcome{transform:translateZ(26px)}
.layer-cards.is-3d .card:hover .chip,
.layer-cards.is-3d .card:focus-visible .chip{border-color:var(--line-2)}

/* ---------- pipeline (how it works) ---------- */
.pipeline{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:step}
.step{padding:22px;position:relative;counter-increment:step}
.step::before{content:"0" counter(step);font-family:var(--f-display);font-size:13px;color:var(--cyan);
  display:block;margin-bottom:12px;letter-spacing:.14em}
.step h3{font-size:17px;margin-bottom:8px}
.step p{font-size:14px;color:var(--muted)}
.step:not(:last-child)::after{content:"";position:absolute;top:32px;right:-14px;width:12px;height:1px;background:var(--line-2)}

/* ---------- tabs ---------- */
.tabs-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.tab{font-family:var(--f-head);font-size:14.5px;font-weight:600;color:var(--muted);background:none;
  border:1px solid var(--line);border-radius:9px;padding:10px 16px;cursor:pointer;transition:.2s}
.tab:hover{color:var(--white);border-color:var(--line-2)}
.tab[aria-selected="true"]{color:#03121a;background:var(--cyan);border-color:var(--cyan)}
.tabpanel{padding:30px}
.tabpanel[hidden]{display:none}
.tabpanel-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.tabpanel h3{margin-bottom:12px}
.tabpanel p{color:var(--muted)}
.tabpanel .fields{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.tabpanel .more{display:inline-block;margin-top:18px;font-family:var(--f-mono);font-size:13px}

/* ---------- checklist / trust list ----------
   Hanging marker, not a flex row — 2026-09-04. In a flex list every child element is its
   own flex item, so `<strong>label</strong> <span>text</span>` became two columns that
   wrapped independently: a long label broke onto a second line while its text stayed put,
   and the list read as a table with the rules rubbed out. Absolute marker + normal text
   flow lets the label lead the sentence, which is what it is. Same fix below for every
   list that carries a label. */
.ticks{display:grid;gap:12px}
.ticks li{list-style:none;position:relative;padding-left:22px;color:var(--txt)}
.ticks li::before{content:"▸";position:absolute;left:0;top:0;color:var(--cyan);font-family:var(--f-mono)}
.ticks li span{color:var(--muted)}

/* ---------- AI section ---------- */
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.ai-q{display:grid;gap:10px}
.ai-q li{font-family:var(--f-mono);font-size:13.5px;color:var(--txt);border:1px solid var(--line);
  border-radius:10px;padding:12px 16px;background:var(--panel);position:relative;padding-left:38px}
.ai-q li::before{content:"›_";position:absolute;left:14px;color:var(--cyan);letter-spacing:-2px}
.guardrail{margin-top:18px;font-size:13.5px;color:var(--muted);border-left:2px solid var(--amber);padding-left:14px}

/* ---------- quote / capterra ---------- */
.capterra{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:24px 28px}
.capterra .score{font-family:var(--f-display);font-size:30px;color:var(--white)}
.stars{color:var(--amber);letter-spacing:3px;font-size:15px}
.capterra p{color:var(--muted);font-size:14px}
.logo-strip{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;margin-top:22px}
.logo-item{font-family:var(--f-head);font-weight:600;color:var(--muted);letter-spacing:.04em}
.logo-item.is-pending{opacity:.55}
#logo-strip-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- output list ---------- */
.out-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 34px}
.out-cols li{list-style:none;position:relative;padding:7px 0 7px 20px;font-size:15px;color:var(--txt);border-bottom:1px solid var(--line)}
.out-cols li::before{content:"◈";position:absolute;left:0;top:7px;color:var(--cyan);font-size:11px}

/* ---------- CTA band ---------- */
.cta-band{padding:56px;text-align:center;background:
  radial-gradient(600px 300px at 50% 120%,rgba(31,154,216,.14),transparent 70%),var(--panel)}
.cta-band h2{margin-bottom:14px}
.cta-band p{color:var(--muted);max-width:56ch;margin:0 auto 28px}
.cta-band .hero-ctas{justify-content:center;margin-bottom:0}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:clamp(44px,5vw,72px) 0 clamp(36px,4vw,56px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(30px,4.4vw,54px);letter-spacing:-.025em;max-width:20ch}
.page-hero .lede{margin-top:16px}
.page-hero .hero-ctas{margin-top:26px}
.crumbs{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--cyan-2)}
.crumbs li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--line-2)}
.crumbs li:last-child{color:var(--cyan)}

/* ---------- prose / faq / tables ---------- */
.prose{max-width:760px}
.prose p,.prose ul,.prose ol{margin-bottom:16px;color:var(--muted)}
.prose ul{padding-left:20px;list-style:square}
.prose h3{margin:34px 0 12px}
/* Measure lives here now, 2026-09-04/05. Twenty-eight pages carried
   style="max-width:860px;margin:0 auto" inline on this block, which centred the accordion
   under a heading that the rest of the site sets flush left — the one alignment exception
   on the site, repeated everywhere. Left-aligned, capped, and set in one place. */
.faq{max-width:840px}
/* Group headings inside an accordion are labels for a run of questions, not section
   openers — at the full h2 size they competed with the page heading above them. */
.faq > h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.015em}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:12px}
.faq summary{cursor:pointer;font-family:var(--f-head);font-weight:600;color:var(--white);padding:18px 22px;list-style:none;position:relative;padding-right:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-family:var(--f-mono);color:var(--cyan);font-size:18px}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 22px 20px;color:var(--muted);font-size:15px}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--txt);vertical-align:top}
.tbl td:first-child{color:var(--white);font-weight:600}
.tbl-scroll{overflow-x:auto}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field-full{grid-column:1 / -1}
.field label{font-family:var(--f-head);font-size:14px;font-weight:600;color:var(--white)}
.field .hint{font-size:12.5px;color:var(--muted)}
/* Fields, 2026-09-04. They were darker than the panel they sit in, with a faint border:
   on the dark page a form field read as a hole rather than as something to type into.
   They are now a step LIGHTER than their surroundings, which is how a field says "this
   one is yours to fill". The one place on the site where affordance beats atmosphere. */
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:1rem;color:var(--white);
  background:rgba(142,211,240,.07);
  border:1px solid rgba(117,194,226,.34);border-radius:9px;padding:13px 14px;width:100%;
  transition:border-color .2s,background .2s}
.field input::placeholder,.field textarea::placeholder{color:rgba(143,176,198,.75)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(117,194,226,.55)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cyan-2);outline-offset:1px;
  border-color:var(--cyan);background:rgba(142,211,240,.11)}
/* The native select rendered in the OS palette — a light control in a dark form.
   appearance:none hands the arrow back to us; the options list is still the OS's, which
   the page-level color-scheme:dark already puts in the right palette. */
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--cyan-2) 50%),
    linear-gradient(135deg,var(--cyan-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field textarea{min-height:118px;resize:vertical}
.field [aria-invalid="true"]{border-color:var(--red)}
.err{font-size:13px;color:#ff8fa3;font-weight:500}
.consent{flex-direction:row;align-items:flex-start;gap:11px}
.consent input{width:18px;height:18px;margin-top:3px;accent-color:var(--cyan)}
.consent label{font-weight:400;font-size:14px;color:var(--muted)}
.consent input{outline-offset:2px}

/* ---------- reassurance beside the demo form ----------
   Three facts, hairline-separated, no card: the form is the object on this page and
   nothing next to it should compete for the same weight. */
/* On a phone the submit is the last thing between reading and sending; a button sized
   to its own text there is a smaller target than the fields above it. */
@media (max-width:620px){
  .field-full .btn[type="submit"]{width:100%;justify-content:center}
}
.assure{display:grid;gap:0;margin-top:26px;border-top:1px solid var(--line)}
.assure li{list-style:none;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.assure strong{color:var(--white);font-family:var(--f-head)}
/* Compact reference bar: same component as the hero band, standing still and smaller,
   because here it is evidence beside a form rather than a moving strip in a hero. */
.ref-bar.is-compact{display:block;margin-top:22px;padding:14px 18px 16px}
.ref-bar.is-compact .ref-bar-label{font-size:10px;margin-bottom:8px}
.ref-bar.is-compact .ref-bar-list{overflow:visible}
.ref-bar.is-compact .ref-track{justify-content:flex-start}
.ref-bar.is-compact .ref-item.has-logo{height:32px;padding:0 10px}
.ref-bar.is-compact .ref-item.has-logo img{max-height:22px;max-width:78px}
.ref-bar.is-compact .ref-bar-list.is-static .ref-track{row-gap:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{padding:26px;border-radius:var(--r)}
.form-msg.ok{border:1px solid rgba(56,201,139,.4);background:rgba(56,201,139,.07)}
.form-msg.bad{border:1px solid rgba(221,79,89,.4);background:rgba(221,79,89,.07);margin-bottom:18px}
.form-msg h3{margin-bottom:8px}
.form-msg p{color:var(--muted);font-size:15px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:56px 0 30px;background:rgba(4,8,18,.55);margin-top:88px}
/* Eight link columns in five slots left a ragged second row with a hole in it.
   The brand block takes its own row; the eight columns then fill two rows of four. */
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 28px;margin-bottom:40px}
.foot-brand{grid-column:1/-1;max-width:460px}
.foot-brand p{color:var(--muted);font-size:14px;margin-top:12px;max-width:30ch}
.foot-col h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px;font-weight:500}
.foot-col a{display:block;color:var(--muted);text-decoration:none;font-size:14px;padding:4px 0}
.foot-col a:hover{color:var(--cyan-2)}
.foot-base{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-wrap:wrap;gap:10px 26px;
  justify-content:space-between;font-family:var(--f-mono);font-size:12px;color:var(--muted)}

/* ---------- reveal (gated: without JS everything stays visible) ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  html.js [data-reveal]{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .login{display:none}
  .burger{display:block}
  .hero-in,.ai-grid,.tabpanel-grid{grid-template-columns:1fr;gap:36px}
  .pipeline{grid-template-columns:repeat(2,1fr)}
  .step:not(:last-child)::after{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .sec{padding:64px 0}
  .grid-2,.grid-3,.out-cols,.form-grid{grid-template-columns:1fr}
  .pipeline{grid-template-columns:1fr}
  .cta-band{padding:40px 24px}
  .head-cta .btn{padding:10px 14px;font-size:13.5px}
}
@media (max-width:420px){
  .hero{padding:56px 0 48px}
  .hero-ctas .btn{width:100%;justify-content:center}
}

/* ================================================================
   v3 additions — offer architecture, reporting, answer blocks, SEO UI
   ================================================================ */

/* ---------- layout helpers ---------- */
.grid-4{grid-template-columns:repeat(4,1fr)}
/* align-items was `center`: a short text column beside a tall screenshot pushed
   300-400px of dead space into the page. Top-aligned, the whitespace collects once,
   below the shorter column, instead of twice around it. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,52px);align-items:start}
/* Top-aligned is right when one column is a tall screenshot — centring a short text
   column against it opens a hole above and below. Where both columns are content,
   centring is right instead. Browsers without :has() keep the top alignment. */
.split:not(:has(.ui-frame)){align-items:center}
.split > div > h3{margin-bottom:10px}
.split-wide{grid-template-columns:1.15fr .85fr}
.split-narrow{grid-template-columns:.85fr 1.15fr}
.stack>*+*{margin-top:16px}
.mt-l{margin-top:40px}
.mt-m{margin-top:26px}
.mb-m{margin-bottom:26px}
.hud.card,.hud.step,.hud.tier{display:flex;flex-direction:column}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* ---------- answer block (TL;DR for humans + answer engines) ---------- */
.answer{padding:24px 28px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  border-left:3px solid var(--cyan)}
.answer h2,.answer h3{font-family:var(--f-head);font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:12px}
.answer p{color:var(--txt);font-size:16.5px;max-width:78ch}
.answer p+p{margin-top:10px}
.answer ul{margin-top:14px;display:grid;gap:9px}
.answer li{list-style:none;position:relative;padding-left:20px;color:var(--muted);font-size:15px}
.answer li::before{content:"▸";position:absolute;left:0;top:0;color:var(--cyan);font-family:var(--f-mono)}
.answer li strong{color:var(--white)}

/* ---------- MCP arrangement diagram ----------
   Two parties and the connector between them. The box below it keeps the wording that
   has to be exact (rule 5: KLIKER supplies data, never an agent); this is the picture
   that makes the arrangement legible before anyone reads the wording. */
.mcp-col{display:grid;gap:18px;align-content:start}
.mcp-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding:26px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 50% 50%,rgba(31,154,216,.09),transparent 62%)}
.mcp-node{padding:20px 16px;text-align:center;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(9,49,74,.4);min-width:0}
.mcp-node span{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mcp-node strong{display:block;font-family:var(--f-display);font-size:22px;color:var(--white);letter-spacing:-.01em}
.mcp-node small{display:block;margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.mcp-node.is-kliker{border-color:rgba(31,154,216,.42);background:rgba(3,121,178,.12)}
.mcp-link{display:flex;align-items:center;gap:6px;color:var(--cyan)}
.mcp-link i{display:block;width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan))}
.mcp-link i:last-child{transform:scaleX(-1)}
.mcp-link b{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;padding:7px 9px;
  border:1px solid rgba(31,154,216,.4);border-radius:5px;background:var(--bg-2)}
.mcp-cap{font-size:13.5px;color:var(--muted);text-align:center}
/* Side by side, the two nodes fall under ~150px each on a phone. Stacked, the connector
   turns to point down the page instead of across it. */
@media (max-width:620px){
  .mcp-flow{grid-template-columns:1fr;gap:10px;padding:20px 0;border-radius:0}
  .mcp-link{justify-content:center;transform:rotate(90deg);height:32px}
}

/* ---------- compact offer line ----------
   Three labelled rows where a full offer map used to stand. Same vocabulary, same links,
   about a twelfth of the height — the drawing of it now lives on plans-and-add-ons. */
.offer-line{display:grid;gap:0;margin-top:6px;border-top:1px solid var(--line)}
.offer-line > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.offer-line dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.offer-line dd{margin:0;font-size:15.5px;color:var(--muted)}
.offer-line dd a{color:var(--txt);text-decoration:none;border-bottom:1px solid var(--line-2)}
.offer-line dd a:hover{color:var(--white);border-bottom-color:var(--cyan)}
@media (max-width:620px){
  .offer-line > div{grid-template-columns:1fr;gap:6px}
}

/* ---------- before / after (what customers stop doing manually) ---------- */
.baw{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch}
.baw-col{padding:30px}
.baw-col h3{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:18px}
.baw-col h3 .dot{width:9px;height:9px;border-radius:50%;flex:none}
.baw-before{background:rgba(221,79,89,.05);border:1px solid rgba(221,79,89,.24);border-radius:var(--r) 0 0 var(--r)}
.baw-before .dot{background:var(--red);box-shadow:0 0 10px rgba(221,79,89,.7)}
.baw-after{background:rgba(56,201,139,.05);border:1px solid rgba(56,201,139,.26);border-radius:0 var(--r) var(--r) 0}
.baw-after .dot{background:var(--green);box-shadow:0 0 10px rgba(56,201,139,.7)}
.baw-mid{display:grid;place-items:center;width:64px;background:var(--bg-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.baw-mid span{font-family:var(--f-mono);color:var(--cyan);font-size:22px}
.baw ul{display:grid;gap:11px}
.baw li{list-style:none;position:relative;padding-left:22px;font-size:15px;color:var(--muted)}
.baw li::before{position:absolute;left:0;top:1px}
.baw-before li::before{content:"✕";color:var(--red);font-size:12px}
.baw-after li::before{content:"✓";color:var(--green);font-size:13px}
.baw-after li{color:var(--txt)}

/* ---------- offer architecture map ---------- */
.offer-map{display:grid;gap:18px}
.offer-row{display:grid;gap:18px}
.offer-core{grid-template-columns:1fr}
.offer-streams{grid-template-columns:repeat(3,1fr)}
.offer-addons{grid-template-columns:repeat(4,1fr)}
.offer-lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:2px;display:flex;align-items:center;gap:12px}
.offer-lbl::after{content:"";flex:1;height:1px;background:var(--line)}
.node{padding:22px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;
  transition:transform .3s var(--ease),border-color .3s}
.node:hover{transform:translateY(-3px);border-color:var(--line-2)}
.node h3{font-size:17px}
.node.node-core{background:linear-gradient(140deg,rgba(3,121,178,.22),rgba(9,49,74,.5));border-color:var(--line-2)}
.node.node-core h3{font-family:var(--f-display);font-size:21px}
.node p{font-size:14px;color:var(--muted)}
.node .tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.node-soon{opacity:.55}
.node-soon .tag{color:var(--amber)}

/* ---------- use-case cards ---------- */
.uc{padding:24px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),border-color .3s}
.uc:hover{transform:translateY(-3px);border-color:var(--line-2)}
.uc .q{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.uc h3{font-size:17.5px}
.uc p{font-size:14.5px;color:var(--muted)}
.uc .out{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--txt);
  display:flex;gap:9px}
.uc .out::before{content:"→";color:var(--green);font-family:var(--f-mono)}

/* ---------- excel mock ---------- */
.xl{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:rgba(6,36,56,.75);
  font-family:var(--f-mono);font-size:12.5px}
.xl-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(3,121,178,.18);
  border-bottom:1px solid var(--line-2)}
.xl-bar .xl-name{color:var(--white);font-weight:500}
.xl-bar .xl-refresh{margin-left:auto;display:inline-flex;align-items:center;gap:7px;color:var(--green);
  border:1px solid rgba(56,201,139,.35);border-radius:6px;padding:3px 10px;font-size:11.5px}
.xl-bar .xl-refresh::before{content:"⟳"}
.xl table{width:100%;border-collapse:collapse}
.xl th{background:rgba(117,194,226,.07);color:var(--cyan-2);text-align:left;padding:8px 12px;
  border-bottom:1px solid var(--line-2);font-weight:500;font-size:11.5px;letter-spacing:.06em}
.xl td{padding:7px 12px;border-bottom:1px solid var(--line);color:var(--txt)}
.xl td.up{color:var(--green)}
.xl td.dn{color:var(--red)}
.xl-foot{padding:9px 14px;color:var(--muted);font-size:11.5px;border-top:1px solid var(--line)}

/* ---------- plans / add-ons ---------- */
.tier{padding:30px;display:flex;flex-direction:column;gap:14px}
.tier.is-core{border-color:var(--line-2);background:linear-gradient(160deg,rgba(3,121,178,.18),rgba(9,49,74,.5))}
.tier .tier-k{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.tier h3{font-family:var(--f-display);font-size:20px}
.tier .price{font-family:var(--f-head);font-size:15px;color:var(--white);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:12px 0}
.tier .price small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:3px}
.tier .btn{margin-top:auto;justify-content:center}
.addons{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.addon{padding:20px 22px;display:flex;gap:16px;align-items:flex-start}
.addon .ico{font-family:var(--f-mono);color:var(--cyan);font-size:13px;border:1px solid var(--line-2);
  border-radius:8px;width:36px;height:36px;display:grid;place-items:center;flex:none}
.addon h3{font-size:16px;margin-bottom:5px}
.addon p{font-size:14px;color:var(--muted)}
.addon a{font-family:var(--f-mono);font-size:12.5px}

/* ---------- workflow rules ---------- */
.rule{padding:22px 24px;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.rule .when,.rule .then{display:flex;flex-direction:column;gap:6px}
.rule .lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.rule .when .lbl{color:var(--amber)}
.rule .then .lbl{color:var(--green)}
.rule p{font-size:15px;color:var(--txt)}
.rule .arrow{font-family:var(--f-mono);color:var(--cyan);font-size:20px}

/* ---------- compare / spec tables ---------- */
.tbl td .yes{color:var(--green)}
.tbl td .no{color:var(--muted)}
.tbl-tight td,.tbl-tight th{padding:9px 12px}

/* ---------- code / endpoint samples ---------- */
.code{background:rgba(3,10,20,.7);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  font-family:var(--f-mono);font-size:13px;color:var(--txt);overflow-x:auto;line-height:1.7}
.code .c{color:var(--muted)}
.code .m{color:var(--green)}
.code .s{color:var(--cyan-2)}

/* ---------- glossary / definition list ---------- */
.defs{display:grid;gap:2px}
.def{padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:12px}
.def dt{font-family:var(--f-head);font-weight:600;color:var(--white);font-size:17px;margin-bottom:7px}
.def dd{color:var(--muted);font-size:15px}
.def dd+dd{margin-top:8px}
.def .rel{margin-top:10px;font-family:var(--f-mono);font-size:12.5px}

/* ---------- table of contents ---------- */
.toc{padding:20px 24px;margin-bottom:34px}
.toc h2{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.toc ol{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;counter-reset:toc}
.toc a{font-size:14.5px;text-decoration:none;color:var(--txt)}
.toc a:hover{color:var(--cyan-2)}

/* ---------- callout ---------- */
.callout{border-left:2px solid var(--amber);padding:14px 18px;background:rgba(245,184,61,.05);
  border-radius:0 var(--r) var(--r) 0;font-size:14.5px;color:var(--muted)}
.callout strong{color:var(--white)}

/* ---------- related links ---------- */
.related{display:flex;flex-wrap:wrap;gap:10px}
.related a{font-family:var(--f-head);font-size:14px;text-decoration:none;color:var(--txt);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;transition:.2s}
.related a:hover{border-color:var(--cyan);color:var(--white);background:rgba(31,154,216,.08)}

/* ---------- module list ---------- */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mod{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.mod b{display:block;color:var(--white);font-family:var(--f-head);font-size:15px;margin-bottom:4px}
.mod span{font-size:13.5px;color:var(--muted)}

/* ---------- misc ---------- */
.foot-mail{margin-top:10px}
.foot-mail a{font-family:var(--f-mono);font-size:13.5px;text-decoration:none}
.head-cta .login-btn{padding:10px 12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.figcap{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-top:10px}
.hero-in.hero-single{grid-template-columns:1fr;text-align:left;max-width:900px}

/* ---------- responsive additions ---------- */
@media (max-width:1080px){
  /* Same reason as the 760px block below: the desktop :has() rules must be neutralised
     here too, or the evidence column keeps its 1.2fr on a tablet. */
  .split,.offer-addons{grid-template-columns:1fr 1fr}
  .split:has(> .ui-frame:first-child),
  .split:has(> .ui-frame:last-child){grid-template-columns:1fr 1fr}
  .grid-4,.mods{grid-template-columns:repeat(2,1fr)}
  .offer-streams{grid-template-columns:1fr}
  .baw{grid-template-columns:1fr}
  .baw-before{border-radius:var(--r) var(--r) 0 0}
  .baw-after{border-radius:0 0 var(--r) var(--r);border-top:0}
  .baw-mid{width:auto;height:44px;border:0}
  .baw-mid span{transform:rotate(90deg)}
}
@media (max-width:760px){
  /* One column below 760px. The selectors have to out-specify the :has() rules that
     widen the evidence column on desktop — those are 0,3,0, so a bare `.split` here
     (0,1,0) lost and every screenshot section stayed two columns on a phone. */
  .split,.grid-4,.mods,.offer-addons,.addons,.form-grid{grid-template-columns:1fr}
  .split:has(> .ui-frame:first-child),
  .split:has(> .ui-frame:last-child),
  .split.split-stack:has(> .ui-frame:first-child),
  .split.split-stack:has(> .ui-frame:last-child){grid-template-columns:1fr}
  .split.split-stack > div{max-width:none}
  .rule{grid-template-columns:1fr;gap:12px}
  .rule .arrow{transform:rotate(90deg)}
  .answer{padding:20px}
  .head-cta .login-btn{display:none}
}
.faq details .faq-a{padding:0 22px 20px}
.faq details .faq-a p{padding:0;color:var(--muted);font-size:15px}
.faq details .faq-a p+p{margin-top:10px}
.faq details .faq-a ul{margin-top:10px;display:grid;gap:7px}
.faq details .faq-a li{list-style:none;position:relative;padding-left:19px;color:var(--muted);font-size:14.5px}
.faq details .faq-a li::before{content:"▸";position:absolute;left:0;top:0;color:var(--cyan);font-family:var(--f-mono)}

/* ================================================================
   Positioning pass — questions, Q→I→A, capability chain, delivery
   Reuses existing tokens, panels and spacing. No new dependencies.
   ================================================================ */

/* ---------- business questions (same terminal treatment as .ai-q) ---------- */
.qlist{display:grid;gap:10px}
.qlist li{font-family:var(--f-mono);font-size:13.5px;color:var(--txt);border:1px solid var(--line);
  border-radius:10px;padding:13px 16px 13px 40px;background:var(--panel);position:relative;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.qlist li::before{content:"›_";position:absolute;left:15px;color:var(--cyan);letter-spacing:-2px}
.qlist li:hover{border-color:var(--line-2);transform:translateX(2px)}
.qlist-2{grid-template-columns:1fr 1fr}
.qlist-close{margin-top:22px;font-size:16px;color:var(--txt);border-left:2px solid var(--cyan);padding-left:16px}
.qlist-close strong{color:var(--white)}

/* ---------- question → insight → action ---------- */
.qia{padding:24px 26px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;align-items:start}
.qia + .qia{margin-top:14px}
.qia h3{grid-column:1 / -1;font-size:17.5px;margin-bottom:2px}
.qia .lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  display:block;margin-bottom:7px}
.qia .q .lbl{color:var(--cyan)}
.qia .i .lbl{color:var(--cyan-2)}
.qia .a .lbl{color:var(--green)}
.qia p{font-size:14.5px;color:var(--muted)}
.qia .a p{color:var(--txt)}

/* ---------- capability chain: price → promotions → … → reporting ---------- */
/* One line, deliberately. The six layers read as a sequence, and a sequence that wraps
   mid-way reads as two lists. Widest link ("Assortment & availability") sets the measure,
   so the type and padding are tuned until all six plus five arrows clear 1280px. Below
   1080px the row no longer fits on one line, so wrapping comes back there. */
.chain{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin-top:20px}
.chain li{font-family:var(--f-head);font-size:13px;font-weight:600;color:var(--txt);white-space:nowrap;
  border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;background:var(--panel)}
.chain li:first-child{color:#03121a;background:var(--cyan);border-color:var(--cyan)}
.chain li:last-child{color:var(--white);border-color:var(--amber);background:rgba(245,184,61,.12)}
.chain .arw{border:0;background:none;padding:0;color:var(--cyan);font-family:var(--f-mono);font-size:13px}

/* ---------- delivery channels row ---------- */
.delivery{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:12px;margin-top:26px}
.deliv{padding:18px 16px;text-align:center;text-decoration:none;color:inherit;display:block;
  transition:transform .3s var(--ease),border-color .3s}
.deliv:hover{transform:translateY(-3px);border-color:var(--line-2)}
.deliv b{display:block;font-family:var(--f-head);font-size:15px;color:var(--white);margin-bottom:5px}
.deliv span{font-size:13px;color:var(--muted)}
.deliv.is-lead{background:linear-gradient(150deg,rgba(3,121,178,.2),rgba(9,49,74,.5));border-color:var(--line-2)}

/* ---------- pull quote / positioning statement ---------- */
.pull{font-family:var(--f-head);font-size:clamp(18px,2.1vw,23px);line-height:1.45;color:var(--white);
  border-left:3px solid var(--cyan);padding:6px 0 6px 22px;max-width:60ch}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .delivery{grid-template-columns:repeat(3,1fr)}
  .qia{grid-template-columns:1fr}
  /* One line needs ~900px and this viewport no longer has it; wrapping beats a page that
     scrolls sideways. */
  .chain{flex-wrap:wrap;gap:8px}
}
@media (max-width:760px){
  .qlist-2{grid-template-columns:1fr}
  .delivery{grid-template-columns:1fr 1fr}
  .chain li{font-size:13.5px;padding:7px 14px}
}

/* ---------- hero strategic claim line ---------- */
.hero-claim{font-family:var(--f-head);font-weight:600;font-size:clamp(17px,1.85vw,21px);
  color:var(--white);line-height:1.4;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:0 10px}
.hero-claim span{position:relative;padding-left:15px}
.hero-claim span::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:var(--cyan);box-shadow:0 0 8px rgba(31,154,216,.8);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.hero-claim span:last-child{color:var(--cyan-2)}
@media (max-width:520px){.hero-claim{display:block}.hero-claim span{display:block;margin-bottom:4px}}

/* ---------- delivery tiles: access-mode label ---------- */
.deliv .mode{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:9px}
/* MCP tile: green highlight removed 2026-08-24 (owner decision). Both .deliv.is-ai
   overrides are gone rather than recoloured, so the tile inherits .hud/.deliv
   untouched and is pixel-identical to the other three access-mode tiles - same
   var(--panel) background, same var(--line) border, same cyan .mode label.
   The is-ai class stays on the element as a hook. Note: .path.is-ai further down
   is a different component and is deliberately amber - do not fold these together. */

/* ---------- reporting spectrum: decode + RGB-split glitch (JS + fine pointer only) ----------
   Hover decodes the description character by character while a chromatic split -
   the palette's own red and cyan, no new colour - settles into alignment. The amber
   rule under the heading is driven by --p, which the decode loop advances: it reads
   out how much has resolved rather than running on its own timer.
   At rest the characters sit at 38%, never removed from flow, so there is no layout
   shift and touch / reduced motion / no-JS lose the animation but keep the copy.
   The glitch stops the instant decoding finishes - it never loops. */
.decode-cards.is-decode .d{position:relative;display:block;font-family:var(--f-mono);font-size:12px;
  color:var(--muted);transition:text-shadow .3s var(--ease)}
.decode-cards.is-decode .d i{font-style:normal;opacity:.38;transition:opacity .18s linear,color .18s linear}
.decode-cards.is-decode .d i.on{opacity:1}
.decode-cards.is-decode .d i.hot{color:var(--cyan-2);opacity:1}
.decode-cards.is-decode .d.gl{animation:kl-rgbsplit .42s steps(2,end) infinite}
@keyframes kl-rgbsplit{
  0%  {text-shadow:-1.2px 0 rgba(221,79,89,.75),1.2px 0 rgba(31,154,216,.75)}
  50% {text-shadow:1.2px 0 rgba(221,79,89,.75),-1.2px 0 rgba(31,154,216,.75)}
  100%{text-shadow:-.6px 0 rgba(221,79,89,.55),.6px 0 rgba(31,154,216,.55)}
}
/* the amber rule hangs under whichever element is the card heading */
.decode-cards.is-decode b,
.decode-cards.is-decode .card h3,
.decode-cards.is-decode .uc h3{display:inline-block;position:relative}
/* .hud.card sits in a larger type scale than the .deliv tiles */
.decode-cards.is-decode .card .d,
.decode-cards.is-decode .uc .d{font-size:13.5px;line-height:1.62}
.decode-cards.is-decode b::after,
.decode-cards.is-decode .card h3::after,
.decode-cards.is-decode .uc h3::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:var(--amber);box-shadow:0 0 8px rgba(245,184,61,.55);
  transform:scaleX(var(--p,0));transform-origin:left;transition:transform .12s linear}

/* ---------- official KLIKER wordmark (assets/brand/kliker-logo.png) ---------- */
.brand img{height:26px;width:auto;display:block}
.drawer-head .brand img{height:23px}
.foot-brand .brand img{height:28px}
@media (max-width:420px){
  .brand img{height:22px}
  .head-in{gap:12px}
  .head-cta{gap:8px;margin-left:auto;flex-shrink:0}
  .head-cta .btn{font-size:12px;padding:10px 12px;min-height:44px;white-space:nowrap}
}

/* ================================================================
   Two conversion paths: AI-guided tour (self-service) vs Book a demo
   ================================================================ */

/* hero: button + one-line caption under each */
.cta-pair{display:flex;flex-wrap:wrap;gap:16px 20px;margin-bottom:20px}
.cta-pair > span{display:flex;flex-direction:column;gap:7px}
.cta-pair .btn{justify-content:center}
.cta-pair .cap{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);letter-spacing:.03em;text-align:center}

/* end-of-page / section: the two paths side by side */
/* Closing CTA, reworked 2026-09-04. Two framed cards side by side read as two products
   to compare; the choice here is only "which way do you want to start", so the frames
   come off and a single hairline separates them. The tinted fills go too — the tag
   colour already tells the two paths apart. */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:0;text-align:left;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* The closing heading was centred over two framed cards. With the frames gone the
   columns start hard left, so a centred heading above them reads as a different block.
   Every page reaches this partial the same way, so the alignment is fixed here rather
   than in 34 page bodies. */
.sec-head.center:has(+ .paths){text-align:left;margin-left:0;max-width:26ch}
.sec-head.center:has(+ .paths) .lede{margin-left:0;max-width:52ch}
.path{padding:34px 38px;display:flex;flex-direction:column;gap:11px;
  background:none;border:0;border-radius:0}
.path + .path{border-left:1px solid var(--line)}
.path:first-child{padding-left:0}
.path::before,.path::after{display:none}
.path .tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.path.is-sales .tag{color:var(--green)}
.path h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.015em}
.path p{color:var(--muted);font-size:15px}
.path .btn{margin-top:auto;justify-content:center}
/* Fills removed with the frames — the tag colour carries the distinction. */

/* inline secondary prompt after a capability section */
.see-it{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:18px 22px;margin-top:26px}
.see-it p{font-size:15px;color:var(--txt);margin-right:auto}
.see-it p strong{color:var(--white)}

@media (max-width:760px){
  .paths{grid-template-columns:1fr}
  .cta-pair{display:grid;grid-template-columns:1fr}
  .cta-pair .cap{text-align:left}
}

/* ---------- amber: the AI-guided tour path ----------
   Uses the existing --amber token. 10.68:1 for dark text on the solid button,
   9.70:1 for amber text on the dark background — both well clear of AA. */
/* The AI tour and the demo are two ways in, not a loud one and a quiet one. A filled
   amber button next to an outlined blue one made the self-service path look like the
   offer and the sales path like the fallback — and it put a third accent on the page.
   Both closing buttons are now outlined; the mono tag above each says which is which. */
.btn-amber{border-color:var(--line-2);color:var(--white)}
.btn-amber:hover{border-color:var(--cyan);color:var(--white);background:rgba(31,154,216,.07)}
/* Was amber, which put a second accent next to the primary CTA and made the pair read
   as two equal choices. Amber is now the eyebrow/label colour only. */
.btn-amber-ghost{border-color:var(--line-2);color:var(--txt)}
.btn-amber-ghost:hover{border-color:var(--cyan);color:var(--white);background:rgba(31,154,216,.07)}

.path.is-ai .tag{color:var(--cyan-2)}

/* ---------- without/with process chain ---------- */
.flow{display:grid;gap:14px;margin-bottom:34px}
.flow-row{padding:20px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:9px 10px}
.flow-row .lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  width:100%;margin-bottom:4px}
.flow-step{font-family:var(--f-head);font-size:14px;color:var(--muted);border:1px solid var(--line);
  border-radius:7px;padding:6px 12px;white-space:nowrap}
.flow-row .sep{font-family:var(--f-mono);color:var(--line-2);font-size:13px}
.flow-without{border-color:rgba(221,79,89,.24);background:rgba(221,79,89,.04)}
.flow-without .lbl{color:var(--red)}
.flow-with{border-color:rgba(56,201,139,.3);background:rgba(56,201,139,.06)}
.flow-with .lbl{color:var(--green)}
.flow-with .flow-step{color:var(--white);border-color:rgba(56,201,139,.4);font-weight:600;font-size:15px}
.flow-with .sep{color:var(--green)}
@media (max-width:600px){.flow-step{white-space:normal}.flow-row{padding:18px}}

/* ---------- responsive pass for the wider container ----------
   Widening --container changes nothing below 1440px, so the risks are all at the small
   end and all pre-existing. These three were worth fixing while looking. */

/* The hero diagram, on a phone — rewritten 2026-09-04.
   It used to keep a 680px minimum width and let the figure scroll sideways. That kept
   the labels legible but put the single picture that explains the product half off the
   screen, with no sign it could be moved and words cut mid-syllable. The stages now
   stack: the horizontal SVG is dropped below 760px and .viz-mob renders the same three
   stages down the page. Exactly one of the two exists at any width, so nothing is
   announced twice. */
.viz-mob{display:none}
@media (max-width:760px){
  .hero-viz svg{display:none}
  .hero-viz{padding:clamp(14px,3vw,20px)}
  .viz-mob{display:grid;gap:0;counter-reset:vm;list-style:none;margin:0;padding:0}
  .viz-mob > li{counter-increment:vm;position:relative;padding:16px 16px 18px 46px;
    border:1px solid var(--line);border-radius:var(--r);background:rgba(9,49,74,.34)}
  .viz-mob > li.is-core{border-color:rgba(31,154,216,.34);background:rgba(3,121,178,.12)}
  /* The step number doubles as the connector: the rule below it draws the flow. */
  .viz-mob > li::before{content:counter(vm,decimal-leading-zero);position:absolute;
    left:14px;top:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--cyan)}
  .viz-mob > li + li{margin-top:26px}
  .viz-mob > li + li::after{content:"";position:absolute;left:21px;top:-26px;width:1px;height:26px;
    background:linear-gradient(180deg,transparent,var(--cyan))}
  .vm-hd{font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--white);letter-spacing:.01em}
  .vm-sub{font-size:13.5px;color:var(--muted);margin-top:2px}
  .vm-items{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;list-style:none;padding:0}
  .vm-items li{font-family:var(--f-mono);font-size:11.5px;color:var(--txt);
    border:1px solid rgba(117,194,226,.16);border-radius:6px;padding:4px 9px;background:rgba(6,36,56,.6)}
  .viz-mob .is-core .vm-items li{border-color:rgba(31,154,216,.3)}
  .vm-note{font-size:12.5px;color:var(--muted);margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
}

/* Two delivery tiles side by side leave ~133px of content each on a small phone. */
@media (max-width:440px){
  .delivery{grid-template-columns:1fr}
}

/* The Excel mock-up is five columns; .xl clips with overflow:hidden, so on a narrow
   screen the columns that carry the point were the ones being cut. Let it scroll. */
@media (max-width:600px){
  .xl{overflow-x:auto}
  .xl table{min-width:430px}
}

/* Existing site functions retained in the new layout. */
.newsletter {border-top:1px solid var(--line); padding:28px 0; max-width:640px}
.newsletter .form-grid {margin-top:16px}
.newsletter input[type=email] {width:100%; min-width:0}
.newsletter label {display:block}
.newsletter .consent {display:flex; align-items:flex-start; gap:10px}
.newsletter .consent label {font-size:13px}
.cookie-settings {font:inherit; color:inherit; background:none; border:0; padding:0; text-decoration:underline; cursor:pointer}
.article-archive {columns:2; padding-left:22px; margin-top:24px}
.article-archive li {break-inside:avoid; padding:8px 12px 8px 0}
.legacy-legal {overflow-wrap:anywhere}
.legacy-legal table {display:block; max-width:100%; overflow-x:auto}
@media(max-width:600px) {.article-archive {columns:1}}