/* =========================================================
   Implenova — "The Thread"
   Precision-instrument character: deep cool base, a single
   electric-lime signal, a distinct conflict red, engineered
   grotesque + machine-record mono. One live trace down the rail.
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  /* base — deep cool instrument */
  /* base — LIGHT theme (converted from the original dark instrument; palette echoes the
     product showcase: soft-white surfaces, navy accent, dark ink) */
  --bg:         #eef1f6;
  --bg-2:       #e6eaf1;
  --surface:    #ffffff;
  --surface-2:  #f4f6f9;
  --line:       rgba(24, 34, 58, 0.12);
  --line-2:     rgba(24, 34, 58, 0.22);
  --line-soft:  rgba(24, 34, 58, 0.07);

  --text:   #16202f;
  --text-2: #566072;
  --text-3: #6f7a8e;   /* mono labels / muted */

  /* signal — primary NAVY (buttons, thread/zipper, two-tone headline).
     Navy reads on light where the old lime could not. */
  --signal:      #33456b;
  --signal-2:    #435a86;
  --signal-dim:  #667594;
  --signal-tint: rgba(51, 69, 107, 0.12);
  --signal-ink:  #ffffff;   /* text on a navy fill */

  /* accent — the ONE live color (indigo). Navy is ink; this is electricity. Used sparingly:
     kicker dots, lit phase numerals, link/hover states, the featured tier ring, gen-buttons.
     Never body text, never large fills. */
  --accent:      #5560cf;
  --accent-2:    #707ada;   /* hover shift */
  --accent-tint: rgba(85, 96, 207, 0.10);
  --accent-ink:  #ffffff;

  /* lime — kept as a brand POP for the primary CTA fill (dark text on lime); never as text-on-white */
  --lime:        #c6f94e;
  --lime-2:      #d8ff74;
  --lime-ink:    #0c1408;

  /* violet — secondary Odoo nod, deepened so it reads on light */
  --violet:      #6b57c2;
  --violet-2:    #8672d6;
  --violet-deep: #5b4b8c;
  --violet-tint: rgba(107, 87, 194, 0.14);

  /* conflict — the one fault color, deepened for light backgrounds */
  --conflict:      #dc4632;
  --conflict-2:    #ef6a58;
  --conflict-tint: rgba(220, 70, 50, 0.10);

  /* type */
  --display: "Space Grotesk", system-ui, "Segoe UI", sans-serif;
  --sans:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* layout */
  --maxw: 1240px;
  --thread-x: 14px;     /* line sits near the left edge now (hero shifted left) */
  --content-x: 110px;   /* content inset for single-column sections */
  --pad-x: 40px;

  --ease:      cubic-bezier(0.65, 0.05, 0.36, 1);  /* snappy, mechanical */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);     /* settle */

  /* consolidated scales (global craft pass) */
  --display-title: clamp(1.9rem, 1.6rem + 1.6vw, 2.9rem);  /* shared "display section" tier — BELOW the hero (hero owns the page) */
  --ms-1: 0.68rem;  /* mono micro scale: small (floor) */
  --ms-2: 0.76rem;  /* mono micro scale: base */
  --ms-3: 0.84rem;  /* mono micro scale: eyebrow / large */
  --ring-focus: 0 0 0 3px var(--signal-tint);  /* one keyboard focus ring */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #eef1f6; }
body {
  margin: 0;
  background: linear-gradient(180deg, #f3f6fa 0%, #e9edf3 100%) fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* BACKGROUND — a SUBTLE mesh-gradient atmosphere layered over a solid dark base.
   Layers, back to front:  body background-color (#0a0d12 solid = the fallback) -> .bg-mesh (the
   runtime canvas, low opacity) -> body::before (a semi-transparent dark wash + vignette that dims
   the mesh so the charcoal dominates) -> body::after (grain) -> content (z2) and the thread canvas.
   If the mesh runtime never loads, .bg-mesh stays empty and the page is just the clean dark base. */
.bg-mesh {
  position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important;
  z-index: 0 !important; pointer-events: none !important; opacity: 0.62;
  display: none !important;   /* dark aidesigner mesh hidden in the light theme (kept for later ideas) */
}
.bg-mesh canvas { width: 100% !important; height: 100% !important; display: block; }
[data-aifx-wm] { display: none !important; }   /* hide the runtime's attribution watermark */

/* Only a LIGHT vignette now: transparent through the middle so the moving colour reads, a soft
   edge/bottom darkening to keep text legible. The heavy dark wash that was smothering the mesh is
   gone. (If the runtime never loads, .bg-mesh is empty and the solid #0a0d12 base shows.) */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  /* light "cloud" atmosphere — the old dark mesh, reborn as soft colour drifts.
     Richer than a flat white: coloured blooms anchored to the four corners so the
     page reads as tinted daylight, never grey — still an all-light theme. */
  background:
    radial-gradient(48% 42% at 12% 6%,  rgba(122,96,228,0.22), transparent 70%),   /* lavender — top-left */
    radial-gradient(50% 44% at 90% 10%, rgba(64,138,236,0.20), transparent 70%),   /* blue — top-right */
    radial-gradient(52% 46% at 82% 92%, rgba(84,206,178,0.16), transparent 72%),   /* mint — bottom-right */
    radial-gradient(46% 40% at 22% 94%, rgba(244,146,190,0.15), transparent 72%),  /* rose — bottom-left */
    radial-gradient(60% 50% at 50% 0%,  rgba(255,214,138,0.10), transparent 66%),  /* warm sun — top */
    radial-gradient(125% 105% at 50% 18%, transparent 74%, rgba(24,34,58,0.05) 100%);
}
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.04; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .bg-mesh { display: none !important; } }   /* freeze to the dark base (accessibility gate — applies at every width) */
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--signal); color: var(--signal-ink); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--signal); color: var(--signal-ink); padding: 10px 16px; border-radius: 9px; font-weight: 600;
}
.skip:focus { left: 16px; top: 16px; }

/* ---------- type primitives ---------- */
/* section eyebrows/kickers: quiet SANS — mono is reserved for diegetic product artifacts
   (FACT ids, file names, TS refs). One voice for UI labels, one voice for data. */
.kicker, .eyebrow {
  font-family: var(--sans); font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
}
.cite, .redline-ref, .migrate-col__label, .recall-chip {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--ms-3);
}

.muted { color: var(--text-3); }
em { font-style: normal; color: var(--signal); }

/* A6 — one keyboard-focus treatment across every interactive (mouse clicks don't trigger :focus-visible).
   The ring follows each element's own border-radius; otherwise-unrounded targets get a 4px minimum.
   Form fields keep their own :focus ring (below) as well, so they still show focus on click. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
a:not(.btn):focus-visible, summary:focus-visible, .footer__cookiebtn:focus-visible { border-radius: 4px; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  padding: 0.72em 1.3em; border-radius: 9px;
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
              color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  white-space: nowrap;
}
.btn--lg { padding: 0.9em 1.5em; font-size: 1rem; }
.btn--block { width: 100%; justify-content: center; }
.btn--primary {
  background: var(--signal); color: var(--signal-ink);
  box-shadow: 0 0 0 1px var(--signal), 0 8px 30px -12px var(--signal-tint);
}
.btn--primary:hover { background: var(--signal-2); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--signal-2), 0 12px 24px -10px rgba(51,69,107,0.45); }
.btn--ghost { border-color: var(--line-2); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* =========================================================
   NAV
   ========================================================= */
/* Floating, detached, rounded glass bar: the header is a transparent shell whose top + side
   padding insets the actual pill (.nav__inner) from every edge; the pill is the glass. It stays
   detached and rounded at every scroll position (never a full-width edge strip). pointer-events
   are dropped on the shell so the inset gap around the pill doesn't eat clicks. */
.nav {
  position: sticky; top: 0; z-index: 100;
  padding: 14px clamp(14px, 3vw, 28px) 0;
  pointer-events: none;
}
.nav__inner {
  pointer-events: auto;
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 28px;
  padding: 9px 12px 9px 22px;
  border-radius: 999px;   /* full capsule — reads as one sleek floating pill */
  /* AT REST THE BAR IS BARE — no pill, no glass, no border: just the wordmark and the links sitting
     directly on the background, so the top of the page reads as open space. The pill materialises
     only once you have scrolled (see .nav.is-stuck below). blur(0px) rather than `none` so the blur
     has something to interpolate from and fades in instead of snapping. */
  background: transparent;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  backdrop-filter: blur(0px) saturate(100%);
  box-shadow: none;
  transform: translateY(-3px);
  /* slow and unhurried on purpose: the pill should settle in, not pop */
  transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              -webkit-backdrop-filter 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ON SCROLL (and whenever the mobile drawer is open, so the header still reads as one object): the
   pill materialises — backing, hairline border, blur and shadow all easing in over 0.6s. */
.nav.is-stuck .nav__inner,
.nav:has(.nav__burger[aria-expanded="true"]) .nav__inner {
  transform: translateY(0);
  /* shower-glass: barely-there white fog + heavy blur — you see the page THROUGH it */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.16) 70%),
    rgba(250, 251, 253, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  box-shadow: 0 12px 36px -20px rgba(20,30,50,0.22), inset 0 1px 0 rgba(255,255,255,0.55), 0 0 0 1px rgba(24,34,58,0.05);
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); }
.brand__mark { flex: none; }
.brand__word { font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; }
.brand__iq { color: var(--signal); }
.nav__links { display: flex; gap: 26px; margin-left: 8px; }
/* With no pill behind them the links must carry themselves over the live mesh, so they sit brighter
   at rest and relax to the muted tone once the pill is there. The is-stuck mute is declared BEFORE
   :hover so hover still wins at equal specificity. */
.nav__links a { font-size: 0.9rem; color: var(--text-2); position: relative; padding: 4px 0; transition: color 0.2s var(--ease); }
.nav.is-stuck .nav__links a { color: var(--text-2); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--accent); transition: width 0.3s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { width: 100%; }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.link-login { font-size: 0.9rem; color: var(--text-2); transition: color 0.2s var(--ease); }
.nav.is-stuck .link-login { color: var(--text-2); }
.link-login:hover { color: var(--text); }

.nav__burger { display: none; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line-2); flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav__burger span { width: 16px; height: 1.6px; background: var(--text); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.3px) rotate(-45deg); }

.mobile-menu { display: none; }

/* =========================================================
   TRUNK + THREAD
   ========================================================= */
.trunk { position: relative; max-width: var(--maxw); margin: 0 auto; z-index: 2; }

