/* Self-hosted fonts. Removes the last third-party request and the only visitor-IP
   disclosure that happened before a consent choice was made. Latin subsets, variable
   weight, ~59 KB total, served same-origin under our own cache headers. */
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans.woff2') format('woff2');
  font-weight: 100 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

/* AutomateFX design system
   Breakpoints: 400 / 640 / 900 / 1100. The 900 breakpoint is the fix for the
   641-729px band where the old header pushed its CTA off screen. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

:root {
  --bg:            #0A0F1C;
  --bg-alt:        #0F1525;
  --card:          #151D2E;
  --card-hi:       #1A2438;
  --accent:        #06B6D4;
  --accent-2:      #3B82F6;
  --gradient:      linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
  --ink:           #F8FAFC;
  --ink-2:         #A9B7C8;   /* 9.1:1 on --bg */
  --ink-3:         #8FA0B4;   /* 6.4:1 on --bg, 5.6:1 on --card — passes AA */
  --line:          rgba(255,255,255,0.09);
  --line-strong:   rgba(255,255,255,0.16);
  --ring:          #22D3EE;
  --ok:            #34D399;
  --warn:          #FBBF24;
  --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-pill: 999px;
  --pad: clamp(16px, 4vw, 24px);
  --gap: clamp(16px, 2.4vw, 24px);
  --section-y: clamp(56px, 9vw, 112px);
  --serif: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 18px 40px -20px rgba(0,0,0,.75);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* NOTE: no overflow-x:hidden. Overflow is fixed at source, not masked. */
}

img, video { max-width: 100%; height: auto; display: block; }
svg { width: 1em; height: 1em; flex: none; }   /* default; class rules override */

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 860px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(32px, 5.2vw, 56px); }
h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3 { font-size: clamp(18px, 1.5vw, 21px); letter-spacing: -0.01em; }
h4 { font-size: 15px; letter-spacing: 0.02em; }
p { text-wrap: pretty; }
.lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-3); }
.eyebrow {
  display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ring); }

