/* =============================================================================
   ChannelSnap ERP — design system

   Warm editorial SaaS: a soft cream canvas, very generous whitespace, big soft
   radii, and a large low-contrast serif display face (Newsreader) set beside a
   neutral grotesque for everything else (Inter).

   Black carries the calls to action. Colour arrives as a spectrum — violet into
   magenta into gold — carried by the hero particle field and used sparingly to
   tint alternate bands and per-industry cards.
   ========================================================================== */

:root {
  /* ---- surfaces ------------------------------------------------------ */
  --white: #ffffff;
  --cream: #f6f3ee;      /* the page ground */
  --canvas: var(--cream);
  --tint: #eeeae2;       /* warm neutral band */
  --tint-warm: #fdeef4;  /* magenta wash */
  --tint-mint: #eaf6f0;
  --tint-lilac: #f0ebfd;
  --tint-sky: #ecf1fb;

  /* ---- ink ----------------------------------------------------------- */
  --ink: #161512;        /* CTAs, the black panel, display type */
  --ink-2: #22201b;
  --text: #1a1916;
  --text-mid: #4b483f;
  --text-dim: #6f6b60;
  --on-dark: #f6f3ee;
  --on-dark-dim: #a8a498;

  --line: rgba(22, 21, 18, 0.11);
  --line-strong: rgba(22, 21, 18, 0.22);
  --line-dark: rgba(246, 243, 238, 0.14);

  /* ---- accent family — the hero spectrum ------------------------------ */
  --coral: #d81b7e;      /* magenta — links, active states, accents */
  --coral-600: #b4106a;
  --coral-100: #fbdcec;
  --violet: #7b2ff7;
  --violet-100: #e9dfff;
  --mint: #0e9c73;
  --mint-100: #d5f0e5;
  --sky: #2f6df6;
  --sky-100: #dfe9ff;
  --sun: #f2b201;
  --sun-100: #fdefcd;

  /* ---- form ----------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 14px;
  --r: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --pill: 999px;

  --shadow-1: 0 1px 2px rgba(12, 14, 19, 0.04), 0 4px 12px -6px rgba(12, 14, 19, 0.08);
  --shadow-2: 0 2px 4px rgba(12, 14, 19, 0.04), 0 16px 32px -18px rgba(12, 14, 19, 0.18);
  --shadow-3: 0 4px 10px rgba(12, 14, 19, 0.05), 0 36px 64px -30px rgba(12, 14, 19, 0.26);
  --shadow-dark: 0 30px 80px -40px rgba(12, 14, 19, 0.75);

  --shell: 1600px;
  --gutter: clamp(1rem, 2.2vw, 2.5rem);
  --pad-sec: clamp(4.5rem, 8.5vw, 8.5rem);

  --f-display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 0.75, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 400 1.0625rem/1.7 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--coral-100); color: var(--coral-600); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 0; left: 50%; z-index: 200;
  transform: translate(-50%, -110%);
  padding: 0.8rem 1.4rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--coral); color: #fff;
  font: 600 0.875rem var(--f-body);
}
.skip:focus { transform: translate(-50%, 0); }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.scroll-rail { position: fixed; inset: 0 0 auto 0; z-index: 120; height: 3px; pointer-events: none; }
.scroll-rail i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--coral), var(--sun)); }

/* ------------------------------------------------------------- type helpers */

.display {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ink);
  font-variation-settings: 'opsz' 48;
}
h2.display { font-size: clamp(2.05rem, 3.9vw, 3.4rem); line-height: 1.14; }
/* The one emphasis move in the system: same colour, bold italic serif. */
.display em { font-style: italic; font-weight: 700; color: inherit; }
.display-sm {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.14; letter-spacing: -0.008em;
  color: var(--ink);
}
.display-sm em { font-style: italic; font-weight: 700; }

.lede {
  max-width: 44ch; margin-top: 1.6rem;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.6; color: var(--text-mid);
}
.standfirst { max-width: 48ch; color: var(--text-mid); font-size: 1.0625rem; line-height: 1.7; }

.mono-label {
  font: 500 0.6875rem/1.4 var(--f-mono);
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-dim);
}
.mono-label.accent { color: var(--coral); }
.mono-label.dim { opacity: 0.6; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-bottom: 1.2rem; padding: 0.4rem 0.9rem; border-radius: var(--pill);
  background: var(--coral-100); color: var(--coral-600);
  font: 600 0.8125rem var(--f-body); letter-spacing: 0;
  text-transform: none;
}
.eyebrow-rule { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.glyph { width: 1.5rem; height: 1.5rem; }

/* ----------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-line: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.9rem 1.75rem; border-radius: var(--pill);
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-line);
  font: 600 1rem/1.2 var(--f-body); letter-spacing: -0.005em;
  transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn-arrow { transition: transform 0.2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* Black is the primary action in this system — colour never fills a button. */
.btn-brand { --btn-bg: var(--ink); --btn-fg: #fff; --btn-line: var(--ink); }
.btn-brand:hover { --btn-bg: #000; --btn-line: #000; }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-line: var(--line-strong); }
.btn-ghost:hover { --btn-line: var(--ink); --btn-bg: rgba(22, 21, 18, 0.04); }
.btn-quiet { --btn-bg: transparent; --btn-fg: var(--ink); --btn-line: var(--line-strong); }
.btn-quiet:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-line: var(--ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 600 0.9688rem var(--f-body); color: var(--coral-600);
  transition: gap 0.2s var(--ease), color 0.2s;
}
.link-arrow span { color: var(--coral); }
.link-arrow:hover { gap: 0.85rem; color: var(--coral); }
.link-arrow em { font-style: italic; }

.tick-list li {
  position: relative; padding-left: 1.75rem; margin-bottom: 0.7rem;
  font-size: 0.9688rem; line-height: 1.6; color: var(--text-mid);
}
.tick-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0.05em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--mint-100); color: var(--mint);
  font-size: 0.6875rem; display: grid; place-items: center;
}
.tick-list.is-neg li::before { content: '×'; background: var(--coral-100); color: var(--coral); }
.tick-list.is-neutral li::before { content: '·'; background: var(--tint); color: var(--text-dim); }
.tick-list b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------- reveal on scroll */

.js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ================================================================= UTILITY */

/* Announcement centred in the viewport, account links pinned right. */
.utility {
  position: relative; z-index: 115;
  background: var(--ink); color: #fff;
  border-bottom: 1px solid var(--line-dark);
  font: 400 0.9062rem var(--f-body);
}
.utility-inner { position: relative; display: flex; align-items: center; min-height: 48px; }
.utility-note {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.7rem; white-space: nowrap;
  color: #fff;
}
.utility-note em { font-style: normal; color: #fff; font-weight: 500; }
.utility-rule { width: 1px; height: 14px; background: rgba(246, 243, 238, 0.3); }
/* The hero magenta, lifted so it reads on ink. */
.utility-cta { color: #fff; font-weight: 600; }
.utility-cta:hover { color: #ff7cbf; }
.utility-right { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.utility-right a { color: #fff; font-weight: 400; }
.utility-right a:hover { color: #ff7cbf; }
.pulse { display: none; }

/* ================================================================ MASTHEAD */

.masthead {
  position: sticky; top: 0; z-index: 110;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s, border-color 0.3s, background 0.3s;
}
.masthead.is-stuck { border-color: var(--line); box-shadow: 0 8px 30px -24px rgba(22, 21, 18, 0.45); background: rgba(255, 255, 255, 0.97); }
.masthead-inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.75rem); min-height: 82px; }

.logo { display: inline-flex; align-items: center; }
.logo img { height: 26px; width: auto; }
.logo:hover img { opacity: 0.82; transition: opacity 0.2s var(--ease); }
.foot-brand .logo img { height: 30px; }

.primary-nav { margin-right: auto; }
.primary-nav ul { display: flex; align-items: center; gap: clamp(0.25rem, 1vw, 0.75rem); }
.primary-nav a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.75rem; border-radius: var(--r-xs);
  font-size: 1.0312rem; font-weight: 500; letter-spacing: -0.005em; color: var(--ink);
  transition: color 0.2s, background 0.2s;
}
.primary-nav a:hover, .primary-nav a[aria-expanded='true'] { color: var(--coral); background: transparent; }
.primary-nav a[aria-current] { color: var(--coral-600); }
.caret {
  width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform 0.25s var(--ease); opacity: 0.75;
}
.primary-nav a[aria-expanded='true'] .caret { transform: rotate(225deg) translateY(-2px); }

.masthead-actions { display: flex; align-items: center; gap: 1.75rem; }
.ghost-link { font-size: 1.0312rem; font-weight: 500; color: var(--ink); }
.ghost-link:hover { color: var(--coral); }
.masthead-actions .btn { padding: 0.78rem 1.6rem; }

.burger { display: none; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--pill); padding: 0.8rem; cursor: pointer; }
.burger span[aria-hidden] { display: grid; gap: 5px; width: 18px; }
.burger i { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.25s var(--ease); }
.burger[aria-expanded='true'] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded='true'] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ------------------------------------------------------------------- mega */

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 30px 60px -34px rgba(12, 14, 19, 0.35);
  animation: megaIn 0.26s var(--ease) both;
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-10px); } }
.mega-inner { display: grid; grid-template-columns: minmax(250px, 0.85fr) 2fr; gap: clamp(2rem, 5vw, 4.5rem); padding-block: clamp(2rem, 3.5vw, 3rem); }
.mega-intro { padding: 1.75rem; border-radius: var(--r); background: var(--tint-warm); }
.mega-intro h3 { margin: 0.6rem 0 0.6rem; font: 700 1.4375rem/1.15 var(--f-display); letter-spacing: -0.025em; color: var(--ink); }
.mega-intro p { font-size: 0.9688rem; color: var(--text-mid); margin-bottom: 1.35rem; }
.mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; }
.mega-col .mono-label { padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); margin-bottom: 0.9rem; }
.mega-col a {
  display: block; padding: 0.45rem 0.6rem; margin-left: -0.6rem; border-radius: var(--r-xs);
  font-size: 0.9688rem; font-weight: 500; color: var(--text-mid);
  transition: color 0.18s, background 0.18s;
}
.mega-col a:hover { color: var(--ink); background: var(--tint); }

/* --------------------------------------------------------------- mobile nav */

.mobile-nav { position: fixed; inset: 80px 0 0 0; z-index: 105; background: var(--white); overflow-y: auto; animation: megaIn 0.25s var(--ease) both; }
.mobile-nav-inner { padding: 1.5rem var(--gutter) 4rem; }
.m-group, .m-single { border-bottom: 1px solid var(--line); }
.m-group summary, .m-single {
  display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 0;
  font: 700 1.375rem var(--f-display); letter-spacing: -0.025em; color: var(--ink);
  cursor: pointer; list-style: none;
}
.m-group summary::-webkit-details-marker { display: none; }
.m-group summary span {
  width: 10px; height: 10px; border-right: 2px solid var(--coral); border-bottom: 2px solid var(--coral);
  transform: rotate(45deg); transition: transform 0.25s var(--ease);
}
.m-group[open] summary span { transform: rotate(225deg); }
.m-links { display: grid; gap: 0.3rem; padding: 0 0 1.35rem; }
.m-links a { font-size: 0.9688rem; color: var(--text-mid); padding: 0.35rem 0; }
.m-lead { color: var(--coral) !important; font-weight: 600; }
.mobile-nav-foot { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; }

/* ==================================================================== HERO */

.hero {
  --hero-pad: clamp(2.5rem, 4.5vw, 4.5rem);
  position: relative;
  display: flex; flex-direction: column;
  padding-block: var(--hero-pad) clamp(3rem, 5vw, 5rem);
  min-height: min(880px, calc(100vh - 130px));
  background: #fff;
  overflow: hidden;
}
.hero-grid, .hero-glow { display: none; }

/* Copy and animation share the first row; the visual's bottom edge is the
   copy's bottom edge (the buttons). The industry row runs full width beneath. */
.hero-inner {
  position: relative; z-index: 1;
  flex: 1 1 auto; align-content: center;
  display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  grid-template-rows: auto auto; column-gap: clamp(1rem, 2vw, 2rem);
}
.hero-copy { grid-column: 1; grid-row: 1; }
.hero-stage { grid-column: 2; grid-row: 1; position: relative; }

.hero-title {
  max-width: 15ch;
  font-size: clamp(2.6rem, 5.3vw, 5rem);
  line-height: 1.03;
  letter-spacing: -0.018em;
  text-wrap: initial;
  font-variation-settings: 'opsz' 72;
  animation: fadeUp 0.9s 0.05s var(--ease) both;
}
.hero-title em { font-style: italic; font-weight: 700; color: inherit; }

.hero .lede {
  max-width: 54ch; margin-top: clamp(1.5rem, 2.4vw, 2.25rem);
  font-size: clamp(1.0625rem, 1.25vw, 1.3125rem); line-height: 1.55; color: var(--text-mid);
  animation: fadeUp 0.9s 0.2s var(--ease) both;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  margin-top: clamp(2rem, 3vw, 2.75rem);
  animation: fadeUp 0.9s 0.32s var(--ease) both;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } }

.hero-trusted { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(2.5rem, 4.5vw, 4rem); animation: fadeUp 0.9s 0.45s var(--ease) both; }

/* Industry tiles — each carries one hue from the hero spectrum. */
.sector-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.1rem; }
.sector-tile {
  position: relative; display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 1rem 0.7rem 0.7rem; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line);
  color: var(--ink); font: 600 0.9688rem/1.2 var(--f-body); letter-spacing: -0.012em;
  transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s, background 0.25s;
  animation: fadeUp 0.8s calc(0.55s + var(--i, 0) * 70ms) var(--ease) both;
}
.sector-tile:hover { transform: translateY(-3px); border-color: var(--hue); background: #fff; box-shadow: 0 16px 32px -20px var(--hue); }
.sector-badge {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2.35rem; height: 2.35rem; border-radius: 10px;
  background: var(--hue-soft); color: var(--hue);
  transition: background 0.25s, color 0.25s;
}
.sector-badge .glyph { width: 1.3rem; height: 1.3rem; stroke-width: 1.5; }
.sector-tile:hover .sector-badge { background: var(--hue); color: #fff; }
.sector-name { flex: 1 1 auto; }
.sector-arrow { color: var(--hue); opacity: 0; transform: translateX(-5px); transition: opacity 0.25s, transform 0.25s var(--ease); }
.sector-tile:hover .sector-arrow { opacity: 1; transform: none; }

/* ---- hero visual (placeholder for the supplied animation) --------------- */

.hero-visual {
  position: absolute; z-index: 0; pointer-events: none;
  /* Up to the masthead, down to the buttons, and out past the shell to the
     viewport's right edge. */
  top: calc(-1 * var(--hero-pad)); bottom: 0; left: -8%;
  right: calc((min(100vw, var(--shell)) - 100vw) / 2 - var(--gutter));
  animation: fadeIn 1.4s 0.1s var(--ease) both;
}
.hero-visual canvas { width: 100%; height: 100%; display: block; }
@keyframes fadeIn { from { opacity: 0; } }

/* Reveal-line wrappers survive for other pages that still use them. */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; animation: lineUp 0.95s var(--ease) both; }
.reveal-line:nth-child(1) > span { animation-delay: 0.05s; }
.reveal-line:nth-child(2) > span { animation-delay: 0.16s; }
.reveal-line:nth-child(3) > span { animation-delay: 0.27s; }
@keyframes lineUp { from { transform: translateY(105%); } }

@media (max-width: 1080px) {
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .hero-copy { grid-column: 1; grid-row: 1; }
  .hero-stage { grid-column: 1; grid-row: 2; height: clamp(280px, 46vw, 460px); margin-top: 2.5rem; }
  .hero-trusted { grid-row: 3; }
  .hero-title { max-width: 16ch; }
  .hero-visual { top: 0; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); }
  .sector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ================================================================= CONSOLE */

.console { position: relative; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden; }
.console-sweep {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 176, 32, 0.2) 50%, transparent 58%);
  transform: translateX(-100%); animation: sweep 1.5s 0.55s var(--ease) both;
}
@keyframes sweep { to { transform: translateX(100%); } }

.console-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--line); background: var(--tint); }
.console-dots { display: flex; gap: 5px; }
.console-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.console-dots i:first-child { background: var(--coral); }
.console-bar .mono-label { font-size: 0.625rem; }
.console-live {
  margin-left: auto; display: flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.6rem; border-radius: var(--pill); background: var(--mint-100);
  font: 600 0.625rem var(--f-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mint);
}
.console-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); animation: blink 1.8s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.console-body { display: grid; }
.console-kpis { display: grid; grid-template-columns: repeat(3, 1fr); }
.kpi { padding: 1.15rem 1.2rem; border-bottom: 1px solid var(--line); }
.kpi + .kpi { border-left: 1px solid var(--line); }
.kpi .mono-label { font-size: 0.5625rem; }
.kpi-val { margin-top: 0.5rem; font: 800 clamp(1.25rem, 1.9vw, 1.6rem)/1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-delta { margin-top: 0.35rem; font: 600 0.6875rem var(--f-body); color: var(--mint); }
.kpi-delta.flat { color: var(--text-dim); }

.console-chart { padding: 1.2rem; border-bottom: 1px solid var(--line); }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.chart-head .mono-label { font-size: 0.5625rem; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 100px; }
.bars i {
  flex: 1; height: var(--h); border-radius: var(--r-xs) var(--r-xs) 4px 4px;
  background: linear-gradient(to top, var(--violet-100), var(--violet));
  transform-origin: bottom; animation: barUp 0.85s var(--ease) both;
  animation-delay: calc(0.6s + var(--i) * 55ms);
}
.bars i.is-now { background: linear-gradient(to top, var(--coral-100), var(--coral)); }
@keyframes barUp { from { transform: scaleY(0.03); opacity: 0.2; } }
.chart-axis { display: flex; justify-content: space-between; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--line); font: 500 0.5625rem var(--f-mono); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; }

.console-feed { padding: 1.2rem; }
.console-feed ul { display: grid; }
.console-feed li {
  display: grid; grid-template-columns: 72px 72px 1fr auto 72px; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0; border-top: 1px solid var(--line);
  font: 400 0.6875rem var(--f-mono); color: var(--text-dim);
  animation: rowIn 0.6s var(--ease) both; animation-delay: calc(0.85s + var(--i) * 90ms);
}
@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } }
.chip { padding: 0.2rem 0.45rem; border-radius: var(--pill); font-size: 0.5rem; letter-spacing: 0.08em; background: var(--sky-100); color: var(--sky); text-align: center; }
.chip-rep { background: var(--coral-100); color: var(--coral-600); }
.chip-b2b { background: var(--violet-100); color: var(--violet); }
.chip-amazon { background: var(--sun-100); color: #a56a00; }
.chip-edi { background: var(--mint-100); color: var(--mint); }
.feed-so { color: var(--ink); font-weight: 500; }
.feed-cust { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-qty { font-variant-numeric: tabular-nums; }
.feed-status { text-align: right; font-size: 0.625rem; font-weight: 500; }
.st-allocated { color: var(--sun); }
.st-picking { color: var(--sky); }
.st-shipped { color: var(--mint); }
.st-invoiced { color: var(--text-dim); }

.console-sync { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding: 0.85rem 1.2rem; border-top: 1px solid var(--line); background: var(--tint); font: 400 0.625rem var(--f-mono); color: var(--text-dim); }
.sync { display: flex; align-items: center; gap: 0.4rem; }
.sync i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
.sync b { color: var(--text-mid); font-weight: 500; }

/* ============================================================ SCROLL STAGE
   The signature moment. --p (0..1) is written by JS; everything here derives
   from it. Default 1 so no-JS / reduced-motion renders it fully open. */

.stage { --p: 1; background: var(--white); }
.stage-track { height: 320vh; position: relative; }
.stage-sticky {
  position: sticky; top: 0; height: 100vh;
  display: grid; place-items: center; overflow: hidden;
}

/* The text that lives OUTSIDE the black panel and gets swallowed by it. */
.stage-outside {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: clamp(3rem, 9vh, 7rem);
  pointer-events: none;
}
.stage-kicker, .stage-tail {
  /* Same type as the h2.display section titles. */
  font-family: var(--f-display); font-weight: 400; letter-spacing: -0.012em; font-variation-settings: 'opsz' 48;
  font-size: clamp(2.05rem, 3.9vw, 3.4rem); line-height: 1.14; color: var(--ink);
  max-width: 16ch;
  /* drifts outward and fades as the panel takes over the frame */
  opacity: clamp(0, calc((0.78 - var(--p)) / 0.4), 1);
  transform: translateY(calc(var(--p) * -3rem));
}
.stage-tail { align-self: flex-end; text-align: right; color: var(--text-dim); transform: translateY(calc(var(--p) * 3rem)); }

.stage-panel {
  position: relative; z-index: 2;
  width: calc(42% + 53% * var(--p));
  height: calc(46vh + 36vh * var(--p));
  border-radius: calc(var(--r-xl) - 8px * var(--p));
  /* Deep end of the hero spectrum; every stop keeps white text above 4.5:1. */
  background: linear-gradient(135deg, #4a1fb3 0%, #7d1ba3 38%, #b0136f 72%, #b93a0c 100%);
  box-shadow: 0 40px 90px -40px rgba(90, 30, 170, 0.6);
  overflow: hidden;
  display: grid; place-items: center;
}
/* The wordmark holds the small panel, then dissolves over the first 40% of the
   scroll — gone before the stats start to fade in at a third. */
.stage-logo {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: clamp(200px, 58%, 440px); height: auto; pointer-events: none;
  opacity: clamp(0, calc(1 - var(--p) * 2.5), 1);
  transform: scale(calc(1 + var(--p) * 0.25));
}
.stage-panel-inner {
  width: min(940px, 88%);
  padding-block: 2rem;
  text-align: center;
  /* content only becomes readable once the panel is big enough to hold it */
  opacity: clamp(0, calc(var(--p) * 3 - 1), 1);
  transform: translateY(calc((1 - var(--p)) * 1.75rem));
}
.stage-panel-inner .eyebrow { background: rgba(255, 255, 255, 0.1); color: #fff; }
.stage-title { color: #fff; margin-bottom: 1.25rem; }
.stage-title br { display: block; }
.stage-lede { max-width: 56ch; margin: 0 auto; color: var(--on-dark-dim); font-size: clamp(1rem, 1.2vw, 1.125rem); }
.stage-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
.stage-chips li {
  padding: 0.45rem 1rem; border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line-dark);
  font: 500 0.875rem var(--f-body); color: var(--on-dark);
}
.stage-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 3.5vw, 3rem); padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid rgba(255, 255, 255, 0.28);
  text-align: left;
}
.stage-stats dt { display: flex; align-items: baseline; gap: 0.1rem; font: 800 clamp(2.2rem, 3.8vw, 3.6rem)/0.95 var(--f-display); letter-spacing: -0.045em; color: #fff; font-variant-numeric: tabular-nums; }
.stage-stats dt em { font-style: normal; font-size: 0.42em; letter-spacing: -0.02em; opacity: 0.85; }
/* The spectrum, in tints that hold on the dark ground. */
.stage-stats dt { color: #fff; }
.stage-stats dd { margin-top: 0.6rem; font-size: 0.9062rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.stage-note { margin-top: clamp(1.75rem, 3vw, 2.5rem); font-size: 0.8438rem; line-height: 1.55; color: rgba(255, 255, 255, 0.8); max-width: none; text-align: left; text-wrap: pretty; }

/* ================================================================== TICKER */

.ticker { border-block: 1px solid var(--line); background: var(--white); color: var(--text-dim); overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: marquee 55s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-run { display: flex; }
@keyframes marquee { to { transform: translateX(-50%); } }
.tick { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.6rem; font: 500 0.9062rem var(--f-body); white-space: nowrap; }
.tick i { font-style: normal; color: var(--coral); }

/* ============================================================ SECTION HEADS */

.sec-head { margin-bottom: clamp(2.75rem, 5vw, 4.25rem); }
.sec-head.is-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.sec-head.is-center { text-align: center; }
.sec-head.is-center .eyebrow { justify-content: center; }
.sec-head-aside { padding-bottom: 0.4rem; display: grid; gap: 1.35rem; justify-items: start; }

/* ================================================================= PROBLEM */

.problem { padding-block: var(--pad-sec); background: #fff; }
.problem-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5.5rem); }
.problem-lead { align-self: start; position: sticky; top: 120px; }
.problem-lead .display { max-width: 18ch; }
/* One place, any device: the same live screen on a laptop, a tablet and a phone. */
.problem-visual { margin: 2.25rem 0 0; max-width: 24rem; }
.problem-visual svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 24px rgba(22, 21, 18, 0.12)); }
.pv-live { transform-box: fill-box; transform-origin: center; animation: pvPulse 2.2s var(--ease) infinite; }
.pv-live:nth-of-type(2) { animation-delay: 0.4s; }
.pv-live:nth-of-type(3) { animation-delay: 0.8s; }
@keyframes pvPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.65); } }
.problem-visual-caption {
  display: flex; justify-content: space-between; margin-top: 1.1rem;
  font: 600 0.9062rem var(--f-body); letter-spacing: -0.005em; color: var(--ink);
}
.problem-visual-caption span { display: inline-flex; align-items: center; gap: 0.5rem; }
.problem-visual-caption span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }

.problem-body { display: grid; gap: 2.25rem; justify-items: start; }
.problem-list { display: grid; gap: 0.85rem; }
.problem-list > li {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.4rem 1rem;
  padding: 1.5rem 1.6rem; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow-1);
}
.problem-list b { font: 600 1.0938rem var(--f-body); color: var(--ink); }
.problem-list p { grid-column: 2; font-size: 0.9688rem; color: var(--text-dim); }
.problem-list .mono-label { grid-row: span 2; color: var(--coral); }
.problem-icon {
  grid-row: span 2; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 10px;
  background: var(--coral-100); color: var(--coral);
}
.problem-icon .glyph { width: 1.35rem; height: 1.35rem; stroke-width: 1.5; }

/* =============================================================== INVENTORY */

.inv { padding-block: var(--pad-sec); background: #fff; }
.inv-inner { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(1.9rem, 3.6vw, 3.75rem); align-items: center; }
.inv-lead { margin-top: 1.5rem; font: 600 1.25rem/1.35 var(--f-body); letter-spacing: -0.01em; color: var(--ink); }
.inv-copy .standfirst { margin-top: 0.9rem; }
.inv-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.9rem; }

.inv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; margin-top: clamp(3rem, 6vw, 5rem); }
.inv-card { padding: 1.5rem 1.4rem; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow-1); }
.inv-icon {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1rem;
  border-radius: 10px; background: var(--coral-100); color: var(--coral);
}
.inv-icon .glyph { width: 1.35rem; height: 1.35rem; stroke-width: 1.5; }
.inv-card:nth-child(2) .inv-icon { background: var(--violet-100); color: var(--violet); }
.inv-card:nth-child(3) .inv-icon { background: var(--sun-100); color: #b07a00; }
.inv-card:nth-child(4) .inv-icon { background: var(--mint-100); color: var(--mint); }
.inv-card b { display: block; font: 600 1.0312rem/1.3 var(--f-body); letter-spacing: -0.01em; color: var(--ink); }
.inv-card p { margin-top: 0.45rem; font-size: 0.9375rem; line-height: 1.55; color: var(--text-dim); }

/* =================================================================== SHIFT */

.shift { padding-block: var(--pad-sec); background: #fff; }
.shift-inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.shift .display { max-width: 20ch; }
.shift .standfirst { margin-top: 1.3rem; }

.switch {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; justify-self: start; width: fit-content;
  margin-top: 2rem; padding: 5px; border-radius: var(--pill); background: var(--white); border: 1px solid var(--line);
}
.switch button {
  position: relative; z-index: 1; text-align: center; padding: 0.7rem 1.4rem;
  background: none; border: 0; border-radius: var(--pill); cursor: pointer;
  font: 600 1rem var(--f-body); color: var(--text-dim); transition: color 0.25s;
}
.switch button[aria-pressed='true'] { color: #fff; }
/* Ink for the "before" state, violet once ChannelSnap is switched on. */
.switch-thumb { position: absolute; inset: 5px auto 5px 5px; width: calc(50% - 5px); border-radius: var(--pill); background: var(--ink); transition: transform 0.35s var(--ease), background 0.35s; }
.switch[data-state='after'] .switch-thumb { transform: translateX(100%); background: var(--violet); }

.shift-lists { position: relative; }
.shift-list { display: grid; gap: 10px; }
.shift-list li {
  display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 14px;
  padding: 17px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  font-size: 1rem; line-height: 1.55; color: var(--text);
  animation: fadeUp 0.5s var(--ease) both; animation-delay: calc(var(--i) * 50ms);
}
.shift-list li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 0.78rem/1 var(--f-body); }
.shift-list.is-after li span { background: var(--mint-100); color: var(--mint); }
.shift-list.is-before li span { background: var(--coral-100); color: var(--coral); }
.shift-list.is-before li { color: var(--text-dim); }

/* ================================================================ EXPLORER */

.explorer { padding-block: var(--pad-sec); background: var(--white); }
.explorer-shell { display: grid; grid-template-columns: minmax(230px, 0.6fr) 1.4fr; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; }
/* A step lighter than --tint so the rail sits quietly beside the white panel. */
.explorer-rail { display: grid; align-content: start; background: var(--cream); padding: 0.75rem; gap: 2px; }
.explorer-rail button {
  display: grid; grid-template-columns: 1fr 1.5rem; align-items: center; gap: 0.75rem;
  width: 100%; padding: 0.85rem 1rem; border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer; text-align: left;
  transition: background 0.2s, color 0.2s;
}
.explorer-rail button:hover { background: rgba(255, 255, 255, 0.85); }
.explorer-rail button[aria-selected='true'] { background: var(--white); color: var(--ink); box-shadow: var(--shadow-1); }
.rail-name { font: 600 0.9688rem var(--f-body); }
.rail-glyph { opacity: 0.3; }
.explorer-rail button[aria-selected='true'] .rail-glyph { opacity: 1; color: var(--coral); }

.explorer-stage { position: relative; background: var(--white); }
.explorer-panel { position: relative; padding: clamp(1.75rem, 3vw, 2.75rem); animation: panelIn 0.4s var(--ease) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } }
.panel-top { display: flex; justify-content: space-between; gap: 2rem; align-items: start; }
.panel-metric { flex: 0 0 auto; text-align: center; padding: 1.1rem 1.35rem; border-radius: var(--r); background: var(--tint-warm); }
.panel-metric span { display: block; font: 800 clamp(1.75rem, 2.6vw, 2.35rem)/1 var(--f-display); letter-spacing: -0.04em; color: var(--coral); }
.panel-metric em { font: 500 0.6875rem var(--f-mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }
.panel-top .display-sm { margin: 0.6rem 0 0.9rem; }
.panel-lede { max-width: 48ch; color: var(--text-mid); font-size: 1rem; }
.panel-caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; margin: 2rem 0; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.panel-caps b { display: block; margin-bottom: 0.4rem; font-size: 0.9688rem; color: var(--ink); }
.panel-caps span { font-size: 0.9062rem; line-height: 1.6; color: var(--text-dim); }

/* =================================================================== STATS */

.stats { padding-block: clamp(4rem, 7vw, 6.5rem); background: var(--tint-mint); }
.stats.light { background: var(--tint); }
.stats.on-dark { background: var(--tint-mint); }
.stats-head { max-width: 30ch; margin-bottom: 3rem; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.85rem, 1.5vw, 1.25rem); }
.stat { padding: 1.85rem 1.75rem; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow-1); }
.stat-val { display: flex; align-items: baseline; gap: 0.15rem; font: 800 clamp(2.35rem, 4vw, 3.5rem)/0.95 var(--f-display); letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-val em { font-style: normal; font-size: 0.42em; color: var(--mint); letter-spacing: -0.02em; }
.stat:nth-child(2) .stat-val em { color: var(--violet); }
.stat:nth-child(3) .stat-val em { color: var(--coral); }
.stat:nth-child(4) .stat-val em { color: var(--sky); }
.stat dd { margin-top: 0.95rem; font-size: 0.9375rem; line-height: 1.6; color: var(--text-dim); max-width: 26ch; }
.stats-note { margin-top: 2rem; padding-top: 1.35rem; border-top: 1px solid var(--line); font-size: 0.875rem; line-height: 1.7; color: var(--text-dim); max-width: 70ch; }

/* ================================================================ SOLUTIONS */

.sols { padding-block: var(--pad-sec); background: var(--white); }
.sol-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.sol-card {
  position: relative; padding: clamp(1.75rem, 2.5vw, 2.4rem);
  background: var(--tint); border-radius: var(--r-lg);
  display: grid; gap: 0.9rem; justify-items: start;
  transition: transform 0.35s var(--ease), box-shadow 0.35s, background 0.35s;
}
.sol-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); background: var(--white); }
.sol-card h3 { font: 800 clamp(1.4rem, 2vw, 1.8rem)/1.1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); }
.sol-card > p { color: var(--text-mid); font-size: 0.9688rem; max-width: 44ch; }
.sol-glyph { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--r-sm); background: var(--acc-tint, var(--coral-100)); color: var(--acc, var(--coral)); }
.sol-glyph .glyph { width: 1.5rem; height: 1.5rem; }
.sol-pains { display: grid; gap: 0.55rem; padding-top: 1rem; border-top: 1px solid var(--line); width: 100%; }
.sol-pains li { position: relative; padding-left: 1.25rem; font-size: 0.9062rem; color: var(--text-dim); }
.sol-pains li::before { content: '×'; position: absolute; left: 0; color: var(--acc, var(--coral)); font-weight: 700; }

.acc-warm { --acc: var(--coral); --acc-tint: var(--coral-100); }
.acc-plum { --acc: var(--violet); --acc-tint: var(--violet-100); }
.acc-teal { --acc: var(--mint); --acc-tint: var(--mint-100); }
.acc-indigo { --acc: var(--sky); --acc-tint: var(--sky-100); }
.sol-card .link-arrow { color: var(--acc, var(--coral)); }
.sol-card .link-arrow span { color: inherit; }

/* =================================================================== QUOTE */

.quote { padding-block: clamp(3.5rem, 6vw, 5.5rem); background: var(--white); }
.quote-inner { padding: clamp(2.25rem, 4vw, 3.5rem); background: var(--tint-warm); border-radius: var(--r-lg); }
.quote blockquote { margin: 0; }
.quote p { font: 700 clamp(1.5rem, 3.1vw, 2.5rem)/1.22 var(--f-display); letter-spacing: -0.028em; text-wrap: pretty; max-width: 30ch; color: var(--ink); }
.quote footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; margin-top: 2rem; }
.quote cite { font: 600 0.9688rem var(--f-body); font-style: normal; color: var(--ink); }
.quote footer span { font-size: 0.9062rem; color: var(--text-dim); }

/* ===================================================================== ROI */

.roi { padding-block: var(--pad-sec); background: var(--tint-sky); }
.roi-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.roi-copy .display { margin-bottom: 1.35rem; }
.roi-assumptions { display: grid; gap: 0.65rem; margin-top: 2rem; }
.roi-assumptions li { display: flex; gap: 0.85rem; align-items: baseline; font-size: 0.9688rem; color: var(--text-mid); padding-bottom: 0.65rem; border-bottom: 1px solid var(--line); }
.roi-assumptions b { font: 800 1.125rem var(--f-display); color: var(--sky); min-width: 3.5rem; }
.roi-disclaimer { margin-top: 1.6rem; font-size: 0.875rem; line-height: 1.7; color: var(--text-dim); max-width: 46ch; }

.roi-panel { padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.roi-fields { display: grid; gap: 1.65rem; }
.field { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: baseline; }
.field label { font-size: 0.9062rem; color: var(--text-mid); }
.field output { font: 800 1.25rem var(--f-display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.field input[type='range'] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: none; cursor: grab; }
.field input[type='range']::-webkit-slider-runnable-track { height: 6px; border-radius: var(--pill); background: var(--tint); }
.field input[type='range']::-moz-range-track { height: 6px; border-radius: var(--pill); background: var(--tint); }
.field input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--sky); border: 3px solid #fff; box-shadow: var(--shadow-1); transition: transform 0.2s var(--ease); }
.field input[type='range']::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--sky); border: 3px solid #fff; }
.field input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.15); }
.field input[type='range']:active { cursor: grabbing; }

.roi-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; margin-top: 2.25rem; }
.roi-result { padding: 1.2rem 1.25rem; border-radius: var(--r-sm); background: var(--tint); }
.roi-result p:last-child { margin-top: 0.5rem; font: 800 1.35rem var(--f-display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.roi-result.is-lead { grid-column: 1 / -1; background: var(--ink); }
.roi-result.is-lead .mono-label { color: var(--on-dark-dim); }
.roi-big { font: 800 clamp(2.4rem, 5vw, 3.6rem)/1 var(--f-display) !important; letter-spacing: -0.045em !important; color: #fff !important; font-variant-numeric: tabular-nums; }
.roi-cta { margin-top: 2rem; }

/* ================================================================ TIMELINE */

/* A spectrum rail across the top, one node per phase shifting violet -> gold
   so the colour itself reads as progress toward go-live. */
.timeline { padding-block: var(--pad-sec); background: var(--white); border-block: var(--hair); }
.tl { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.tl::before { content: ''; position: absolute; left: 14px; right: 14px; top: 14px; height: 2px; border-radius: 2px; background: var(--spectrum); }
.tl li { position: relative; padding-top: 50px; }
.tl li::before {
  content: ''; position: absolute; left: 5px; top: 5px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--white); border: 3px solid var(--violet);
}
.tl li:nth-child(2)::before { border-color: #a52ac6; }
.tl li:nth-child(3)::before { border-color: var(--coral); }
.tl li:nth-child(4)::before { border-color: #ec5a3c; }
.tl li:nth-child(5)::before { border-color: #f2b201; }
.tl-wk { font: 500 0.7rem/1.3 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-mid); }
.tl h3 { margin-top: 0.5rem; font: 400 1.5rem/1.12 var(--f-display); letter-spacing: -0.008em; color: var(--ink); }
.tl p:not(.tl-wk) { margin-top: 0.55rem; font-size: 0.92rem; line-height: 1.6; color: var(--text-dim); }
.tl-foot { margin-top: 2.6rem; font-size: 0.94rem; color: var(--text-dim); }
.tl-foot b { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) {
  .tl { grid-template-columns: 1fr; gap: 26px; }
  .tl::before { left: 14px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; background: linear-gradient(180deg, #5b2bd6, #d81b7e 52%, #f2b201); }
  .tl li { padding-top: 0; padding-left: 50px; }
}

/* ============================================================ INTEGRATIONS */

.integrations { padding-block: var(--pad-sec); background: var(--tint); }
.int-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(0.85rem, 1.5vw, 1.25rem); }
.int-grid li { padding: 1.6rem 1.6rem 1.75rem; background: var(--white); border-radius: var(--r); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.int-grid li:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.int-grid h3 { margin: 0.65rem 0 0.55rem; font: 700 1.125rem var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
.int-grid p { font-size: 0.9062rem; line-height: 1.6; color: var(--text-dim); }

/* ===================================================================== FAQ */

/* Questions divided by hairlines, set in the display serif, with a round
   +/- control that fills with ink when its answer is open. */
/* Questions divided by hairlines, set in the display serif, with a round
   +/- control that fills with ink when its answer is open. */
.faq { padding-block: var(--pad-sec); background: var(--white); border-top: var(--hair); }
.faq-inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq-head .standfirst { margin-top: 1.2rem; }
.faq-aside { margin-top: 2rem; }
.faq-qa { border-top: 1px solid var(--line); }
.faq-qa details { border-bottom: 1px solid var(--line); }
.faq-qa summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 22px 0; cursor: pointer; list-style: none;
  font: 400 1.42rem/1.25 var(--f-display); letter-spacing: -0.005em; color: var(--ink);
}
.faq-qa summary::-webkit-details-marker { display: none; }
.faq-qa summary i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background 0.2s, border-color 0.2s; }
.faq-qa summary i::before, .faq-qa summary i::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; background: var(--ink);
  transform: translate(-50%, -50%); transition: transform 0.25s var(--ease);
}
.faq-qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-qa summary:hover i { border-color: var(--ink); }
.faq-qa details[open] summary i { background: var(--ink); border-color: var(--ink); }
.faq-qa details[open] summary i::before, .faq-qa details[open] summary i::after { background: #fff; }
.faq-qa details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-qa p { max-width: 64ch; padding: 0 3rem 24px 0; color: var(--text-mid); animation: fadeUp 0.35s var(--ease) both; }

/* =============================================================== CTA SLAB */

/* Closing call to action: a white card on the cream ground, the spectrum
   along its top edge, three reassurances beside the copy. */
.cta-slab { padding-block: var(--pad-sec); background: #fbf9f6; } /* a step lighter than --cream; the white card still lifts off it */
.cta-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding: clamp(2.25rem, 6vw, 5rem);
  background: var(--white); border: 1px solid var(--line); border-radius: 32px; box-shadow: var(--shadow-card);
}
.cta-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--spectrum); }
.cta-copy .standfirst { margin-top: 1.2rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.cta-points { display: grid; gap: 12px; }
.cta-points li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  padding: 16px 18px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line);
  font-size: 0.98rem; font-weight: 500; line-height: 1.45; color: var(--ink);
}
.cta-points .glyph { color: var(--coral); }

/* ================================================================== FOOTER */

.site-foot { padding-top: clamp(4rem, 6vw, 5.5rem); background: var(--ink); color: var(--on-dark-dim); }
.foot-top { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(2rem, 5vw, 4.5rem); padding-bottom: 3.5rem; }
.foot-tagline { max-width: 42ch; margin-top: 1.6rem; font-size: 0.9688rem; line-height: 1.7; }
.foot-contact { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1.5rem; margin-top: 2rem; font-size: 0.9062rem; }
.foot-contact dt { font: 500 0.6875rem var(--f-mono); text-transform: uppercase; letter-spacing: 0.13em; color: rgba(162, 168, 184, 0.7); padding-top: 0.2rem; }
.foot-contact a { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.foot-contact a:hover { color: var(--sun); border-color: var(--sun); }
.foot-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
.foot-cta .btn-quiet { --btn-fg: #fff; --btn-line: rgba(255, 255, 255, 0.28); }
.foot-cta .btn-quiet:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-line: #fff; }

.foot-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.foot-col .mono-label { color: #fff; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line-dark); margin-bottom: 0.9rem; }
.foot-col a { display: block; padding: 0.3rem 0; font-size: 0.875rem; transition: color 0.18s, padding-left 0.18s var(--ease); }
.foot-col a:hover { color: var(--sun); padding-left: 0.3rem; }

.foot-base { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 1.75rem; border-top: 1px solid var(--line-dark); font-size: 0.875rem; color: rgba(162, 168, 184, 0.75); }
.foot-base ul { display: flex; gap: 1.5rem; }
.foot-base a:hover { color: #fff; }

/* ============================================================== PAGE HEROES */

.page-hero {
  position: relative; padding-block: clamp(2rem, 4vw, 3rem) clamp(3.5rem, 6.5vw, 5.5rem); overflow: hidden;
  background: radial-gradient(60% 60% at 90% 0%, var(--tint-warm), transparent 70%), var(--cream);
}
.page-hero .hero-grid { display: none; }
.page-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.page-hero .display { animation: fadeUp 0.8s 0.05s var(--ease) both; }
.page-hero .lede { animation: fadeUp 0.8s 0.16s var(--ease) both; max-width: 52ch; }
.page-hero .hero-actions { animation: fadeUp 0.8s 0.26s var(--ease) both; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.hero-meta li { padding: 0.4rem 0.9rem; border-radius: var(--pill); background: var(--tint); font-size: 0.875rem; color: var(--text-mid); }

.crumbs { margin-bottom: 1.5rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8438rem; color: var(--text-dim); }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: 0.5rem; opacity: 0.45; }
.crumbs a:hover { color: var(--coral); }

.hero-aside-stack { display: grid; gap: 0.7rem; }
.spec-card { padding: 1.4rem 1.6rem; background: var(--tint); border-radius: var(--r); }
.spec-val { margin-top: 0.45rem; font: 800 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--f-display); letter-spacing: -0.04em; color: var(--ink); }
.spec-note { margin-top: 0.45rem; font-size: 0.9062rem; line-height: 1.6; color: var(--text-dim); }

.hero-aside-figure { padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--tint-warm); border-radius: var(--r-lg); text-align: center; }
.figure-glyph { display: block; color: var(--coral); }
.figure-glyph .glyph { width: 2.75rem; height: 2.75rem; margin-inline: auto; }
.figure-metric { margin-top: 1.2rem; font: 800 clamp(2.6rem, 5.5vw, 3.75rem)/1 var(--f-display); letter-spacing: -0.045em; color: var(--ink); }
.figure-label { font: 600 0.9062rem var(--f-body); color: var(--coral-600); }
.figure-keys { display: grid; gap: 0.45rem; margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.figure-keys li { font: 400 0.8125rem var(--f-mono); color: var(--text-dim); }

/* ================================================================ CARD GRID */

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(295px, 1fr)); gap: clamp(0.85rem, 1.5vw, 1.25rem); }
.card-grid li { position: relative; padding: clamp(1.6rem, 2.2vw, 2.1rem); background: var(--tint); border-radius: var(--r-lg); transition: transform 0.3s var(--ease), background 0.3s, box-shadow 0.3s; }
.card-grid li:hover { transform: translateY(-5px); background: var(--white); box-shadow: var(--shadow-2); }
.card-glyph { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.35rem; border-radius: var(--r-sm); background: var(--coral-100); color: var(--coral); }
.card-grid li:nth-child(3n + 2) .card-glyph { background: var(--violet-100); color: var(--violet); }
.card-grid li:nth-child(3n + 3) .card-glyph { background: var(--mint-100); color: var(--mint); }
.card-glyph .glyph { width: 1.4rem; height: 1.4rem; }
.card-idx { display: block; margin-bottom: 1.25rem; color: var(--coral); }
.card-grid h3 { margin-bottom: 0.65rem; font: 700 1.25rem/1.25 var(--f-display); letter-spacing: -0.022em; color: var(--ink); }
.card-grid p { font-size: 0.9688rem; line-height: 1.65; color: var(--text-mid); }
.card-grid p a { color: var(--coral-600); border-bottom: 1px solid var(--coral); }
.card-link { position: absolute; inset: 0; display: grid; align-items: end; justify-items: end; padding: 1.5rem; color: var(--coral); font-size: 1.25rem; }

/* ============================================================ CAPS / OUTCOMES */

.caps { padding-block: var(--pad-sec); background: var(--white); }
.caps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: clamp(0.85rem, 1.5vw, 1.25rem); }
.caps-grid li { padding: clamp(1.75rem, 2.5vw, 2.15rem); background: var(--tint); border-radius: var(--r-lg); transition: transform 0.3s var(--ease), background 0.3s, box-shadow 0.3s; }
.caps-grid li:hover { transform: translateY(-4px); background: var(--white); box-shadow: var(--shadow-2); }
.caps-grid .mono-label { color: var(--coral); }
.caps-grid h3 { margin: 1.1rem 0 0.65rem; font: 700 1.25rem/1.25 var(--f-display); letter-spacing: -0.022em; color: var(--ink); }
.caps-grid p { font-size: 0.9688rem; line-height: 1.65; color: var(--text-mid); }

.outcomes { padding-block: var(--pad-sec); background: var(--tint-mint); }
.outcomes-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.outcomes-cta { margin-top: 2.25rem; }
.outcomes-list { display: grid; gap: 0.7rem; }
.outcomes-list li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.35rem 1.6rem; background: var(--white); border-radius: var(--r-sm); font-size: 1.0312rem; line-height: 1.55; color: var(--text-mid); }
.outcomes-list .mono-label { color: var(--mint); padding-top: 0.35rem; }

/* ================================================================= RELATED */

.related { padding-block: var(--pad-sec); background: var(--white); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(0.85rem, 1.5vw, 1.25rem); }
.related-grid a { display: grid; gap: 0.8rem; align-content: start; height: 100%; padding: 1.75rem; background: var(--tint); border-radius: var(--r-lg); transition: transform 0.3s var(--ease), background 0.3s, box-shadow 0.3s; }
.related-grid a:hover { transform: translateY(-5px); background: var(--white); box-shadow: var(--shadow-2); }
.rel-glyph { color: var(--coral); }
.related-grid b { font: 700 1.1875rem var(--f-display); letter-spacing: -0.022em; color: var(--ink); }
.related-grid p { font-size: 0.9062rem; line-height: 1.6; color: var(--text-dim); }
.related-grid em { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font: 600 0.875rem var(--f-body); font-style: normal; color: var(--coral); }
.related-foot { margin-top: 2.25rem; text-align: center; }

/* =============================================================== MODULE HUB */

.mod-hub { padding-block: var(--pad-sec); background: var(--white); }
.mod-group + .mod-group { margin-top: clamp(3rem, 5vw, 4.5rem); }
.mod-group-head { display: flex; align-items: baseline; gap: 1.5rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.35rem; }
.mod-list { display: grid; gap: 0.7rem; }
.mod-list > li { display: grid; grid-template-columns: 3.25rem 1fr auto; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; padding: 1.75rem; background: var(--tint); border-radius: var(--r); transition: transform 0.3s var(--ease), background 0.3s, box-shadow 0.3s; }
.mod-list > li:hover { transform: translateY(-3px); background: var(--white); box-shadow: var(--shadow-2); }
.mod-glyph { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-sm); background: var(--white); color: var(--coral); }
.mod-list > li:hover .mod-glyph { background: var(--coral-100); }
.mod-glyph .glyph { width: 1.5rem; height: 1.5rem; }
.mod-copy h3 { font: 700 1.375rem var(--f-display); letter-spacing: -0.025em; color: var(--ink); }
.mod-copy h3 a:hover { color: var(--coral); }
.mod-copy > p { margin: 0.55rem 0 0.9rem; max-width: 58ch; color: var(--text-mid); font-size: 0.9688rem; }
.mod-caps { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.mod-caps li { padding: 0.3rem 0.75rem; border-radius: var(--pill); background: var(--white); font: 500 0.8125rem var(--f-body); color: var(--text-dim); }
.mod-list > li:hover .mod-caps li { background: var(--tint); }
.mod-metric { text-align: right; min-width: 7rem; }
.mod-metric span { display: block; font: 800 1.75rem/1 var(--f-display); letter-spacing: -0.04em; color: var(--coral); }
.mod-metric em { font: 500 0.75rem var(--f-body); font-style: normal; color: var(--text-dim); }

/* ============================================================ ARCHITECTURE */

.arch { padding-block: var(--pad-sec); background: var(--tint-lilac); }
.arch-diagram { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(2rem, 3.5vw, 3rem); background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.arch-ring { text-align: center; }
.arch-ring ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; margin-top: 1.25rem; }
.arch-ring li { padding: 0.6rem 1.1rem; border-radius: var(--pill); background: var(--violet-100); font: 600 0.875rem var(--f-body); color: var(--violet); }
.arch-edge { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
.arch-edge li { flex: 1 1 155px; display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1rem; border-radius: var(--r-sm); background: var(--tint); font: 500 0.875rem var(--f-body); color: var(--text-mid); }
.arch-edge span { color: var(--coral); display: grid; place-items: center; }
.arch-edge .glyph { width: 1.2rem; height: 1.2rem; }
.arch-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.85rem; margin-top: 1.75rem; }
.arch-notes li { padding: 1.5rem; border-radius: var(--r); background: var(--white); }
.arch-notes b { display: block; margin-bottom: 0.55rem; font-size: 1.0312rem; color: var(--ink); }
.arch-notes p { font-size: 0.9062rem; line-height: 1.6; color: var(--text-dim); }

/* =================================================================== XSELL */

.xsell { padding-block: var(--pad-sec); background: var(--white); }
.xsell-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: clamp(0.85rem, 1.5vw, 1.25rem); }
.xsell-grid a { display: grid; gap: 0.7rem; justify-items: center; text-align: center; padding: 2.1rem 1.35rem; background: var(--tint); border-radius: var(--r-lg); transition: transform 0.3s var(--ease), background 0.3s, box-shadow 0.3s; }
.xsell-grid a:hover { transform: translateY(-4px); background: var(--white); box-shadow: var(--shadow-2); }
.xsell-grid span { color: var(--coral); }
.xsell-grid b { font: 700 1.125rem var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
.xsell-grid em { font: 400 0.875rem var(--f-body); font-style: normal; color: var(--text-dim); }

/* ============================================================= SOLUTION HUB */

.sol-hub { padding-block: var(--pad-sec); background: var(--white); }
.sol-row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid var(--line); }
.sol-row:last-child { border-bottom: 1px solid var(--line); }
.sol-row-head { display: grid; gap: 0.9rem; justify-items: start; align-content: start; }
.sol-row-head h2 a:hover { color: var(--acc, var(--coral)); }
.sol-row-sum { color: var(--text-mid); font-size: 1rem; max-width: 34ch; }
.sol-row-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.85rem, 1.5vw, 1.25rem); }
.sol-row-cols > div { padding: 1.6rem 1.75rem; background: var(--tint); border-radius: var(--r); }
.sol-row-cols .mono-label { padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); margin-bottom: 1.1rem; }