/* The tangle thread renders entirely on a fixed, full-viewport canvas. It starts as a
   wandering, tangled trace hugging the left edge, then "combs" itself straight as a
   scroll-driven resolve-front passes each phase, weaves out to the phase blocks, and
   ties off at Support. No DOM markers. (see script.js) */
.iq-thread-canvas { position: fixed; top: 0; left: 0; z-index: 2; pointer-events: none; }

/* sections sit to the right of the thread */
.section {
  position: relative;
  padding: 104px var(--pad-x) 104px calc(var(--pad-x) + var(--content-x));
}

/* knots are drawn by the canvas thread (script.js) as nodes that ignite
   when the resolve-front reaches them. data-knot just marks where they sit. */

/* =========================================================
   REVEAL ANIMATION (non-phase sections)
   ========================================================= */
[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Purposeful, varied entrance instead of one blanket fade: the hero copy arrives as a short
   sequence (kicker first, settling down to the CTAs), and the demo eases in from the right. */
.hero__lead > .kicker[data-reveal]      { transition-delay: 0.04s; }
.hero__lead > .hero__title[data-reveal] { transition-delay: 0.13s; }
.hero__lead > .hero__lede[data-reveal]  { transition-delay: 0.24s; }
.hero__lead > .hero__actions[data-reveal]{ transition-delay: 0.34s; }
.hero__demo[data-reveal] { transform: translateY(16px) translateX(22px); transition-delay: 0.30s; transition-duration: 0.9s; }
.hero__demo[data-reveal].is-in { transform: none; }

/* =========================================================
   HERO — two columns, one screen, shifted left toward the line
   ========================================================= */
.hero {
  /* true 50/50; the edge-hugging line lives in the viewport gutter to the LEFT of the trunk
     (script.js draws it at ~44px), so the copy never sits on the line. The hero fills one
     screenful: nav (sticky, ~66px) + hero = one viewport, so #problem starts just below the
     fold on any height. svh keeps it correct when mobile browser bars are showing; the vh line
     is a fallback for older engines. Content centers, so it adapts (tighter on a 13", more
     spacious on a 27"/34") without #problem ever peeking. */
  padding: 36px var(--pad-x);
  min-height: calc(100vh - 66px);
  min-height: calc(100svh - 66px);
  /* the big headline gets the WIDER column so its long words never spill into the demo; the demo
     is the narrower column with a clear gap between them (fixes the headline/demo overlap). */
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center; gap: clamp(44px, 4.5vw, 88px);
}
.hero__lead { max-width: 38rem; min-width: 0; }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: 100%; color: var(--signal); margin: 0 0 16px; }
.kicker__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint), 0 0 10px 1px var(--accent); }

.hero__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.5rem, 1.9rem + 3.5vw, 4.9rem); line-height: 1.01; letter-spacing: -0.04em;
  margin: 0 0 16px; overflow-wrap: normal; text-wrap: balance;
}
.hero__title em { color: var(--signal); }
/* "Odoo" tint: secondary violet, same display typeface, tasteful (not a neon highlighter) */
.tint-odoo { color: var(--violet); }
/* B4 (no-overlay solution): the lede sits directly on the moving mesh, so it is lightened from
   --text-2 to var(--text-2). Measured 4.88:1 against the brightest sampled mesh frame behind it (>= 4.5).
   Size + weight still separate it from the headline; no scrim, so no box/edge is possible. */
.hero__lede { font-size: clamp(1.02rem, 0.94rem + 0.5vw, 1.32rem); color: var(--text-2); margin: 0 0 30px; line-height: 1.5; max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* (The "One brain. Seven phases." heading was removed in the final pass; the line + brain now
    originate at Presales, see script.js.) */

/* live demo frame (right column) — sized for presence; the pipeline fits all seven nodes */
.hero__demo { width: 100%; max-width: 620px; min-width: 0; justify-self: end; }
.appframe {
  /* visible craft-depth: a lighter, cooler surface (lit from the top) over the dark page, a crisp
     top-edge highlight, a defined border, and a layered shadow (tight contact + wide ambient).
     Reads as a real raised object, not a flat gray rectangle, without skeuomorphic 3D. */
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
  border: 1px solid rgba(160,180,210,0.22); border-radius: 16px; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 6px rgba(0,0,0,0.42),
    0 40px 90px -44px rgba(0,0,0,0.9);
}
.appframe__bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.appframe__title { font-family: var(--mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.06em; color: var(--text); }
.appframe__meta { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); }

/* seven-phase pipeline: numbered nodes on a progress line, ALL always visible (no scroll/clip).
   Equal flex slots so the row scales to the panel; nodes are bigger and legible. */
.appframe__pipeline { position: relative; display: flex; align-items: flex-start; padding: 16px 14px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
/* B1 — the signature-echo canvas replaces the plain connecting bars when JS is active (fallback: the CSS bars) */
.pipe-echo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.appframe__pipeline.has-echo .pstep::before { display: none; }
.pstep { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.pstep::before {                         /* connecting line to the previous node (the pipeline) */
  content: ""; position: absolute; top: 12px; right: 50%; width: 100%; height: 2px; background: var(--line-2); z-index: 0;
}
.pstep:first-child::before { display: none; }
.pstep.is-done::before, .pstep.is-current::before { background: var(--signal-dim); }   /* progress fill up to current */
.pstep__no {
  position: relative; z-index: 1; width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: 0.74rem; font-weight: 500; line-height: 1;
  color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line-2);
  transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pstep.is-done .pstep__no { color: var(--signal); border-color: var(--signal-dim); }
.pstep.is-current .pstep__no { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-tint); }
.pstep__name { font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-2); white-space: nowrap; transition: color 0.3s var(--ease); }
.pstep.is-done .pstep__name { color: var(--text-2); }
.pstep.is-current .pstep__name { color: var(--signal); }
/* narrow panels: drop the labels (they would collide) but keep all seven numbered nodes + the
   progress line; the active phase name is carried by the bar meta (e.g. "Discovery · 2 / 7"). */
@media (max-width: 600px) {
  .pstep__name { display: none; }
  .appframe__pipeline { padding: 18px 14px; }
}
/* the conversation area is a FIXED, generous size and never resizes as messages grow (the longest
   exchange is sized to fit); if content ever exceeds it, it clips at the top rather than growing. */
.appframe__body { padding: 18px; height: clamp(348px, 31vw, 404px); display: flex; flex-direction: column; }
/* bottom-anchored (newest near the input), bubbles sized to content, clipped not grown */
.chat-thread { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 10px; }

/* chat — standard convention: the CONSULTANT (you) posts on the RIGHT, the Project Brain answers on the LEFT */
.chat-bubble { position: relative; padding: 10px 13px 11px; border-radius: 13px; margin: 0; font-size: clamp(0.92rem, 0.84rem + 0.34vw, 1.06rem); line-height: 1.46; max-width: 88%; }
.chat-bubble[hidden] { display: none; }
.chat-who { display: block; font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 6px; }
.chat-bubble--user { background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); align-self: flex-end; border-bottom-right-radius: 5px; }
.chat-bubble--user .chat-who { color: var(--text-2); }
.chat-bubble--ai { background: var(--bg-2); border: 1px solid var(--line); color: var(--text); align-self: flex-start; border-bottom-left-radius: 5px; }
.chat-bubble--ai .chat-who { color: var(--signal); }
.chat-txt { display: inline; }
.chat-bubble.typing .chat-txt::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; background: var(--signal); vertical-align: -0.15em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* the chat INPUT at the bottom of the panel — the consultant's message types in here, then sends */
.chat-input {
  flex: none; margin-top: 16px; display: flex; align-items: center; gap: 10px;
  padding: 11px 11px 11px 15px; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.chat-input.typing { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.chat-input__txt { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: clamp(0.92rem, 0.82rem + 0.4vw, 1.12rem); line-height: 1.45; }
.chat-input__txt:empty::before { content: "Message the project brain"; color: var(--text-3); }
.chat-input.typing .chat-input__txt::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; background: var(--signal); vertical-align: -0.15em; animation: caret 1s steps(1) infinite; }
.chat-input__send { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--signal); color: var(--signal-ink); }
.chat-input.sent .chat-input__send { animation: sendPulse 0.4s var(--ease); }
@keyframes sendPulse { 45% { transform: scale(0.84); } }
.chat-dots { display: none; gap: 5px; align-items: center; height: 1em; }
.chat-bubble--ai.is-thinking .chat-dots { display: inline-flex; }
.chat-bubble--ai.is-thinking .chat-txt { display: none; }
.chat-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: chatdot 1.2s ease-in-out infinite; }
.chat-dots i:nth-child(2) { animation-delay: 0.18s; }
.chat-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes chatdot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
/* result chip shown after the copilot answers — lime for a normal result, red for a caught conflict */
.chat-tag { display: block; width: fit-content; margin-top: 11px; font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--signal); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 8px; }
.chat-tag.is-conflict { color: var(--conflict); border-color: var(--conflict); }
.chat-tag[hidden] { display: none; }
.chat-tag.tag-in { animation: brainIn 0.4s var(--ease-soft); }

/* PDF attachment chip inside the consultant's message — inline SVG glyph, dark on-brand surface, no external asset */
.chat-atch { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin-top: 8px; padding: 5px 11px 5px 7px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line-2); }
.chat-atch[hidden] { display: none; }
.chat-atch__glyph { flex: none; width: 22px; height: 26px; }
.chat-atch__glyph svg { display: block; width: 100%; height: 100%; }
.chat-atch__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat-atch__name { font-size: 0.74rem; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.chat-atch__size { font-family: var(--mono); font-size: var(--ms-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }

/* facts the brain pulls out of the document — small chips that stream in below its reply (same FACT-tag family) */
.chat-facts { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.chat-facts[hidden] { display: none; }
.chat-fact { display: flex; align-items: flex-start; gap: 7px; padding: 2px 8px; border-radius: 6px; background: var(--signal-tint); border: 1px solid var(--line-2); font-size: 0.68rem; line-height: 1.3; color: var(--text); }
.chat-fact__mark { flex: none; color: var(--signal); font-size: 0.68rem; line-height: 1.3; }
.chat-fact__txt { min-width: 0; }

/* =========================================================
   THE BRAIN — the hero demo's living fact ledger. A typed,
   numbered feed that streams in and catches a cross-phase
   conflict. Same fixed appframe box; this only restyles the body.
   ========================================================= */
.appframe__body--brain { padding: 13px 15px 15px; gap: 11px; }
.brain__top { display: flex; align-items: baseline; gap: 10px; }
.brain__label { font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-3); }
.brain__count { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-2); }
.brain__count b { color: var(--signal); font-weight: 600; font-variant-numeric: tabular-nums; }
.brain__checks { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--conflict-2); }
.brain__checks[hidden] { display: none; }
.brain__checks b { font-variant-numeric: tabular-nums; }
.brain__checks-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--conflict); box-shadow: 0 0 8px 1px var(--conflict); animation: bpulse 1.5s var(--ease-soft) infinite; }