/* ---------- Focus: one global, visible rule ---------- */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 1200;
  background: var(--ink); color: var(--bg); font-weight: 700;
  padding: 12px 18px; border-radius: var(--r-sm); transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
  border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--primary { background: var(--gradient); color: #06121F; box-shadow: 0 8px 26px -10px rgba(6,182,212,.7); }
.btn--primary:hover { color: #06121F; transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(6,182,212,.85); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { color: var(--ink); background: rgba(255,255,255,.05); border-color: var(--accent); }
.btn--block { width: 100%; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(10,15,28,.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--gradient); display: grid; place-items: center; flex: none; }
.brand-mark svg { width: 18px; height: 18px; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.brand-name span { color: var(--accent); }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav a {
  display: flex; align-items: center; min-height: 44px; padding: 10px 13px; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.nav a[aria-current="page"] { color: var(--ink); background: rgba(255,255,255,.08); }
.header-cta { flex: none; }
.nav-toggle { display: none; }

/* The old site swapped nav->hamburger at 640px while the header needed ~730px.
   Swapping at 900px removes that band entirely, with margin to spare. */
@media (max-width: 900px) {
  .nav, .header-cta { display: none; }
  .nav-toggle {
    display: inline-grid; place-items: center; margin-left: auto;
    width: 48px; height: 48px; flex: none;
    background: transparent; border: 1px solid var(--line-strong);
    border-radius: var(--r-sm); color: var(--ink); cursor: pointer;
  }
  .nav-toggle svg { width: 22px; height: 22px; }
  .nav-toggle[aria-expanded="true"] { background: rgba(255,255,255,.08); border-color: var(--accent); }
}

.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--bg-alt); }
.mobile-nav.is-open { display: block; }
@media (min-width: 901px) { .mobile-nav { display: none !important; } }
.mobile-nav ul { list-style: none; padding: 10px 0 16px; }
.mobile-nav a {
  display: block; padding: 14px var(--pad); min-height: 48px;
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px;
}
.mobile-nav a:hover { background: rgba(255,255,255,.05); }
.mobile-nav .btn { margin: 12px var(--pad) 0; width: calc(100% - var(--pad) * 2); }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section-head { max-width: 68ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { color: var(--ink-2); margin-top: 12px; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(48px, 8vw, 104px) var(--section-y); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 620px;
  background: radial-gradient(60% 60% at 70% 20%, rgba(6,182,212,.20), transparent 70%),
              radial-gradient(50% 50% at 20% 10%, rgba(59,130,246,.16), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { margin-bottom: 18px; }
.hero .lede { margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 480px) { .hero-actions .btn { width: 100%; } }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: rgba(255,255,255,.03); font-size: 13.5px; color: var(--ink-2);
}
.badge svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* ---------- Grids: min() prevents the <=360px clipping ---------- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
@media (min-width: 1100px) { .grid--3.grid--fixed3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 10px;
}
.card h3 { color: var(--ink); }
.card p { color: var(--ink-2); font-size: 15px; }
.card--link { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s, background-color .15s; }
.card--link:hover { border-color: var(--accent); background: var(--card-hi); transform: translateY(-2px); color: inherit; }
@media (prefers-reduced-motion: reduce) { .card--link:hover { transform: none; } }
.card-icon {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: rgba(6,182,212,.12); border: 1px solid rgba(6,182,212,.28); color: var(--accent); margin-bottom: 4px;
}
.card-icon svg { width: 21px; height: 21px; }
.card-more { margin-top: auto; padding-top: 12px; font-weight: 600; font-size: 14.5px; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; }
.card-more svg { width: 15px; height: 15px; }

/* ---------- Pricing ---------- */
.price-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
@media (min-width: 1000px) { .price-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .price-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.price {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column;
}
.price--feature { border-color: rgba(6,182,212,.5); background: linear-gradient(180deg, rgba(6,182,212,.07), transparent 40%), var(--card); }
.price-tag { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 40px); font-weight: 700; letter-spacing: -.03em; margin: 6px 0 2px; }
.price-tag small { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.price-note { color: var(--ink-3); font-size: 14px; margin-bottom: 18px; }
.price ul { list-style: none; display: grid; gap: 10px; margin-bottom: 22px; }
.price li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); }
.price li svg { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 4px; }
.price .btn { margin-top: auto; }
.tag {
  display: inline-block; align-self: flex-start; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--gradient); color: #06121F; margin-bottom: 12px;
}
.tag--quiet { background: rgba(255,255,255,.08); color: var(--ink-2); }

/* ---------- Steps ---------- */
.steps { counter-reset: s; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.step { position: relative; padding-top: 52px; }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 17px;
  color: var(--accent); border: 1.5px solid var(--accent); background: var(--bg-alt);
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--ink-2); font-size: 15px; }

/* ---------- Flow strip ---------- */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.flow span { padding: 7px 13px; border-radius: var(--r-pill); background: rgba(6,182,212,.10); border: 1px solid rgba(6,182,212,.25); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.flow svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }

/* ---------- FAQ (real buttons) ---------- */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; min-height: 56px; background: none; border: 0; cursor: pointer;
  font: 600 16px/1.4 var(--sans); color: var(--ink); text-align: left;
}
.faq-q:hover { background: rgba(255,255,255,.04); }
.faq-q svg { width: 18px; height: 18px; color: var(--accent); flex: none; transition: transform .2s; }
.faq-q[aria-expanded="true"] svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .faq-q svg { transition: none; } }
.faq-a { padding: 0 20px 20px; color: var(--ink-2); font-size: 15.5px; }
.faq-a[hidden] { display: none; }