/* =================================================================== PAINS */

.pains { padding-block: var(--pad-sec); background: var(--tint-warm); }
.pains-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pains-list { display: grid; gap: 0.7rem; }
.pains-list li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.35rem 1.6rem; background: var(--white); border-radius: var(--r-sm); font-size: 1.0312rem; line-height: 1.55; color: var(--text-mid); }
.pains-list .mono-label { color: var(--coral); padding-top: 0.35rem; }

/* ===================================================================== WHY */

.why { padding-block: var(--pad-sec); background: var(--white); }

/* ================================================================= COMPARE */

.compare { padding-block: var(--pad-sec); background: var(--tint); }
.compare-wrap { overflow-x: auto; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.9688rem; }
.compare-table th, .compare-table td { padding: 1.15rem 1.5rem; text-align: left; border-bottom: 1px solid var(--line); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table thead th { font: 600 0.8125rem var(--f-body); color: var(--text-dim); background: var(--tint); }
.compare-table thead th.is-us { color: var(--coral-600); }
.compare-table tbody th { font-weight: 600; color: var(--ink); }
.compare-table td { color: var(--text-dim); }
.compare-table td.is-us { color: var(--ink); background: var(--coral-100); font-weight: 600; }
.compare-table tbody tr:hover td { background: var(--tint); }
.compare-table tbody tr:hover td.is-us { background: #ffd9d1; }
.compare-note { margin-top: 1.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--text-dim); max-width: 72ch; }

/* ================================================================= PRICING */

.pricing { padding-block: var(--pad-sec); background: var(--white); }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.85rem, 1.5vw, 1.25rem); align-items: start; }
.pkg { position: relative; display: grid; gap: 1.1rem; align-content: start; padding: clamp(1.75rem, 2.5vw, 2.25rem); background: var(--tint); border-radius: var(--r-lg); overflow: hidden; }
.pkg.is-featured { background: var(--ink); color: var(--on-dark); }
.pkg.is-featured .display-sm { color: #fff; }
.pkg.is-featured .pkg-for { color: var(--sun); }
.pkg.is-featured .tick-list li { color: var(--on-dark-dim); }
.pkg.is-featured .tick-list li::before { background: rgba(255, 255, 255, 0.12); color: var(--mint); }
.pkg.is-featured .pkg-note { color: var(--on-dark-dim); border-color: var(--line-dark); }
.pkg-flag { position: absolute; top: 0; right: 0; padding: 0.5rem 0.9rem; border-radius: 0 0 0 var(--r); background: var(--sun); color: var(--ink) !important; font-weight: 600; }
.pkg-for { font: 600 0.9688rem var(--f-body); color: var(--coral-600); max-width: 30ch; }
.pkg-note { padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--text-dim); }
.pkg .btn { justify-self: start; }

/* ================================================================= DRIVERS */

.drivers { padding-block: var(--pad-sec); background: var(--tint-sky); }
.driver-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: clamp(0.85rem, 1.5vw, 1.25rem); }
.driver-list li { padding: 1.75rem; background: var(--white); border-radius: var(--r); }
.driver-list .mono-label { color: var(--sky); }
.driver-list b { display: block; margin: 0.9rem 0 0.55rem; font: 700 1.1875rem var(--f-display); letter-spacing: -0.022em; color: var(--ink); }
.driver-list p { font-size: 0.9688rem; line-height: 1.6; color: var(--text-mid); }

/* ================================================================== METHOD */

.method { padding-block: var(--pad-sec); background: var(--tint); }

/* ============================================================== OWNERSHIP */

.ownership { padding-block: var(--pad-sec); background: var(--white); }
.ownership-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.ownership-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.85rem, 1.5vw, 1.25rem); }
.ownership-cols > div { padding: 1.75rem; background: var(--tint); border-radius: var(--r); }
.ownership-cols .mono-label { padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); margin-bottom: 1.15rem; }

/* ===================================================================== API */

.api { padding-block: var(--pad-sec); background: var(--tint); }
.api-inner { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.api .tick-list { margin-top: 2rem; }
.code-panel { margin: 0; padding: 1.75rem; background: var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow-x: auto; font: 400 0.8438rem/1.75 var(--f-mono); color: var(--on-dark-dim); white-space: pre; }
.code-panel code { color: inherit; }

/* ================================================================= CONTACT */

.contact { padding-block: var(--pad-sec); background: var(--white); }
.contact-inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-side .display-sm { margin-bottom: 1.6rem; }
.contact-list { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.5rem; font-size: 0.9688rem; }
.contact-list dt { font: 500 0.6875rem var(--f-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); padding-top: 0.25rem; }
.contact-list a { color: var(--coral-600); border-bottom: 1px solid var(--coral-100); }
.contact-list a:hover { border-color: var(--coral); }
.contact-note { margin-top: 2.5rem; padding: 1.6rem; background: var(--tint-warm); border-radius: var(--r); }
.contact-note p:last-child { margin-top: 0.65rem; font-size: 0.9688rem; line-height: 1.6; color: var(--text-mid); }

.steps { display: grid; gap: 0.7rem; margin-top: 0.5rem; }
.steps li { padding: 1.2rem 1.5rem; background: var(--tint); border-radius: var(--r-sm); }
.steps p { margin-top: 0.45rem; font-size: 0.9688rem; line-height: 1.6; color: var(--text-mid); }

/* ==================================================================== FORM */

.form { padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--tint); border-radius: var(--r-lg); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 1.75rem; }
.ff { display: grid; gap: 0.45rem; }
.ff.is-wide { grid-column: 1 / -1; }
.ff label { font: 600 0.875rem var(--f-body); color: var(--text-mid); }
.ff abbr { color: var(--coral); text-decoration: none; margin-left: 0.2rem; }
.ff input, .ff select, .ff textarea {
  width: 100%; padding: 0.9rem 1rem; background: var(--white); border: 1.5px solid transparent; border-radius: var(--r-sm);
  font: 400 0.9688rem var(--f-body); color: var(--text); transition: border-color 0.2s, box-shadow 0.2s;
}
.ff textarea { resize: vertical; }
.ff input:focus, .ff select:focus, .ff textarea:focus { border-color: var(--coral); outline: none; box-shadow: 0 0 0 4px var(--coral-100); }
.ff input[aria-invalid='true'], .ff select[aria-invalid='true'] { border-color: var(--coral); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.35rem; margin-top: 2rem; }
.form-note { font-size: 0.875rem; line-height: 1.6; color: var(--text-dim); max-width: 34ch; }
.form-status { margin-top: 1rem; font: 600 0.9062rem var(--f-body); color: var(--coral-600); }

/* ================================================================= LIBRARY */

.library { padding-block: var(--pad-sec); background: var(--white); }
.lib-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.85rem, 1.5vw, 1.25rem); }
.lib-grid li { display: grid; gap: 0.85rem; align-content: start; padding: clamp(1.75rem, 2.5vw, 2.25rem); background: var(--tint); border-radius: var(--r-lg); transition: transform 0.3s var(--ease), background 0.3s, box-shadow 0.3s; }
.lib-grid li:hover { transform: translateY(-5px); background: var(--white); box-shadow: var(--shadow-2); }
.lib-grid li:nth-child(4n + 1) { background: var(--tint-warm); }
.lib-grid li:nth-child(4n + 2) { background: var(--tint-lilac); }
.lib-grid li:nth-child(4n + 3) { background: var(--tint-mint); }
.lib-grid li:nth-child(4n + 4) { background: var(--tint-sky); }
.lib-grid h2 { font: 800 clamp(1.35rem, 2vw, 1.7rem)/1.18 var(--f-display); letter-spacing: -0.028em; color: var(--ink); }
.lib-grid p { font-size: 0.9688rem; line-height: 1.65; color: var(--text-mid); }
.lib-meta { display: flex !important; align-items: center; justify-content: space-between; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.8125rem !important; color: var(--text-dim); }
.lib-meta em { color: var(--coral); font-style: normal; font-size: 1.15rem; }

/* ================================================================= ARTICLE */

.article { padding-block: var(--pad-sec); background: var(--white); }
.article-shell { display: grid; grid-template-columns: 255px 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.article-aside { position: sticky; top: 110px; display: grid; gap: 1.35rem; }
.toc .mono-label { padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); margin-bottom: 0.8rem; }
.toc ol { display: grid; gap: 0.1rem; counter-reset: toc; }
.toc a { display: flex; gap: 0.65rem; padding: 0.45rem 0.65rem; margin-left: -0.65rem; border-radius: var(--r-xs); font-size: 0.9062rem; color: var(--text-dim); transition: color 0.2s, background 0.2s; }
.toc li { counter-increment: toc; }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 500 0.75rem var(--f-mono); color: var(--coral); padding-top: 0.1rem; }
.toc a:hover { color: var(--ink); background: var(--tint); }
.toc a.is-current { color: var(--coral-600); background: var(--coral-100); font-weight: 600; }
.article-cta { padding: 1.6rem; border-radius: var(--r); background: var(--ink); color: var(--on-dark); display: grid; gap: 0.9rem; justify-items: start; }
.article-cta .mono-label { color: var(--sun); }
.article-cta p { font-size: 0.9688rem; }

.prose { max-width: 68ch; }
.prose section + section { margin-top: clamp(2.75rem, 4vw, 3.5rem); }
.prose h2 { margin-bottom: 1.2rem; font: 800 clamp(1.65rem, 2.7vw, 2.25rem)/1.15 var(--f-display); letter-spacing: -0.028em; color: var(--ink); }
.prose p { margin-bottom: 1.25rem; font-size: 1.0625rem; line-height: 1.78; color: var(--text-mid); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }
.prose ul, .prose ol { display: grid; gap: 0.8rem; margin: 0 0 1.6rem; padding-left: 0; }
.prose li { position: relative; padding-left: 1.75rem; font-size: 1.0625rem; line-height: 1.7; color: var(--text-mid); }
.prose ul li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 10px; height: 10px; border-radius: 50%; background: var(--coral-100); border: 2px solid var(--coral); }
.prose ol { counter-reset: p; }
.prose ol li { counter-increment: p; }
.prose ol li::before { content: counter(p); position: absolute; left: 0; top: 0.15em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--coral-100); color: var(--coral-600); font: 600 0.75rem/1.25rem var(--f-body); text-align: center; }
.prose-cta { margin-top: 2.25rem; }

/* =============================================================== CHECKLIST */

.checklist { padding-block: var(--pad-sec); background: var(--white); }
.check-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(0.85rem, 1.5vw, 1.25rem); }
.check-group { padding: clamp(1.6rem, 2.2vw, 2.1rem); background: var(--tint); border-radius: var(--r-lg); }
.check-list { display: grid; gap: 0.95rem; margin-top: 1.35rem; }
.check-list li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.85rem; font-size: 0.9688rem; line-height: 1.55; color: var(--text-mid); }
.check-box { width: 18px; height: 18px; border: 2px solid var(--line-strong); border-radius: 6px; margin-top: 0.2rem; background: var(--white); }
.check-list li:hover .check-box { border-color: var(--coral); background: var(--coral-100); }
.checklist-foot { margin-top: 2rem; padding: 1.75rem; background: var(--tint-warm); border-radius: var(--r); font-size: 0.9688rem; line-height: 1.7; color: var(--text-mid); }
.checklist-foot .mono-label { display: block; margin-bottom: 0.6rem; }
.checklist-foot a { color: var(--coral-600); border-bottom: 1px solid var(--coral); }

/* =================================================================== LEGAL */

.legal { padding-block: var(--pad-sec); background: var(--white); }
.legal-inner { display: grid; justify-content: center; }
.legal-flag { margin: 1.75rem 0 2.75rem; padding: 1.6rem; background: var(--sun-100); border-radius: var(--r); }
.legal-flag p { margin: 0; font-size: 0.9688rem; line-height: 1.7; }
.legal .prose h2 { margin-top: 2.5rem; font-size: clamp(1.35rem, 2vw, 1.65rem); }

/* ============================================================== RESPONSIVE */