/* the five fact-type counters; each carries its own hue via --c (kept to lime/violet/red + neutrals) */
.bmeter { display: flex; flex-wrap: wrap; gap: 6px; }
.bmeter__i { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 7px; border-radius: 7px; background: rgba(255,255,255,0.02); border: 1px solid var(--line); }
.bmeter__i::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c, var(--text-2)); box-shadow: 0 0 6px -1px var(--c, transparent); }
.bmeter__i i { font-family: var(--mono); font-style: normal; font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.bmeter__i b { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; color: var(--c, var(--text)); font-variant-numeric: tabular-nums; }
.bmeter__i[data-cat="req"]  { --c: var(--signal); }
.bmeter__i[data-cat="dec"]  { --c: var(--violet-2); }
.bmeter__i[data-cat="risk"] { --c: var(--conflict-2); }
.bmeter__i[data-cat="con"]  { --c: #86a8cc; }
.bmeter__i[data-cat="data"] { --c: var(--text-2); }
.bmeter__i.is-bump { animation: brecv 0.6s var(--ease-soft); }

/* the feed: newest at the bottom, older scroll up and clip — the fixed box never grows */
.brain-feed { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }

/* one fact card — a mono ledger row with a type-coloured left edge */
.bfact { border: 1px solid var(--line); border-left: 2px solid var(--c, var(--line-2)); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)); padding: 8px 11px; }
.bfact--req { --c: var(--signal); } .bfact--dec { --c: var(--violet-2); }
.bfact--risk { --c: var(--conflict-2); } .bfact--con { --c: #86a8cc; } .bfact--data { --c: var(--text-2); }
.bfact__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bfact__id { font-family: var(--mono); font-size: var(--ms-1); letter-spacing: 0.06em; color: var(--text-2); }
.bfact__type { font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c, var(--text-2)); }
.bfact__phase { margin-left: auto; font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.bfact__txt { font-size: 0.82rem; line-height: 1.4; color: var(--text); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* the ingest line — "reading customers.csv…" — a quiet mono marker before a batch of facts */
.bingest { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.bingest::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--signal-dim); border-top-color: transparent; animation: bspin 0.8s linear infinite; }

/* the check card — the money shot. conflict = red ignition; pass = calm lime */
.bcheck { display: flex; gap: 9px; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); }
.bcheck--conflict { --c: var(--conflict); }
.bcheck--pass { --c: var(--signal); }
.bcheck.is-in { animation: bignite 0.7s var(--ease-soft); }
.bcheck__icon { flex: none; font-size: 0.9rem; line-height: 1.3; color: var(--c); }
.bcheck__title { display: block; font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--c); margin-bottom: 3px; }
.bcheck__body { margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--text); }
.bcheck__body b { color: var(--c); font-weight: 600; }

@keyframes bpulse { 0%,100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes bspin { to { transform: rotate(360deg); } }
@keyframes brecv { 0% { background: var(--signal-tint); border-color: var(--c); } 100% { background: rgba(255,255,255,0.02); } }
@keyframes bignite { 0% { box-shadow: 0 0 0 0 var(--conflict-tint); transform: scale(0.985); } 45% { box-shadow: 0 0 0 6px var(--conflict-tint); } 100% { box-shadow: 0 0 0 0 rgba(255,90,60,0); transform: scale(1); } }

/* cite (used in phase outputs) */
.cite { letter-spacing: 0.06em; color: var(--signal); border-bottom: 1px dashed currentColor; cursor: pointer; white-space: nowrap; }
.cite span { font-weight: 500; }
.cite:hover { color: var(--accent); }

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.section-head { max-width: 50ch; margin-bottom: 56px; }
.eyebrow { color: var(--signal); display: block; margin-bottom: 18px; }
.section-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.04; letter-spacing: -0.028em;
  margin: 0 0 20px;
}
.section-sub { font-size: 1.06rem; color: var(--text-2); max-width: 54ch; margin: 0; }

/* =========================================================
   PHASES — zigzag journey; the thread weaves between the sides
   ========================================================= */
/* full-bleed so blocks can use the page width; .phases overrides the single-column .section inset. */
.phases { padding-left: var(--pad-x); padding-right: var(--pad-x); padding-top: 40px; padding-bottom: 56px; margin-top: 0; }

/* pronounced zigzag: left blocks sit right of the brain lane, right blocks pushed to the
   right edge. The line weaves between them; the Project Brain keeps the far-left lane and
   never reaches the line (verified — see report). */
.phase-list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.phase {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 24px; align-items: baseline;
  width: min(560px, 46%);            /* wide but leaves room for the deeper weave */
  padding: 30px 0;                    /* shorter blocks */
  opacity: 1; transform: none;        /* reveal via .lit, not the block fade */
}
.phase--right { margin-left: 54%; }
.phase--left  { margin-left: 33%; }
/* oversized editorial numerals anchoring each block */
/* editorial numerals: display face, OUTLINED until the thread lights them — then they fill
   with the accent. (Was slashed-zero mono — read as terminal output, not typography.) */
.phase__no {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: 0.85;
  color: transparent; -webkit-text-stroke: 1.5px var(--text-3);
  letter-spacing: -0.02em;
  transition: color 0.45s var(--ease), -webkit-text-stroke-color 0.45s var(--ease);
}
.phase.lit .phase__no { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
@supports not (-webkit-text-stroke: 1px black) {
  .phase__no { color: var(--text-3); }   /* graceful: solid grey → solid accent */
}
.phase__body { grid-column: 2; min-width: 0; }
.phase__name { font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 3rem); margin: 0; letter-spacing: -0.03em; line-height: 1.0; }
.phase__copy { margin: 12px 0 0; color: var(--text-2); max-width: 46ch; font-size: 1.04rem; line-height: 1.5; }
.phase:hover .phase__name { color: var(--accent); transition: color 0.3s var(--ease); }
.phase__visual { margin-top: 18px; }

/* wake — short internal stagger that fires when the comb-front lights the phase */
.wake { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-soft), transform 0.6s var(--ease-soft); }
.phase.lit .wake { opacity: 1; transform: none; }
.wake.d1 { transition-delay: 0.06s; }
.wake.d2 { transition-delay: 0.13s; }
.wake.d3 { transition-delay: 0.20s; }

/* =========================================================
   PER-PHASE OUTPUT CARDS  (the real generated artifact, in context)
   ========================================================= */
.out-card { background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%); border: 1px solid var(--line); border-radius: 13px; padding: 18px 22px; box-shadow: 0 2px 5px rgba(20,30,50,0.05), 0 22px 44px -26px rgba(20,30,50,0.18); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease-soft); }
.phase:hover .out-card, .phase:hover .redline-card { border-color: var(--line-2); }

/* "generate" moment: a real action the user sees produce output (Discovery stories, UAT tests).
   The list is hidden until the card is generated (auto on scroll-in, or on button click); then
   the rows stream in. Reduced motion shows them immediately. */
.gen-btn {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 2px 0 14px;
  padding: 7px 13px; border-radius: 6px; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.03em;
  color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.gen-btn::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: var(--signal-ink); transition: transform 0.4s var(--ease); }
.gen-btn:hover { transform: translateY(-1px); box-shadow: 0 0 18px -4px var(--signal); }
.out-card.is-generated .gen-btn { background: transparent; color: var(--signal); border-color: var(--signal-dim); }
.out-card.is-generated .gen-btn::before { background: var(--signal); transform: rotate(45deg); }
.gen-list li { opacity: 0; transform: translateY(9px); transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft); }
.out-card.is-generated .gen-list li { opacity: 1; transform: none; }
.out-card.is-generated .gen-list li:nth-child(2) { transition-delay: 0.13s; }
.out-card.is-generated .gen-list li:nth-child(3) { transition-delay: 0.26s; }
.out-card .out-fact { opacity: 0; transition: opacity 0.5s var(--ease-soft) 0.3s; }
.out-card.is-generated .out-fact { opacity: 1; }
.out-card__label { display: block; font-family: var(--mono); font-weight: 500; font-size: var(--ms-2); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-2); margin-bottom: 13px; }

/* Presales — talking points */
.out-points { display: flex; flex-direction: column; gap: 11px; }
.out-points li { position: relative; padding-left: 20px; color: var(--text); font-size: 1.02rem; line-height: 1.4; }
.out-points li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 4px; background: var(--signal); }
.out-say { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--text); font-style: italic; line-height: 1.5; }
.out-say span { font-style: normal; font-family: var(--mono); font-size: var(--ms-2); text-transform: uppercase; letter-spacing: 0.14em; color: var(--signal); margin-right: 10px; }

/* Discovery — generated user stories */
.out-stories { display: flex; flex-direction: column; gap: 14px; }
.out-stories li { color: var(--text); font-size: 1.04rem; line-height: 1.45; padding-left: 16px; border-left: 2px solid var(--line-2); }
.out-stories li b { color: var(--signal); font-weight: 600; }
.out-fact { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.96rem; color: var(--text-2); }

/* UAT — generated test scenarios */
.out-tests { display: flex; flex-direction: column; gap: 14px; }
.out-tests li { color: var(--text); font-size: 1.02rem; line-height: 1.45; }
.out-tests__id { font-family: var(--mono); font-size: var(--ms-3); color: var(--signal); letter-spacing: 0.06em; margin-right: 9px; }
.trace { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; white-space: nowrap; vertical-align: middle; }

/* Go-live — cutover checklist */
.out-check { display: flex; flex-direction: column; gap: 12px; }
.out-check li { position: relative; padding-left: 26px; color: var(--text); font-size: 1.02rem; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.out-check li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--signal); font-weight: 700; }
.out-foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--ms-2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); }
.out-foot--ok { color: var(--signal); }