/* ---------- Project / example ---------- */
.project { display: grid; gap: clamp(20px, 3vw, 36px); align-items: start; }
@media (min-width: 900px) { .project { grid-template-columns: 1.05fr .95fr; } }
.status-list { display: grid; gap: 12px; }
.status {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
}
.status svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.status--done svg { color: var(--ok); }
.status--wip svg { color: var(--warn); }
.status strong { display: block; font-size: 15px; }
.status span { color: var(--ink-3); font-size: 14px; }
.callout {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--warn);
  border-radius: var(--r-sm); padding: 16px 18px; background: rgba(251,191,36,.06);
  color: var(--ink-2); font-size: 15px;
}

/* ---------- Form ---------- */
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--sans);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6E7D90; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-color: var(--accent); }
.field-error { display: block; color: #FCA5A5; font-size: 13.5px; margin-top: 6px; min-height: 0; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #F87171; }
.form-status { border-radius: var(--r-sm); padding: 13px 15px; font-size: 15px; margin-bottom: 16px; }
.form-status[hidden] { display: none; }
.form-status--error { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.4); color: #FECACA; }
.form-status--ok { background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.4); color: #A7F3D0; }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp input, .hp label { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; font-size: 1px; }
.form-legal { font-size: 13.5px; color: var(--ink-3); margin-top: 14px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: clamp(24px, 4vw, 44px); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: .85fr 1.15fr; } }
.contact-list { display: grid; gap: 10px; margin-top: 22px; }
.contact-list a, .contact-list p {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  color: var(--ink); text-decoration: none; font-size: 15px;
}
.contact-list a:hover { border-color: var(--accent); color: var(--ink); }
.contact-list svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(40px, 6vw, 64px) 28px; background: var(--bg-alt); }
.footer-grid { display: grid; gap: clamp(24px, 4vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-col .footer-head { color: var(--ink); margin-bottom: 14px; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--ink-3); }
.footer-col ul { list-style: none; display: grid; gap: 4px; }
.footer-col a { display: flex; align-items: center; padding: 7px 0; min-height: 44px; color: var(--ink-2); text-decoration: none; font-size: 15px; }
.footer-col a:hover { color: var(--accent); }
.footer-about p { color: var(--ink-3); font-size: 14.5px; margin-top: 14px; max-width: 42ch; }
.footer-bottom {
  margin-top: clamp(28px, 4vw, 44px); padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  color: var(--ink-3); font-size: 13.5px;
}
.footer-bottom a { color: var(--ink-3); display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a:hover { color: var(--accent); }
/* Scoped to .footer-bottom on purpose. `.footer-bottom a` (0,1,1) outranks a bare
   `.social` (0,1,0), so the previous rules never applied: the glyph rendered in the
   dimmest token and, because the anchor was flex rather than grid, `place-items`
   left it pinned to the left of its 44px box instead of centred. */
.footer-bottom .social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--r-sm);
  transition: background-color .15s ease, border-color .15s ease;
}
.footer-bottom .social svg { width: 20px; height: 20px; }
.footer-bottom .social:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.11);
  border-color: var(--accent);
}
.footer-bottom .social:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .footer-bottom .social { transition: none; } }


/* ---------- Legal document pages ---------- */
.doc { max-width: 72ch; }
.doc h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 40px 0 12px; }
.doc h3 { margin: 26px 0 8px; }
.doc p, .doc li { color: var(--ink-2); margin-bottom: 12px; }
.doc ul, .doc ol { padding-left: 22px; margin-bottom: 16px; }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--ink); }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.doc th { color: var(--ink); font-weight: 600; }

/* ---------- Utilities ---------- */
.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; }
.stack > * + * { margin-top: 16px; }
.center { text-align: center; }
.mt-l { margin-top: clamp(28px, 4vw, 44px); }