@media (max-width: 1180px) {
  .foot-nav { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .article-shell { grid-template-columns: 210px 1fr; }
}

@media (max-width: 1024px) {
  .primary-nav, .masthead-actions { display: none; }
  .burger { display: block; margin-left: auto; }
  .hero-inner, .inv-inner, .problem-inner, .shift-inner, .sec-head.is-split, .roi-inner, .faq-inner,
  .cta-card, .page-hero-inner, .outcomes-inner, .pains-inner, .sol-row, .ownership-inner,
  .api-inner, .contact-inner, .explorer-shell { grid-template-columns: 1fr; }
  .sec-head.is-split { gap: 1.75rem; }
  .sec-head-aside { padding-bottom: 0; }
  .explorer-rail { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .explorer-rail button { grid-template-columns: 1fr; }
  .rail-glyph { display: none; }
  .pkg-grid { grid-template-columns: 1fr; }
  .article-shell { grid-template-columns: 1fr; }
  .article-aside { position: static; grid-template-columns: repeat(2, 1fr); }
  .mod-list > li { grid-template-columns: 3rem 1fr; }
  .mod-metric { grid-column: 2; text-align: left; margin-top: 0.6rem; }
  .problem-lead { position: static; }
  .stage-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Shorter track on tablet so the panel finishes expanding sooner. */
  .stage-track { height: 260vh; }
  .stage-panel { width: calc(60% + 40% * var(--p)); }
}

@media (max-width: 780px) {
  :root { --pad-sec: clamp(3.5rem, 9vw, 5rem); }
  .utility-note { display: none; }
  .utility-right { margin-inline: auto 0; gap: 1.25rem; }
  .sol-grid, .lib-grid, .stats-grid, .console-kpis, .panel-caps, .form-grid,
  .sol-row-cols, .ownership-cols, .roi-results { grid-template-columns: 1fr; }
  .kpi + .kpi { border-left: 0; }
  .console-feed li { grid-template-columns: 64px 1fr auto; }
  .feed-cust, .feed-qty { display: none; }
  .panel-top { flex-direction: column; gap: 1.35rem; }
  .panel-metric { text-align: left; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-base { flex-direction: column; align-items: flex-start; }
  .article-aside { grid-template-columns: 1fr; }
  .mobile-nav { inset-block-start: 70px; }
  /* On phones the panel starts nearly full width — a tiny card would be unreadable. */
  .stage-track { height: 220vh; }
  .stage-panel { width: calc(80% + 20% * var(--p)); height: calc(56vh + 32vh * var(--p)); }
  .stage-stats { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .faq-qa summary { font-size: 1.22rem; }
  .faq-qa p { padding-right: 0; }
  .cta-card { border-radius: 24px; }
  .inv-grid { grid-template-columns: 1fr; }
  .display { font-size: clamp(2.1rem, 9vw, 2.75rem); }
  .hero-title { font-size: clamp(2.3rem, 9.5vw, 3rem); max-width: none; }
  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .sector-tile { padding: 0.6rem 0.75rem 0.6rem 0.6rem; font-size: 0.9062rem; gap: 0.65rem; }
  .sector-badge { width: 2.1rem; height: 2.1rem; }
  .sector-arrow { display: none; }
  .switch { width: 100%; }
  .switch button { padding-inline: 0.5rem; }
  .btn { width: 100%; justify-content: center; }
  .form-foot .btn { width: auto; }
}

/* ------------------------------------------------------------ motion safety */

/* Reduced-motion overrides removed at the site owner's request: motion runs
   for everyone. The integration grid below is the one exception kept. */

/* -------------------------------------------------------------------- print */

@media print {
  .utility, .masthead, .mobile-nav, .scroll-rail, .cta-slab, .ticker, .site-foot, .stage { display: none; }
  body { background: #fff; color: #000; }
  .display, .display-sm { color: #000 !important; }
  a::after { content: ' (' attr(href) ')'; font-size: 0.75em; }
}

/* ================================================ DEFINITION & COLOUR PASS */
/* Edges and colour, no structure: a hairline on every card, a spectrum accent
   per section so the page reads as a progression through the hero's palette,
   and gradient-filled emphasis in the two home headlines. */

:root {
  --hair: 1px solid rgba(22, 21, 18, 0.08);
  --spectrum: linear-gradient(90deg, #5b2bd6 0%, #d81b7e 52%, #f2b201 100%);
  --shadow-card: 0 1px 0 rgba(22, 21, 18, 0.04), 0 10px 26px -16px rgba(22, 21, 18, 0.2);
  --gold-ink: #9a6b00;
}

/* ---- headline emphasis carries the spectrum ------------------------------ */
.hero-title em, .inv .display em {
  background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- crisp band edges ----------------------------------------------------- */
.inv, .shift, .problem, .stats, .integrations, .quote, .cta-slab { border-top: var(--hair); }
.inv, .shift, .problem, .integrations { border-bottom: var(--hair); }

/* ---- one hue per section -------------------------------------------------- */
.inv .eyebrow      { background: var(--violet-100); color: var(--violet); }
.explorer .eyebrow { background: var(--sun-100);    color: var(--gold-ink); }
.sols .eyebrow     { background: var(--violet-100); color: var(--violet); }
.roi .eyebrow      { background: var(--sun-100);    color: var(--gold-ink); }
.timeline .eyebrow { background: var(--mint-100);   color: var(--mint); }
.faq .eyebrow      { background: var(--mint-100);   color: var(--mint); }
.stats:not(.on-dark) .eyebrow { background: var(--mint-100); color: var(--mint); }

/* ---- cards: hairline + layered shadow ------------------------------------- */
.inv-card, .problem-list > li, .stat, .sol-card, .roi-panel, .explorer-shell {
  border: var(--hair);
}
.inv-card, .problem-list > li, .stat, .sol-card { box-shadow: var(--shadow-card); }

/* Inventory cards: a top bar in the icon's hue. */

/* Industry tiles: the hue as a left edge, so the row reads as a swatch strip. */
.sector-tile { border-left: 3px solid var(--hue); }


/* Module explorer: the spectrum along its top edge. */
.explorer-shell { position: relative; }
.explorer-shell::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--spectrum); z-index: 2; }

/* Stat numerals take the spectrum in order. */
/* (The band's on-dark class does not darken its ground, so one strong set.) */
.stats .stat:nth-child(1) .stat-val { color: var(--violet); }
.stats .stat:nth-child(2) .stat-val { color: var(--coral); }
.stats .stat:nth-child(3) .stat-val { color: var(--gold-ink); }
.stats .stat:nth-child(4) .stat-val { color: var(--sky); }

/* Primary button: a warm glow on hover instead of a grey shadow. */
.btn-brand:hover { box-shadow: 0 12px 26px -12px rgba(216, 27, 126, 0.5); }

/* ------------------------------------------------- solutions: colour cards */
/* Home-page only. Each card owns one hue from the accent family: a wash that
   fades to white, a solid badge, an accent rule, and a glow of its own colour
   on hover. The white section ground lets the four hues read as a set. */

.sols { background: var(--white); }

.sol-card {
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--acc, var(--coral)) 22%, transparent);
  border-top: 3px solid var(--acc, var(--coral));
  background: var(--acc-tint, var(--coral-100));
  background: linear-gradient(162deg, var(--acc-tint, var(--coral-100)) 0%, #fff 58%);
  transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s;
}
.sol-card:hover {
  transform: translateY(-6px);
  background: linear-gradient(162deg, var(--acc-tint, var(--coral-100)) 0%, #fff 72%);
  border-color: var(--acc, var(--coral));
  box-shadow: 0 24px 46px -24px color-mix(in srgb, var(--acc, var(--coral)) 55%, transparent);
}

/* Badge: solid hue, white mark, lifted on its own colour. */
.sol-glyph {
  background: var(--acc, var(--coral)); color: #fff;
  box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--acc, var(--coral)) 65%, transparent);
  transition: transform 0.35s var(--ease);
}
.sol-card:hover .sol-glyph { transform: scale(1.06) rotate(-3deg); }

.sol-card h3 { transition: color 0.25s; }
.sol-card:hover h3 { color: var(--acc, var(--coral)); }

/* Pain points: the × sits in a tinted disc, matching the tick-list idiom. */
.sol-pains { border-top-color: color-mix(in srgb, var(--acc, var(--coral)) 20%, transparent); }
.sol-pains li { padding-left: 1.65rem; }
.sol-pains li::before {
  top: 0.12em; display: grid; place-items: center;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: color-mix(in srgb, var(--acc, var(--coral)) 15%, transparent);
  font-size: 0.6875rem; line-height: 1;
}

/* ------------------------------------------------ inventory: live stock board */
/* Example data for one SKU; see the note beside INV_SERIES in home.mjs. */
.inv-stage { position: relative; padding: 26px 0 60px 26px; }
.inv-board {
  position: relative; padding: clamp(20px, 2.4vw, 30px);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 1px 0 rgba(22, 21, 18, 0.04), 0 40px 80px -44px rgba(22, 21, 18, 0.5);
}
.inv-board-top { display: flex; justify-content: flex-start; align-items: center; gap: 0.75rem; }
/* Label sits beside 'Live stock', clear of the margin chip in the corner. */
.inv-live { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 0.8rem/1 var(--f-body); color: var(--ink); }
.inv-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(216, 27, 126, 0.5); animation: invPulse 2.2s infinite; }
@keyframes invPulse { 70% { box-shadow: 0 0 0 7px rgba(216, 27, 126, 0); } 100% { box-shadow: 0 0 0 0 rgba(216, 27, 126, 0); } }
.inv-ex { font: 500 0.66rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--line); border-radius: 6px; padding: 0.3rem 0.45rem; }
.inv-sku { margin-top: 1.2rem; font: 500 0.8rem/1.3 var(--f-mono); color: var(--text-dim); }
.inv-sku b { color: var(--ink); font-weight: 500; }
.inv-onhand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin-top: 0.3rem; }
.inv-onhand b { font: 400 clamp(3.2rem, 5.6vw, 4.4rem)/1 var(--f-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.inv-onhand span { color: var(--text-dim); font-size: 0.95rem; }
.inv-delta { font: 500 0.8rem/1 var(--f-mono); padding: 0.3rem 0.5rem; border-radius: 6px; opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s; }
.inv-delta.show { opacity: 1; transform: none; }
.inv-delta.up { background: var(--mint-100); color: var(--mint); }
.inv-delta.down { background: var(--coral-100); color: var(--coral-600); }
.inv-locs { display: grid; gap: 0.75rem; margin-top: 1.4rem; }
.inv-loc { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 0.8rem; font-size: 0.9rem; }
.inv-loc span { color: var(--text-mid); }
.inv-loc b { font: 500 0.85rem/1.4 var(--f-mono); font-variant-numeric: tabular-nums; }
.inv-loc.flash span { color: var(--ink); font-weight: 600; }
.inv-bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--tint); overflow: hidden; }
.inv-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: #6a2fd9; transition: width 0.7s var(--ease); }
.inv-loc:nth-child(2) .inv-bar i { background: var(--coral); }
.inv-loc:nth-child(3) .inv-bar i { background: #f2a51a; }
.inv-spark { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.inv-spark-head { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-dim); }
.inv-spark-head b { color: var(--mint); font-weight: 600; }
.inv-spark svg { width: 100%; height: auto; margin-top: 0.5rem; overflow: visible; }
.inv-spark-axis { display: flex; justify-content: space-between; margin-top: 0.35rem; font: 400 0.68rem/1 var(--f-mono); color: var(--text-dim); }
.inv-toast {
  position: absolute; left: 0; bottom: 0; width: min(340px, 84%);
  display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; align-items: center;
  padding: 14px 16px; background: var(--ink); color: #fff; border-radius: 16px;
  box-shadow: 0 24px 48px -24px rgba(22, 21, 18, 0.6);
  transition: opacity 0.35s, transform 0.35s var(--ease);
}
.inv-toast.swap { opacity: 0; transform: translateY(8px); }
.inv-toast-ic { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, 0.1); }
.inv-toast-ic .glyph { width: 20px; height: 20px; color: #fff; }
.inv-toast-ch { font: 600 0.7rem/1 var(--f-body); letter-spacing: 0.04em; text-transform: uppercase; color: #ffcf5a; }
.inv-toast-tx { font-size: 0.9rem; line-height: 1.35; }
.inv-margin {
  position: absolute; right: -8px; top: 0; display: flex; flex-direction: column; gap: 0.25rem;
  padding: 12px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card);
}
.inv-margin span { font: 500 0.66rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.inv-margin b { font: italic 700 1.8rem/1 var(--f-display); color: var(--coral); }

@media (max-width: 1180px) { .inv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .inv-stage { max-width: 560px; } }
@media (max-width: 600px) {
  .inv-grid { grid-template-columns: 1fr; }
  .inv-stage { padding: 22px 0 0; }
  .inv-toast { position: relative; width: 100%; margin-top: 12px; }
  .inv-margin { right: 10px; }
}

/* ============================================================ TRADE STORIES */
/* Expanding gallery. Each panel owns --hue; .on-light flips text to ink for
   the gold panel. Closed panels have a fixed width; the open panel takes the
   rest. Its content is sized to that final width up front (container units),
   so text never reflows while the panel animates open. */

.ts { --ts-edge: clamp(16px, 1.6vw, 28px); container-type: inline-size; padding-block: var(--pad-sec); background: #fff; border-block: var(--hair); }
.ts-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.ts-head .display { max-width: none; }

.ts-track {
  --closed-w: clamp(84px, 9vw, 160px); --gap: 12px;
  container-type: inline-size; display: flex; gap: var(--gap);
  margin-inline: calc(50% - 50cqw + var(--ts-edge));
  height: clamp(525px, 40.5vw, 645px);
}
.ts-panel {
  --on: #fff; --on-dim: rgba(255, 255, 255, 0.92); --on-line: rgba(255, 255, 255, 0.26); --badge: rgba(255, 255, 255, 0.18);
  position: relative; flex: 0 0 var(--closed-w); min-width: 0; overflow: hidden;
  border-radius: 28px; color: var(--on);
  /* Lit from the upper left and deepening into the far corner, so the panel has
     depth behind the copy instead of one flat fill. */
  background:
    radial-gradient(108% 86% at 28% 16%, color-mix(in oklab, var(--hue) 74%, #fff) 0%, transparent 60%),
    linear-gradient(203deg, var(--hue) 0%, color-mix(in oklab, var(--hue) 78%, #000) 84%);
  transition: flex-grow 0.75s var(--ease), flex-basis 0.45s var(--ease), box-shadow 0.4s;
}
/* One broad arc sweeping across the ground — the only decorative shape. */
.ts-panel::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: -34%; top: -58%; width: 128%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--hue) 58%, #fff) 0%, transparent 76%);
  opacity: 0.42;
}
.ts-panel.on-light { --on: var(--ink); --on-dim: rgba(22, 21, 18, 0.84); --on-line: rgba(22, 21, 18, 0.2); --badge: rgba(22, 21, 18, 0.1); }
.ts-panel:not(.is-open):hover { flex-basis: calc(var(--closed-w) + 28px); }
.ts-panel.is-open { flex: 1 0 var(--closed-w); box-shadow: 0 26px 64px -26px color-mix(in oklab, var(--hue) 62%, #fff); }

/* Closed state: solid hue only — the photo appears once the panel is opened. */
.ts-bg { position: absolute; inset: 0; background: none; transition: opacity 0.5s var(--ease); }
.ts-bg img, .ts-bg::after { display: none; }
.ts-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(1.1); mix-blend-mode: multiply; opacity: 0.1; transform: scale(1.08); transition: transform 1.4s var(--ease), opacity 0.4s; }
.ts-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--hue) 0%, transparent 30%, transparent 72%, var(--hue) 100%); }
.ts-panel:not(.is-open):hover .ts-bg img { transform: scale(1.02); }
.ts-panel.is-open .ts-bg { opacity: 0; }

.ts-open { position: absolute; inset: 0; z-index: 4; width: 100%; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.ts-open:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.ts-panel.is-open .ts-open { display: none; }

.ts-mark { position: absolute; z-index: 3; left: 26px; top: 26px; right: 26px; display: flex; align-items: center; gap: 0.8rem; font: 600 1.06rem/1.2 var(--f-body); letter-spacing: -0.01em; }
.ts-badge { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--badge); }
.ts-badge .glyph { width: 22px; height: 22px; stroke-width: 1.5; }
.ts-plus { position: absolute; z-index: 3; left: 26px; bottom: 26px; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--on-line); transition: opacity 0.3s, transform 0.3s var(--ease), border-color 0.3s; }
.ts-plus::before, .ts-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; background: var(--on); transform: translate(-50%, -50%); }
.ts-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.ts-panel:not(.is-open):hover .ts-plus { border-color: var(--on); transform: rotate(90deg); }
.ts-panel.is-open .ts-plus { opacity: 0; }

/* Open state. */
.ts-body {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: 0;
  width: calc(100cqw - (var(--n, 4) - 1) * (var(--closed-w) + var(--gap)));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(20px, 2.6vw, 42px);
  padding: 36px; visibility: hidden; opacity: 0;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}
.ts-panel.is-open .ts-body { visibility: visible; opacity: 1; transition: opacity 0.5s var(--ease) 0.2s, visibility 0s; }
.ts-copy { display: flex; flex-direction: column; padding: 74px 4px 4px 8px; }
.ts-copy > * { transform: translateY(14px); opacity: 0; transition: transform 0.6s var(--ease), opacity 0.6s var(--ease); }
.ts-panel.is-open .ts-copy > * { transform: none; opacity: 1; }
.ts-panel.is-open .ts-copy > :nth-child(1) { transition-delay: 0.28s; }
.ts-panel.is-open .ts-copy > :nth-child(2) { transition-delay: 0.36s; }
.ts-panel.is-open .ts-copy > :nth-child(3) { transition-delay: 0.44s; }
.ts-panel.is-open .ts-copy > :nth-child(4) { transition-delay: 0.52s; }
.ts-copy h3 {
  font: 400 clamp(2rem, 3.15vw, 3.25rem)/1.06 var(--f-display); letter-spacing: -0.018em;
  text-wrap: balance; color: var(--on);
  background: linear-gradient(176deg, var(--on) 22%, color-mix(in oklab, var(--hue) 44%, #fff) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* The gold panel keeps solid ink — a pale tint would not hold contrast. */
.ts-panel.on-light .ts-copy h3 { background: none; color: var(--on); }
.ts-lede { margin-top: 1.55rem; font-size: 1.1rem; line-height: 1.55; color: var(--on-dim); max-width: 42ch; }
.ts-link {
  display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 1.75rem;
  padding: 1.25rem 1.7rem; border-radius: 12px;
  background: var(--badge); border: 0;
  font: 600 1.06rem/1.2 var(--f-body); color: var(--on); align-self: flex-start;
  transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}
.ts-link:hover { background: color-mix(in oklab, var(--badge) 55%, #fff); transform: translateY(-2px); }
.ts-link span { transition: transform 0.2s var(--ease); }
.ts-link:hover span { transform: translateX(4px); }
.ts-link:focus-visible { outline-color: var(--on); }

/* The photo is monochrome, tinted in the panel's own hue: grey luminance,
   the panel colour laid over it. It eases out of a slight zoom on open. */
.ts-fig { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: color-mix(in oklab, var(--hue) 70%, #000); isolation: isolate; box-shadow: 0 26px 52px -26px rgba(0, 0, 0, 0.55); }
/* Duotone mask removed at the client's request — photos show in full colour.
   To restore: put back `filter: grayscale(1) contrast(1.15) brightness(1.05);`
   on .ts-fig img and re-enable the ::after hue wash below. */
.ts-fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease); }
/* .ts-fig::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--hue); mix-blend-mode: color; pointer-events: none; } */
.ts-panel.is-open .ts-fig img { transform: none; }

/* Gold panel keeps ink text but white icon and + to match the other panels. */
.ts-panel.on-light .ts-badge { color: #fff; background: rgba(255, 255, 255, 0.22); }
.ts-panel.on-light .ts-plus { border-color: rgba(255, 255, 255, 0.55); }
.ts-panel.on-light .ts-plus::before, .ts-panel.on-light .ts-plus::after { background: #fff; }
.ts-panel.on-light:not(.is-open):hover .ts-plus { border-color: #fff; }

/* Closed strips on wide screens: the badge on top and the trade name run
   down the strip like a book spine, so long names read in full. Opening a
   panel fades the name back in horizontally. */
@keyframes tsFade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 941px) {
  .ts-panel:not(.is-open) .ts-mark { flex-direction: column; align-items: center; gap: 1rem; }
  .ts-panel:not(.is-open) .ts-short {
    writing-mode: vertical-rl; white-space: nowrap;
    font: 400 1.4rem/1 var(--f-display); letter-spacing: 0.005em;
    animation: tsFade 0.45s 0.3s var(--ease) both;
  }
  .ts-panel.is-open .ts-short { animation: tsFade 0.45s 0.35s var(--ease) both; }
  /* Open: the badge sits on the copy column's left edge. */
  .ts-panel.is-open .ts-mark { left: 44px; top: 34px; }
  /* The + sits on the strip's centre line. */
  .ts-plus { left: 50%; transform: translateX(-50%); }
  .ts-panel:not(.is-open):hover .ts-plus { transform: translateX(-50%) rotate(90deg); }
}
/* ts-spine */

/* Mid-size screens: the copy column narrows, so give the track more height. */
@media (max-width: 1280px) and (min-width: 941px) { .ts-track { height: 625px; } }

/* Stacked accordion on narrow screens. */
@media (max-width: 940px) {
  .ts-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .ts-track { flex-direction: column; height: auto; interpolate-size: allow-keywords; }
  .ts-panel { flex: none; height: 94px; transition: height 0.6s var(--ease); }
  .ts-panel.is-open { flex: none; height: auto; }
  .ts-panel:not(.is-open):hover { flex-basis: auto; }
  .ts-mark { top: 26px; }
  .ts-plus { left: auto; right: 22px; top: 26px; bottom: auto; }
  .ts-body { position: relative; width: auto; grid-template-columns: 1fr; padding: 94px 20px 20px; }
  .ts-bg::after { background: linear-gradient(90deg, var(--hue) 0%, var(--hue) 42%, transparent 88%); }
  .ts-copy { padding: 0; order: 2; }
  .ts-fig { aspect-ratio: 4 / 3; }
}

/* Homepage: section pills retired except the one on the demo card. Scoped to
   the page so the shared components keep their labels elsewhere. */
.page-home .eyebrow { display: none; }
.page-home .cta-card .eyebrow { display: inline-flex; }

/* Temporary screenshot in place of the live stock board (see home.mjs). */
/* Reaches halfway into the gutter — larger than boxed, short of full bleed. */
.inv-shot { margin: 0 calc(((min(100vw, var(--shell)) - 100vw) / 2 - var(--gutter)) / 2) 0 0; }
.inv-shot img { width: 100%; height: auto; }

/* ================================================================ ECOSYSTEM */
/* A continuously scrolling row of integration tiles. Two identical tracks sit
   side by side; each slides left by its own width, so the loop is seamless. */
.eco { padding-block: var(--pad-sec); background: #fff; border-block: var(--hair); overflow: hidden; }
.eco-head { text-align: center; }
.eco-head .display { max-width: none; }
.eco-sub { max-width: 60ch; margin: 1.1rem auto 0; font-size: 1.0625rem; line-height: 1.6; color: var(--text-mid); }
.eco-sub a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.eco-sub a:hover { color: var(--coral); }
.eco-marquee {
  display: flex; margin-top: clamp(2.5rem, 5vw, 4rem); padding-block: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.eco-track { display: flex; flex: none; gap: 16px; padding-right: 16px; animation: ecoScroll 48s linear infinite; }
.eco-marquee:hover .eco-track { animation-play-state: paused; }
@keyframes ecoScroll { to { transform: translateX(-100%); } }
.eco-tile {
  display: grid; place-items: center; flex: none; width: 196px; height: 100px; padding: 16px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-card);
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.eco-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(22, 21, 18, 0.35); }
.eco-tile img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.eco-word { font: 700 1.08rem/1.15 var(--f-body); letter-spacing: -0.02em; color: var(--ink); text-align: center; text-wrap: balance; }
.eco-note { margin-top: 1.75rem; text-align: center; font-size: 0.8rem; color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) {
  .eco-marquee { -webkit-mask-image: none; mask-image: none; }
  .eco-track { animation: none; flex-wrap: wrap; justify-content: center; flex: 1; padding: 0 var(--gutter); }
  .eco-track[aria-hidden] { display: none; }
}
/* Tiles rise into place the first time the row scrolls into view. The fill is
   `backwards` so each tile is held hidden through its delay, then hands its
   transform back to the normal rules once it lands, which keeps the hover lift. */
.js .eco-marquee:not(.is-in) .eco-tile { opacity: 0; transform: translateY(18px) scale(0.96); }
.js .eco-marquee.is-in .eco-tile {
  animation: ecoTileIn 0.6s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes ecoTileIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
/* Kept running under reduced motion too, as with the hero and the stage: the
   blanket rule would otherwise cut the entrance to an instant. */
@media (prefers-reduced-motion: reduce) {
  .js .eco-marquee.is-in .eco-tile { animation-duration: 0.6s !important; }
}
@media (max-width: 600px) { .eco-tile { width: 156px; height: 84px; } .eco-track { gap: 12px; padding-right: 12px; } }

/* =================================================================== PROOF */
/* Heading left; customers in a 2x2 grid divided by hairlines, no cards. */
.proof { padding-block: var(--pad-sec); background: #fff; border-block: var(--hair); }
.proof-inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.proof-intro { margin-top: 1.4rem; max-width: 36ch; font-size: 1.125rem; line-height: 1.6; color: var(--text-mid); }
.proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--line-strong); }
.proof-cell { display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem); }
.proof-cell:nth-child(odd) { border-right: 1px solid var(--line-strong); }
.proof-cell:nth-child(-n + 2) { border-bottom: 1px solid var(--line-strong); }
.proof-co { font: 700 1.55rem/1.1 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }
.proof-co img { max-height: 40px; width: auto; }
.proof-trade { margin-top: 0.5rem; font: 500 0.7rem/1.3 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--coral); }
.proof-cell blockquote { margin: 1.1rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--text-mid); text-wrap: pretty; }
.proof-cell blockquote::before { content: '\201C'; }
.proof-cell blockquote::after { content: '\201D'; }
.proof-by { margin-top: auto; padding-top: 1.1rem; font-size: 0.9rem; color: var(--text-dim); }
.proof-by b { font-weight: 600; color: var(--ink); }
/* Hero rating badge (hidden until a real rating is set in proof.mjs). */
.hero-rating { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.4rem; font-size: 0.92rem; color: var(--text-mid); }
.hero-rating b { color: var(--ink); }
.hero-stars { color: #f2b201; letter-spacing: 0.08em; }
@media (max-width: 1024px) { .proof-inner { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .proof-grid { grid-template-columns: 1fr; border-left: 0; border-top: 1px solid var(--line-strong); }
  .proof-cell, .proof-cell:nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--line-strong); padding-inline: 0; }
}

/* ================================================ FEATURE PAGE — INVENTORY
   Built to the homepage's language: cream ground with a spectrum wash, a
   serif display headline whose emphasis carries the spectrum, a live board
   that lifts off the page, capability cards that run the spectrum in order,
   and the outcomes on a deep gradient panel like the homepage stage. */

.fx-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(1.5rem, 2.5vw, 2.5rem) clamp(4rem, 7vw, 6.5rem);
  /* Deep end of the hero spectrum, lit from the upper left. Cooler and darker
     than the outcomes panel further down, so the two read as a pair rather
     than a repeat. Every stop holds white body copy above 4.5:1. */
  background:
    radial-gradient(ellipse 60% 70% at 18% 4%, rgba(160, 90, 255, 0.4), transparent 62%),
    radial-gradient(ellipse 54% 64% at 92% 92%, rgba(216, 27, 126, 0.42), transparent 66%),
    linear-gradient(146deg, #3b1596 0%, #5c1aa8 34%, #8a1490 64%, #a8106a 100%);
  color: #fff;
}
/* One broad arc across the ground — the same decorative move as the trade panels. */
.fx-hero::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: -18%; top: -62%; width: 92%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.11), transparent 74%);
}
.fx-hero > .shell { position: relative; z-index: 1; }

/* Everything sitting on the dark ground. */
.fx-hero .crumbs ol { color: rgba(255, 255, 255, 0.66); }
.fx-hero .crumbs a { color: rgba(255, 255, 255, 0.82); }
.fx-hero .crumbs a:hover { color: #fff; }
.fx-hero .crumbs [aria-current] { color: #fff; }
.fx-hero .eyebrow { background: rgba(255, 255, 255, 0.14); color: #fff; }
.fx-hero .lede { color: rgba(255, 255, 255, 0.86); }
.fx-hero .btn-brand { --btn-bg: #fff; --btn-fg: var(--ink); --btn-line: #fff; }
.fx-hero .btn-brand:hover { --btn-bg: #fff; --btn-line: #fff; }
.fx-hero .btn-ghost { --btn-fg: #fff; --btn-line: rgba(255, 255, 255, 0.34); }
.fx-hero .btn-ghost:hover { --btn-line: #fff; --btn-bg: rgba(255, 255, 255, 0.1); }

.fx-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  margin-top: clamp(1.25rem, 2.5vw, 2.25rem);
}
.fx-title { max-width: 14ch; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.03; letter-spacing: -0.018em; }
/* The one emphasis move on the site: bold italic serif carrying the spectrum. */
.fx-title { color: #fff; }
/* The spectrum lifted for a dark ground — the darker stops would disappear. */
.fx-title em {
  font-style: italic; font-weight: 700;
  background: linear-gradient(92deg, #c4b1ff 0%, #ff8ecb 46%, #ffd166 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fx-hero .lede { max-width: 46ch; }
.fx-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: clamp(1.75rem, 3vw, 2.4rem); }
.fx-keys { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.25rem; }
.fx-keys li {
  padding: 0.4rem 0.9rem; border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22);
  font: 500 0.8125rem var(--f-mono); letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.92);
}

/* ---- live board ---------------------------------------------------------- */

.fx-board {
  margin: 0; padding: clamp(1.35rem, 2.2vw, 1.9rem);
  background: var(--white); border: var(--hair); border-radius: var(--r-lg);
  box-shadow: 0 1px 0 rgba(22, 21, 18, 0.04), 0 44px 90px -40px rgba(20, 4, 60, 0.7);
}
.fx-board-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fx-live { display: inline-flex; align-items: center; gap: 0.55rem; font: 600 0.8125rem var(--f-body); color: var(--ink); }
.fx-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: fxPulse 2.2s var(--ease) infinite; }
@keyframes fxPulse {
  0%   { box-shadow: 0 0 0 0 rgba(216, 27, 126, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(216, 27, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 27, 126, 0); }
}
.fx-ex {
  padding: 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: 6px;
  font: 500 0.6562rem var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim);
}
.fx-sku { margin-top: 1.2rem; font: 500 0.8125rem/1.3 var(--f-mono); color: var(--text-dim); }
.fx-sku b { font-weight: 500; color: var(--ink); }
.fx-onhand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin-top: 0.35rem; }
.fx-onhand b {
  font: 400 clamp(2.8rem, 4.4vw, 3.9rem)/1 var(--f-display); letter-spacing: -0.025em;
  color: var(--ink); font-variant-numeric: tabular-nums; font-variation-settings: 'opsz' 48;
}
.fx-onhand span { font-size: 0.9375rem; color: var(--text-dim); }

.fx-locs { display: grid; gap: 0.8rem; margin-top: 1.45rem; }
.fx-locs li { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 0.8rem; font-size: 0.9062rem; color: var(--text-mid); }
.fx-locs b { font: 500 0.8438rem var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-locs i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--tint); overflow: hidden; }
.fx-locs i em {
  display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--c);
  transform-origin: left center;
}
/* Bars draw in once the board scrolls into view. The undrawn state carries no
   transition, so load order can never skip the draw-in; only the reveal animates. */
.js .fx-board .fx-locs i em { transform: scaleX(0); transition: none; }
.js .fx-board.is-in .fx-locs i em {
  transform: none; transition: transform 1s var(--ease) calc(var(--i, 0) * 90ms);
}

.fx-spark { margin-top: 1.6rem; padding-top: 1.15rem; border-top: var(--hair); }
.fx-spark-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8438rem; color: var(--text-dim); }
.fx-spark-head b { color: var(--mint); font-weight: 600; }
.fx-spark svg { width: 100%; height: 72px; margin-top: 0.5rem; overflow: visible; }
.fx-spark-axis { display: flex; justify-content: space-between; margin-top: 0.4rem; font: 400 0.6875rem var(--f-mono); color: var(--text-dim); }

.fx-board-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1.25rem;
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: var(--hair);
}
.fx-chip { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8438rem; font-weight: 600; color: var(--ink); }
.fx-chip .glyph { width: 0.95rem; height: 0.95rem; color: var(--sun); flex: none; }
.fx-scan { font: 500 0.6875rem var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); }

/* ---- capabilities -------------------------------------------------------- */

.fx-caps { padding-block: var(--pad-sec); background: var(--white); }
.fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.85rem, 1.4vw, 1.1rem); }
.fx-grid li {
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 2.2vw, 1.9rem) clamp(1.35rem, 2vw, 1.7rem);
  background: var(--white); border: var(--hair); border-radius: var(--r);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
/* Each card takes the next hue along the hero spectrum. */
.fx-grid li::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); }
.fx-grid li:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(22, 21, 18, 0.04), 0 26px 46px -26px color-mix(in oklab, var(--c) 60%, transparent); }
.fx-ic {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 11px;
  background: color-mix(in oklab, var(--c) 12%, #fff); color: var(--c);
  transition: background 0.25s, color 0.25s;
}
.fx-ic .glyph { width: 1.35rem; height: 1.35rem; stroke-width: 1.5; }
.fx-grid li:hover .fx-ic { background: var(--c); color: #fff; }
.fx-grid h3 { margin-top: 1.15rem; font: 600 1.0625rem/1.3 var(--f-body); letter-spacing: -0.01em; color: var(--ink); }
.fx-grid li > p:last-child { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.6; color: var(--text-dim); }

/* ---- outcomes on a gradient panel ---------------------------------------- */

.fx-out { padding-block: var(--pad-sec); background: var(--cream); }
.fx-out-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
  padding: clamp(2.25rem, 5vw, 4.25rem); border-radius: 32px; color: #fff;
  /* Deep end of the hero spectrum — every stop holds white text above 4.5:1. */
  background: linear-gradient(135deg, #4a1fb3 0%, #7d1ba3 38%, #b0136f 72%, #b93a0c 100%);
  box-shadow: 0 30px 70px -34px rgba(90, 30, 170, 0.55);
}
.fx-out-panel::before {
  content: ''; position: absolute; pointer-events: none;
  right: -14%; top: -52%; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent 72%);
}
.fx-out-copy { position: relative; }
.fx-out-copy .display { color: #fff; }
.fx-out-copy .display em { font-style: italic; font-weight: 700; color: var(--sun); }
.fx-out-copy .eyebrow { background: rgba(255, 255, 255, 0.14); color: #fff; }
.fx-out-copy .standfirst { margin-top: 1.2rem; color: rgba(255, 255, 255, 0.88); }
.fx-out-cta { margin-top: 2rem; }
.fx-out-cta .btn-brand { --btn-bg: #fff; --btn-fg: var(--ink); --btn-line: #fff; }
.fx-out-cta .btn-brand:hover { --btn-bg: #fff; --btn-line: #fff; }

.fx-out-list { position: relative; display: grid; gap: 0; }
.fx-out-list li {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: baseline;
  padding-block: 1.15rem; border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.fx-out-list li:first-child { border-top: 0; padding-top: 0; }
.fx-num { font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.7); }
.fx-out-list p { font-size: 1.0312rem; line-height: 1.55; color: #fff; }

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .fx-hero-inner, .fx-out-panel { grid-template-columns: 1fr; }
  .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-title { max-width: 18ch; }
}
@media (max-width: 620px) {
  .fx-grid { grid-template-columns: 1fr; }
  .fx-out-panel { border-radius: 24px; }
  .fx-out-list li { grid-template-columns: 2.5rem 1fr; gap: 0.75rem; }
  .fx-keys { gap: 0.4rem; }
  .fx-keys li { font-size: 0.75rem; padding: 0.35rem 0.7rem; }
}

/* Works-with cards on the rebuilt pages: white, hairline and lifted, with the
   spectrum running across the row — the same card language as the capability
   grid above, instead of a flat grey tile. */
.related.is-rich { background: var(--cream); }
.related.is-rich .related-grid { gap: clamp(0.85rem, 1.4vw, 1.1rem); }
.related.is-rich .related-grid > li:nth-child(1) { --c: #7b2ff7; }
.related.is-rich .related-grid > li:nth-child(2) { --c: #d81b7e; }
.related.is-rich .related-grid > li:nth-child(3) { --c: #f2622a; }
.related.is-rich .related-grid a {
  position: relative; overflow: hidden;
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  background: var(--white); border: var(--hair); border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
.related.is-rich .related-grid a::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); }
.related.is-rich .related-grid a:hover {
  transform: translateY(-4px); background: var(--white);
  box-shadow: 0 1px 0 rgba(22, 21, 18, 0.04), 0 26px 46px -26px color-mix(in oklab, var(--c) 60%, transparent);
}
.related.is-rich .rel-glyph {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 11px;
  background: color-mix(in oklab, var(--c) 12%, #fff); color: var(--c);
  transition: background 0.25s, color 0.25s;
}
.related.is-rich .rel-glyph .glyph { width: 1.35rem; height: 1.35rem; stroke-width: 1.5; }
.related.is-rich .related-grid a:hover .rel-glyph { background: var(--c); color: #fff; }
.related.is-rich .related-grid b { margin-top: 0.35rem; font: 600 1.0625rem/1.3 var(--f-body); letter-spacing: -0.01em; }
.related.is-rich .related-grid em { margin-top: auto; padding-top: 0.5rem; color: var(--c); }
.related.is-rich .related-grid a { display: flex; flex-direction: column; gap: 0.7rem; }

/* Four highlight areas, on the homepage explorer's tab pattern so the existing
   rail script drives them. Six capabilities per panel rather than four. */
.fx-high { padding-block: var(--pad-sec); background: var(--white); }
.fx-high-shell { border: var(--hair); }
/* Wider than the homepage explorer so the panel ledes hold three lines. */
.fx-high .panel-lede { max-width: 68ch; }
.fx-high .panel-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .fx-high .panel-caps { grid-template-columns: 1fr; } }

/* Hero card for the modules without a bespoke visual: their headline metric
   and the first four capabilities, lifted off the gradient like the board. */
.fx-panel {
  margin: 0; padding: clamp(1.6rem, 2.6vw, 2.25rem);
  background: var(--white); border-radius: var(--r-lg);
  box-shadow: 0 1px 0 rgba(22, 21, 18, 0.04), 0 44px 90px -40px rgba(20, 4, 60, 0.7);
}
.fx-panel-top { display: flex; align-items: center; gap: 0.8rem; padding-bottom: 1.25rem; border-bottom: var(--hair); }
.fx-panel-glyph {
  display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem;
  border-radius: 11px; background: var(--coral-100); color: var(--coral);
}
.fx-panel-glyph .glyph { width: 1.35rem; height: 1.35rem; stroke-width: 1.5; }
.fx-panel-name { font: 600 1.0312rem var(--f-body); letter-spacing: -0.01em; color: var(--ink); }
.fx-panel-metric { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem; padding-block: 1.5rem 1.35rem; }
.fx-panel-metric b {
  font: 400 clamp(2.6rem, 4vw, 3.6rem)/1 var(--f-display); letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; font-variation-settings: 'opsz' 48;
}
.fx-panel-metric span { font-size: 0.9375rem; color: var(--text-dim); }
.fx-panel-caps { display: grid; gap: 0.75rem; padding-top: 1.25rem; border-top: var(--hair); }
.fx-panel-caps li {
  position: relative; padding-left: 1.6rem;
  font-size: 0.9688rem; line-height: 1.45; color: var(--text-mid);
}
.fx-panel-caps li::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--spectrum);
}
.fx-panel-foot {
  margin-top: 1.35rem; padding-top: 1.1rem; border-top: var(--hair);
  font: 500 0.6875rem var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim);
}

/* Integration cards in the rebuilt-page language: white, hairline, lifted, with
   the spectrum running across the row like the capability grid. */
.integrations.is-rich { background: var(--white); }
.integrations.is-rich .int-grid > li {
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 2.2vw, 1.9rem) clamp(1.35rem, 2vw, 1.7rem);
  background: var(--white); border: var(--hair); border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
.integrations.is-rich .int-grid > li::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c, var(--coral)); }
.integrations.is-rich .int-grid > li:nth-child(5n + 1) { --c: #5b2bd6; }
.integrations.is-rich .int-grid > li:nth-child(5n + 2) { --c: #a52ac6; }
.integrations.is-rich .int-grid > li:nth-child(5n + 3) { --c: #d81b7e; }
.integrations.is-rich .int-grid > li:nth-child(5n + 4) { --c: #f2622a; }
.integrations.is-rich .int-grid > li:nth-child(5n + 5) { --c: #e2a300; }
.integrations.is-rich .int-grid > li:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(22, 21, 18, 0.04), 0 26px 46px -26px color-mix(in oklab, var(--c) 60%, transparent);
}
.integrations.is-rich .int-grid .mono-label { color: var(--c); }
.integrations.is-rich .int-grid h3 { margin: 0.55rem 0 0.5rem; font: 600 1.0625rem/1.3 var(--f-body); letter-spacing: -0.01em; }
/* The API panel follows on a cream band so the page alternates cleanly. */
.api { background: var(--cream); }

/* Three headline promises, straight under the hero. Deliberately not cards —
   the page already has two card grids, so these sit on hairlines instead. */
.fx-pillars { padding-block: clamp(3rem, 5vw, 4.5rem); background: var(--white); border-bottom: var(--hair); }
.fx-pillars ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.fx-pillars li { position: relative; padding-left: clamp(1.5rem, 3vw, 3rem); }
.fx-pillars li:first-child { padding-left: 0; }
.fx-pillars li + li::before {
  content: ''; position: absolute; left: 0; top: 0.2rem; bottom: 0.2rem; width: 1px;
  background: var(--line);
}
.fx-pill-ic {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 11px;
  background: color-mix(in oklab, var(--c) 12%, #fff); color: var(--c);
}
.fx-pill-ic .glyph { width: 1.35rem; height: 1.35rem; stroke-width: 1.5; }
.fx-pillars h2 {
  margin-top: 1.1rem;
  font: 400 clamp(1.35rem, 1.9vw, 1.7rem)/1.2 var(--f-display); letter-spacing: -0.012em; color: var(--ink);
}
.fx-pillars p { margin-top: 0.55rem; font-size: 0.9688rem; line-height: 1.6; color: var(--text-dim); max-width: 34ch; }

@media (max-width: 860px) {
  .fx-pillars ul { grid-template-columns: 1fr; gap: 1.75rem; }
  .fx-pillars li { padding-left: 0; padding-top: 1.75rem; }
  .fx-pillars li:first-child { padding-top: 0; }
  .fx-pillars li + li::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .fx-pillars p { max-width: none; }
}

/* Barcode sweep on the warehouse board. A bright band travels across a masked
   window rather than moving the bars themselves, so it stays on the compositor. */
.fx-scanbar { margin-top: 1.5rem; padding-top: 1.2rem; border-top: var(--hair); }
.fx-scan-window { position: relative; overflow: hidden; border-radius: 6px; }
.fx-barcode { display: block; width: 100%; height: 40px; }
.fx-barcode rect { fill: var(--ink); }
.fx-scan-beam {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 44%, rgba(216, 27, 126, 0.16) 48%, rgba(216, 27, 126, 0.9) 50%, rgba(216, 27, 126, 0.16) 52%, transparent 56%);
  animation: fxScan 2.8s linear infinite;
}
@keyframes fxScan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.fx-scan-read { margin-top: 0.7rem; font: 500 0.8125rem/1.3 var(--f-mono); color: var(--text-dim); }
.fx-scan-read b { font-weight: 500; color: var(--ink); }
.fx-scan-age { font: 500 0.6875rem var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); }

/* Lead-time rail on the purchasing board. Four evenly spaced stages, so each
   dot sits at the centre of its quarter: the rail and the fill start at 12.5%
   and the fill spans two quarters to reach the third dot at 62.5%. The fill
   draws in with the bars above it; only the current stage keeps pulsing. */
.fx-lead { margin-top: 1.5rem; padding-top: 1.2rem; border-top: var(--hair); }
.fx-lead-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.8438rem; color: var(--text-dim); }
.fx-lead-head b { font: 500 0.8438rem var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-lead-steps {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0.95rem 0 0; padding: 0; list-style: none;
}
.fx-lead-steps::before {
  content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 5px;
  height: 2px; border-radius: 2px; background: var(--tint);
}
.fx-lead-fill {
  position: absolute; left: 12.5%; top: 5px; width: 50%; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, #7b2ff7, #d81b7e);
  transform-origin: left center;
}
/* As with the signature: the undrawn state carries no transition, so a late
   stylesheet cannot strand the rail part-drawn. */
.js .fx-board .fx-lead-fill { transform: scaleX(0); transition: none; }
.js .fx-board.is-in .fx-lead-fill {
  transform: none; transition: transform 1.1s var(--ease) 150ms;
}
.fx-lead-steps li { position: relative; display: grid; justify-items: center; gap: 0.6rem; }
.fx-lead-dot {
  position: relative; z-index: 1; box-sizing: border-box;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--line);
}
.fx-lead-steps li[data-done] .fx-lead-dot { background: var(--coral); border-color: var(--coral); }
.fx-lead-steps li[data-now] .fx-lead-dot { animation: fxPulse 2.2s var(--ease) infinite; }
.fx-lead-steps em {
  font: 500 0.75rem/1.2 var(--f-mono); font-style: normal;
  color: var(--text-dim); text-align: center;
}
.fx-lead-steps li[data-done] em { color: var(--ink); }
@media (max-width: 420px) { .fx-lead-steps em { font-size: 0.6875rem; } }

/* Proof-of-delivery strip on the shipping board. Sits in the warehouse board's
   .fx-scanbar frame, so the two Operations boards share a footing; the capture
   itself is the signature drawing in. pathLength="100" makes the dash offset a
   plain percentage, so the path can be redrawn without touching the CSS. */
.fx-sig { display: block; width: 100%; height: auto; aspect-ratio: 400 / 44; }
.fx-sig path {
  fill: none; stroke: var(--ink); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
}
/* The undrawn state carries no transition, so the stylesheet landing late
   cannot leave the signature mid-stroke; only the reveal animates. */
.js .fx-board .fx-sig path { stroke-dashoffset: 100; transition: none; }
.js .fx-board.is-in .fx-sig path {
  stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease) 250ms;
}
.fx-sig-rule { display: block; height: 1px; margin-top: 0.15rem; background: var(--line); }

/* ---- revenue & insight board pieces --------------------------------------
   Each board's bottom module. They share the .fx-scanbar frame with the
   warehouse board, so only the drawing inside it is new. Every reveal follows
   the hardened pattern: the hidden state carries no transition, so a late
   stylesheet cannot strand a piece part-drawn. */

/* Sales orders: where today's orders came from, as one segmented bar. */
.fx-split { display: flex; gap: 3px; margin-top: 0.8rem; }
.fx-split span {
  width: var(--w); height: 10px; border-radius: 3px;
  background: var(--c); transform-origin: left center;
}
.js .fx-board .fx-split span { transform: scaleX(0); transition: none; }
.js .fx-board.is-in .fx-split span {
  transform: none; transition: transform 0.8s var(--ease) calc(var(--i) * 110ms + 150ms);
}
.fx-split-key { display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.fx-split-key li { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; color: var(--text-dim); }
.fx-split-key li::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.fx-split-key b { font: 500 0.8125rem var(--f-mono); color: var(--ink); }

/* CRM: the account's recent activity, landing one row at a time. */
.fx-events { display: grid; gap: 0.6rem; margin: 0.85rem 0 0; padding: 0; list-style: none; }
.fx-events li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 0.65rem; font-size: 0.875rem; color: var(--text-mid);
}
.fx-event-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.fx-events em { font-style: normal; }
.fx-events b { font: 500 0.75rem var(--f-mono); color: var(--text-dim); }
.js .fx-board .fx-events li { opacity: 0; transform: translateY(6px); transition: none; }
.js .fx-board.is-in .fx-events li {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease) calc(var(--i) * 130ms + 250ms),
              transform 0.5s var(--ease) calc(var(--i) * 130ms + 250ms);
}

/* Accounting: how far through the month-end close the books are. */
.fx-close { display: flex; align-items: center; gap: 1.15rem; }
.fx-ring { width: 84px; height: 84px; flex: none; transform: rotate(-90deg); }
.fx-ring circle { fill: none; stroke-width: 8; }
.fx-ring-track { stroke: var(--tint); }
.fx-ring-fill { stroke: var(--coral); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--pc); }
.js .fx-board .fx-ring-fill { stroke-dashoffset: 100; transition: none; }
.js .fx-board.is-in .fx-ring-fill {
  stroke-dashoffset: var(--pc); transition: stroke-dashoffset 1.3s var(--ease) 200ms;
}
.fx-close-copy b { display: block; font: 400 1.5rem/1 var(--f-display); color: var(--ink); }
.fx-close-copy p { margin: 0.4rem 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--text-dim); }

/* Planning: actuals solid, forecast dashed inside its confidence band. The
   whole chart wipes in left to right, which leaves the dashes free to stay
   dashes rather than doubling as the draw-in. */
.fx-proj { display: block; width: 100%; height: auto; aspect-ratio: 500 / 58; margin-top: 0.6rem; }
.fx-proj-band { fill: rgba(216, 27, 126, 0.1); stroke: none; }
.fx-proj-hist, .fx-proj-fut {
  fill: none; stroke: url(#fx-pl); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.fx-proj-fut { stroke-dasharray: 4 3; }
.fx-proj-tip { fill: var(--white); stroke: #f2a51a; stroke-width: 2; }
.js .fx-board .fx-proj { clip-path: inset(0 100% 0 0); transition: none; }
.js .fx-board.is-in .fx-proj { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--ease) 200ms; }

/* ---- CRM board -------------------------------------------------------------
   Its own layout, so it reads as a customer record rather than another stock
   board: health ring around the initials, three counting figures, and a
   timeline whose line draws down as each event lands. Hidden states carry no
   transition, so load order can never skip an entrance. */
.fx-acct { display: flex; align-items: center; gap: 1rem; margin-top: 1.3rem; }
.fx-avatar { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; }
.fx-avatar svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fx-avatar circle { fill: none; stroke-width: 4; }
.fx-avatar-track { stroke: var(--tint); }
.fx-avatar-ring { stroke: var(--coral); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--pc); }
.js .fx-board .fx-avatar-ring { stroke-dashoffset: 100; transition: none; }
.js .fx-board.is-in .fx-avatar-ring {
  stroke-dashoffset: var(--pc); transition: stroke-dashoffset 1.3s var(--ease) 200ms;
}
.fx-avatar span {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #5b2bd6, #d81b7e 60%, #f2b201);
  font: 600 1.05rem var(--f-body); letter-spacing: 0.02em; color: #fff;
}
.fx-acct-id { display: grid; gap: 0.2rem; min-width: 0; }
.fx-acct-id b { font: 400 1.45rem/1.1 var(--f-display); color: var(--ink); }
.fx-acct-id span { font: 500 0.8125rem var(--f-mono); color: var(--text-dim); }
.fx-acct-id em { font-style: normal; font-size: 0.8438rem; font-weight: 600; color: var(--mint); }

.fx-kpis {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  margin: 1.4rem 0 0; padding: 1.1rem 0; border-block: var(--hair);
}
.fx-kpis dt { font: 400 clamp(1.6rem, 2.3vw, 2.05rem)/1 var(--f-display); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-kpis dd { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--text-dim); }
.fx-crm .fx-scanbar { border-top: 0; padding-top: 0.2rem; }

.fx-timeline { position: relative; display: grid; gap: 0.75rem; margin: 0.9rem 0 0; padding: 0 0 0 1.35rem; list-style: none; }
.fx-timeline::before {
  content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(#7b2ff7, #d81b7e 60%, #f2b201); transform-origin: top center;
}
.js .fx-board .fx-timeline::before { transform: scaleY(0); transition: none; }
.js .fx-board.is-in .fx-timeline::before { transform: none; transition: transform 1.1s var(--ease) 250ms; }
.fx-timeline li {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 0.75rem; font-size: 0.875rem; color: var(--text-mid);
}
.fx-timeline em { font-style: normal; }
.fx-timeline b { font: 500 0.75rem var(--f-mono); color: var(--text-dim); }
.fx-tl-dot {
  position: absolute; left: calc(-1.35rem + 0px); top: 0.3em; width: 10px; height: 10px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--c); box-sizing: border-box;
}
.js .fx-board .fx-timeline li { opacity: 0; transform: translateX(-8px); transition: none; }
.js .fx-board .fx-tl-dot { transform: scale(0); transition: none; }
.js .fx-board.is-in .fx-timeline li {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease) calc(var(--i) * 220ms + 350ms),
              transform 0.5s var(--ease) calc(var(--i) * 220ms + 350ms);
}
.js .fx-board.is-in .fx-tl-dot {
  transform: none; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 220ms + 350ms);
}
.fx-timeline li:first-child .fx-tl-dot { background: var(--c); animation: fxPulse 2.2s var(--ease) infinite; }