/* Support — ticket → answer */
.out-ticket { margin: 0 0 14px; color: var(--text); font-size: 1.04rem; line-height: 1.4; }
.out-ticket__id { font-family: var(--mono); font-size: var(--ms-2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--conflict); border: 1px solid var(--conflict); border-radius: 4px; padding: 1px 7px; margin-right: 10px; white-space: nowrap; }
.out-answer { margin: 0; padding: 14px 16px; background: var(--bg-2); border-left: 2px solid var(--signal); border-radius: 0 8px 8px 0; color: var(--text-2); font-size: 1rem; line-height: 1.55; }

.cite--static { font-family: var(--mono); font-size: var(--ms-2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--signal); border: none; cursor: default; white-space: nowrap; }

/* Configuration — conflict card (recall chip + caught contradiction) */
.recall-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  padding: 5px 10px; border-radius: 6px;
  font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em;
  background: var(--signal-tint); border: 1px solid var(--line-2); color: var(--signal);
}
.recall-chip::before { content: "\21BA"; font-size: 1.05em; }
.redline-card { background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%); border: 1px solid var(--line); border-radius: 13px; padding: 22px 24px; box-shadow: 0 2px 5px rgba(20,30,50,0.05), 0 22px 44px -26px rgba(20,30,50,0.18); transition: border-color 0.3s var(--ease); }
.redline-row, .redline-strike { padding: 10px 0; }
.redline-row p, .redline-strike p { margin: 5px 0 0; font-size: 1.02rem; color: var(--text); }
.redline-ref { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--ms-2); color: var(--text-2); }
.redline-ref--red { color: var(--conflict); }
.redline-strike { position: relative; }
.redline-strike p { color: var(--text-2); }
.redline-strike::after {
  content: ""; position: absolute; left: 0; top: 50%; height: 2px; width: 0;
  background: var(--conflict); border-radius: 4px;
  transition: width 0.7s var(--ease) 0.15s;
}
.phase.lit .redline-strike::after { width: 100%; }   /* strike fires when the comb-front lights the phase */
.redline-note { margin: 14px 0 0; font-family: var(--mono); font-size: var(--ms-2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--conflict); }

/* Migration — messy export → clean Odoo import (the delivered file) */
/* --flush: the migration demo needs every horizontal px for its two mono columns */
.out-card--flush { padding: 16px 12px; }
.migrate-card { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 14px; }
.migrate-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.migrate-col__label { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--ms-1); color: var(--text-2); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.migrate-line { font-family: var(--mono); font-size: var(--ms-3); padding: 6px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.migrate-line--bad { background: var(--conflict-tint); color: var(--conflict-2); text-decoration: line-through; text-decoration-color: rgba(255,90,60,0.5); }
.migrate-line--ok { background: var(--signal-tint); color: var(--signal-2); }
.migrate-arrow { font-size: 1.3rem; color: var(--signal); }

/* =========================================================
   PROJECT BRAIN — a large, always-open panel fixed high in the left lane.
   The journey runs on the right; the brain accumulates on the left and the
   user watches it grow. Recessed, hairline material — crafted, not app chrome.
   Anchored high (top) so all 7 entries clear the fold at the final phase.
   ========================================================= */
/* vertically centered in its lane; the full 7-entry height (~350px) stays well within
   the viewport, so centered AND all-seven-on-screen both hold on any real desktop. */
.brain {
  position: fixed; top: 50%;
  left: 40px;            /* JS sets the exact left = trunkLeft + lane padding */
  width: clamp(272px, 22vw, 320px); z-index: 40;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
  border: 1px solid rgba(160,180,210,0.22); border-radius: 16px;
  padding: 20px 20px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 3px rgba(20,30,50,0.08), 0 18px 40px -26px rgba(20,30,50,0.25);
  opacity: 0; transform: translateY(-50%) translateX(-22px) scale(0.98); pointer-events: none;
  transition: opacity 0.6s var(--ease-soft), transform 0.6s var(--ease-soft);
}
/* born at the heading: slides in from the left and settles, centered */
.brain.is-riding { opacity: 1; transform: translateY(-50%); pointer-events: auto; }

.brain__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.brain__title { font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--text); }
.brain__count { font-family: var(--mono); font-size: var(--ms-3); letter-spacing: 0.06em; color: var(--text-2); }

.brain__items { display: flex; flex-direction: column; }
.brain-item { display: none; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.brain-item.captured { display: flex; flex-direction: column; gap: 2px; }
.brain-item:first-child { border-top: none; }                /* Presales is always the first captured */
.brain-item__tag { font-family: var(--mono); font-weight: 600; font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--signal); }
.brain-item__t { font-size: 0.98rem; color: var(--text); line-height: 1.35; }

/* vacuum capture (first pass): the new entry materializes, sliding in from the
   phase side with a brief receive-glow. The canvas token (script.js) does the flight. */
@keyframes brainIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes brainRecv { 0% { background: var(--signal-tint); } 100% { background: transparent; } }
.brain-item.just-in { animation: brainIn 0.5s var(--ease-soft), brainRecv 1s var(--ease); border-radius: 6px; }

/* =========================================================
   WHY  (elevated panel)
   ========================================================= */
.section--panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin: 36px 0; }
.why { padding-top: 80px; padding-bottom: 80px; }
.why__head { max-width: 62ch; margin: 0 auto 46px; }
.why__kicker { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--ms-3); color: var(--signal); margin: 0 0 22px; }
.why__statement {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -0.03em; margin: 0;
}
.why__statement em { color: var(--signal); font-style: normal; display: block; }

/* the ✗/✓ feature-comparison table — scannable row by row, the Implenova column favoured */
.cmp {
  max-width: 1000px; margin: 0 auto; text-align: left;
  border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 26px 60px -34px rgba(0,0,0,0.7);
  display: grid; grid-template-columns: minmax(140px, 0.85fr) minmax(0, 1.24fr) minmax(0, 1.24fr);
}
.cmp__row { display: contents; }
.cmp__cap, .cmp__col, .cmp__cell {
  padding: 15px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 10px; font-size: 0.97rem; line-height: 1.45;
}
.cmp__row:last-child > * { border-bottom: none; }
.cmp__row--head > * { font-family: var(--sans); font-weight: 600; letter-spacing: 0.02em; font-size: 0.88rem; color: var(--text-2); padding-top: 16px; padding-bottom: 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cmp__col--generic { color: var(--text-2); }
.cmp__col--iq { color: var(--accent); font-weight: 700; }
.cmp__cap { font-family: var(--display); font-weight: 500; color: var(--text); font-size: 1rem; }
.cmp__cell--no { color: var(--text-3); }
.cmp__cell--yes { color: var(--text); }
/* the IQ column, subtly favoured: a faint lime tint and a lime divider running down it */
/* B3 — lime scarcity: no full-column wash. The Implenova column reads favored through the lime
   divider, the lime column header, the lime check marks, and its heavier text weight. */
.cmp__col--iq, .cmp__cell--yes { border-left: 1px solid rgba(85,96,207,0.22); background: rgba(85,96,207,0.035); }
.cmp__mark { flex: none; font-weight: 700; font-size: 0.95em; line-height: 1.55; }
.cmp__mark--no { color: var(--text-3); }
.cmp__mark--yes { color: var(--accent); }
/* MOBILE: collapse each row into its own stacked full-width card (no cramped 3 columns, no
   h-scroll). Placed after the base .cmp so it wins the cascade. */
@media (max-width: 600px) {
  .cmp { display: flex; flex-direction: column; gap: 14px; border: none; border-radius: 0; box-shadow: none; }
  .cmp__row--head { display: none; }
  .cmp__row { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 13px; overflow: hidden; background: var(--surface); }
  .cmp__cap { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--text); padding: 13px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.03); }
  .cmp__cell { padding: 12px 16px 12px 16px; border-bottom: none; font-size: 0.95rem; }
  .cmp__cell--no { border-bottom: 1px solid var(--line-soft); }
  .cmp__cell--yes { background: rgba(85,96,207,0.05); border-left: none; }
}

/* =========================================================
   PRICING
   ========================================================= */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.tier {
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  padding: 28px 24px; display: flex; flex-direction: column; position: relative;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
  transition: transform 0.35s var(--ease-soft), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.tier:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 24px 44px -30px rgba(20,30,50,0.28); transition-delay: 0s; }
.tiers .tier:nth-child(2) { transition-delay: 80ms; }   /* reveal stagger (reset to 0 on hover above) */
.tiers .tier:nth-child(3) { transition-delay: 160ms; }
/* the featured tier is the anchor: it sits lifted and larger, breaking the identical-card row */
.tier--featured {
  padding: 38px 30px 34px; margin-top: -14px; border-radius: 16px;
  border-color: rgba(85, 96, 207, 0.4);
  background: linear-gradient(180deg, rgba(85, 96, 207, 0.045), rgba(85, 96, 207, 0) 42%), var(--surface);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px rgba(85, 96, 207, 0.18), 0 36px 70px -42px rgba(85, 96, 207, 0.30);
}
.tier--featured:hover { transform: translateY(-9px); }
.tier__badge {
  position: absolute; top: -11px; left: 26px;
  font-family: var(--sans); font-weight: 600; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--accent); color: var(--accent-ink); padding: 4px 12px; border-radius: 6px;
}
.tier__name { font-family: var(--display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 4px; }
.tier__for { color: var(--text-3); font-size: 0.88rem; margin: 0 0 22px; min-height: 2.6em; }
.tier__price { display: flex; flex-direction: column; margin: 0 0 22px; }
.tier__amt { font-family: var(--display); font-weight: 500; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; }
.tier__per { color: var(--text-3); margin-top: 8px; font-size: 0.82rem; line-height: 1.45; }
.tier__feats { display: flex; flex-direction: column; gap: 11px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.tier__feats li { position: relative; padding-left: 24px; font-size: 0.93rem; color: var(--text-2); line-height: 1.45; }
.tier__feats li strong { color: var(--text); font-weight: 600; }   /* the tier's signature feature, surfaced */
/* neutral markers by default; the accent is reserved for the featured tier (precise, not everywhere) */
.tier__feats li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 4px; background: var(--text-3); }
.tier--featured .tier__feats li::before { background: var(--signal); }
/* clearly-labeled roadmap items (Firm card) — honest, visually set apart from live features */
.tier__feats li:has(.feat-soon) { color: var(--text-3); }
.tier__feats li:has(.feat-soon)::before { background: none; border: 1px dashed var(--text-3); width: 7px; height: 7px; }
.feat-soon { font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; margin-right: 7px; }

/* =========================================================
   INTENTIONAL ALIGNMENT
   The base .section uses an asymmetric left inset (for the thread lane), which made the
   comparison / pricing / CTA read "almost-but-not-centered". These sections are centered as
   units with symmetric padding. FAQ keeps its left-aligned treatment (handled by not touching it).
   ========================================================= */
/* comparison: centered head, the table centered as a unit (its cells stay left-aligned) */
.why { padding-left: var(--pad-x); padding-right: var(--pad-x); text-align: center; }
.why__head { margin-left: auto; margin-right: auto; }
.why__statement { max-width: 26ch; margin-left: auto; margin-right: auto; }
/* pricing */
.pricing { padding-left: var(--pad-x); padding-right: var(--pad-x); }
.pricing .section-head { text-align: center; max-width: 64ch; margin-left: auto; margin-right: auto; margin-bottom: 64px; }
.pricing .section-head .section-sub { margin-left: auto; margin-right: auto; }
/* only the pricing HEADER scales up ~1.5x; the tier cards stay their current size */
.pricing .section-title { font-size: var(--display-title); line-height: 1.06; }
.pricing .section-sub { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.42rem); line-height: 1.5; }
.tiers { margin-left: auto; margin-right: auto; max-width: 1040px; }