/* ---------- Consent banner ---------- */
#afx-consent {
  position: fixed; inset: auto 0 0 0; z-index: 1100;
  background: var(--card); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -18px 40px -24px rgba(0,0,0,.9);
}
.afx-consent-inner {
  max-width: 1180px; margin-inline: auto; padding: 18px var(--pad);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.afx-consent-inner > div:first-child { flex: 1 1 420px; min-width: 0; }
#afx-consent p { font-size: 14.5px; color: var(--ink-2); }
#afx-consent p + p { margin-top: 6px; }
#afx-consent strong { color: var(--ink); font-size: 15.5px; }
.afx-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) {
  .afx-consent-actions { width: 100%; }
  .afx-consent-actions .btn { flex: 1 1 100%; }
}

/* ---------- Chat widget ---------- */
#afx-chat-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 950;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--gradient); color: #06121F;
  display: grid; place-items: center;
  box-shadow: 0 14px 34px -12px rgba(6,182,212,.8);
}
#afx-chat-launcher:hover { transform: translateY(-2px); }
#afx-chat-launcher svg { width: 24px; height: 24px; }
#afx-chat-launcher.is-hidden { display: none; }
/* The launcher is a JS control; without script it would be a dead button. */
.no-js #afx-chat-launcher { display: none; }
/* Once the footer bar is on screen the reader has reached the end of the page, and the
   launcher would otherwise sit on top of the footer's own links. Which links it covers
   depends on where the container's right edge falls, so this is not a breakpoint
   problem — measured, the X link was unclickable from 901px to ~1240px. Stepping aside
   fixes every width and needs no magic number. visibility:hidden also takes it out of
   the tab order and out of hit-testing. */
body.afx-footer-visible #afx-chat-launcher {
  opacity: 0; visibility: hidden; pointer-events: none;
}
#afx-chat-launcher { transition: transform .15s ease, opacity .2s ease, visibility .2s; }
@media (prefers-reduced-motion: reduce) { #afx-chat-launcher { transition: none; } }
/* The consent banner and the launcher both live bottom-right. While a consent
   decision is pending the launcher stands down, so they never compete. */
body.afx-consent-open #afx-chat-launcher { display: none; }
@media (prefers-reduced-motion: reduce) { #afx-chat-launcher { transition: none; } #afx-chat-launcher:hover { transform: none; } }
@media (max-width: 640px) { #afx-chat-launcher { width: 52px; height: 52px; right: 16px; bottom: 16px; } }

#afx-chat-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 960;
  width: 396px; max-width: calc(100vw - 32px);
  height: 600px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
#afx-chat-panel[hidden] { display: none; }
@media (max-width: 640px) {
  #afx-chat-panel { inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; border: 0; }
}
.afx-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--card-hi); }
.afx-chat-head .brand-mark { width: 32px; height: 32px; }
.afx-chat-head h2 { font-size: 15.5px; font-family: var(--sans); font-weight: 700; letter-spacing: 0; }
.afx-chat-head p { font-size: 12.5px; color: var(--ink-3); }
.afx-chat-close { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer; }
.afx-chat-close:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.afx-chat-close svg { width: 18px; height: 18px; }
.afx-chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.afx-msg { max-width: 86%; padding: 11px 14px; border-radius: var(--r); font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; }
.afx-msg--bot { align-self: flex-start; background: var(--bg-alt); border: 1px solid var(--line); color: var(--ink-2); }
.afx-msg--me { align-self: flex-end; background: var(--gradient); color: #06121F; font-weight: 500; }
.afx-msg--err { align-self: flex-start; background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.4); color: #FECACA; }
.afx-msg a { color: var(--accent); }
.afx-msg--me a { color: #06121F; }
.afx-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.afx-chip { padding: 9px 14px; min-height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--bg-alt); color: var(--ink); font: 500 13.5px/1 var(--sans); cursor: pointer; }
.afx-chip:hover { border-color: var(--accent); background: var(--card-hi); }
.afx-typing { display: inline-flex; gap: 4px; align-items: center; }
.afx-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: afxblink 1.2s infinite; }
.afx-typing i:nth-child(2) { animation-delay: .2s; }
.afx-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes afxblink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .afx-typing i { animation: none; opacity: .6; } }
.afx-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--card-hi); }
.afx-chat-form input {
  flex: 1; min-width: 0; min-height: 44px; padding: 10px 13px;
  background: var(--bg); color: var(--ink);
  /* 16px is not a style choice: iOS Safari zooms the whole page when a text input under 16px
     receives focus, which throws the visitor out of the layout as soon as they start typing. */
  font: 400 16px/1.4 var(--sans);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
}
.afx-chat-send { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--gradient); color: #06121F; display: grid; place-items: center; cursor: pointer; }
.afx-chat-send:disabled { opacity: .5; cursor: not-allowed; }
.afx-chat-send svg { width: 17px; height: 17px; }
.afx-chat-note { padding: 0 14px 12px; font-size: 11.5px; color: var(--ink-3); text-align: center; background: var(--card-hi); }
.afx-chat-note a { color: var(--ink-3); text-decoration: underline; }