/* ---- eCommerce board -------------------------------------------------------
   A hub diagram in place of the shared bars: spokes draw out from the stock
   pool, the connected systems pop in around it, then packets keep travelling
   the spokes. Hidden states carry no transition, so load order can never skip
   an entrance. */
.fx-hub { position: relative; margin-top: 1.2rem; aspect-ratio: 400 / 205; }
.fx-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-hub-line {
  fill: none; stroke: var(--c); stroke-width: 2; stroke-opacity: 0.45; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
}
.js .fx-board .fx-hub-line { stroke-dashoffset: 100; transition: none; }
.js .fx-board.is-in .fx-hub-line {
  stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s var(--ease) calc(var(--i) * 120ms + 350ms);
}
.js .fx-board .fx-hub-packets { opacity: 0; transition: none; }
.js .fx-board.is-in .fx-hub-packets { opacity: 1; transition: opacity 0.6s var(--ease) 1.3s; }

.fx-hub-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 0.15rem; padding: 0.8rem 1.15rem; border-radius: 16px;
  background: linear-gradient(135deg, #5b2bd6, #d81b7e 60%, #f2b201); color: #fff; text-align: center;
  box-shadow: 0 18px 40px -18px rgba(91, 43, 214, 0.65);
  animation: fxPulse 2.6s var(--ease) infinite;
}
.fx-hub-core span { font: 600 0.6875rem var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.85; }
.fx-hub-core b { font: 400 clamp(1.7rem, 2.6vw, 2.2rem)/1 var(--f-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fx-hub-core em { font-style: normal; font-size: 0.75rem; opacity: 0.9; }
.js .fx-board .fx-hub-core { opacity: 0; transform: translate(-50%, -50%) scale(0.85); transition: none; }
.js .fx-board.is-in .fx-hub-core {
  opacity: 1; transform: translate(-50%, -50%);
  transition: opacity 0.6s var(--ease) 150ms, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 150ms;
}

.fx-hub-nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.fx-hub-nodes li {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
  padding: 0.4rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  font: 500 0.75rem var(--f-mono); color: var(--ink); box-shadow: 0 8px 18px -12px rgba(22, 21, 18, 0.35);
}
.fx-hub-nodes li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.js .fx-board .fx-hub-nodes li { opacity: 0; transform: translate(-50%, -50%) scale(0.7); transition: none; }
.js .fx-board.is-in .fx-hub-nodes li {
  opacity: 1; transform: translate(-50%, -50%);
  transition: opacity 0.45s var(--ease) calc(var(--i) * 120ms + 750ms),
              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 120ms + 750ms);
}
/* Outbound packets are rings, inbound are solid, and the key says which is which. */
.fx-hub-out { fill: var(--white); stroke-width: 2.2; }
.fx-hub-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.fx-hub-key li { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; color: var(--text-dim); }
.fx-hub-key i { width: 9px; height: 9px; border-radius: 50%; }
.fx-key-in { background: var(--coral); }
.fx-key-out { background: var(--white); border: 2px solid var(--coral); box-sizing: border-box; }
.fx-hub-read { margin-top: 0.9rem; padding-top: 0.9rem; border-top: var(--hair); }
.fx-hub-lines--tall { display: none; }
/* Phones: the square geometry, so the systems sit well clear of the hub. */
@media (max-width: 560px) {
  .fx-hub { aspect-ratio: 300 / 330; }
  .fx-hub-lines--wide { display: none; }
  .fx-hub-lines--tall { display: block; }
  .fx-hub-nodes li { left: var(--mx); top: var(--my); padding: 0.32rem 0.55rem; font-size: 0.6875rem; }
}

/* ---- integrations board ----------------------------------------------------
   Two logo rows drifting in opposite directions, ChannelSnap between them, wires
   carrying data both ways, and a feed of what just synced. Hidden states carry
   no transition, so load order can never skip an entrance. */
.fx-int-stage { margin-top: 1.3rem; }
.fx-int-row {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.fx-int-track {
  display: flex; flex: none; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none;
  animation: fxIntScroll 32s linear infinite;
}
.fx-int-row.is-rev .fx-int-track { animation-duration: 38s; animation-direction: reverse; }
@keyframes fxIntScroll { to { transform: translateX(-100%); } }
.fx-int-track li {
  width: 108px; height: 46px; display: grid; place-items: center; flex: none;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 18px -14px rgba(22, 21, 18, 0.4);
}
.fx-int-track img { max-width: 78px; max-height: 24px; width: auto; height: auto; object-fit: contain; }

.fx-int-gap { position: relative; height: 34px; }
.fx-int-gap i {
  position: absolute; left: var(--x); top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(rgba(123, 47, 247, 0.35), rgba(216, 27, 126, 0.35));
}
.fx-int-gap b {
  position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  animation: 1.8s linear infinite; animation-delay: var(--d);
}
.fx-int-in { background: var(--coral); }
.fx-int-out { background: var(--white); border: 2px solid var(--coral); box-sizing: border-box; animation-delay: calc(var(--d) - 0.9s) !important; }
/* Into ChannelSnap means down from the top row and up from the bottom row. */
.fx-int-gap.is-top .fx-int-in, .fx-int-gap.is-low .fx-int-out { animation-name: fxIntDown; }
.fx-int-gap.is-top .fx-int-out, .fx-int-gap.is-low .fx-int-in { animation-name: fxIntUp; }
@keyframes fxIntDown {
  0% { transform: translateY(-4px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; }
}
@keyframes fxIntUp {
  0% { transform: translateY(30px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(-4px); opacity: 0; }
}

.fx-int-core {
  position: relative; overflow: hidden; display: flex; align-items: baseline; justify-content: center; gap: 0.75rem;
  padding: 0.95rem 1.2rem; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #5b2bd6, #d81b7e 60%, #f2b201);
  box-shadow: 0 18px 40px -20px rgba(91, 43, 214, 0.7);
}
.fx-int-core b { font: 400 1.45rem/1 var(--f-display); letter-spacing: -0.01em; }
.fx-int-core em { font-style: normal; font-size: 0.8125rem; opacity: 0.9; }
.fx-int-core::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.28) 50%, transparent 60%);
  transform: translateX(-100%); animation: fxIntSheen 3.4s var(--ease) infinite;
}
@keyframes fxIntSheen { 0%, 25% { transform: translateX(-100%); } 75%, 100% { transform: translateX(100%); } }

.fx-int-feed { display: grid; gap: 0.55rem; margin: 1.3rem 0 0; padding: 1rem 0 0; border-top: var(--hair); list-style: none; }
.fx-int-feed li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 0.7rem; font-size: 0.875rem; color: var(--text-mid); }
.fx-int-feed li:nth-child(n + 4) { display: none; }
.fx-int-feed li span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.fx-int-feed li img { max-width: 22px; max-height: 18px; width: auto; height: auto; object-fit: contain; }
.fx-int-feed em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-int-feed b { font: 500 0.75rem var(--f-mono); color: var(--text-dim); white-space: nowrap; }
.fx-int-feed li:first-child b { color: var(--mint); }
.fx-int-feed li.is-new { animation: fxFeedIn 0.5s var(--ease) both; }
@keyframes fxFeedIn { from { opacity: 0; transform: translateY(-8px); } }