/* =========================================================
   SUBSTANCE — problem stats, outcome metrics, built-for-Odoo, design partners.
   Centered as units (symmetric padding); clean Duvo-style stat blocks; reference-grade whitespace.
   ========================================================= */
/* shared centered head */
.problem, .outcomes, .builtfor, .partners { text-align: center; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.problem__title, .outcomes__title, .partners__title { font-weight: 600; }
.problem__title, .outcomes__title, .partners__title {
  font-family: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; color: var(--text);
}
.problem__head { max-width: 64ch; margin: 0 auto 60px; }
.problem__title { font-size: clamp(1.9rem, 3.6vw, 2.95rem); margin: 14px auto 20px; max-width: 24ch; }
.problem__body { color: var(--text-2); font-size: 1.08rem; line-height: 1.55; max-width: 58ch; margin: 0 auto; }

/* Duvo-style divided stat blocks */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1020px; margin: 0 auto; }
.stat { padding: 10px 30px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat__num { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(2.7rem, 5.2vw, 4.2rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--text); }
.stat__num--word { font-size: clamp(2rem, 4vw, 3rem); }
.stat--lime .stat__num { color: var(--signal); }
.stat__label { display: block; color: var(--text-2); font-size: 0.97rem; line-height: 1.5; margin: 16px auto 0; max-width: 26ch; }
.stat__src { display: block; font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-2); margin-top: 12px; }

/* sits close to the phase pipeline it pays off (tightened from the default 104px section top) */
.outcomes { padding-top: 64px; }
.outcomes__head { max-width: 52ch; margin: 0 auto 52px; }
.outcomes__title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin: 12px auto 0; max-width: 26ch; }

/* built for Odoo — clean functional-area chips (no logos) */
.builtfor__inner { max-width: 1120px; margin: 0 auto; }
.builtfor__title { font-family: var(--display); font-weight: 600; font-size: var(--display-title); line-height: 1.06; letter-spacing: -0.03em; margin: 14px auto 22px; }
.builtfor__body { color: var(--text-2); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.42rem); line-height: 1.5; max-width: 58ch; margin: 0 auto 46px; }
.areas { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; max-width: 1060px; margin: 0 auto; }
.areas li {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--sans); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.01em; color: var(--text-2);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 11px 22px 11px 15px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease-soft);
}
/* real Odoo module icons (assets/odoo-icons), consistent size; their own colour reads as a
   recognisable systems row, dialled back a touch so it sits calmly on the dark palette */
.areas__icon { width: 26px; height: 26px; flex: none; filter: saturate(0.9); }
/* chips are informational, not clickable — no hover motion (motion implies a link) */

/* design partners — honest pre-launch slots, clearly placeholders */
.partners__head { max-width: 64ch; margin: 0 auto 52px; }
.partners__title { font-size: var(--display-title); line-height: 1.06; margin: 14px auto 22px; max-width: 22ch; }
.partners__body { color: var(--text-2); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem); line-height: 1.5; max-width: 56ch; margin: 0 auto; }
.partners__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 920px; margin: 0 auto; }
.partner-slot {
  border: 1px dashed var(--line-2); border-radius: 13px; padding: 34px 20px; min-height: 116px;
  display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.012);
}
.partner-slot__tag { font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-2); }
.partner-slot__hint { color: var(--text-2); font-size: 0.95rem; }
.partner-quote {
  grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 13px; padding: 34px 36px;
  background: var(--surface); text-align: left; margin: 4px 0 0;
}
.partner-quote p { font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 1.8vw, 1.45rem); color: var(--text); margin: 0 0 20px; max-width: 56ch; line-height: 1.4; letter-spacing: -0.01em; }
.partner-quote footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.partner-quote__who { font-family: var(--mono); font-size: var(--ms-2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); }
.partner-quote__soon { font-family: var(--mono); font-size: var(--ms-1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 9px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-list { max-width: 760px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
  font-family: var(--display); font-weight: 500; font-size: clamp(1.08rem, 1.8vw, 1.32rem); letter-spacing: -0.02em; color: var(--text);
  transition: color 0.2s var(--ease), padding-left 0.28s var(--ease-soft);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }   /* color only — no sideways text jump */
.faq-item[open] summary { color: var(--signal); }
.faq-item__icon { position: absolute; right: 4px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); }
.faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--signal); transition: transform 0.3s var(--ease); }
.faq-item__icon::before { width: 15px; height: 1.6px; transform: translate(-50%, -50%); }
.faq-item__icon::after { width: 1.6px; height: 15px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-item__a { overflow: hidden; max-width: 64ch; }
.faq-item__a p { color: var(--text-2); margin: 0 0 24px; }
.faq-item__a code { font-family: var(--mono); font-size: 0.85em; color: var(--signal); background: var(--signal-tint); padding: 1px 5px; border-radius: 4px; }

/* =========================================================
   FINAL CTA + REQUEST-ACCESS FORM  (elevated panel, centered)
   ========================================================= */
/* symmetric padding so the centered content is truly centered (not the section's left inset) */
.cta { text-align: center; padding: 92px var(--pad-x); }
.cta__head { max-width: 640px; margin: 0 auto 40px; }
.cta__head .eyebrow { margin-bottom: 16px; }
.cta__title { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0 auto 18px; max-width: 20ch; }
.cta__sub { color: var(--text-2); max-width: 54ch; margin: 0 auto; font-size: 1.05rem; }

.lead-form { max-width: 680px; margin: 0 auto; text-align: left; }
.lead-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.lead-form__grid[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-family: var(--sans); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.02em; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.field__label .req { color: var(--signal); font-style: normal; }
.field__label .opt { color: var(--text-3); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.74em 0.9em; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--text);
  font-family: var(--sans); font-size: 0.98rem;
  box-shadow: inset 0 1px 2px rgba(20,30,50,0.04);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 74px; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa6b6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85em center;
}
.field input::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.field.is-invalid input, .field.is-invalid select { border-color: var(--conflict); box-shadow: 0 0 0 3px var(--conflict-tint); }
.lead-form__foot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 26px; }
.lead-form__foot[hidden] { display: none; }
.lead-form__fine { color: var(--text-3); font-size: 0.86rem; margin: 0; text-align: center; }
.lead-form__fine a { color: var(--signal); border-bottom: 1px solid currentColor; }
.lead-form__done { text-align: center; color: var(--signal); font-family: var(--display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; margin: 8px auto 0; max-width: 36ch; }
/* anti-spam honeypot: off-screen (kept in the layout, not display:none) so bots still see and fill it */
.lead-form__hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* honest failure state, in the existing invalid/conflict-red visual system */
.lead-form__error { text-align: center; color: var(--conflict-2); font-size: 0.9rem; line-height: 1.5; margin: 16px auto 0; max-width: 46ch; }
.lead-form__error[hidden] { display: none; }
.lead-form__error a { color: var(--conflict-2); border-bottom: 1px solid currentColor; }
/* in-flight busy state: reuse the button; just dim + hold still while disabled (no new visual language) */
.btn[disabled] { opacity: 0.6; cursor: default; }
.btn--primary[disabled] { transform: none; box-shadow: 0 0 0 1px var(--signal); background: var(--signal); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--bg-2); color: var(--text); position: relative; z-index: 2; border-top: 1px solid var(--line); }
/* recomposed footer (A8): three deliberate top groups + a full-width bottom identity row.
   (1) brand + both disclaimers | (2) product/nav links | (3) legal links + cookie settings. */