/* ============================================================================
   SYSTEM LANGUAGE
   Nodes, connectors, interface panels and status dots — the recurring motif.
   Everything below is CSS/SVG. No library was added for any of it.
   ========================================================================= */

/* ---------- Section eyebrow with a connector tick ---------- */
.eyebrow--tick { display: inline-flex; align-items: center; gap: 9px; }
.eyebrow--tick::before {
  content: ""; width: 22px; height: 1px; background: var(--accent); opacity: .7; flex: none;
}

/* ---------- Status dot ---------- */
.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none;
  box-shadow: 0 0 0 3px rgba(52,211,153,.14);
}
.dot--idle { background: var(--ink-3); box-shadow: 0 0 0 3px rgba(143,160,180,.12); }
.dot--live { background: var(--accent); box-shadow: 0 0 0 3px rgba(6,182,212,.16); }

/* ---------- System diagram: the hero's centrepiece ---------- */
.system {
  --node-bg: #131C2C;
  position: relative; display: grid; gap: 10px; min-width: 0;
  padding: clamp(12px, 2.2vw, 22px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(6,182,212,.05), transparent 30%),
    var(--card);
  box-shadow: var(--shadow);
}
.system::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(70% 70% at 50% 0%, #000, transparent 75%);
}
.system > * { position: relative; }
.system-bar {
  display: flex; align-items: center; gap: 9px; padding-bottom: 12px; margin-bottom: 2px;
  border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
.system-bar .dot { margin-right: 1px; }
.system-bar span:last-child { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }

.node {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--node-bg); border: 1px solid var(--line);
}
.node > span { min-width: 0; }
.node b, .node small { overflow-wrap: anywhere; }
.node-ico {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(6,182,212,.12); border: 1px solid rgba(6,182,212,.26); color: var(--accent);
}
.node-ico svg { width: 17px; height: 17px; }
.node b { display: block; font: 600 14.5px/1.3 var(--sans); color: var(--ink); }
.node small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
@media (max-width: 460px) { .node-tag { display: none; } }
.node-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: 4px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--line); white-space: nowrap;
}
.node--accent { border-color: rgba(6,182,212,.4); background: linear-gradient(180deg, rgba(6,182,212,.10), var(--node-bg)); }
.node--accent .node-tag { color: var(--accent); border-color: rgba(6,182,212,.4); }

/* vertical connector between nodes */
.link {
  height: 18px; margin-left: 31px; position: relative;
}
.link::before {
  content: ""; position: absolute; left: 0; top: -2px; bottom: -2px; width: 1.5px;
  background: linear-gradient(180deg, rgba(6,182,212,.45), rgba(6,182,212,.2));
}
.link::after {
  content: ""; position: absolute; left: -2.25px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); top: 6px; box-shadow: 0 0 8px rgba(6,182,212,.8);
}
@media (prefers-reduced-motion: no-preference) {
  .link::after { animation: flow 3.6s ease-in-out infinite; }
  .link:nth-of-type(2)::after { animation-delay: .45s; }
  .link:nth-of-type(3)::after { animation-delay: .9s; }
  .link:nth-of-type(4)::after { animation-delay: 1.35s; }
  @keyframes flow {
    0%, 100% { top: -2px; opacity: 0; }
    18% { opacity: 1; }
    72% { opacity: 1; }
    80%, 99% { top: calc(100% - 4px); opacity: 0; }
  }
}