.js .fx-board .fx-int-row, .js .fx-board .fx-int-gap, .js .fx-board .fx-int-core,
.js .fx-board .fx-int-feed { opacity: 0; transform: translateY(10px); transition: none; }
.js .fx-board.is-in .fx-int-row, .js .fx-board.is-in .fx-int-gap, .js .fx-board.is-in .fx-int-core,
.js .fx-board.is-in .fx-int-feed {
  opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js .fx-board.is-in .fx-int-row:first-child { transition-delay: 100ms; }
.js .fx-board.is-in .fx-int-gap.is-top { transition-delay: 350ms; }
.js .fx-board.is-in .fx-int-core { transition-delay: 200ms; }
.js .fx-board.is-in .fx-int-gap.is-low { transition-delay: 450ms; }
.js .fx-board.is-in .fx-int-row.is-rev { transition-delay: 300ms; }
.js .fx-board.is-in .fx-int-feed { transition-delay: 600ms; }
@media (max-width: 420px) {
  .fx-int-core { flex-direction: column; align-items: center; gap: 0.3rem; }
  .fx-int-track li { width: 92px; height: 42px; }
}

/* The hero columns are grid items, which by default grow to fit their widest
   content. The integrations board holds two long logo tracks, so without this
   it would stretch past a phone screen and scroll the page sideways. */
.fx-hero-copy, .fx-hero-stage, .fx-int { min-width: 0; }

/* ---- solution pages: intro and full feature list ---------------------------
   Both sections render only when a solution supplies them (the wine page does).
   The feature list flows into balanced columns so groups of very different
   lengths pack without gaps. */
.sol-intro { padding-block: var(--pad-sec); background: var(--white); border-bottom: var(--hair); }
.sol-intro-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sol-intro-copy { display: grid; gap: 1.1rem; }
.sol-intro-copy p { font-size: 1.0625rem; line-height: 1.7; color: var(--text-mid); max-width: 62ch; }
@media (max-width: 860px) { .sol-intro-inner { grid-template-columns: 1fr; } }

.feat-groups { padding-block: var(--pad-sec); background: var(--paper, var(--tint)); }
.feat-cols { columns: 3 280px; column-gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.feat-group {
  break-inside: avoid; margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  padding: 1.5rem 1.5rem 1.6rem; background: var(--white); border-radius: var(--r); border: var(--hair);
}
.feat-group h3 { font: 700 1.0625rem/1.25 var(--f-display); letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.9rem; }
.feat-group ul { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.feat-group li { position: relative; padding-left: 1.2rem; font-size: 0.9062rem; line-height: 1.5; color: var(--text-mid); }
.feat-group li::before {
  content: ''; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, #7b2ff7, #d81b7e);
}

/* ---- wine board: LCBO documents generating in turn -------------------------
   Each card idles, lights while it is being generated, then keeps its tick.
   The stepping is driven from site.js; without it the cards simply sit idle. */
.fx-docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.fx-doc {
  position: relative; display: grid; gap: 0.25rem; align-content: start;
  padding: 0.75rem 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.fx-doc-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--text-dim); stroke-width: 1.6; stroke-linejoin: round; transition: stroke 0.35s var(--ease); }
.fx-doc b { font-size: 0.8125rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.fx-doc em { font: 500 0.6875rem var(--f-mono); font-style: normal; color: var(--text-dim); }
.fx-doc-tick {
  position: absolute; top: 0.55rem; right: 0.55rem; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mint);
  transform: scale(0); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fx-doc-tick svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fx-doc.is-active {
  border-color: var(--coral); background: rgba(216, 27, 126, 0.05); transform: translateY(-3px);
  box-shadow: 0 0 0 3px rgba(216, 27, 126, 0.12), 0 14px 26px -18px rgba(216, 27, 126, 0.6);
}
.fx-doc.is-active .fx-doc-ic svg { stroke: var(--coral); }
.fx-doc.is-done .fx-doc-ic svg { stroke: var(--mint); }
.fx-doc.is-done .fx-doc-tick { transform: none; }
@media (max-width: 560px) { .fx-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Rich solution page: the feature list takes the inventory page's spectrum
   card style (coloured top rule, tinted icon tile) inside the masonry columns. */
.feat-groups.is-rich { background: var(--white); }
.feat-groups.is-rich .feat-group {
  position: relative; overflow: hidden; border: var(--hair); box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.feat-groups.is-rich .feat-group::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); }
.feat-groups.is-rich .feat-group:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(22, 21, 18, 0.04), 0 26px 46px -26px color-mix(in oklab, var(--c) 60%, transparent); }
.feat-groups.is-rich .feat-group:hover .fx-ic { background: var(--c); color: #fff; }
.feat-groups.is-rich .feat-group h3 { margin: 1rem 0 0.85rem; font: 600 1.0625rem/1.3 var(--f-body); letter-spacing: -0.01em; }
.feat-groups.is-rich .feat-group li::before { background: var(--c); }
/* Six related modules on a solution page sit as two full rows of three. */
.sol-related .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .sol-related .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sol-related .related-grid { grid-template-columns: 1fr; } }

/* ---- distribution board: orders flowing in from every channel --------------
   The stage keeps the SVG's 400x170 aspect, so channel chips placed by
   percentage sit on the start of their paths at every width. Paths draw in on
   reveal; dots then keep flowing toward the ChannelSnap queue. */
.fx-flow-stage { position: relative; aspect-ratio: 400 / 170; margin-top: 1.2rem; }
.fx-flow-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-flow-path { fill: none; stroke: var(--c); stroke-width: 2; stroke-opacity: 0.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.js .fx-board .fx-flow-path { stroke-dashoffset: 100; transition: none; }
.js .fx-board.is-in .fx-flow-path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s var(--ease) calc(var(--i) * 120ms + 300ms); }
.js .fx-board .fx-flow-dots { opacity: 0; transition: none; }
.js .fx-board.is-in .fx-flow-dots { opacity: 1; transition: opacity 0.6s var(--ease) 1.2s; }
.fx-flow-chips { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.fx-flow-chips li {
  position: absolute; left: 0; top: var(--y); transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  font-size: 0.75rem; font-weight: 600; color: var(--ink); box-shadow: 0 8px 16px -12px rgba(22, 21, 18, 0.35);
}
.fx-flow-chips li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.js .fx-board .fx-flow-chips li { opacity: 0; transform: translate(-8px, -50%); transition: none; }
.js .fx-board.is-in .fx-flow-chips li {
  opacity: 1; transform: translateY(-50%);
  transition: opacity 0.45s var(--ease) calc(var(--i) * 110ms + 150ms), transform 0.45s var(--ease) calc(var(--i) * 110ms + 150ms);
}
.fx-flow-node {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: grid; justify-items: center; gap: 0.15rem; padding: 0.75rem 0.95rem; border-radius: 14px;
  background: linear-gradient(135deg, #5b2bd6, #d81b7e 60%, #f2b201); color: #fff; text-align: center;
  box-shadow: 0 16px 34px -18px rgba(91, 43, 214, 0.7); animation: fxPulse 2.6s var(--ease) infinite;
}
.fx-flow-node b { font: 400 1.15rem/1 var(--f-display); }
.fx-flow-node em { font-style: normal; font-size: 0.6875rem; opacity: 0.9; white-space: nowrap; }
.fx-flow-read { margin-top: 1.1rem; padding-top: 1rem; border-top: var(--hair); }
@media (max-width: 420px) {
  .fx-flow-chips li { padding: 0.24rem 0.45rem; font-size: 0.6875rem; }
  .fx-flow-node { padding: 0.55rem 0.65rem; }
  .fx-flow-node b { font-size: 0.95rem; }
}

/* ---- Shopify board: storefront and ChannelSnap record side by side ----------
   A browser-window product card, a two-lane sync column, and the record it
   feeds. Figures flash when the demo order loop changes them. */
.fx-shop-stage { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: center; margin-top: 1.2rem; }
.fx-shop-win { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: 0 14px 28px -20px rgba(22, 21, 18, 0.45); }
.fx-shop-bar { display: flex; align-items: center; gap: 4px; padding: 0.4rem 0.55rem; background: var(--tint); border-bottom: 1px solid var(--line); }
.fx-shop-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(22, 21, 18, 0.18); }
.fx-shop-bar span { margin-left: 0.4rem; font: 500 0.625rem var(--f-mono); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-shop-prod { display: grid; gap: 0.3rem; padding: 0.75rem; }
.fx-shop-img {
  display: grid; place-items: center; height: 70px; border-radius: 8px; margin-bottom: 0.25rem;
  background: linear-gradient(135deg, rgba(123, 47, 247, 0.14), rgba(216, 27, 126, 0.12), rgba(242, 178, 1, 0.16)); color: var(--coral);
}
.fx-shop-img .glyph { width: 28px; height: 28px; }
.fx-shop-prod b { font-size: 0.8438rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.fx-shop-price { font: 400 1.05rem/1 var(--f-display); color: var(--ink); }
.fx-shop-stock { font-size: 0.75rem; color: var(--mint); font-weight: 600; }
.fx-shop-stock em { font-style: normal; font-variant-numeric: tabular-nums; border-radius: 4px; padding: 0 2px; }
.fx-shop-cta {
  justify-self: start; margin-top: 0.3rem; padding: 0.35rem 0.75rem; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 0.6875rem; font-weight: 600;
}
.fx-shop-cta.is-flash { animation: fxPress 0.45s var(--ease); }
@keyframes fxPress { 40% { transform: scale(0.92); background: var(--coral); } }

.fx-shop-sync { position: relative; height: 70px; display: grid; align-content: center; gap: 14px; }
.fx-shop-sync span { position: relative; height: 2px; margin: 0 4px; background: linear-gradient(90deg, rgba(123, 47, 247, 0.35), rgba(216, 27, 126, 0.35)); }
.fx-shop-sync span::after {
  content: ''; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%;
  animation: fxShopLane 1.6s linear infinite;
}
.fx-shop-sync .is-out::after { background: var(--coral); }
.fx-shop-sync .is-in::after { background: var(--white); border: 2px solid var(--coral); box-sizing: border-box; animation-direction: reverse; animation-delay: -0.8s; }
@keyframes fxShopLane { 0% { left: -4px; opacity: 0; } 20%, 80% { opacity: 1; } 100% { left: calc(100% - 4px); opacity: 0; } }

.fx-shop-erp {
  padding: 0.8rem 0.85rem; border-radius: 12px; color: #fff;
  background: linear-gradient(150deg, #5b2bd6, #d81b7e 65%, #f2b201);
  box-shadow: 0 16px 32px -18px rgba(91, 43, 214, 0.7);
}
.fx-shop-erp-head { font: 400 1.05rem/1 var(--f-display); margin-bottom: 0.55rem; }
.fx-shop-erp dl { display: grid; gap: 0.45rem; margin: 0; }
.fx-shop-erp dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding-top: 0.4rem; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.fx-shop-erp dt { font-size: 0.6875rem; opacity: 0.88; }
.fx-shop-erp dd { margin: 0; font: 500 0.8125rem var(--f-mono); font-variant-numeric: tabular-nums; border-radius: 4px; padding: 0 3px; }
.fx-shop-read { margin-top: 1.1rem; padding-top: 1rem; border-top: var(--hair); }
.fx-shop .is-flash:not(.fx-shop-cta) { animation: fxFlash 0.9s var(--ease); }
@keyframes fxFlash { 0% { background: rgba(242, 178, 1, 0.55); } 100% { background: transparent; } }

.js .fx-board .fx-shop-win, .js .fx-board .fx-shop-erp { opacity: 0; transform: translateY(10px); transition: none; }
.js .fx-board .fx-shop-sync { opacity: 0; transition: none; }
.js .fx-board.is-in .fx-shop-win { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) 150ms, transform 0.6s var(--ease) 150ms; }
.js .fx-board.is-in .fx-shop-erp { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) 350ms, transform 0.6s var(--ease) 350ms; }
.js .fx-board.is-in .fx-shop-sync { opacity: 1; transition: opacity 0.6s var(--ease) 650ms; }
@media (max-width: 420px) {
  .fx-shop-stage { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
  .fx-shop-prod, .fx-shop-erp { padding: 0.6rem; }
  .fx-shop-img { height: 54px; }
}

/* ---- flipper: three-tab deep dive ------------------------------------------
   Tabs carry the hero spectrum and a progress bar that drives auto-rotation.
   With JS the panels stack in one grid cell (no height jump) and the active
   one turns in; without JS the tabs hide and the panels read in sequence. */
.fx-flip { padding-block: var(--pad-sec); background: var(--white); }
.flip { margin-top: clamp(2rem, 4vw, 3rem); }
.flip-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.6rem, 1.2vw, 1rem); }
html:not(.js) .flip-tabs { display: none; }
.flip-tabs button {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.15rem 1.15rem; text-align: left; cursor: pointer;
  background: var(--white); border: var(--hair); border-radius: var(--r); box-shadow: var(--shadow-card);
  font: inherit; color: var(--text-mid); transition: transform 0.25s var(--ease), box-shadow 0.25s, color 0.25s;
}
.flip-tabs button:hover { transform: translateY(-2px); }
.flip-tabs button[aria-selected='true'] { color: var(--ink); box-shadow: 0 1px 0 rgba(22, 21, 18, 0.04), 0 22px 40px -26px color-mix(in oklab, var(--c) 70%, transparent); }
.flip-tabs button::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); opacity: 0.35; transition: opacity 0.25s; }
.flip-tabs button[aria-selected='true']::before { opacity: 1; }
.flip-ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: color-mix(in oklab, var(--c) 12%, #fff); color: var(--c); flex: none; transition: background 0.25s, color 0.25s; }
.flip-ic .glyph { width: 1.25rem; height: 1.25rem; }
.flip-tabs button[aria-selected='true'] .flip-ic { background: var(--c); color: #fff; }
.flip-name { font: 600 1.0625rem var(--f-body); letter-spacing: -0.01em; }
.flip-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.flip-bar i { display: block; height: 100%; width: 100%; background: var(--c); transform-origin: left center; transform: scaleX(0); }
.flip.is-auto .flip-tabs button[aria-selected='true'] .flip-bar i { animation: flipBar 9s linear forwards; }
/* Must out-rank the rule that starts the bar: its animation shorthand would
   otherwise reset the play state to running. */
.flip.is-auto.is-paused .flip-tabs button[aria-selected='true'] .flip-bar i { animation-play-state: paused; }
@keyframes flipBar { to { transform: scaleX(1); } }

.flip-stage { margin-top: clamp(0.85rem, 1.5vw, 1.25rem); }
.js .flip-stage { display: grid; }
.flip-panel {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
  padding: clamp(1.6rem, 3.5vw, 3rem); background: var(--white); border: var(--hair); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
html:not(.js) .flip-panel + .flip-panel { margin-top: 1rem; }
.flip-panel::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--c), color-mix(in oklab, var(--c) 30%, #f2b201)); }
.js .flip-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.js .flip-panel.is-active { visibility: visible; opacity: 1; z-index: 1; }
/* Switching panels: the new one wipes in left to right over the old, which
   stays visible underneath until the wipe has passed, then its copy rises. */
.js .flip-panel.is-leaving { visibility: visible; opacity: 1; z-index: 0; }
.flip-panel.is-entering { animation: flipWipe 0.7s cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes flipWipe {
  from { clip-path: inset(0 100% 0 0 round var(--r-lg)); }
  to   { clip-path: inset(0 0 0 0 round var(--r-lg)); }
}
.flip-panel.is-entering .flip-copy > * { animation: flipRise 0.55s var(--ease) both; }
.flip-panel.is-entering .flip-copy > :nth-child(1) { animation-delay: 0.3s; }
.flip-panel.is-entering .flip-copy > :nth-child(2) { animation-delay: 0.38s; }
.flip-panel.is-entering .flip-copy > :nth-child(3) { animation-delay: 0.46s; }
.flip-panel.is-entering .flip-copy > :nth-child(n + 4) { animation-delay: 0.54s; }
.flip-panel.has-items { grid-template-columns: 1fr; }
.flip-kicker { font: 500 0.75rem var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); }
.flip-copy h3 { margin-top: 0.7rem; color: var(--ink); }
.flip-copy p:not(.flip-kicker) { margin-top: 1rem; font-size: 1rem; line-height: 1.7; color: var(--text-mid); max-width: 64ch; }
.flip-copy .flip-lede { font-size: 1.125rem; color: var(--ink); }

.flip-chips { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; align-self: center; }
.flip-chips li {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem;
  border-radius: 12px; background: color-mix(in oklab, var(--c) 7%, #fff); border: 1px solid color-mix(in oklab, var(--c) 18%, #fff);
  font-size: 0.9375rem; font-weight: 500; color: var(--ink);
}
.flip-chips li::before {
  content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 5px color-mix(in oklab, var(--c) 30%, #fff);
}
.flip-steps { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; align-self: center; counter-reset: none; }
.flip-steps li {
  position: relative; display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 1rem;
  border-radius: 12px; background: color-mix(in oklab, var(--c) 9%, #fff); font-weight: 600; color: var(--ink);
}
.flip-steps li span { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.flip-steps li + li::before { content: ''; position: absolute; left: calc(1rem + 4px); top: -0.6rem; width: 2px; height: 0.65rem; background: color-mix(in oklab, var(--c) 45%, #fff); }
.flip-panel.is-entering .flip-steps li, .flip-panel.is-entering .flip-chips li, .flip-panel.is-entering .flip-item { animation: flipRise 0.5s var(--ease) both; animation-delay: calc(var(--k, 0) * 80ms + 420ms); }
.flip-item:nth-child(2) { --k: 1; } .flip-item:nth-child(3) { --k: 2; }
.flip-chips li:nth-child(2) { --k: 1; } .flip-chips li:nth-child(3) { --k: 2; } .flip-chips li:nth-child(4) { --k: 3; }
.flip-chips li:nth-child(5) { --k: 4; } .flip-chips li:nth-child(6) { --k: 5; } .flip-chips li:nth-child(7) { --k: 6; }
@keyframes flipRise { from { opacity: 0; transform: translateY(8px); } }

.flip-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.85rem, 1.6vw, 1.25rem); }
.flip-item { padding: 1.35rem 1.35rem 1.5rem; border-radius: var(--r); background: color-mix(in oklab, var(--c) 6%, #fff); border: 1px solid color-mix(in oklab, var(--c) 16%, #fff); }
.flip-item h4 { font: 600 1.0625rem/1.3 var(--f-body); color: var(--ink); }
.flip-item p { margin-top: 0.6rem; font-size: 0.9375rem; line-height: 1.65; color: var(--text-mid); }

@media (max-width: 900px) {
  .flip-panel, .flip-items { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* Panels differ a lot in height on a narrow screen, so only the active one
     takes up space rather than every panel holding the tallest one's height. */
  .js .flip-panel:not(.is-active) { display: none; }
  .flip-tabs button { flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 0.8rem; }
  .flip-name { font-size: 0.9375rem; }
}

/* ---- pricing and ROI pages in the inventory page's style -------------------- */
/* Quote board: the six cost drivers tick off in turn. */
.fx-quote-list { display: grid; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.fx-quote-list li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.fx-quote-list b { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.fx-quote-list span { font: 500 0.6875rem var(--f-mono); color: var(--text-dim); text-align: right; }
.fx-quote-tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); transition: background 0.3s, border-color 0.3s; }
.fx-quote-tick svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.3s; }
.fx-quote-list li.is-active { border-color: var(--coral); background: rgba(216, 27, 126, 0.05); transform: translateX(4px); box-shadow: 0 0 0 3px rgba(216, 27, 126, 0.1); }
.fx-quote-list li.is-active .fx-quote-tick { border-color: var(--coral); }
.fx-quote-list li.is-done .fx-quote-tick { background: var(--mint); border-color: var(--mint); }
.fx-quote-list li.is-done .fx-quote-tick svg { opacity: 1; }
@media (max-width: 420px) { .fx-quote-list span { display: none; } }

/* Packages as spectrum cards; the featured one takes the brand gradient. */
.fx-pkgs .pkg { background: var(--white); border: var(--hair); box-shadow: var(--shadow-card); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.fx-pkgs .pkg::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); }
.fx-pkgs .pkg:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(22, 21, 18, 0.04), 0 26px 46px -26px color-mix(in oklab, var(--c) 60%, transparent); }
.fx-pkgs .pkg.is-featured { background: linear-gradient(150deg, #5b2bd6, #a52ac6 45%, #d81b7e 80%, #f2622a); border-color: transparent; }
.fx-pkgs .pkg.is-featured::before { display: none; }
.fx-pkgs .pkg.is-featured .pkg-for { color: #fff; }
.fx-pkgs .pkg.is-featured .tick-list li { color: rgba(255, 255, 255, 0.9); }
.fx-pkgs .pkg.is-featured .tick-list li::before { background: #fff; color: var(--coral); font-weight: 700; }
.fx-pkgs .pkg.is-featured .pkg-note { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.25); }
.fx-pkgs .pkg.is-featured .btn-brand { --btn-bg: #fff; --btn-fg: var(--ink); --btn-line: #fff; }
.fx-pkgs .pkg-for { color: var(--c); }

/* Cost drivers inside the gradient panel: name over explanation. */
.fx-out-list p b { display: block; margin-bottom: 0.25rem; font-weight: 600; color: #fff; }

/* ROI board extras and the two-by-two method grid. */
.fx-roi-capital { margin-top: 0.4rem; font: 400 clamp(1.8rem, 2.6vw, 2.3rem)/1 var(--f-display); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-roi-board .fx-scan-read { margin-top: 0.55rem; }
.fx-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .fx-grid.is-two { grid-template-columns: 1fr; } }

/* ---- services and resources pages -------------------------------------------- */
.fx-grid li > h3 + p { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.6; color: var(--text-dim); }
.fx-grid li h3 a { color: inherit; text-decoration: none; }
.fx-grid li h3 a::after { content: ''; position: absolute; inset: 0; }
.fx-grid li h3 a:hover { color: var(--c); }
.fx-grid-meta { margin-top: 1rem; font: 500 0.75rem var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c); }

/* Services: who owns what, inside the gradient panel. */
.fx-own { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.fx-own-head { font: 500 0.75rem var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sun); margin-bottom: 0.9rem; }
.fx-own ul { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.fx-own li { position: relative; padding-left: 1.6rem; color: #fff; font-size: 0.9688rem; line-height: 1.5; }
.fx-own li::before { content: '\2713'; position: absolute; left: 0; top: 0.05em; width: 1.1rem; height: 1.1rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.95); color: var(--coral); font-size: 0.6875rem; font-weight: 700; }
@media (max-width: 760px) { .fx-own { grid-template-columns: 1fr; } }

/* Implementation board: a six-week Gantt with a sweeping "today" line. */
.fx-gantt-chart { position: relative; margin-top: 1.3rem; }
.fx-gantt-head { display: grid; grid-template-columns: 9.5rem repeat(6, minmax(0, 1fr)); font: 500 0.6875rem var(--f-mono); color: var(--text-dim); }
.fx-gantt-head span:first-child { grid-column: 2; }
.fx-gantt-rows { display: grid; gap: 0.55rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.fx-gantt-rows li { display: grid; grid-template-columns: 9.5rem 1fr; align-items: center; }
.fx-gantt-name { font-size: 0.8125rem; font-weight: 600; color: var(--ink); padding-right: 0.6rem; }
.fx-gantt-track { position: relative; height: 22px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--tint) 0 calc(100% / 6 - 2px), transparent calc(100% / 6 - 2px) calc(100% / 6)); }
.fx-gantt-track i {
  position: absolute; top: 0; bottom: 0; left: calc(var(--a) / 6 * 100%); width: calc((var(--b) - var(--a)) / 6 * 100%);
  border-radius: 6px; background: linear-gradient(90deg, #7b2ff7, #d81b7e 70%, #f2b201); transform-origin: left center;
}
.js .fx-board .fx-gantt-track i { transform: scaleX(0); transition: none; }
.js .fx-board.is-in .fx-gantt-track i { transform: none; transition: transform 0.7s var(--ease) calc(var(--i) * 180ms + 250ms); }
/* The sweep lives in a box covering only the week columns, so its line can run
   from 0% to 100% of that box. */
.fx-gantt-now { position: absolute; top: 1.2rem; bottom: 0; left: 9.5rem; right: 0; pointer-events: none; }
.fx-gantt-now::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--coral); box-shadow: 0 0 0 3px rgba(216, 27, 126, 0.15); animation: fxGanttNow 7s linear infinite;
}
.fx-gantt-now::after { content: ''; position: absolute; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--coral); animation: fxGanttNow 7s linear infinite; }
@keyframes fxGanttNow { 0% { left: 0%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@media (max-width: 420px) {
  .fx-gantt-head, .fx-gantt-rows li { grid-template-columns: 7rem 1fr; }
  .fx-gantt-head { grid-template-columns: 7rem repeat(6, minmax(0, 1fr)); }
  .fx-gantt-now { left: 7rem; }
  .fx-gantt-name { font-size: 0.75rem; }
}

/* Support board: a request's stages lighting in turn, with a connecting line. */
.fx-ticket-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.fx-ticket-steps::before { content: ''; position: absolute; left: 11%; right: 11%; top: 10px; height: 2px; background: var(--tint); }
.fx-ticket-steps li { position: relative; display: grid; justify-items: center; gap: 0.35rem; text-align: center; }
.fx-ticket-dot { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 2px solid var(--line); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.fx-ticket-dot svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.3s; }
.fx-ticket-steps b { font-size: 0.75rem; font-weight: 600; color: var(--text-dim); line-height: 1.25; transition: color 0.3s; }
.fx-ticket-steps span { font: 500 0.625rem var(--f-mono); color: var(--text-dim); }
.fx-ticket-steps li.is-active .fx-ticket-dot { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(216, 27, 126, 0.15); }
.fx-ticket-steps li.is-active b { color: var(--coral); }
.fx-ticket-steps li.is-done .fx-ticket-dot { background: var(--mint); border-color: var(--mint); }
.fx-ticket-steps li.is-done .fx-ticket-dot svg { opacity: 1; }
.fx-ticket-steps li.is-done b { color: var(--ink); }
.fx-ticket-note { margin-top: 1.3rem; padding: 0.9rem 1rem; border-radius: 12px; background: linear-gradient(135deg, rgba(123, 47, 247, 0.08), rgba(216, 27, 126, 0.07)); }
.fx-ticket-note p { font-size: 0.875rem; line-height: 1.5; color: var(--text-mid); }
.fx-ticket-note b { color: var(--ink); }

/* Resources board: a deck of cards; the front one moves to the back in turn. */
.fx-deck-stack { position: relative; height: 230px; margin-top: 1.4rem; }
.fx-deck-card {
  position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 0.5rem; align-content: start;
  min-height: 170px; padding: 1.2rem 1.25rem; border-radius: 16px; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); box-shadow: 0 18px 34px -24px rgba(22, 21, 18, 0.45);
  transform: translateY(calc(var(--pos) * 16px)) scale(calc(1 - var(--pos) * 0.05));
  z-index: calc(10 - var(--pos)); opacity: calc(1 - var(--pos) * 0.22);
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.fx-deck-card.is-front { background: linear-gradient(150deg, #5b2bd6, #d81b7e 65%, #f2b201); border-color: transparent; color: #fff; }
.fx-deck-kind { font: 500 0.6875rem var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral); }
.fx-deck-card b { font: 400 1.35rem/1.2 var(--f-display); color: var(--ink); }
.fx-deck-read { margin-top: 0.15rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-dim); }
.fx-deck-text { font-size: 0.875rem; line-height: 1.5; color: var(--text-mid); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-deck-card.is-front .fx-deck-text { color: rgba(255, 255, 255, 0.9); }
/* Cards behind the front one show only their edges, not their words. */
.fx-deck-card > * { transition: opacity 0.3s var(--ease); }
.fx-deck-card:not(.is-front) > * { opacity: 0; }
.fx-deck-card.is-front .fx-deck-kind, .fx-deck-card.is-front b, .fx-deck-card.is-front .fx-deck-read { color: #fff; }

/* What is ERP board: eight areas around one database, lighting in turn. */
.fx-erp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 0.5rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.fx-erp-grid li {
  display: grid; justify-items: center; gap: 0.35rem; padding: 0.7rem 0.4rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--white); font-size: 0.75rem; font-weight: 600; color: var(--text-mid); text-align: center;
  transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.3s;
}
.fx-erp-grid li span { color: var(--text-dim); transition: color 0.3s; }
.fx-erp-grid li .glyph { width: 1.2rem; height: 1.2rem; }
.fx-erp-grid li.is-active { border-color: var(--coral); background: rgba(216, 27, 126, 0.06); color: var(--ink); transform: translateY(-2px); }
.fx-erp-grid li.is-active span, .fx-erp-grid li.is-done span { color: var(--coral); }
.fx-erp-grid li.is-done { color: var(--ink); }
.fx-erp-grid .fx-erp-core {
  align-content: center; background: linear-gradient(150deg, #5b2bd6, #d81b7e 65%, #f2b201); border-color: transparent; color: #fff;
  animation: fxPulse 2.6s var(--ease) infinite;
}
.fx-erp-core b { font: 400 1rem/1.1 var(--f-display); }
.fx-erp-core em { font-style: normal; font-size: 0.625rem; opacity: 0.9; font-weight: 500; }

/* Checklist board: questions ticking off on a scorecard. */
.fx-checks-list { display: grid; gap: 0.5rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.fx-checks-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid var(--line); font-size: 0.8125rem; line-height: 1.4; color: var(--text-mid); transition: border-color 0.3s, background 0.3s; }
.fx-checks-box { width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; border: 1.5px solid var(--line); display: grid; place-items: center; transition: background 0.3s, border-color 0.3s; }
.fx-checks-box svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.3s; }
.fx-checks-list li.is-active { border-color: var(--coral); background: rgba(216, 27, 126, 0.05); color: var(--ink); }
.fx-checks-list li.is-done .fx-checks-box { background: var(--mint); border-color: var(--mint); }
.fx-checks-list li.is-done .fx-checks-box svg { opacity: 1; }
.fx-checks-list li.is-done { color: var(--ink); }

/* Checklist page: the six question groups as spectrum cards. */
.checklist.is-rich { background: var(--white); }
.checklist.is-rich .check-group { position: relative; overflow: hidden; background: var(--white); border: var(--hair); border-radius: var(--r); box-shadow: var(--shadow-card); }
.checklist.is-rich .check-group::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; }
.checklist.is-rich .check-group:nth-child(1)::before { background: #5b2bd6; }
.checklist.is-rich .check-group:nth-child(2)::before { background: #7b2ff7; }
.checklist.is-rich .check-group:nth-child(3)::before { background: #a52ac6; }
.checklist.is-rich .check-group:nth-child(4)::before { background: #d81b7e; }
.checklist.is-rich .check-group:nth-child(5)::before { background: #f2622a; }
.checklist.is-rich .check-group:nth-child(6)::before { background: #f2b201; }

/* ---- Shopify Partner badge ------------------------------------------------
   The badge has dark lettering on transparency, so it always sits on white:
   a small tile in the gradient hero, and a card in its own section. */
.fx-badge { display: inline-flex; margin-top: 2.25rem; padding: 0.55rem 0.9rem; border-radius: 12px; background: #fff; box-shadow: 0 14px 30px -18px rgba(20, 4, 60, 0.6); }
.fx-badge img { display: block; width: auto; height: 42px; }

.sol-partner { padding-block: clamp(3rem, 6vw, 5rem); background: var(--cream); }
.sol-partner-card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem); background: var(--white); border: var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.sol-partner-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #95bf47, #5e8e3e); }
.sol-partner-badge { display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--r); background: linear-gradient(150deg, #f4f9ec, #fff); border: 1px solid #e3eed3; }
.sol-partner-badge img { width: 100%; max-width: 320px; height: auto; }
.sol-partner-kicker { font: 500 0.75rem var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #5e8e3e; }
.sol-partner-copy h2 { margin-top: 0.6rem; color: var(--ink); }
.sol-partner-copy > p:not(.sol-partner-kicker) { margin-top: 0.9rem; font-size: 1rem; line-height: 1.7; color: var(--text-mid); max-width: 60ch; }
.sol-partner-points { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.sol-partner-points li { padding: 0.45rem 0.8rem; border-radius: 999px; background: #f4f9ec; border: 1px solid #dbe8c6; font-size: 0.875rem; font-weight: 600; color: #3f6127; }
.sol-partner-copy .fx-actions { margin-top: 1.6rem; }
@media (max-width: 860px) { .sol-partner-card { grid-template-columns: 1fr; } .sol-partner-badge img { max-width: 260px; } }

/* ---- why page ------------------------------------------------------------------
   Time-to-live race: bars draw at speeds proportional to their length. */
.fx-race-chart { margin-top: 1.3rem; }
.fx-race-axis { display: grid; grid-template-columns: 7.5rem repeat(4, minmax(0, 1fr)) 5.5rem; font: 500 0.6875rem var(--f-mono); color: var(--text-dim); }
.fx-race-axis span:first-child { grid-column: 2; }
.fx-race-axis span:nth-child(5) { text-align: right; }
.fx-race-rows { display: grid; gap: 0.75rem; margin: 0.55rem 0 0; padding: 0; list-style: none; }
.fx-race-rows li { display: grid; grid-template-columns: 7.5rem 1fr 5.5rem; align-items: center; gap: 0 0.6rem; }
.fx-race-name { font-size: 0.8438rem; font-weight: 600; color: var(--text-mid); }
.fx-race-rows li.is-us .fx-race-name { color: var(--ink); }
.fx-race-rows em { font: 500 0.75rem var(--f-mono); font-style: normal; color: var(--text-dim); text-align: right; }
.fx-race-rows li.is-us em { color: var(--coral); font-weight: 600; }
.fx-race-track { position: relative; height: 26px; border-radius: 7px; background: repeating-linear-gradient(90deg, var(--tint) 0 calc(25% - 2px), transparent calc(25% - 2px) 25%); }
.fx-race-track i { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: 7px; background: #b9b2a6; transform-origin: left center; }
.fx-race-rows li.is-us .fx-race-track i { background: linear-gradient(90deg, #7b2ff7, #d81b7e 70%, #f2b201); }
.fx-race-track s { position: absolute; top: 0; bottom: 0; left: var(--w); width: var(--range); border-radius: 0 7px 7px 0; background: repeating-linear-gradient(135deg, rgba(185, 178, 166, 0.55) 0 6px, transparent 6px 11px); }
.fx-race-rows li.is-never .fx-race-track i { background: repeating-linear-gradient(90deg, #cfc8bc 0 10px, transparent 10px 16px); }
.fx-race-live {
  position: absolute; top: 50%; left: calc(var(--w) + 8px); transform: translateY(-50%) scale(0.6); opacity: 0;
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem 0.15rem 0.3rem; border-radius: 999px;
  background: var(--mint); color: #fff; font: 600 0.6875rem var(--f-body); white-space: nowrap;
}
.fx-race-live svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.js .fx-board .fx-race-track i, .js .fx-board .fx-race-track s { transform: scaleX(0); transition: none; }
.js .fx-board.is-in .fx-race-track i { transform: none; transition: transform var(--t) linear 300ms; }
.js .fx-board.is-in .fx-race-track s { transform: none; transition: transform 1.2s linear calc(var(--t) + 300ms); }
.js .fx-board.is-in .fx-race-live { opacity: 1; transform: translateY(-50%); transition: opacity 0.35s var(--ease) 1.25s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.25s; }
html:not(.js) .fx-race-live { opacity: 1; transform: translateY(-50%); }
@media (max-width: 420px) {
  .fx-race-axis { grid-template-columns: 5.6rem repeat(4, minmax(0, 1fr)) 4.6rem; }
  .fx-race-rows li { grid-template-columns: 5.6rem 1fr 4.6rem; }
  .fx-race-name { font-size: 0.75rem; }
  .fx-race-rows em { font-size: 0.6875rem; }
}

/* Comparison table inside the deep gradient panel. */
.fx-cmp { background: var(--cream); }
.fx-cmp-panel { position: relative; overflow: hidden; padding: clamp(1.75rem, 4vw, 3.25rem); border-radius: var(--r-lg); background: linear-gradient(135deg, #4a1fb8 0%, #7b2ff7 30%, #c8156f 75%, #e8365f 100%); box-shadow: 0 40px 80px -40px rgba(74, 31, 184, 0.6); }
.fx-cmp-head { position: relative; max-width: 60ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.fx-cmp-head .eyebrow { background: rgba(255, 255, 255, 0.14); color: #fff; }
.fx-cmp-head .display { color: #fff; margin-top: 0.6rem; }
.fx-cmp-head .display em { font-style: italic; font-weight: 700; color: var(--sun); }
.fx-cmp-head .standfirst { margin-top: 1rem; color: rgba(255, 255, 255, 0.88); }
.fx-cmp .compare-wrap { box-shadow: 0 30px 60px -30px rgba(20, 4, 60, 0.6); }
.fx-cmp .compare-note { color: rgba(255, 255, 255, 0.85); }

/* ---- book a demo: booking animation -------------------------------------------
   One 9-second loop drives every piece, so the browse, the pick and the
   confirmation always line up. */
.fx-cal-stage { position: relative; margin-top: 1.25rem; }
.fx-cal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; }
.fx-cal-col { display: grid; gap: 0.4rem; }
.fx-cal-day { display: grid; justify-items: center; gap: 0.1rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--line); }
.fx-cal-day span { font: 500 0.6875rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.fx-cal-day b { font: 400 1.25rem/1 var(--f-display); color: var(--ink); }
.fx-cal-slot {
  display: grid; place-items: center; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--white); font: 500 0.75rem var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums;
  animation: 9s var(--ease) infinite;
}
.fx-cal-slot.is-busy { background: var(--tint); border-color: transparent; color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(22, 21, 18, 0.25); }
.fx-cal-slot.is-browse1 { animation-name: fxCalBrowse1; }
.fx-cal-slot.is-browse2 { animation-name: fxCalBrowse2; }
.fx-cal-slot.is-pick { animation-name: fxCalPick; }
@keyframes fxCalBrowse1 {
  0%, 8%, 20%, 100% { border-color: var(--line); background: var(--white); }
  11%, 17% { border-color: var(--coral); background: rgba(216, 27, 126, 0.07); }
}
@keyframes fxCalBrowse2 {
  0%, 20%, 32%, 100% { border-color: var(--line); background: var(--white); }
  23%, 29% { border-color: var(--coral); background: rgba(216, 27, 126, 0.07); }
}
@keyframes fxCalPick {
  0%, 32% { border-color: var(--line); background: var(--white); color: var(--ink); transform: none; box-shadow: none; }
  35%, 40% { border-color: var(--coral); background: rgba(216, 27, 126, 0.07); color: var(--ink); transform: none; }
  43% { transform: scale(0.94); }
  46%, 92% { border-color: transparent; background: linear-gradient(135deg, #7b2ff7, #d81b7e 70%, #f2b201); color: #fff; transform: none; box-shadow: 0 10px 20px -10px rgba(216, 27, 126, 0.7); }
  97%, 100% { border-color: var(--line); background: var(--white); color: var(--ink); box-shadow: none; }
}
.fx-cal-confirm {
  position: absolute; left: 0; right: 0; bottom: -6px; display: flex; align-items: center; gap: 0.8rem;
  padding: 0.85rem 1rem; border-radius: 14px; background: var(--white); border: 1px solid rgba(26, 158, 117, 0.35);
  box-shadow: 0 22px 40px -18px rgba(22, 21, 18, 0.45); animation: fxCalConfirm 9s var(--ease) infinite;
}
.fx-cal-confirm i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); }
.fx-cal-confirm i svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fx-cal-confirm div { display: grid; gap: 0.1rem; }
.fx-cal-confirm b { font-size: 0.9375rem; color: var(--ink); }
.fx-cal-confirm span { font: 500 0.8125rem var(--f-mono); color: var(--coral); }
.fx-cal-confirm em { font-style: normal; font-size: 0.75rem; color: var(--text-dim); }
@keyframes fxCalConfirm {
  0%, 50% { opacity: 0; transform: translateY(18px) scale(0.97); }
  56%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(18px) scale(0.97); }
}
@media (max-width: 420px) { .fx-cal-slot { height: 32px; font-size: 0.6875rem; } .fx-cal-day b { font-size: 1.05rem; } }

/* The session steps and the form, in the spectrum card style. */
.fx-demo-sec { background: var(--cream); scroll-margin-top: 90px; }
.fx-demo-sec .contact-side .display-sm em { font-style: italic; font-weight: 700; }
.fx-steps { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.fx-steps li { position: relative; overflow: hidden; padding: 1rem 1.2rem 1.05rem 1.35rem; background: var(--white); border: var(--hair); border-radius: var(--r); box-shadow: var(--shadow-card); }
.fx-steps li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.fx-steps span { font: 500 0.75rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); }
.fx-steps p { margin-top: 0.35rem; font-size: 0.9375rem; line-height: 1.55; color: var(--text-mid); }
.fx-demo-sec .form { position: relative; overflow: hidden; background: var(--white); border: var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.fx-demo-sec .form::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #7b2ff7, #d81b7e 60%, #f2b201); }
/* The card is white, so fields need their own fill and edge to read as boxes. */
.fx-demo-sec .ff input, .fx-demo-sec .ff select, .fx-demo-sec .ff textarea { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; }
.fx-demo-sec .ff input:focus, .fx-demo-sec .ff select:focus, .fx-demo-sec .ff textarea:focus { background: #fff; border-color: var(--coral); }

/* ---- hubs, contact and legal pages ------------------------------------------- */
/* Platform board reuses the ERP grid; nine tiles fill it without a centre cell. */
.fx-erp-grid li:not(.fx-erp-core) { min-height: 0; }
.fx-ticket-steps.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-ticket-steps.is-three::before { left: 16%; right: 16%; }
.fx-demo-sec .contact-side .display-sm { margin-bottom: 1.4rem; }
.fx-demo-sec .contact-list { padding: 1.4rem 1.5rem; background: var(--white); border: var(--hair); border-radius: var(--r); box-shadow: var(--shadow-card); }
.fx-demo-sec .contact-note { position: relative; overflow: hidden; background: var(--white); border: var(--hair); box-shadow: var(--shadow-card); }
.fx-demo-sec .contact-note::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(#7b2ff7, #d81b7e 60%, #f2b201); }

/* Solutions hub rows as spectrum cards. */
.sol-row.is-rich { position: relative; overflow: hidden; background: var(--white); border: var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: clamp(1.6rem, 3vw, 2.5rem); }
.sol-row.is-rich::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.sol-row.is-rich + .sol-row.is-rich { margin-top: clamp(1rem, 2vw, 1.5rem); }
.sol-row.is-rich .sol-glyph { background: color-mix(in oklab, var(--c) 12%, #fff); color: var(--c); }
.sol-row.is-rich .mono-label.accent { color: var(--c); }

/* Legal text in a white card on cream. */
.legal.is-rich { background: var(--cream); scroll-margin-top: 90px; }
.legal.is-rich .legal-card { padding: clamp(1.6rem, 4vw, 3rem); background: var(--white); border: var(--hair); border-radius: var(--r-lg); box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.legal.is-rich .legal-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #7b2ff7, #d81b7e 60%, #f2b201); }
/* A form on its own: one centred column. */
.contact-inner.is-solo { grid-template-columns: 1fr; max-width: 880px; margin-inline: auto; }
/* Intro above the demo form. */
.fx-demo-intro { text-align: center; max-width: 64ch; margin: 0 auto clamp(0.5rem, 2vw, 1.25rem); }
.fx-demo-intro .display-sm { color: var(--ink); }
.fx-demo-intro .display-sm em { font-style: italic; font-weight: 700; }
.fx-demo-intro p { margin-top: 0.9rem; font-size: 1.0625rem; line-height: 1.7; color: var(--text-mid); }

/* ---- book a demo: the featured form -------------------------------------------
   White section; the form card splits into a gradient panel saying what the
   session includes, and the fields beside it. */
.fx-demo-sec.is-white { background: var(--white); }
.contact-inner.is-solo.is-wide { max-width: 1120px; }
.fx-demo-sec .form.has-aside {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); padding: 0; overflow: hidden;
  border: 1px solid rgba(123, 47, 247, 0.18);
  box-shadow: 0 1px 0 rgba(22, 21, 18, 0.04), 0 40px 80px -40px rgba(91, 43, 214, 0.45), 0 0 0 6px rgba(123, 47, 247, 0.05);
}
.fx-demo-sec .form.has-aside::before { display: none; }
.form-aside {
  position: relative; display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem); color: #fff;
  background: linear-gradient(160deg, #5b2bd6 0%, #a52ac6 45%, #d81b7e 80%, #f2622a 100%);
}
.form-aside::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.form-aside-kicker { font: 500 0.75rem var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sun); }
.form-aside h3 { font: 400 clamp(1.6rem, 2.4vw, 2rem)/1.15 var(--f-display); letter-spacing: -0.015em; color: #fff; }
.form-aside ul { display: grid; gap: 0.9rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.form-aside li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.7rem; align-items: center; font-size: 0.9688rem; line-height: 1.45; color: rgba(255, 255, 255, 0.92); }
.form-aside li .glyph { width: 2.2rem; height: 2.2rem; padding: 0.5rem; border-radius: 10px; background: rgba(255, 255, 255, 0.16); color: #fff; }
.form-aside li b { color: #fff; font-weight: 600; }
.form-aside-foot { position: relative; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.25); font-size: 0.875rem; color: rgba(255, 255, 255, 0.88); }
.form-main { padding: clamp(1.75rem, 3.5vw, 2.75rem); }
.btn-gradient {
  --btn-fg: #fff; border: 0; padding-inline: 1.6rem;
  background: linear-gradient(110deg, #7b2ff7, #d81b7e 60%, #f2622a); color: #fff;
  box-shadow: 0 14px 28px -14px rgba(216, 27, 126, 0.7); transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(216, 27, 126, 0.8); }
@media (max-width: 860px) { .fx-demo-sec .form.has-aside { grid-template-columns: 1fr; } }

/* ---- platform page: module bands, industry panel, integration logos ---------- */
.mod-hub.is-rich { padding-block: 0; background: none; }
.mod-band { padding-block: clamp(3rem, 6vw, 5rem); background: var(--white); }
.mod-band:nth-child(even) { background: var(--cream); }
.mod-band-inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.mod-chapter {
  position: sticky; top: 110px; overflow: hidden; display: grid; gap: 0.8rem;
  padding: clamp(1.6rem, 3vw, 2.25rem); border-radius: var(--r-lg); color: #fff;
  background: linear-gradient(155deg, var(--from), var(--to));
  box-shadow: 0 30px 60px -32px color-mix(in oklab, var(--from) 70%, transparent);
}
.mod-chapter::after { content: ''; position: absolute; right: -50px; bottom: -50px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.mod-chapter-kicker { font: 500 0.75rem var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.mod-chapter h2 { color: #fff; }
.mod-chapter p:not(.mod-chapter-kicker):not(.mod-chapter-count) { color: rgba(255, 255, 255, 0.9); line-height: 1.6; }
.mod-chapter-count { position: relative; margin-top: 0.6rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.9); }
.mod-chapter-count b { font: 400 2.4rem/1 var(--f-display); color: #fff; margin-right: 0.35rem; }

.mod-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.85rem, 1.5vw, 1.15rem); margin: 0; padding: 0; list-style: none; }
.mod-cards > li > a {
  position: relative; overflow: hidden; display: grid; gap: 0.7rem; height: 100%; align-content: start;
  padding: clamp(1.35rem, 2vw, 1.7rem); background: var(--white); border: var(--hair); border-radius: var(--r);
  box-shadow: var(--shadow-card); text-decoration: none; transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.mod-cards > li > a::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); }
.mod-cards > li > a:hover { transform: translateY(-5px); box-shadow: 0 1px 0 rgba(22, 21, 18, 0.04), 0 28px 48px -26px color-mix(in oklab, var(--c) 65%, transparent); }
.mod-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mod-card-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: color-mix(in oklab, var(--c) 12%, #fff); color: var(--c); transition: background 0.25s, color 0.25s; }
.mod-card-ic .glyph { width: 1.4rem; height: 1.4rem; }
.mod-cards > li > a:hover .mod-card-ic { background: var(--c); color: #fff; }
.mod-card-metric { padding: 0.3rem 0.65rem; border-radius: 999px; background: color-mix(in oklab, var(--c) 9%, #fff); font-size: 0.75rem; color: var(--text-mid); text-align: right; }
.mod-card-metric b { color: var(--c); font-weight: 700; }
.mod-cards h3 { font: 700 1.25rem/1.25 var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
.mod-cards p { font-size: 0.9375rem; line-height: 1.6; color: var(--text-mid); }
.mod-card-caps { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mod-card-caps span { padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--tint); font-size: 0.75rem; color: var(--text-dim); }
.mod-card-go { margin-top: 0.3rem; font-size: 0.875rem; font-weight: 600; color: var(--c); }
.mod-cards > li > a:hover .mod-card-go span { display: inline-block; transform: translateX(3px); transition: transform 0.2s; }
.js .mod-cards > li { opacity: 0; transform: translateY(16px); transition: none; }
.js .mod-cards.is-in > li, .js .is-in .mod-cards > li { opacity: 1; transform: none; transition: opacity 0.55s var(--ease) calc(var(--i) * 90ms), transform 0.55s var(--ease) calc(var(--i) * 90ms); }
@media (max-width: 960px) { .mod-band-inner { grid-template-columns: 1fr; } .mod-chapter { position: relative; top: auto; } }
@media (max-width: 640px) { .mod-cards { grid-template-columns: 1fr; } }

/* Industry cross-sell inside a deep gradient panel, with frosted cards. */
.xsell.is-rich { background: var(--white); }
.xsell-panel { position: relative; overflow: hidden; padding: clamp(1.75rem, 4.5vw, 3.5rem); border-radius: var(--r-lg); background: linear-gradient(135deg, #4a1fb8 0%, #7b2ff7 30%, #c8156f 75%, #e8365f 100%); box-shadow: 0 40px 80px -40px rgba(74, 31, 184, 0.6); }
.xsell-panel::after { content: ''; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%); }
.xsell-head { position: relative; max-width: 60ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.xsell-kicker { font: 500 0.75rem var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun); }
.xsell-head .display { color: #fff; margin-top: 0.6rem; }
.xsell-head .display em { font-style: italic; font-weight: 700; color: var(--sun); }
.xsell-head p:last-child { margin-top: 0.9rem; color: rgba(255, 255, 255, 0.88); line-height: 1.6; }
.xsell.is-rich .xsell-grid { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xsell.is-rich .xsell-grid a {
  justify-items: start; text-align: left; padding: 1.6rem; border-radius: var(--r);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.xsell.is-rich .xsell-grid a:hover { background: #fff; transform: translateY(-5px); }
.xsell.is-rich .xsell-grid a > span { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: rgba(255, 255, 255, 0.18); color: #fff; transition: background 0.25s, color 0.25s; }
.xsell.is-rich .xsell-grid a:hover > span { background: var(--coral); }
.xsell.is-rich .xsell-grid b { color: #fff; transition: color 0.25s; }
.xsell.is-rich .xsell-grid em { font-style: normal; font-size: 0.9062rem; line-height: 1.55; color: rgba(255, 255, 255, 0.85); transition: color 0.25s; }
.xsell.is-rich .xsell-grid i { font-style: normal; font-weight: 600; font-size: 0.875rem; color: var(--sun); transition: color 0.25s; }
.xsell.is-rich .xsell-grid a:hover b { color: var(--ink); }
.xsell.is-rich .xsell-grid a:hover em { color: var(--text-mid); }
.xsell.is-rich .xsell-grid a:hover i { color: var(--coral); }
@media (max-width: 860px) { .xsell.is-rich .xsell-grid { grid-template-columns: 1fr; } }

/* Integration cards: partner logos and a spectrum top edge. */
.int-grid li { position: relative; overflow: hidden; border: var(--hair); box-shadow: var(--shadow-card); }
.int-grid li::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c, #7b2ff7); }
.int-grid li:nth-child(6n + 1) { --c: #5b2bd6; } .int-grid li:nth-child(6n + 2) { --c: #7b2ff7; } .int-grid li:nth-child(6n + 3) { --c: #a52ac6; }
.int-grid li:nth-child(6n + 4) { --c: #d81b7e; } .int-grid li:nth-child(6n + 5) { --c: #f2622a; } .int-grid li:nth-child(6n + 6) { --c: #f2b201; }
.int-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; min-height: 40px; margin-bottom: 0.7rem; }
.int-logos img { max-height: 26px; max-width: 84px; width: auto; height: auto; object-fit: contain; }
.int-logos .glyph { width: 2.4rem; height: 2.4rem; padding: 0.55rem; border-radius: 10px; background: color-mix(in oklab, var(--c, #7b2ff7) 12%, #fff); color: var(--c, #7b2ff7); }
.xsell.is-rich .xsell-grid i span { color: inherit; }
/* A group with an odd number of modules: the last card takes the full row. */
.mod-cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Contact: the direct lines and tip live in the form's gradient panel. */
.form-aside a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 3px; }
.form-aside a:hover { text-decoration-color: #fff; }
.form-aside-tip { position: relative; z-index: 1; margin-top: auto; padding: 1rem 1.1rem; border-radius: 12px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); }
.form-aside-tip p:last-child { margin-top: 0.45rem; font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.form-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-captcha { margin-top: 1.25rem; }
/* Legal pages: the card spans the full content width, and the text inside it
   runs wider than the article default, about 95 characters a line. */
.legal.is-rich .legal-inner { display: block; max-width: none; }
.legal.is-rich .legal-card { max-width: 1120px; margin-inline: auto; }
.legal.is-rich .legal-card.prose { max-width: 1120px; }
.legal.is-rich .legal-card > * { max-width: 95ch; }

/* Solutions hub rows: the problems as a clean white card with a tinted cross on
   each line, and the answers on the deep hero gradient, each capability title
   on its own line so the pair reads as problem, then fix. Lines rise in turn
   when the row scrolls into view. */
.sol-row.is-rich .sol-row-cols { align-items: stretch; }
.sol-row.is-rich .sol-row-cols > div { padding: clamp(1.4rem, 2.2vw, 1.9rem); border-radius: 20px; }
.sol-col-head {
  display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1.15rem;
  font: 600 0.75rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.sol-col-head span {
  display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 10px;
  font: 700 0.95rem var(--f-display); letter-spacing: 0;
}
.sol-col-head svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sol-pain, .sol-fix { position: relative; overflow: hidden; }
.sol-pain ul, .sol-fix ul { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }

.sol-row-cols > .sol-pain { background: #fff; border: 1px solid color-mix(in oklab, var(--c) 18%, var(--line)); box-shadow: 0 18px 40px -30px color-mix(in oklab, var(--c) 60%, transparent); }
.sol-pain .sol-col-head { color: var(--ink); }
.sol-pain .sol-col-head span { background: color-mix(in oklab, var(--c) 14%, #fff); color: var(--c); }
.sol-pain li {
  position: relative; padding: 0.7rem 0.85rem 0.7rem 2.6rem; border-radius: 12px;
  background: color-mix(in oklab, var(--c) 5%, #fff);
  font-size: 0.9688rem; line-height: 1.55; color: var(--ink);
}
.sol-pain li::before {
  content: '\00d7'; position: absolute; left: 0.8rem; top: 0.82rem;
  display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--c); color: #fff; font: 700 0.8rem/1 var(--f-body);
}

.sol-row-cols > .sol-fix {
  color: var(--ink);
  background: #e3f6ed;
  border: 1px solid #b9e4cf;
  box-shadow: 0 22px 44px -32px rgba(14, 156, 115, 0.55);
}
.sol-fix::after {
  content: ''; position: absolute; right: -30%; top: -40%; width: 80%; aspect-ratio: 1; border-radius: 50%;
  display: none;
}
.sol-fix .sol-col-head { position: relative; color: #0a6b4f; }
.sol-fix .sol-col-head span { background: var(--mint); color: #fff; }
.sol-fix ul { position: relative; }
.sol-fix li {
  position: relative; padding: 0.75rem 0.9rem 0.75rem 2.65rem; border-radius: 12px;
  background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(14, 156, 115, 0.16);
  font-size: 0.9375rem; line-height: 1.55; color: var(--text-mid);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.sol-fix li:hover { background: #fff; box-shadow: 0 10px 22px -16px rgba(14, 156, 115, 0.6); transform: translateX(3px); }
.sol-fix li::before {
  content: '\2713'; position: absolute; left: 0.85rem; top: 0.85rem;
  display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--mint); color: #fff; font: 700 0.7rem/1 var(--f-body);
}
.sol-fix li b { display: block; margin-bottom: 0.15rem; font-weight: 700; color: var(--ink); }

.js .sol-row.is-rich .sol-pain li, .js .sol-row.is-rich .sol-fix li { opacity: 0; transform: translateY(10px); transition: none; }
.js .sol-row.is-rich.is-in .sol-pain li, .js .sol-row.is-rich.is-in .sol-fix li {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease) calc(0.15s + var(--k) * 0.08s), transform 0.5s var(--ease) calc(0.15s + var(--k) * 0.08s), background 0.3s var(--ease);
}
.js .sol-row.is-rich.is-in .sol-fix li { transition-delay: calc(0.45s + var(--k) * 0.08s), calc(0.45s + var(--k) * 0.08s), 0s; }
.js .sol-row.is-rich.is-in .sol-fix li:hover { transform: translateX(3px); transition-delay: 0s; }

@media (min-width: 1025px) {
  .sol-row.is-rich { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); }
  .sol-row.is-rich .sol-row-sum { max-width: 30ch; }
}

/* Solutions hub outcomes: the four figures as glass tiles on the deep gradient
   panel, rising in turn as the panel reveals. */
.fx-stats { background: var(--white); }
.fx-stat-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1rem); margin: 0; }
.fx-stat {
  padding: clamp(1.2rem, 2vw, 1.6rem); border-radius: 18px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.fx-stat:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-3px); }
.fx-stat dt { display: flex; align-items: baseline; gap: 0.15rem; font: 400 clamp(2.4rem, 4vw, 3.4rem)/1 var(--f-display); letter-spacing: -0.03em; color: #fff; }
.fx-stat dt em { font: italic 700 clamp(1.1rem, 1.6vw, 1.4rem)/1 var(--f-display); letter-spacing: -0.01em; color: var(--sun); }
.fx-stat dd { margin: 0.7rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.js .fx-stats .fx-stat { opacity: 0; transform: translateY(14px); transition: none; }
.js .fx-stats .fx-out-panel.is-in .fx-stat {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease) calc(0.2s + var(--i) * 0.1s), transform 0.6s var(--ease) calc(0.2s + var(--i) * 0.1s), background 0.3s var(--ease);
}
.js .fx-stats .fx-out-panel.is-in .fx-stat:hover { transform: translateY(-3px); transition-delay: 0s; }
@media (max-width: 520px) { .fx-stat-grid { grid-template-columns: 1fr; } }


/* What is ERP? article: let the text fill the column beside the contents
   list instead of stopping at a narrow measure. */
.article .prose { max-width: none; }

/* Homepage photo cards (from the previous homepage): photo on top with a slow
   zoom on hover, a colour-coded icon badge overlapping its foot, then title,
   text and a Read more link that slides on hover. Cards rise in turn. */
.home-tiles { padding-block: clamp(3rem, 6vw, 5rem) var(--pad-sec); background: var(--white); }
.home-tiles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); margin: 0; padding: 0; list-style: none; }
.home-tiles-grid > li { min-width: 0; }
.home-tiles-grid a {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 0.6rem 0.6rem 1.5rem; border-radius: 22px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card);
  color: inherit; text-decoration: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.home-tiles-grid a::before {
  content: ''; position: absolute; inset: auto 1.5rem -1px 1.5rem; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--c); transform: scaleX(0.25); transform-origin: left; opacity: 0.7;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.home-tiles-grid a:hover { transform: translateY(-6px); border-color: color-mix(in oklab, var(--c) 35%, var(--line)); box-shadow: 0 26px 48px -30px color-mix(in oklab, var(--c) 70%, transparent); }
.home-tiles-grid a:hover::before { transform: scaleX(1); opacity: 1; }
.home-tile-photo { display: block; overflow: hidden; aspect-ratio: 1 / 0.86; border-radius: 16px; background: var(--tint); }
.home-tile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.home-tiles-grid a:hover .home-tile-photo img { transform: scale(1.06); }
.home-tile-ic {
  position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem;
  margin: -1.5rem 0 0 1rem; border-radius: 14px; background: var(--c); color: #fff;
  box-shadow: 0 10px 22px -10px var(--c), 0 0 0 4px #fff;
}
.home-tile-ic svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-tiles-grid b { margin: 1rem 1rem 0.55rem; font: 600 1.25rem/1.25 var(--f-display); letter-spacing: -0.015em; color: var(--ink); }
.home-tile-text { margin: 0 1rem; font-size: 0.9375rem; line-height: 1.6; color: var(--text-mid); }
.home-tiles-grid em {
  display: inline-flex; align-items: center; gap: 0.45rem; margin: auto 1rem 0; padding-top: 1.1rem;
  font: 600 0.9062rem var(--f-body); font-style: normal; color: var(--c);
}
.home-tiles-grid em span { transition: transform 0.3s var(--ease); }
.home-tiles-grid a:hover em span { transform: translateX(4px); }
.js .home-tiles-grid > li[data-reveal] { opacity: 0; transform: translateY(22px); transition: none; }
.js .home-tiles-grid > li[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease) calc(var(--i) * 0.1s), transform 0.7s var(--ease) calc(var(--i) * 0.1s); }
@media (max-width: 1100px) { .home-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .home-tiles-grid { grid-template-columns: 1fr; } }


/* Phone links: keep the number on one line, and stop the font turning the
   "x" before the extension into a multiplication sign. */
a[href^="tel:"] { white-space: nowrap; font-feature-settings: "calt" 0; font-variant-ligatures: no-contextual; }