/* ===========================================================================
   Afford-X · Webfonts
   The live site uses a geometric display sans (the wordmark + headings) paired
   with a neutral humanist sans for UI/body. The original Webflow CSS was not
   retrievable, so these are NEAREST GOOGLE-FONTS MATCHES:
     · Poppins   → display / headings / the Afford-X wordmark feel
     · Open Sans → body, UI labels, data
   >>> SUBSTITUTION FLAGGED: replace with the licensed brand fonts if different.
   Loaded from the Google Fonts CDN (requires network).
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap');/* ===========================================================================
   Afford-X · Color Tokens
   Brand palette sampled from the live product (logo, marketing site, dashboard).
   Primary identity = Afford-X green. Red is the accent / alert signal.
   Black is the structural color (sidebar, headings). Blue + yellow appear
   only inside brand illustrations.
   =========================================================================== */
:root {
  /* --- Brand green scale (primary) --- */
  --afx-green-50:  #EDF5EE;
  --afx-green-100: #CFE4D2;
  --afx-green-200: #A5CEAC;
  --afx-green-300: #89C193;
  --afx-green-400: #74A66A;
  --afx-green-500: #54A966;  /* core brand green */
  --afx-green-600: #3A7B47;
  --afx-green-700: #2A5734;
  --afx-green-800: #1C3B23;

  /* --- Brand red (accent / alert / the "X") --- */
  --afx-red-bright: #F30002; /* UI accent: trial badge, alerts, the dashboard X */
  --afx-red-500:    #D81E0B;
  --afx-red-600:    #BF0603; /* deep logo red */
  --afx-red-700:    #8E0402;

  /* --- Structural neutrals --- */
  --afx-black:   #050708;  /* sidebar, near-black surfaces */
  --afx-ink:     #14181A;  /* primary text */
  --afx-gray-700:#3A4145;
  --afx-gray-600:#5C6469;
  --afx-gray-500:#7E868B;  /* muted / subtext */
  --afx-gray-400:#A9B0B4;
  --afx-gray-300:#D2D7D9;
  --afx-gray-200:#E5E8EA;  /* borders */
  --afx-gray-100:#F1F3F4;  /* hairlines / fills */
  --afx-gray-50: #F7F9F9;  /* page wash */
  --afx-white:   #FFFFFF;

  /* --- Illustration-only accents (do not use for UI chrome) --- */
  --afx-slate:  #96ADC8;
  --afx-yellow: #F3D03C;

  /* ===================== Semantic aliases ===================== */
  --color-primary:        var(--afx-green-500);
  --color-primary-hover:  var(--afx-green-600);
  --color-primary-press:  var(--afx-green-700);
  --color-primary-soft:   var(--afx-green-50);
  --color-primary-contrast: var(--afx-white);

  --color-accent:         var(--afx-red-bright);
  --color-accent-deep:    var(--afx-red-600);

  --surface-page:    var(--afx-gray-50);
  --surface-card:    var(--afx-white);
  --surface-inverse: var(--afx-black);
  --surface-soft:    var(--afx-green-50);

  --text-strong:  var(--afx-ink);
  --text-body:    var(--afx-gray-700);
  --text-muted:   var(--afx-gray-500);
  --text-on-dark: var(--afx-white);
  --text-brand:   var(--afx-green-600);

  --border-default: var(--afx-gray-200);
  --border-strong:  var(--afx-gray-300);
  --border-brand:   var(--afx-green-500);

  --color-success: var(--afx-green-500);
  --color-danger:  var(--afx-red-bright);
  --color-warning: var(--afx-yellow);
  --color-info:    var(--afx-slate);

  --focus-ring: var(--afx-green-500);
}/* ===========================================================================
   Afford-X · Typography Tokens
   Display = Poppins (geometric, matches the wordmark). Body/UI = Open Sans.
   =========================================================================== */
:root {
  /* Families */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'SFMono-Regular', ui-monospace, 'Menlo', monospace;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* Type scale (px) — display sizes are bold geometric; body is humanist */
  --fs-display-xl: 64px;  /* hero "We Make Intent Better." */
  --fs-display-l:  48px;
  --fs-h1:         38px;
  --fs-h2:         30px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-lead:       19px;  /* hero subcopy / lead paragraph */
  --fs-body:       16px;
  --fs-sm:         14px;
  --fs-xs:         12px;
  --fs-eyebrow:    13px;  /* uppercase labels, e.g. "PRODUCT HIGHLIGHTS" */

  /* Line heights */
  --lh-tight:   1.08; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-eyebrow: 0.14em; /* @kind font */

  /* Semantic roles */
  --text-display-font: var(--font-display);
  --text-heading-font: var(--font-display);
  --text-body-font:    var(--font-body);
}/* ===========================================================================
   Afford-X · Spacing & Layout Tokens
   4px base grid. Generous section rhythm on marketing surfaces; compact,
   card-driven density inside the product.
   =========================================================================== */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 24px;
  --section-y:     96px;   /* vertical rhythm between marketing sections */
  --sidebar-w:     96px;   /* product nav rail width */
  --field-h:       44px;   /* min interactive target */
}/* ===========================================================================
   Afford-X · Radius, Border & Elevation Tokens
   The product leans on hairline borders (often brand-green outlines) over heavy
   shadows. Cards are lightly rounded; badges/pills are fully round.
   =========================================================================== */