/* ---------- Hero split ---------- */
.hero-split { display: grid; min-width: 0; gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 980px) { .hero-split { grid-template-columns: 1.02fr minmax(0, .98fr); } }

/* ---------- Pillars: three, deliberately not cards ---------- */
.pillars { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar {
  padding: clamp(24px, 3vw, 34px) 0; border-bottom: 1px solid var(--line); position: relative;
}
@media (min-width: 900px) {
  .pillar { padding: clamp(28px, 3vw, 38px) clamp(20px, 2.4vw, 32px); border-bottom: 0; }
  .pillar + .pillar { border-left: 1px solid var(--line); }
  .pillar:first-child { padding-left: 0; }
  .pillar:last-child { padding-right: 0; }
}
.pillar-n {
  font: 700 12px/1 var(--sans); letter-spacing: .14em; color: var(--accent);
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.pillar-n::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.pillar h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 10px; }
.pillar p { color: var(--ink-2); font-size: 15.5px; margin-bottom: 16px; }
.pillar ul { list-style: none; display: grid; gap: 7px; margin-bottom: 18px; }
.pillar li { font-size: 14.5px; color: var(--ink-3); display: flex; gap: 9px; align-items: baseline; }
.pillar li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-2px); }
.pillar a { font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center;
  min-height: 44px; gap: 7px; text-decoration: none; }
.pillar a svg { width: 15px; height: 15px; transition: transform .15s; }
.pillar a:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .pillar a:hover svg { transform: none; } }