.footer__top {
  max-width: var(--maxw); margin: 0 auto; padding: 72px var(--pad-x) 44px;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.9fr) minmax(0, 0.9fr);
  gap: clamp(32px, 4vw, 56px);
}
.brand--footer { color: var(--text); }
.footer__tag { color: var(--text-3); margin: 16px 0 0; font-size: 0.9rem; line-height: 1.6; }
.footer__disclaimer { margin: 20px 0 0; }
.footer__ai { margin: 12px 0 0; }
.footer__disclaimer, .footer__ai { font-size: 0.78rem; line-height: 1.6; color: var(--text-3); max-width: 46ch; }
.footer__ai:empty { display: none; }   /* stays out of the way until the AI-disclaimer copy is pasted */
.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer__h { font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--text-2); margin: 0 0 16px; }
.footer__col a, .footer__legalcol a { display: block; color: var(--text-2); font-size: 0.92rem; padding: 5px 0; transition: color 0.2s var(--ease); }
.footer__col a:hover, .footer__legalcol a:hover { color: var(--accent); }
.footer__cookiebtn { display: block; margin-top: 4px; padding: 5px 0; background: none; border: 0; font-family: inherit; font-size: 0.92rem; color: var(--text-2); cursor: pointer; text-align: left; transition: color 0.2s var(--ease); }
.footer__cookiebtn:hover { color: var(--signal); }
.footer__bottom {
  max-width: var(--maxw); margin: 0 auto; padding: 20px var(--pad-x) 40px;
  border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 28px; align-items: baseline;
}
.footer__legalid { margin: 0; font-size: 0.82rem; line-height: 1.6; color: var(--text-3); }
.footer__legalid a { color: var(--text-2); }
.footer__legalid a:hover { color: var(--signal); }
.footer__copy { font-family: var(--mono); font-size: var(--ms-2); letter-spacing: 0.04em; color: var(--text-3); white-space: nowrap; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  :root { --content-x: 96px; --thread-x: 46px; --pad-x: 26px; }
  /* hero: stack copy over the demo, give the section room to breathe (no longer locked to one screen) */
  .hero {
    grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start;
    min-height: 0; padding: 64px var(--pad-x) 72px calc(var(--pad-x) + var(--content-x));
  }
  .hero__lead { max-width: 42ch; }
  .hero__demo { max-width: 560px; justify-self: start; }
  /* zigzag + traveling brain can't hold on narrow widths: collapse to one column,
     phases align to the left rail like every other section, brain is dropped */
  .phases { padding-left: calc(var(--pad-x) + var(--content-x)); padding-right: var(--pad-x); padding-top: 48px; margin-top: 0; }
  .phase, .phase--left, .phase--right { width: auto; max-width: 620px; margin-left: 0; padding: 36px 0; border-top: 1px solid var(--line-soft); }
  .phase-list { gap: 0; }
  .phase:first-child { border-top: none; }
  .brain { display: none; }
  .lead-form__grid { grid-template-columns: 1fr; }   /* stack form fields when single-column */
  .tiers { grid-template-columns: 1fr; max-width: 460px; }
  .tier--featured { margin-top: 0; }          /* no overlap when the tiers stack */
  .tier--featured:hover { transform: translateY(-6px); }
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  :root { --content-x: 52px; --thread-x: 22px; --pad-x: 20px; }
  .nav { padding: 10px 12px 0; }        /* tighter float inset on phones, still detached from edges */
  .nav__links, .link-login { display: none; }
  .nav__actions > .btn--primary { display: none; } /* CTA lives in the drawer on mobile */
  .nav__burger { display: flex; }
  /* the drawer floats as its own rounded glass panel just under the pill (stronger backing than
     the bar since it sits over live content and must stay fully legible) */
  .mobile-menu {
    pointer-events: auto;
    display: flex; flex-direction: column; gap: 4px;
    margin-top: 8px; padding: 8px 18px 16px;
    border-radius: 16px; border: 1px solid rgba(24, 34, 58, 0.12);
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 16px 40px -18px rgba(0,0,0,0.75);
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu a { padding: 12px 0; font-size: 1.02rem; color: var(--text); border-bottom: 1px solid var(--line-soft); }
  .mobile-menu hr { border: none; border-top: 1px solid var(--line); margin: 8px 0; }
  .mobile-menu .btn { margin-top: 10px; }
  .section--panel { border-radius: 13px; margin: 24px 0; }
  .section { padding-top: 68px; padding-bottom: 68px; }
  .hero { padding: 40px var(--pad-x) 56px calc(var(--pad-x) + var(--content-x)); }
  .hero__title { font-size: clamp(2rem, 7.6vw, 3rem); max-width: 100%; overflow-wrap: anywhere; }
  .hero__lead { max-width: 100%; }
  .kicker { font-size: 0.58rem; letter-spacing: 0.1em; }
  .footer__nav { grid-template-columns: repeat(2, 1fr); }
  .migrate-card { grid-template-columns: 1fr; }
  .migrate-arrow { transform: rotate(90deg); justify-self: center; }
  .phase__visual { max-width: 100%; }
  .phase__no { font-size: clamp(2rem, 9vw, 2.8rem); }  /* big but not crowding the name on phones */
  /* let trace tags drop below their line instead of spilling past the narrow card */
  .out-check li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .out-tests li { overflow-wrap: anywhere; }
  .out-tests .trace, .out-check .trace { margin-left: 0; }
  .footer__bottom { flex-direction: column; }
  /* substance sections stack cleanly on phones (no clipped stat numbers) */
  .stat-row { grid-template-columns: 1fr; max-width: 360px; }
  .stat { padding: 22px 12px; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--line); }
  .partners__grid { grid-template-columns: 1fr; max-width: 360px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .wake { opacity: 1; transform: none; }
  /* generate-moment output is always legible (no draw-on); the atmosphere is a static field */
  .gen-list li, .out-card .out-fact { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   LEGAL LAYER — legal pages, footer legal strip, cookie
   consent banner + preferences, form consent, AI-disclaimer
   slots. Uses the existing tokens so it matches the site.
   ========================================================= */

/* ---- long-form legal pages (privacy / terms / cookies / legal hub) ---- */
.legal-page { max-width: var(--maxw); margin: 0 auto; padding: 92px var(--pad-x) 96px; position: relative; z-index: 2; }
.legal-wrap { max-width: 760px; margin: 0 auto; }
.legal-back { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: var(--ms-3); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); transition: color 0.2s var(--ease); }
.legal-back:hover { color: var(--signal); }
.legal-title { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); letter-spacing: -0.03em; line-height: 1.05; margin: 22px 0 10px; }
.legal-updated { font-family: var(--mono); font-size: var(--ms-3); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin: 0 0 8px; }
.legal-lead { color: var(--text-2); font-size: 1.02rem; line-height: 1.6; margin: 0 0 28px; }
.legal-divider { height: 1px; background: var(--line); border: 0; margin: 26px 0 30px; }

/* the empty, styled body real legal copy is pasted into (readable long-form defaults) */
.legal-body { color: var(--text); font-size: 1.02rem; line-height: 1.72; }
.legal-body > :first-child { margin-top: 0; }
.legal-body h2 { font-family: var(--display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.01em; line-height: 1.25; margin: 40px 0 12px; }
.legal-body h3 { font-family: var(--display); font-weight: 500; font-size: 1.1rem; margin: 28px 0 10px; color: var(--text); }
.legal-body p { margin: 0 0 16px; color: var(--text-2); }
.legal-body ul, .legal-body ol { margin: 0 0 16px; padding-left: 22px; color: var(--text-2); }
.legal-body li { margin: 0 0 8px; line-height: 1.65; }
.legal-body a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--signal-2); }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 0.95rem; }
.legal-body th, .legal-body td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; }
.legal-body th { font-family: var(--mono); font-size: var(--ms-3); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
/* placeholder note shown before real copy is pasted (dev-facing) */
.legal-body__todo { font-family: var(--mono); font-size: 0.8rem; color: var(--text-3); border: 1px dashed var(--line-2); border-radius: 9px; padding: 18px 20px; }

/* legal hub cards */
.legal-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 8px 0 0; }
.legal-hub__card { display: block; padding: 22px; border: 1px solid var(--line-2); border-radius: 13px; background: var(--surface); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease-soft); }
.legal-hub__card:hover { border-color: var(--accent); transform: translateY(-3px); }
.legal-hub__card h2 { font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin: 0 0 6px; }
.legal-hub__card p { margin: 0; color: var(--text-2); font-size: 0.92rem; line-height: 1.5; }

/* (footer legal styles consolidated into the recomposed .footer__top / .footer__bottom block above) */

/* AI-output disclaimer, subtle inline slot near product claims (empty until copy pasted) */
.ai-disclaimer { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.ai-disclaimer p { margin: 0; font-family: var(--mono); font-size: var(--ms-2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); }
.ai-disclaimer p:empty { display: none; }

/* ---- cookie consent banner (injected by consent.js) ---- */
.cc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; justify-content: center; padding: 16px clamp(12px, 3vw, 24px);
  pointer-events: none;
}
.cc-banner[hidden] { display: none; }
.cc-banner__inner {
  pointer-events: auto; width: 100%; max-width: 760px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4) 60%), rgba(248, 250, 252, 0.94);
  border: 1px solid rgba(24, 34, 58, 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 18px 50px -18px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
}
.cc-text { flex: 1 1 300px; min-width: 0; margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-2); }
.cc-text a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Accept and Reject are equal-footprint buttons; Manage is a visible third action, not a hidden link */
.cc-btn { font-family: var(--sans); font-size: 0.86rem; font-weight: 600; line-height: 1; cursor: pointer;
  padding: 11px 16px; border-radius: 9px; border: 1px solid transparent; white-space: nowrap;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); }
.cc-btn--accept { background: var(--signal); color: var(--signal-ink); }
.cc-btn--accept:hover { background: var(--signal-2); }
.cc-btn--reject { background: var(--surface-2); color: var(--text); border-color: var(--line-2); }
.cc-btn--reject:hover { border-color: var(--text-3); }
.cc-btn--manage { background: transparent; color: var(--text-2); border-color: var(--line-2); }
.cc-btn--manage:hover { color: var(--text); border-color: var(--text-3); }

/* ---- preferences panel (modal) ---- */
.cc-panel { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 20px; }
.cc-panel[hidden] { display: none; }
.cc-panel__backdrop { position: absolute; inset: 0; background: rgba(6, 8, 12, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cc-panel__card {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 26px 26px 22px; border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
  border: 1px solid rgba(160,180,210,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 40px 90px -40px rgba(0,0,0,0.9);
}
.cc-panel__title { font-family: var(--display); font-weight: 600; font-size: 1.2rem; margin: 0 0 6px; }
.cc-panel__intro { margin: 0 0 18px; font-size: 0.88rem; line-height: 1.55; color: var(--text-2); }
.cc-panel__intro a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.cc-cat { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.cc-cat__body { flex: 1 1 auto; min-width: 0; }
.cc-cat__name { font-family: var(--mono); font-size: var(--ms-3); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text); margin: 0 0 4px; }
.cc-cat__desc { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--text-3); }
/* toggle switch */
.cc-switch { flex: none; position: relative; width: 42px; height: 24px; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-switch__track { position: absolute; inset: 0; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 999px; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.cc-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-3); transition: transform 0.2s var(--ease), background 0.2s var(--ease); }
.cc-switch input:checked + .cc-switch__track { background: var(--accent-tint); border-color: var(--accent); }
.cc-switch input:checked + .cc-switch__track::after { transform: translateX(18px); background: var(--signal); }
.cc-switch input:disabled { cursor: not-allowed; }
.cc-switch input:disabled + .cc-switch__track::after { background: var(--signal-dim); }
.cc-switch input:focus-visible + .cc-switch__track { box-shadow: 0 0 0 3px var(--signal-tint); }
.cc-panel__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cc-panel__actions .cc-btn { flex: 1 1 auto; text-align: center; }

/* ---- form consent field (integrates with the existing .field styling) ---- */
.field--consent { display: block; }
.consent-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.consent-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--signal); cursor: pointer; }
.consent-check__text { font-size: 0.9rem; line-height: 1.5; color: var(--text-2); }
.consent-check__text a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.field--consent.is-invalid .consent-check__text { color: var(--conflict-2); }
.field--consent.is-invalid .consent-check input { outline: 2px solid var(--conflict); outline-offset: 2px; }