:root {
  /* Corner radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;   /* default control / card radius */
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* Border widths */
  --border-hair: 1px;
  --border-thick:2px;   /* brand-green outline cards */

  /* Elevation — soft, low-contrast. Green-tinted ambient on brand surfaces. */
  --shadow-xs: 0 1px 2px rgba(5, 7, 8, 0.06);
  --shadow-sm: 0 1px 3px rgba(5, 7, 8, 0.08), 0 1px 2px rgba(5, 7, 8, 0.04);
  --shadow-md: 0 4px 12px rgba(5, 7, 8, 0.08);
  --shadow-lg: 0 12px 32px rgba(5, 7, 8, 0.10);
  --shadow-brand: 0 8px 24px rgba(84, 169, 102, 0.22);

  /* Focus ring */
  --ring-width: 3px; /* @kind other */
  --ring-color: rgba(84, 169, 102, 0.35);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-normal: 200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
}/* ===========================================================================
   Afford-X · Base element defaults & helpers
   Light reset + brand defaults. Kept minimal so consuming pages opt in.
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

a { color: var(--text-brand); text-decoration: none; }
a:hover { color: var(--afx-green-700); }

/* Eyebrow / section kicker — uppercase tracked label seen across the site */
.afx-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
}

/* Brand gradient text helper (green→deep green), used sparingly on numerals */
.afx-grad-green {
  background: linear-gradient(135deg, var(--afx-green-500), var(--afx-green-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

::selection { background: var(--afx-green-200); color: var(--afx-ink); }/* Afford-X · ALM agent + shared animation styles (linked by blog pages) */
.alm-mark{display:inline-block;line-height:0}
.alm-mark svg{display:block;overflow:visible}
.alm-orbit{transform-origin:12px 12px;animation:alm-orbit 5.5s linear infinite}
@keyframes alm-orbit{to{transform:rotate(360deg)}}
.alm-core{transform-origin:12px 12px;animation:alm-breathe 3.4s ease-in-out infinite}
@keyframes alm-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.alm-state-thinking .alm-orbit{animation-duration:1.05s}
.alm-state-thinking .alm-core{animation:alm-think 0.9s ease-in-out infinite}
@keyframes alm-think{0%,100%{transform:scale(0.86) rotate(0deg)}50%{transform:scale(1.12) rotate(8deg)}}
.alm-state-listening .alm-core{animation:alm-listen 1.6s ease-in-out infinite}
@keyframes alm-listen{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.alm-state-listening .alm-orbit{animation-duration:3s}
.alm-state-answering .alm-core{animation:alm-answer 1.3s ease-in-out infinite}
@keyframes alm-answer{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.alm-state-answering .alm-orbit{animation-duration:1.8s}
@media (prefers-reduced-motion: reduce){.alm-orbit,.alm-core{animation:none!important}}
.alm-dot{position:relative}
.alm-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:alm-ping 1.8s ease-out infinite}
@keyframes alm-ping{0%{transform:scale(0.7);opacity:0.55}80%,100%{transform:scale(1.7);opacity:0}}
.alm-bubble-ring{position:absolute;inset:0;border-radius:50%;animation:alm-bubblepulse 2.6s ease-out infinite}
@keyframes alm-bubblepulse{0%{box-shadow:0 0 0 0 rgba(84,169,102,0.40)}70%,100%{box-shadow:0 0 0 16px rgba(84,169,102,0)}}
.alm-panel{animation:alm-rise 0.34s cubic-bezier(0.16,1,0.3,1)}
@keyframes alm-rise{from{opacity:0;transform:translateY(16px) scale(0.96)}to{opacity:1;transform:none}}
.alm-msg{animation:alm-msg 0.3s cubic-bezier(0.16,1,0.3,1)}
@keyframes alm-msg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.alm-think-dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--afx-green-500);margin:0 2px;animation:alm-bounce 1.2s ease-in-out infinite}
.alm-think-dots span:nth-child(2){animation-delay:0.18s}
.alm-think-dots span:nth-child(3){animation-delay:0.36s}
@keyframes alm-bounce{0%,80%,100%{transform:translateY(0);opacity:0.4}40%{transform:translateY(-5px);opacity:1}}
.alm-chip{cursor:pointer;transition:background 0.15s ease,border-color 0.15s ease,transform 0.12s ease}
.alm-chip:hover{background:var(--afx-green-50);border-color:var(--afx-green-500);transform:translateY(-1px)}
.alm-scroll::-webkit-scrollbar{width:8px}
.alm-scroll::-webkit-scrollbar-thumb{background:var(--afx-gray-200);border-radius:8px}

/* ===== blog ===== */
.blog-card{transition:transform 0.18s var(--ease-out), box-shadow 0.18s ease, border-color 0.18s ease;cursor:pointer}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--afx-green-300)}
.blog-card:hover .blog-title{color:var(--afx-green-700)}
.blog-thumb img{transition:transform 0.4s var(--ease-out)}
.blog-card:hover .blog-thumb img{transform:scale(1.04)}
.cat-chip{transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease}
.cat-chip[data-on="true"]{background:var(--afx-green-500);color:#fff;border-color:var(--afx-green-500)}
.cat-chip[data-on="false"]:hover{border-color:var(--afx-green-400);color:var(--afx-green-700)}
.prose p{font-family:var(--font-body);font-size:18px;line-height:1.72;color:var(--afx-gray-700);margin:0 0 22px}
.prose h2{font-family:var(--font-display);font-weight:700;font-size:27px;letter-spacing:-0.02em;color:var(--afx-ink);margin:40px 0 14px}
.prose h3{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--afx-ink);margin:28px 0 10px}
.prose a{color:var(--afx-green-700);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--afx-ink)}
.prose ul{margin:0 0 22px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.prose ul li{position:relative;padding-left:30px;font-family:var(--font-body);font-size:18px;line-height:1.6;color:var(--afx-gray-700)}
.prose ul li::before{content:'';position:absolute;left:6px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--afx-green-500);transform:rotate(45deg)}