/* ---------- Before / after ---------- */
.ba { display: grid; gap: clamp(20px, 3vw, 28px); align-items: stretch; }
@media (min-width: 900px) { .ba { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.ba-side { min-width: 0; }
.ba-side h3 { font-size: 17px; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.ba-scatter { display: grid; gap: 9px; }
@media (min-width: 520px) { .ba-scatter { grid-template-columns: 1fr 1fr; } }
.scrap {
  min-width: 0; overflow-wrap: anywhere;
  padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink-3);
  border: 1px dashed rgba(255,255,255,.16); background: rgba(255,255,255,.02);
  display: flex; align-items: center; gap: 9px;
}
.scrap svg { width: 15px; height: 15px; flex: none; opacity: .65; }
.scrap:nth-child(2) { transform: rotate(-.5deg); }
.scrap:nth-child(3) { transform: rotate(.6deg); }
.scrap:nth-child(5) { transform: rotate(-.4deg); }
.ba-arrow { display: grid; place-items: center; color: var(--accent); }
.ba-arrow svg { width: 26px; height: 26px; }
@media (max-width: 899px) { .ba-arrow svg { transform: rotate(90deg); } }

/* ---------- Horizontal flow rail ---------- */
.rail {
  display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.rail-step {
  flex: 1 0 auto; min-width: 128px; padding: 14px 16px; position: relative;
  border: 1px solid var(--line); background: var(--card); text-align: left;
}
.rail-step:first-child { border-radius: var(--r) 0 0 var(--r); }
.rail-step:last-child { border-radius: 0 var(--r) var(--r) 0; }
.rail-step + .rail-step { border-left: 0; }
.rail-step b { display: block; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.rail-step small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.rail-step::after {
  content: ""; position: absolute; right: -6px; top: 50%; width: 10px; height: 10px;
  transform: translateY(-50%) rotate(45deg); z-index: 1;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--card);
}
.rail-step:last-child::after { display: none; }
.rail-step--start { border-color: rgba(6,182,212,.4); }
.rail-step--start b { color: var(--accent); }
@media (max-width: 1000px) {
  .rail { display: grid; gap: 8px; overflow: visible; }
  .rail-step { border-radius: var(--r) !important; border-left: 1px solid var(--line) !important; min-width: 0; }
  .rail-step::after { right: auto; left: 22px; top: auto; bottom: -6px; transform: rotate(135deg); }
}
@media (min-width: 1001px) { .rail-step { min-width: 0; } }

/* ---------- Device mock-ups ---------- */
.mock { position: relative; }
.browser {
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong);
  background: #0D1422; box-shadow: var(--shadow);
}
.browser-bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 12px;
  background: #151E2E; border-bottom: 1px solid var(--line);
}
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2C3849; flex: none; }
.browser-url {
  margin-left: 6px; flex: 1; min-width: 0; font: 500 11.5px/1 var(--sans); color: var(--ink-3);
  background: #0D1422; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser img { width: 100%; display: block; }
.phone {
  border-radius: 22px; overflow: hidden; border: 5px solid #1B2436;
  background: #0D1422; box-shadow: var(--shadow);
}
.phone img { width: 100%; display: block; }
.mock-pair { display: grid; gap: 18px; align-items: end; }
@media (min-width: 620px) { .mock-pair { grid-template-columns: 1fr 168px; gap: 16px; } }
@media (min-width: 1100px) { .mock-pair { grid-template-columns: 1fr 186px; } }
.mock-caption { margin-top: 12px; font-size: 13px; color: var(--ink-3); display: flex; align-items: flex-start; gap: 8px; }
.mock-caption svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* ---------- Case study layout ---------- */
.case { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 1000px) { .case { grid-template-columns: 0.88fr 1.12fr; align-items: start; } }
.case-meta { display: grid; gap: 14px; margin-top: 22px; }
.case-meta-row {
  display: grid; grid-template-columns: 116px 1fr; gap: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.case-meta-row dt { color: var(--ink-3); }
.case-meta-row dd { color: var(--ink); }
.capability { display: grid; gap: 22px; }
.capability-group .cap-head {
  font: 700 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px; display: flex; align-items: center; gap: 9px;
}
.capability-group .cap-head::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.capability-group ul { list-style: none; display: grid; gap: 8px; }
.capability-group li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); align-items: baseline; }
.capability-group li svg { width: 15px; height: 15px; color: var(--accent); flex: none; transform: translateY(2px); }
.status-line svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.status-line {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: 13.5px; color: var(--ink-2); background: rgba(255,255,255,.02);
}

/* ---------- Compare table ---------- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.compare-wrap:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.compare-hint { font-size: 13px; color: var(--ink-3); margin-top: 10px; }
@media (min-width: 720px) { .compare-hint { display: none; } }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14.5px; }
.compare th, .compare td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--card-hi); color: var(--ink); font-weight: 600; white-space: nowrap; }
.compare thead th:first-child { width: 38%; }
.compare tbody th { font-weight: 500; color: var(--ink-2); }
.compare td { color: var(--ink-3); text-align: center; }
.compare td svg { width: 16px; height: 16px; color: var(--accent); display: inline-block; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare .price-row td, .compare .price-row th { font-family: var(--serif); font-size: 19px; color: var(--ink); font-weight: 700; }

/* ---------- Quiet callout ---------- */
.note {
  display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--ink-3);
  padding: 14px 16px; border-left: 2px solid var(--line-strong); background: rgba(255,255,255,.02);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; opacity: .8; }

/* ---------- Section reveal (opt-in, reduced-motion safe) ---------- */
/* Scoped to .js so that if the script never runs, the content is simply visible
   rather than permanently transparent. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .js .reveal.is-in { opacity: 1; transform: none; }
}