@media (max-width: 720px) {
  .legal-page { padding: 76px var(--pad-x) 72px; }
  .cc-banner__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cc-actions { flex-direction: column; }
  .cc-actions .cc-btn { width: 100%; text-align: center; }
}

/* ============================================================================
   MOBILE POLISH PASS (audit M1-M8). Every rule below is scoped to a mobile
   media query and appended LAST so it wins the cascade over earlier mobile
   blocks. No base/desktop rule is edited; desktop (>=1024px) is unaffected.
   ============================================================================ */

/* M8 (F10) — featured pricing tier leads the stacked column */
@media (max-width: 980px) {
  .tier--featured { order: -1; }
}

@media (max-width: 720px) {
  /* M2 (F2) — inputs at 16px so iOS does not zoom on focus (base .field rule untouched) */
  .field input, .field select, .field textarea { font-size: 16px; }

  /* M3 (F3) — 44px tap targets (overrides only) */
  .nav__burger { width: 44px; height: 44px; }
  .cc-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .footer__col a, .footer__legalcol a, .footer__cookiebtn { padding-block: 11px; }
  .footer__legalid a { display: inline-block; padding: 12px 3px; }        /* contact-email link ~44 tall */
  /* cookie toggle: keep the 42x24 visual switch, center it inside a 44x44 tappable label */
  .cc-switch { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .cc-switch__track { position: relative; inset: auto; width: 42px; height: 24px; }

  /* M4 (F5+F11) — mobile type floors (targeted selectors; --ms-* tokens untouched) */
  .field__label { font-size: 11px; }
  .eyebrow, .legal-back, .legal-updated { font-size: 12px; }
  .consent-check__text, .lead-form__fine { font-size: 15px; }
  .cmp__cell { font-size: 16px; }
  .footer__legalid { font-size: 14px; }

  /* M7 (F9) — drawer link vertical spacing >= 8px (was 4px) */
  .mobile-menu { gap: 8px; }
}

@media (max-width: 600px) {
  /* M1 (F1) — compact cookie banner (<=40% of viewport). Accept + Reject share a row as equal
     buttons; Manage preferences sits full-width beneath, still fully visible/reachable. */
  .cc-banner { padding: 12px; }
  .cc-banner__inner { gap: 12px; padding: 14px 16px; }
  /* the base .cc-text { flex: 1 1 300px } uses 300px as a HEIGHT basis in this column layout, which
     is what inflated the banner. Size to content, with an internal-scroll cap as a belt-and-braces. */
  .cc-text { flex: none; max-height: 42vh; overflow-y: auto; font-size: 0.82rem; line-height: 1.45; }
  .cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cc-btn { padding: 10px 12px; }              /* min-height:44 from the M3 rule still governs height */
  .cc-btn--manage { grid-column: 1 / -1; }

  /* M6 (F7) — hide the seven-node pipeline row + its echo canvas on phones; the bar meta
     ("Discovery · 2/7") carries phase state, and the demo loop keeps running underneath. */
  .appframe__pipeline { display: none; }
}

/* ============================================================================
   MOBILE-NATIVE PASS (N0–N6) — approved from the mobile-native investigation.
   All rules live inside <=600 and are appended LAST so the cascade wins over the
   earlier <=980/<=720 blocks. Base/desktop rules are never edited. Desktop (>=1024)
   never matches this query, so it is untouched to the pixel. No JS is changed —
   the thread re-measures phase left-edges on its own (CONNECT_INSET stays put).
   ============================================================================ */
@media (max-width: 600px) {

  /* N5 (removed) — the static three-radial wash that stood in for the mesh on phones is gone;
     the live aidesigner canvas now runs at every width. Base .bg-mesh rules govern all widths;
     the only mesh gate left is prefers-reduced-motion (see the base rule above). */

  /* N4 — Thinner nav pill (~66 -> ~56). Burger keeps its 44x44 floor (M3), so the
     pill can't collapse below the tap target. Brand mark eased to 20x25 for lightness
     (viewBox preserves aspect; does not drive pill height). */
  .nav { padding-top: 8px; }
  .nav__inner { padding-top: 6px; padding-bottom: 6px; }
  .nav .brand__mark { width: 20px; height: 20px; }

  /* N6a — Tighter vertical rhythm (68 -> 48). Declared BEFORE .hero so the hero's
     own shorthand padding (N0) wins for the hero's block-padding; every other
     .section picks up the 48px rhythm. */
  .section { padding-top: 48px; padding-bottom: 48px; }

  /* N0 — Rebalanced hero column: kill the vestigial content-x left inset (no thread
     line is drawn in the hero), even 24/24 gutters, left-aligned. leftRail's clamp
     (script.js:136) absorbs the shift (20 -> 16, bounded); no JS change. */
  .hero { padding: 32px 24px 44px; }

  /* N1 — Bigger headline so the hero leads the display-section titles again. Base
     line-height 1.01 / letter-spacing -0.04em persist; the <=720 max-width:100% +
     overflow-wrap:anywhere still guard "implementations." from overflowing. */
  .hero__title { font-size: clamp(2.3rem, 9.7vw, 2.75rem); }

  /* N2 — Scroll CTA reads secondary: smaller, muted, thinner border; min-height:44
     keeps the tap target. (Specificity 0,2,0 beats base .btn--lg / .btn--ghost.) */
  .hero__actions .btn--ghost {
    font-size: 0.88rem;
    padding: 0.72em 1.15em;
    min-height: 44px;
    color: var(--text-2);
    border-color: var(--line);
  }

  /* N6b — Demo fills the rebalanced column (width only; the appframe fixed-box
     height is untouched, so the demo loop keeps running unchanged). */
  .hero__demo { max-width: none; }

  /* N3 — Phases tightened. Name smaller (~24), number eased to ~26-28 to match, and
     the block gutter pulled in (72 -> 44) so content sits closer to the thread and
     the copy column widens (~208 -> ~296). The thread re-measures phase left-edges
     and follows automatically — CONNECT_INSET (the 22px node gap) is NOT changed. */
  .phase__name { font-size: clamp(1.5rem, 6.2vw, 1.8rem); }
  .phase__no { font-size: clamp(1.65rem, 7.2vw, 1.8rem); }
  .phases { padding-left: 44px; }
}

/* ============================================================================
   PRODUCT SHOWCASE — real product screens fanned as a hand of cards, on a LIGHT
   band. Hover a card: it lifts, dims, and captions the value it delivers.
   Fully namespaced (.showcase / .sc-*) and self-contained, so it never touches
   the rest of the (dark) site. Deck hover is driven by exclusive hit-zones in JS
   (initShowcase), so each card is individually selectable regardless of overlap.
   ============================================================================ */
.showcase {
  position: relative;
  padding: 84px clamp(20px, 4vw, 40px) 92px;
  background: radial-gradient(120% 90% at 15% 0%, #ffffff 0%, #eef1f6 45%, #e7ebf2 100%);
  color: #1b2432;
  overflow: hidden;                 /* the fanned outer cards never cause page x-scroll */
}
.showcase__head { text-align: center; max-width: 720px; margin: 0 auto; }
.showcase__eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #33456b; opacity: 0.8; margin: 0 0 14px; }
.showcase__title { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); line-height: 1.06; letter-spacing: -0.03em; color: #16202f; margin: 0; }
.showcase__title b { color: #33456b; font-weight: inherit; }
.showcase__sub { margin: 14px 0 0; color: #566072; font-size: 1.05rem; }

.sc-deck {
  --scw: 440px; --scar: 1.1; --sce: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative; width: 1640px; max-width: 100%;
  height: calc(var(--scw) / var(--scar) + 90px);
  margin: 14px auto 0;   /* enough air that the softened lift (-30px) never reaches the lede */
}
.sc-card {
  position: absolute; left: 50%; bottom: 26px; width: var(--scw); margin-left: calc(var(--scw) / -2);
  background: #fff; border: 1px solid rgba(24,34,58,0.22); border-radius: 15px; overflow: hidden;
  box-shadow: 0 22px 55px -26px rgba(20,30,50,0.42), 0 3px 10px rgba(20,30,50,0.12), 0 0 0 0.5px rgba(24,34,58,0.06);
  transition: transform 0.55s var(--sce), box-shadow 0.55s var(--sce), filter 0.4s var(--sce);
  transform-origin: 50% 135%; will-change: transform;
  transform: translateX(var(--scx)) translateY(var(--scy)) rotate(var(--scr));
}
.sc-shot { position: relative; }
.sc-card img { display: block; width: 100%; height: auto; background: #eef1f6; }
.sc-tag { position: absolute; top: 12px; left: 12px; z-index: 6; font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; color: #fff; background: rgba(20,28,44,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 5px 11px; border-radius: 8px; white-space: nowrap; opacity: 0; transition: opacity 0.35s var(--sce); }
.sc-cap { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 26px 28px;
  background: linear-gradient(to top, rgba(10,15,24,0.94) 0%, rgba(10,15,24,0.86) 26%, rgba(10,15,24,0.52) 55%, rgba(10,15,24,0.16) 82%, rgba(10,15,24,0) 100%), rgba(10,15,24,0.18);
  opacity: 0; transition: opacity 0.45s var(--sce); pointer-events: none; }
.sc-cap .sc-k { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: #bcccf5; margin: 0 0 10px; transform: translateY(10px); transition: transform 0.55s var(--sce) 0.04s; }   /* light periwinkle — reads on the dark caption overlay (navy was invisible) */
.sc-cap h3 { color: #fff; font-family: var(--display); font-weight: 600; font-size: 1.38rem; line-height: 1.26; letter-spacing: -0.005em; margin: 0; transform: translateY(12px); transition: transform 0.55s var(--sce) 0.09s; }
.sc-card.is-on .sc-tag { opacity: 1; }
.sc-card.is-on .sc-cap { opacity: 1; }
.sc-card.is-on .sc-cap .sc-k, .sc-card.is-on .sc-cap h3 { transform: translateY(0); }

.sc-card--0 { --scx: -520px; --scy: 46px; --scr: -9deg;   z-index: 1; }
.sc-card--1 { --scx: -260px; --scy: 15px; --scr: -4.5deg; z-index: 3; }
.sc-card--2 { --scx: 0px;    --scy: 0px;  --scr: 0deg;    z-index: 5; }
.sc-card--3 { --scx: 260px;  --scy: 15px; --scr: 4.5deg;  z-index: 4; }
.sc-card--4 { --scx: 520px;  --scy: 46px; --scr: 9deg;    z-index: 2; }
/* on activation the card lifts IN PLACE, straightens and scales — exactly like the prototype */
.sc-card.is-on { transform: translateX(var(--scx)) translateY(-30px) rotate(0deg) scale(1.04); z-index: 20; box-shadow: 0 40px 80px -28px rgba(20,30,50,0.45), 0 5px 15px rgba(20,30,50,0.13); }   /* softened ~30%: the lift must never reach the hero lede */
.sc-deck.has-on .sc-card:not(.is-on) { filter: brightness(0.93) saturate(0.9); }

.sc-hit { position: absolute; top: 0; bottom: 0; width: 20%; z-index: 40; cursor: pointer; }
.sc-hit--0 { left: 0; } .sc-hit--1 { left: 20%; } .sc-hit--2 { left: 40%; } .sc-hit--3 { left: 60%; } .sc-hit--4 { left: 80%; }

@media (max-width: 1660px) { .sc-deck { --scw: 400px; } .sc-card--0{--scx:-458px} .sc-card--1{--scx:-229px} .sc-card--3{--scx:229px} .sc-card--4{--scx:458px} }
@media (max-width: 1200px) { .sc-deck { --scw: 300px; } .sc-card--0{--scx:-360px} .sc-card--1{--scx:-180px} .sc-card--3{--scx:180px} .sc-card--4{--scx:360px} }
@media (max-width: 760px)  { .showcase { padding: 58px 16px 64px; } .sc-deck { --scw: 250px; height: calc(var(--scw) / var(--scar) + 108px); } .sc-card--0{--scx:-150px;--scy:44px} .sc-card--1{--scx:-76px;--scy:14px} .sc-card--3{--scx:76px;--scy:14px} .sc-card--4{--scx:150px;--scy:44px} .sc-cap h3 { font-size: 1.05rem; } }

/* ============================================================================
   LIGHT-THEME HERO — headline up top and centred (showcase style), the dark Brain
   demo parked, and the product-deck pulled up right beneath the headline as the
   hero visual (its old "The actual platform" heading removed). Sits on the light
   cloud atmosphere.
   ============================================================================ */
.hero {
  display: block;
  max-width: 1360px; min-height: 0;
  margin: 0 auto;
  padding: 4px clamp(20px, 4vw, 40px) 0;
  text-align: center;
}
.hero__lead { display: block; text-align: center; max-width: 940px; margin: 0 auto; }
/* wide headline, ONE phrase per line via the <br>: line 1 "…copilot,", line 2 the navy accent.
   Full-width block (940px lead) so the accent never gets squeezed onto a 3rd line. */
.hero__title { text-align: center; max-width: none; width: auto; font-weight: 700; font-size: clamp(2.3rem, 1.5rem + 2.7vw, 3.7rem); line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 10px; }
.hero__accent { color: var(--signal); font-weight: 700; }   /* navy, heavier */
.hero__lede { max-width: 60ch; margin: 0 auto; text-align: center; }
.hero__note { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--text-2); margin: 13px 0 0; text-align: center; }
.hero__note b { color: var(--signal); font-weight: 600; }
.kicker { justify-content: center; margin-bottom: 12px; }
.hero__actions { justify-content: center; margin: 26px 0 4px; }   /* the one conversion CTA above the fold */
.hero__demo { display: none; }

/* the deck IS the hero visual now: transparent (clouds show through), pulled up right under the headline.
   overflow visible so the fanned/lifted cards are never clipped (the page's body overflow-x:hidden
   still prevents any horizontal scroll). */
/* full-bleed: break out of the site's --maxw container so the fanned deck spans the viewport
   (otherwise the section's max-width clips the outer cards). */
.showcase { background: transparent; padding: 0 clamp(14px, 2.5vw, 28px) 34px; overflow-x: clip; overflow-y: visible; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* ============================================================================
   DARK END-CAP — the final CTA inverts to deep ink navy. One dark band frames
   the whole light page (and the ONE lime button in the site lives here, where
   lime actually reads). Everything scoped under .cta so nothing else shifts.
   ============================================================================ */
.cta.section--panel {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(85, 96, 207, 0.17), transparent 60%),
    linear-gradient(180deg, #253355 0%, #1a2438 100%);
  border-color: rgba(255, 255, 255, 0.08);
}
.cta .eyebrow { color: #97a6f2; }
.cta__title { color: #f4f6fa; }
.cta__sub { color: rgba(238, 241, 246, 0.72); }
.cta .field__label { color: rgba(238, 241, 246, 0.78); }
.cta .field__label .req { color: #97a6f2; }
.cta .field__label .opt { color: rgba(238, 241, 246, 0.45); }
.cta .field input, .cta .field select, .cta .field textarea {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: #f4f6fa; box-shadow: none;
}
.cta .field input::placeholder { color: rgba(238, 241, 246, 0.38); }
.cta .field input:focus, .cta .field select:focus, .cta .field textarea:focus {
  border-color: #97a6f2; box-shadow: 0 0 0 3px rgba(120, 138, 240, 0.22);
}
.cta .consent-check__text { color: rgba(238, 241, 246, 0.66); }
.cta .consent-check__text a { color: #c3cdf7; }
.cta .lead-form__fine { color: rgba(238, 241, 246, 0.5); }
.cta .lead-form__fine a { color: #c3cdf7; }
.cta .lead-form__done { color: #d8ff74; }
/* the one lime button: brand pop on the one dark surface */
.cta .btn--primary { background: var(--lime); color: var(--lime-ink); box-shadow: none; }
.cta .btn--primary:hover { background: var(--lime-2); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(198, 249, 78, 0.45); }

/* FAQ joins the centered rhythm of every other section (was the lone left-aligned head) */
.faq .section-head { text-align: center; max-width: 64ch; margin-left: auto; margin-right: auto; }
.faq-list { margin-left: auto; margin-right: auto; }

/* deck intro state: the centre card shows its caption at rest — but does NOT lift
   (the lift would rise into the hero lede). Real hover replaces this immediately. */
.sc-deck.sc-intro .sc-card.is-on { transform: translateX(var(--scx)) translateY(var(--scy)) rotate(var(--scr)) scale(1); box-shadow: 0 22px 55px -26px rgba(20,30,50,0.42), 0 3px 10px rgba(20,30,50,0.12); }
.sc-deck.sc-intro .sc-card:not(.is-on) { filter: none; }   /* no dimming until the user actually engages */

/* ============================================================================
   SPACING TRUE-UP (audit round 2)
   ============================================================================ */
/* The thread terminates at Support (last phase). Sections after it carried the
   110px thread-lane left inset for no reason — their "centered" content sat
   55px right of true viewport centre (the FAQ head made it obvious). */
.outcomes.section, .why.section, .builtfor.section, .partners.section,
.pricing.section, .faq.section, .cta.section {
  padding-left: var(--pad-x);
}
/* consent row was glued to the textarea above it — give the legal moment air */
.field--consent { display: block; margin-top: 14px; }

/* builtfor proof strip: the code-backed numbers, indigo-lit, breathing room from body + chips */
.stat-row--proof { margin: 44px auto 50px; }
.stat-row--proof .stat__num { color: var(--accent); }
.stat-row--proof .stat__label { color: var(--text-2); }

/* ============================================================================
   CAPABILITY GRID — six demo-backed features, text-first (no icons per the
   design bar). Static informational cards: no hover motion (they're not links).
   ============================================================================ */
.caps.section { padding-left: var(--pad-x); }   /* post-thread: symmetric */
.caps__head { text-align: center; max-width: 64ch; margin-left: auto; margin-right: auto; }
.caps__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 1120px; margin: 0 auto;
}
.cap {
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  padding: 22px 24px 24px;
  box-shadow: 0 1px 3px rgba(20,30,50,0.05), 0 14px 30px -24px rgba(20,30,50,0.16);
}
.cap__title { font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.015em; color: var(--text); margin: 0 0 8px; }
.cap kbd { font-family: var(--mono); font-size: 0.82em; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px 1px; white-space: nowrap; }
.cap__body { color: var(--text-2); font-size: 0.95rem; line-height: 1.5; margin: 0; }
@media (max-width: 1100px) { .caps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .caps__grid { grid-template-columns: 1fr; max-width: 480px; } }


/* nav CTA: slicker capsule — tighter pill inside the glass bar */
.nav__actions .btn--primary { padding: 0.52em 1.15em; font-size: 0.9rem; border-radius: 999px; }


/* ============================================================================
   NAV OVER THE DARK END-CAP — the glass shows dark-through-fog there, so the
   bar flips to light text + a dark-tinted fog while it overlaps #cta
   (toggled by onScrollNav). Same capsule, same blur — only the ink inverts.
   ============================================================================ */
.nav.nav--on-dark .nav__inner {
  background:
    linear-gradient(180deg, rgba(30, 40, 66, 0.55), rgba(22, 30, 50, 0.35) 70%),
    rgba(16, 23, 38, 0.25);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 36px -20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.nav.nav--on-dark .brand { color: #f4f6fa; }
.nav.nav--on-dark .brand__iq { color: #a9b6f5; }
.nav.nav--on-dark .brand__up { stroke: #a9b6f5; }
.nav.nav--on-dark .nav__links a { color: rgba(238, 241, 246, 0.72); }
.nav.nav--on-dark .nav__links a:hover { color: #ffffff; }
.nav.nav--on-dark .link-login { color: rgba(238, 241, 246, 0.72); }
.nav.nav--on-dark .link-login:hover { color: #ffffff; }
.nav.nav--on-dark .nav__burger span { background: #f4f6fa; }
/* the CTA button inverts to white-on-dark — unmissable against the navy band */
.nav.nav--on-dark .btn--primary { background: #f4f6fa; color: #16202f; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
.nav.nav--on-dark .btn--primary:hover { background: #ffffff; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.5); }

/* problem section: the three failure modes (pain trio) + closing line */
.caps__grid--pains { max-width: 1020px; margin-top: 8px; }
.caps__grid--pains .cap__title { color: var(--conflict); font-size: 1.02rem; }
.problem__close { text-align: center; font-family: var(--display); font-weight: 600; font-size: 1.18rem; letter-spacing: -0.015em; color: var(--text); margin: 34px auto 0; }

/* pain-card source link: quiet, credible — not a loud CTA */
.caps__grid--pains .cap__body a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.caps__grid--pains .cap__body a:hover { color: var(--accent); }