/* ============================================================
   NEBOR BRAND SYSTEM · replica of live nebor.ai (Framer)
   Loaded AFTER system.css/workflow.css · overrides page chrome.
   Tokens extracted from live-site CSS inspection (2026-07-02).
   ============================================================ */

.brand {
  --bg: #FBF8F6;
  --ink: #172A2D;
  --muted: #647072;
  --lav: #E0C4FC;
  --lav-pale: #F1E4FE;
  --purple: #A27DF8;
  --amber: #FAC064;
  --amber-text: #E1962E;
  --card-border: rgba(23, 42, 45, 0.08);

  background: var(--bg);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

.brand ::selection { background: var(--lav); color: var(--ink); }

/* ---------- layout helpers ---------- */
.b-container { max-width: 1256px; margin: 0 auto; padding: 0 24px; }
.b-container-wide { max-width: 1420px; margin: 0 auto; padding: 0 24px; }
.b-section { padding: 72px 0; }
.b-section-sm { padding: 40px 0; }

/* ---------- signature gradient-offset treatment ----------
   wrapper carries the lavender→amber gradient; inner sits on top,
   2px ring at top/sides + 6px amber lip at the bottom. */
.bbtn {
  display: inline-block;
  background: linear-gradient(180deg, var(--lav) 0%, var(--amber) 100%);
  border-radius: 10px;
  padding: 2px 2px 6px;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease;
}
/* hover · the WHOLE button turns lavender (wrapper + inner), text white, chevron slides in */
.bbtn { transition: background 0.22s ease; }
.bbtn:hover {
  background: var(--lav);
}
.bbtn:hover > a,
.bbtn:hover > button,
.bbtn:hover > span {
  background: var(--lav);
  color: #FFFFFF;
}
.bbtn > a, .bbtn > button, .bbtn > span { transition: background 0.22s ease, color 0.22s ease; }
.bbtn > a::after,
.bbtn > button::after,
.bbtn > span::after {
  content: '›';
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 15px;
  transition: max-width 0.22s ease, opacity 0.22s ease, margin-left 0.22s ease;
  margin-left: 0;
}
.bbtn:hover > a::after,
.bbtn:hover > button::after,
.bbtn:hover > span::after {
  max-width: 12px;
  opacity: 1;
  margin-left: 2px;
}
.bbtn > a,
.bbtn > button,
.bbtn > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.bbtn.light > a,
.bbtn.light > button,
.bbtn.light > span {
  background: #FFFFFF;
  color: var(--ink);
}
/* light variant hover · must out-rank the white base above */
.bbtn.light:hover > a,
.bbtn.light:hover > button,
.bbtn.light:hover > span {
  background: var(--lav);
  color: #FFFFFF;
}

/* ---------- typography ---------- */
.b-eyebrow {
  font-family: "Noto Serif", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--amber-text);
}
.b-eyebrow.lavender { color: color-mix(in srgb, var(--purple) 55%, var(--lav)); }

.b-h1 {
  font-size: clamp(44px, 4.9vw, 70px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.b-h2 {
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.b-h1 .serif,
.b-h2 .serif {
  font-family: "Noto Serif", serif;
  font-style: italic;
  font-weight: 500;
  color: var(--lav);
}
.b-lede {
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* ============================================================
   NAV · floating white pill
   ============================================================ */
.b-nav-wrap {
  position: sticky;
  top: 12px;
  z-index: 100;
  padding: 12px 20px 0;
}
.b-nav {
  max-width: 1256px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 1.5px 1.5px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 12px 24px;
  min-height: 70px;
}
.b-nav .brand-logo { display: flex; align-items: center; }
/* mobile-only chrome · completely absent on desktop */
.b-nav-burger, .b-nav-menu { display: none; }
.b-nav .brand-logo img { height: 30px; display: block; }
.b-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.b-nav { position: sticky; position: relative; }
.b-nav-links a {
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.b-nav-links a .chev { font-size: 11px; color: var(--muted); }
.b-nav-links a:hover { opacity: 0.7; }

/* ============================================================
   HERO
   ============================================================ */
.b-hero {
  position: relative;
  text-align: center;
  padding: 84px 0 32px;
  overflow: visible;
}
.b-hero .b-eyebrow { display: block; margin-bottom: 22px; }
.b-hero .b-lede { max-width: 620px; margin: 26px auto 0; }
.b-hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}

/* nebor N-mark chevron decorations · big, cut off at page edges, recur through the page */
.n-mark {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
/* real site PNGs · geometry measured from the live homepage AT REST
   (page-absolute: amber at -63, purple at 470 · hero starts ~82px down) */
.n-mark.hero-tl { top: -175px; left: -10px; width: 260px; }
.n-mark.hero-r { right: -26px; top: 388px; width: 421px; }
.n-mark.problem-l { left: -70px; top: 26%; width: 260px; transform: scaleX(-1); opacity: 0.95; }
.n-mark.work-r { right: -110px; top: -50px; width: 280px; transform: rotate(140deg); opacity: 0.9; }

/* The marks bleed past the page edge on purpose. Nothing was clipping that bleed,
   so on narrow screens they pushed the document wider than the viewport and the
   whole page scrolled sideways. Clip the horizontal bleed at the section that owns
   them. `clip` rather than `hidden`: it leaves overflow-y visible, so card shadows
   and the hover lift still spill vertically, and it makes no scroll container, so
   the sticky nav keeps working. */
.b-hero, .b-section, .b-section-sm, .section { overflow-x: clip; }

/* layered composition · pale ghost behind + real PNG + contrasting outline ring on top */
.n-wrap { display: block; }
.n-wrap .nm-main {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
}
.n-wrap .nm-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
}

/* hero cards reuse .hero-elements-wrap from system.css — give breathing room */
.brand .hero-elements-wrap { margin-top: 56px; }

/* === Hero cards · BOLD brand recolor (scoped to the 3 hero-el cards only, so the
   approved sage-green sections below stay exactly as they are) ===
   The SVGs reference these custom props, so overriding them here flips the whole
   hero trio to the lavender + amber + ink brand system in one place. */
.brand .hero-el {
  --page-accent:        #E1962E;   /* amber · the single accent */
  --page-accent-strong: #B26F14;   /* deep amber-brown · label text */
  --page-accent-soft:   #FDF1DE;   /* warm amber wash · the hero moment */
  --card-header:        #172A2D;   /* ink · structural dark */
  border: 1.5px solid rgba(23,42,45,0.16);
  box-shadow: 0 16px 38px -22px rgba(23,42,45,0.22);
}
.brand .hero-el:hover {
  border-color: rgba(23,42,45,0.28);
  box-shadow: 0 30px 60px -28px rgba(23,42,45,0.3);
}
/* clean dashboard look · warm neutral canvas so the WHITE borders on every
   element read as crisp cut-out layers, and one amber moment carries the color */
.brand .hero-el .hero-el-canvas::after { display: none; }
.brand .hero-el .hero-el-canvas { background: #EFEAE3; }
/* hover reveal · solid warm panel (no fog over the strip) + room for longer copy */
.brand .hero-el .hero-el-content {
  background: linear-gradient(180deg, rgba(239,234,227,0) 0%, #F4F0EA 34%, #F7F4EF 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.brand .hero-el:hover .hero-el-body { max-height: 170px; }

/* card tag pills under hero cards → brand lavender pill · sentence case like Framer */
.brand .hero-el-tag {
  background: #FBF3E4;
  border: 1.5px solid rgba(23,42,45,0.18);   /* same border style as the cards */
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.brand .hero-el-tag::before { background: #7FA8C9; }

/* "See the entire flywheel" uses the standard .bbtn treatment (dark inner + gradient ring) */

/* ============================================================
   LOGO MARQUEE · client wordmarks, 2 static rows w/ edge fade
   ============================================================ */
.b-marquee { text-align: center; }
.b-marquee .b-caption {
  font-size: 15px;
  color: rgba(23, 42, 45, 0.45);
  margin-bottom: 28px;
}
.b-logo-rows {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%);
}
/* two rows float in opposite directions · content duplicated 2× for a seamless loop */
.b-logo-row {
  display: flex;
  width: max-content;
  margin-bottom: 16px;
  animation: b-marquee-l 36s linear infinite;
}
.b-logo-set { display: flex; gap: 10px; padding-right: 10px; }
.b-logo-row.rev { animation: b-marquee-r 42s linear infinite; }
.b-logo-rows:hover .b-logo-row { animation-play-state: paused; }
@keyframes b-marquee-l {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes b-marquee-r {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
/* measured from live site: 180×60 cell, cream bg, 1px #E5E5E5 border, radius 20, logo 105×24 */
.b-logo-cell {
  width: 180px;
  height: 60px;
  flex: 0 0 180px;
  background: var(--bg);
  border: 1px solid #E5E5E5;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.b-logo-cell img { height: 24px; width: auto; display: block; }
.lm-serif { font-family: "Noto Serif", serif; font-weight: 600; }
.lm-italic { font-style: italic; }
.lm-mono { letter-spacing: 0.14em; font-weight: 800; font-style: italic; }
.lm-arrow { font-size: 13px; margin-left: 2px; }
/* [c] chainels · black rounded square with white c */
.lm-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 5px;
  background: rgba(23, 42, 45, 0.9);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
}
/* Groeileaders mark · black square with notch */
.lm-glmark {
  width: 15px; height: 15px;
  display: inline-block;
  background: rgba(23, 42, 45, 0.88);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 62%, 0 100%);
}
/* THE BØRGING COMPANY · stacked wordmark */
.lm-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.lm-stack .top { font-size: 7px; font-weight: 700; letter-spacing: 0.22em; }
.lm-stack .mid { font-size: 14px; font-weight: 800; letter-spacing: 0.1em; }
.lm-stack .bot { font-size: 6px; font-weight: 600; letter-spacing: 0.3em; }
/* My Way · script-ish outline look */
.lm-script {
  font-family: "Noto Serif", serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ============================================================
   PROBLEM · two comparison cards + "we wire" chip
   ============================================================ */
.b-problem-head { text-align: center; margin-bottom: 52px; }
.b-problem-head .b-eyebrow { display: block; margin-bottom: 14px; }

.b-compare {
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  align-items: center;
}
.b-compare-card {
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 34px 34px 38px;
  min-height: 360px;
}
.b-compare-card .b-eyebrow { display: block; font-size: 15px; margin-bottom: 16px; }
.b-compare-card.bad .b-eyebrow { color: rgba(23, 42, 45, 0.35); }
.b-compare-card.good .b-eyebrow { color: color-mix(in srgb, var(--purple) 45%, var(--lav)); }
.b-compare-card h4 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 22px;
  color: var(--ink);
}
.b-compare-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
  padding: 9px 0;
}
.b-compare-row .ic { font-size: 13px; flex: 0 0 auto; }
.b-compare-card.bad .ic { color: #E5484D; }
.b-compare-card.good .ic { color: #2E9E5B; }
.b-wire-chip {
  justify-self: center;
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--amber);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

/* ============================================================
   METRICS · 4 white cards
   ============================================================ */
.b-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.b-metric {
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 26px 30px 22px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.b-metric .tile {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.b-metric .tile svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* tile tints per card · lavender, amber, gray, gray (matches the site) */
.b-metric:nth-child(1) .tile { background: var(--lav-pale); color: var(--purple); }
.b-metric:nth-child(2) .tile { background: color-mix(in srgb, var(--amber) 26%, white); color: var(--amber-text); }
.b-metric:nth-child(3) .tile,
.b-metric:nth-child(4) .tile { background: rgba(23, 42, 45, 0.06); color: rgba(23, 42, 45, 0.7); }
.b-metric .num {
  font-size: 27px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.b-metric .lbl {
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
  flex: 1;
}
.b-metric .tile { margin-bottom: 22px; }
.b-metric .co {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(23, 42, 45, 0.5);
}
.b-metric .co .lm-mono { font-size: 11.5px; letter-spacing: 0.14em; font-weight: 800; }
.b-metric .co .lm-gl { font-weight: 700; font-size: 12.5px; }
.b-metric .co .lm-glmark {
  width: 13px; height: 13px;
  display: inline-block;
  background: rgba(23, 42, 45, 0.55);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 62%, 0 100%);
}
.b-metric .co .lm-arrow { font-size: 10px; }

/* ============================================================
   CAPABILITIES · brand-light restyle of .re-console
   ============================================================ */
.b-caps-head { margin-bottom: 40px; }
.b-caps-head .b-eyebrow { display: block; margin-bottom: 12px; }

/* Same language as the hero: warm neutral panel, white cards, ink structure,
   amber the single accent · no purple anywhere. */
.brand .re-console {
  --tier-accent: #B26F14;          /* amber-brown · emphasis states */
  --tier-accent-2: #E1962E;
  --tier-glow: rgba(225,150,46,0.25);
  background: #EFEAE3;
  border: 1.5px solid rgba(23,42,45,0.14);
  border-radius: 24px;
  box-shadow: 0 16px 38px -22px rgba(23,42,45,0.22);
  backdrop-filter: none;
}
/* rail */
.brand .rec-rail-btn { color: var(--ink); }
.brand .rec-rail-btn:hover { background: #FCFAF7; color: var(--ink); }
.brand .rec-rail-btn.active,
.brand .rec-rail .active {
  background: #172A2D;
  border-color: #172A2D;
  color: #FFFFFF;
  box-shadow: 0 10px 22px -10px rgba(23,42,45,0.45);
}
.brand .rec-rail-btn.active .idx { color: rgba(255,255,255,0.65); font-weight: 600; }
.brand .rec-rail-btn.active .lbl { color: #FFFFFF; }
.brand .rec-rail-btn .tag { background: #E7E0D5; color: rgba(23,42,45,0.55); }
.brand .rec-rail-btn.active .tag { background: #FAC064; color: #172A2D; font-weight: 700; }
/* stage + chrome */
.brand .rec-stage {
  background: #FCFAF7;
  border: 1.5px solid rgba(23,42,45,0.12);
  box-shadow: 0 16px 40px -18px rgba(23,42,45,0.2);
}
.brand .rec-chrome { background: #F3EEE7; border-bottom: 1px solid rgba(23,42,45,0.08); }
/* keep the live pulse green (status, matches hero dots) */
.brand .rec-live { color: #2E7D46; }
.brand .rec-pulse { background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,0.22); }
/* bars: ink-neutral by default, amber only for the intent money-moment */
.brand .rec-bar .trk i { background: linear-gradient(90deg, #2C3B3E, #62777C); box-shadow: none; }
.brand .rec-bar .trk.warn i {
  background: linear-gradient(90deg, #E1962E, #FAC064);
  box-shadow: 0 0 12px rgba(225,150,46,0.3);
  opacity: 1;
}
/* tool-icon tiles get the hero's white-border chip look */
.brand .rec-step-i { background: #FCFAF7; border: 1.5px solid #FFFFFF; box-shadow: 0 2px 4px rgba(23,42,45,0.06); }

/* ============================================================
   PROCESS · 4 simple step cards
   ============================================================ */
.b-process-head { margin-bottom: 40px; max-width: 720px; }
.b-process-head .b-eyebrow { display: block; margin-bottom: 12px; }
.b-process-head .b-lede { margin-top: 14px; }

.b-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch; /* all four cards identical height */
}
.b-step {
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 24px 28px 26px;
}
.b-step .numtile {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 16px;
}
.b-step:nth-child(1) .numtile { background: color-mix(in srgb, var(--amber) 38%, white); color: var(--amber-text); }
.b-step:nth-child(2) .numtile { background: var(--lav-pale); color: var(--purple); }
.b-step:nth-child(3) .numtile { background: color-mix(in srgb, var(--amber) 24%, white); color: color-mix(in srgb, var(--amber-text) 60%, var(--muted)); }
.b-step:nth-child(4) .numtile { background: color-mix(in srgb, var(--purple) 26%, white); color: var(--purple); }
.b-step .when {
  display: block;
  font-size: 13.5px;
  color: rgba(23, 42, 45, 0.5);
  margin-bottom: 8px;
}
.b-step h4 { font-size: 22px; font-weight: 600; margin: 0 0 10px; color: var(--ink); }
.b-step p { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 0; }

/* fold-open on hover · OVERLAY dropdown, does not push the page.
   Only the hovered card opens; siblings stay put. */
.b-step { position: relative; }
.b-step:hover {
  border-radius: 18px 18px 0 0;
  border-bottom-color: transparent;
  z-index: 20;
}
.b-step .fold {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-top: none;
  border-radius: 0 0 18px 18px;
  padding: 0 26px 26px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  box-shadow: 0 26px 48px -24px rgba(23, 42, 45, 0.25);
  z-index: 19;
}
.b-step:hover .fold,
.b-step:focus-within .fold {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.b-step .fold > div { overflow: visible; }
.b-fold-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 14px 0 6px;
}
.b-fold-label.see { color: var(--purple); }
.b-fold-label.need { color: var(--amber-text); }
.b-step .fold ul {
  margin: 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.b-step .fold li {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* ============================================================
   LIVING WORKFLOW · warm gradient shell around existing widget
   ============================================================ */
.b-workflow-shell {
  background: linear-gradient(180deg, #FDF8EF 0%, #F8DCA9 100%);
  border-radius: 28px;
  padding: 48px 48px 56px;
}
.b-workflow-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 36px;
}
.b-workflow-head .b-eyebrow { display: block; margin-bottom: 12px; }
.b-workflow-head .b-lede { padding-top: 34px; }

/* ============================================================
   LIVING WORKFLOW · clickable tool popover
   ============================================================ */
.wf-clickable { cursor: pointer; }
/* Dark ink card, compact: name · one-line desc · divider ·
   "In this workflow:" in amber · Learn more button. Shows on hover. */
.wf-tool-pop {
  position: absolute;
  z-index: 500;
  width: 300px;
  background: #172A2D;
  border-radius: 18px;
  box-shadow: 0 24px 48px -18px rgba(23, 42, 45, 0.45);
  padding: 18px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  animation: wtp-in 0.15s ease;
}
@keyframes wtp-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.wf-tool-pop .wtp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wf-tool-pop .wtp-mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wf-tool-pop .wtp-name { font-size: 16.5px; font-weight: 700; color: #FFFFFF; }
.wf-tool-pop .wtp-desc { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.66); margin: 0 0 14px; }
.wf-tool-pop .wtp-div { border-top: 1px solid rgba(255,255,255,0.14); margin: 0 0 12px; }
.wf-tool-pop .wtp-role { font-size: 13.5px; line-height: 1.5; color: #FFFFFF; margin: 0 0 16px; }
.wf-tool-pop .wtp-role b { color: #FAC064; font-weight: 700; }
.wf-tool-pop .wtp-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.30);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 12px;
  padding: 10px 14px;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.wf-tool-pop .wtp-more:hover { background: #FAC064; border-color: #FAC064; color: #172A2D; }
.wf-tool-pop .wtp-arrow { transition: transform 0.18s ease; }
.wf-tool-pop .wtp-more:hover .wtp-arrow { transform: translateX(2px); }

/* ============================================================
   STACK · 5×2 tool grid
   ============================================================ */
.b-stack-head { margin-bottom: 40px; max-width: 720px; }
.b-stack-head .b-eyebrow { display: block; margin-bottom: 12px; }
.b-stack-head .b-lede { margin-top: 14px; }

.b-tools {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: start; /* only the hovered card grows */
}
.b-tool {
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 205px;
  text-decoration: none;
}
.b-tool img { width: 36px; height: 36px; border-radius: 8px; margin-bottom: 20px; }
.b-tool .name { font-size: 17px; font-weight: 600; color: var(--ink); }
.b-tool .cat { font-size: 15px; color: var(--muted); flex: 1; }
/* fold-open on hover · OVERLAY dropdown over the row below, only the hovered card */
.b-tool { position: relative; transition: border-color 0.25s ease; }
.b-tool:hover {
  border-color: color-mix(in srgb, var(--lav) 70%, var(--card-border));
  border-radius: 16px 16px 0 0;
  border-bottom-color: transparent;
  z-index: 20;
}
.b-tool .fold {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  background: #FFFFFF;
  border: 1px solid color-mix(in srgb, var(--lav) 70%, var(--card-border));
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 0 22px 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  box-shadow: 0 24px 44px -22px rgba(23, 42, 45, 0.22);
  z-index: 19;
}
.b-tool:hover .fold {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.b-tool .fold > div { overflow: visible; }
.b-tool .desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  display: block;
}
.b-tool .more {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  padding-top: 18px;
  /* the arrow was dropping onto its own line in narrow columns */
  white-space: nowrap;
}
.b-tool:hover .more { color: var(--ink); }

/* ============================================================
   TESTIMONIAL · gradient-framed carousel replica
   ============================================================ */
.b-testi-head { text-align: center; margin-bottom: 36px; }
.b-testi-head .b-h2 { margin-bottom: 8px; }
.b-testi-head .sub { font-size: 15px; color: var(--muted); }

.b-testi-frame {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  background: linear-gradient(179.56deg, var(--lav) 0%, rgba(250, 192, 100, 0.8) 100%);
  border-radius: 28px;
  padding: 10px;
}
.b-testi-card {
  background: #FFFFFF;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 36px;
  padding: 40px 44px;
  align-items: center;
}
.b-testi-visual {
  position: relative;
  height: 250px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.b-testi-visual .tv-shape {
  position: absolute;
  left: 8%;
  bottom: 0;
  width: 210px;
  pointer-events: none;
}
.b-testi-visual .tv-photo {
  position: relative;
  z-index: 1;
  height: 235px;
  object-fit: contain;
}
/* slide fade */
.b-testi-card { transition: opacity 0.35s ease; }
.b-testi-card.fading { opacity: 0; }
.b-testi-arrow:hover span { background: var(--lav); }
.b-testi-logo { cursor: pointer; transition: box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease; }
.b-testi-visual .avatar {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--lav-pale);
  color: var(--purple);
  font-size: 36px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #FFFFFF;
  box-shadow: 0 10px 24px rgba(23, 42, 45, 0.12);
}
.b-stars { color: var(--amber); font-size: 22px; letter-spacing: 4px; margin-bottom: 14px; }
.b-quote { font-size: 16.5px; line-height: 1.5; color: var(--ink); margin: 0 0 16px; }
.b-testi-metric { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 18px; }
.b-testi-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.b-testi-role { font-size: 13.5px; color: var(--muted); margin-top: 2px; }

.b-testi-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: linear-gradient(180deg, var(--lav) 0%, var(--amber) 100%);
  border-radius: 12px;
  padding: 2px 2px 5px;
  border: none;
  cursor: pointer;
}
.b-testi-arrow span {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 10px;
  font-size: 16px;
  color: var(--ink);
}
.b-testi-arrow.prev { left: -22px; }
.b-testi-arrow.next { right: -22px; }

.b-testi-logos {
  display: flex;
  gap: 10px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.b-testi-logos::-webkit-scrollbar { display: none; }
.b-testi-logo {
  flex: 0 0 186px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #FAF7F3;
  color: rgba(23, 42, 45, 0.5);
  font-weight: 700;
  font-size: 15px;
}
.b-testi-logo img { max-width: 130px; object-fit: contain; }
.b-testi-logo.active {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1.5px var(--lav), 0 3px 0 var(--amber);
  color: color-mix(in srgb, var(--purple) 60%, var(--lav));
}

/* ============================================================
   FAQ · brand accordions
   ============================================================ */
.b-faq-head { text-align: center; margin-bottom: 36px; }
.b-faq-head .b-h2 { margin-bottom: 8px; }
.b-faq-head .sub { font-size: 15px; color: var(--muted); }

.b-faq { max-width: 690px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.b-faq details {
  background: #FFFFFF;
  border-radius: 26px;
  border: 1.5px solid color-mix(in srgb, var(--lav) 55%, white);
}
.b-faq details[open] {
  border: 1.5px solid var(--lav);
  box-shadow: 0 5px 0 -1px var(--amber);
  border-radius: 22px;
}
.b-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 24px;
  font-size: 15.5px;
  color: color-mix(in srgb, var(--ink) 75%, var(--muted));
  font-weight: 500;
}
.b-faq summary::-webkit-details-marker { display: none; }
.b-faq summary .tg { font-size: 18px; color: var(--muted); flex: 0 0 auto; }
.b-faq details[open] summary { border-bottom: 1px solid rgba(23, 42, 45, 0.07); }
.b-faq details[open] summary .tg-plus { display: none; }
.b-faq details:not([open]) summary .tg-minus { display: none; }
.b-faq .ans {
  padding: 14px 24px 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* mini CTA under FAQ */
.b-mini-cta { text-align: center; padding: 56px 0 8px; }
.b-mini-cta h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.b-mini-cta p { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 460px; margin: 0 auto 24px; }

/* ============================================================
   FOOTER
   ============================================================ */
.b-footer {
  background: #FFFFFF;
  border-top: 1px solid rgba(23, 42, 45, 0.05);
  margin-top: 64px;
  padding: 72px 0 36px;
}
.b-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr) minmax(0, 0.6fr);
  gap: 48px;
}
.b-footer h2 {
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 340px;
}
.b-footer .sub { font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 280px; margin-bottom: 26px; }
.b-footer-ctas { display: flex; gap: 12px; }
.b-footer-col { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.b-footer-col a {
  font-size: 14.5px;
  color: color-mix(in srgb, var(--ink) 80%, var(--muted));
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.b-footer-col a:hover { opacity: 0.7; }
.b-footer-col .li-ic {
  width: 16px; height: 16px;
  border-radius: 3px;
  background: var(--ink);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.b-footer-bottom {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(23, 42, 45, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.b-footer-bottom .flogo { height: 34px; }
.b-footer-bottom .copy { font-size: 12.5px; color: rgba(23, 42, 45, 0.4); }
.b-footer-social { display: flex; gap: 18px; }
.b-footer-social a { color: rgba(23, 42, 45, 0.4); font-size: 15px; text-decoration: none; }
.b-footer-social a:hover { color: var(--ink); }
.b-footer-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .b-tools { grid-template-columns: repeat(3, 1fr); }
  .b-metrics, .b-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .b-nav-links { display: none; }
  .b-compare { grid-template-columns: 1fr; gap: 14px; }
  .b-wire-chip { justify-self: center; }
  .b-workflow-head { grid-template-columns: 1fr; gap: 16px; }
  .b-workflow-head .b-lede { padding-top: 0; }
  .b-workflow-shell { padding: 24px 18px 28px; }
  .b-testi-card { grid-template-columns: 1fr; padding: 28px; }
  .b-testi-visual { height: 160px; }
  .b-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .b-tools { grid-template-columns: repeat(2, 1fr); }
  .b-metrics, .b-steps { grid-template-columns: 1fr; }
  /* logo, copyright and socials sat on one row and ran off the edge on small
     phones. Let them stack and centre instead. */
  .b-footer-bottom { flex-wrap: wrap; justify-content: center; gap: 18px; text-align: center; }
  .b-footer-social { justify-content: center; }

  /* The headline clamp floor was 44px, a desktop number, so on a phone the hero
     title stayed huge and broke into ragged lines. Scale it with the viewport. */
  .b-h1 { font-size: clamp(30px, 8.2vw, 44px); line-height: 1.06; }
  /* The hand-placed line breaks are tuned to the desktop measure and fight the
     narrow one, so let the words flow and wrap on their own. */
  .b-h1 br { display: none; }

  /* The real site collapses the header to logo + a bordered hamburger, so this
     does the same: the call button moves into the menu, and the burger wears the
     site's treatment, white face, lavender ring, amber offset underneath. */
  .b-nav { padding: 10px 12px 10px 18px; gap: 12px; min-height: 62px; }
  .b-nav .brand-logo img { height: 28px; }
  .b-nav .bbtn { display: none; }
  .b-nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 52px; height: 46px; padding: 0 14px;
    background: #FFFFFF;
    border: 1.5px solid #C9B8F1;
    border-radius: 14px;
    box-shadow: 3px 3.5px 0 0 #EBB765;
    cursor: pointer;
  }
  .b-nav-burger span {
    display: block; height: 2.4px; border-radius: 2px; background: var(--ink);
    transition: transform 0.22s ease, opacity 0.18s ease;
  }
  /* bars fold into a cross while the menu is open */
  .b-nav-burger.open span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
  .b-nav-burger.open span:nth-child(2) { opacity: 0; }
  .b-nav-burger.open span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }

  .b-nav-menu {
    display: none;
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    background: #FFFFFF; border-radius: 18px;
    box-shadow: 0 24px 48px -18px rgba(23, 42, 45, 0.28);
    padding: 10px;
    z-index: 90;
  }
  .b-nav-menu.open { display: block; animation: bMenuIn 0.24s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  @keyframes bMenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .b-nav-menu a {
    display: block; padding: 13px 14px; border-radius: 12px;
    font-size: 15.5px; font-weight: 500; color: var(--ink); text-decoration: none;
  }
  .b-nav-menu a + a { border-top: 1px solid rgba(23, 42, 45, 0.06); border-radius: 0 0 12px 12px; }
  .b-nav-menu .b-nav-menu-cta {
    margin-top: 8px; text-align: center; background: var(--ink); color: #FFFFFF;
    border-radius: 999px; padding: 14px 16px; font-weight: 600; border-top: none;
    box-shadow: 0 3px 0 0 #EBB765;
  }

  /* Decorative marks were drawn wider than the screen itself and sat over the
     copy. Keep the bleed, lose the bulk. */
  .n-mark.hero-tl   { width: 150px; top: -110px; }
  .n-mark.hero-r    { width: 210px; right: -55px; top: 300px; }
  .n-mark.problem-l { width: 150px; left: -55px; }
  .n-mark.work-r    { width: 185px; right: -70px; }

  /* Every section still carried its desktop breathing room: 72 to 96px top AND
     bottom, so on a phone each join between sections was a ~150px band of empty
     paper. Same for the hero, which stood 1980px tall before the marquee. Air is
     good on a wide screen and dead space on a narrow one. */
  .b-section { padding: 32px 0; }
  .b-section-sm { padding: 22px 0; }
  .section { padding: 36px 0; }
  .b-hero { padding: 56px 0 20px; }
  /* Heads carried 36 to 52px of desktop margin under them, which on top of the
     stacked section padding left a long blank run before every eyebrow. */
  .b-problem-head { margin-bottom: 24px; }
  .b-caps-head,
  .b-process-head,
  .b-stack-head { margin-bottom: 22px; }
  .b-testi-head,
  .b-faq-head { margin-bottom: 22px; }
  .b-hero .b-eyebrow { margin-bottom: 14px; }
  .b-hero .b-lede { margin-top: 18px; }
  .brand .hero-elements-wrap { margin-top: 30px; }
  .b-footer { padding-top: 48px; }
  .hero-elements-cta { margin-top: 28px; }

  /* Tool cards were built at desktop scale: 205px tall with the category
     stretching to push the link to the bottom. Fifteen of those in two columns
     turned the section into an endless scroll, so tighten them up. */
  .b-tool { padding: 18px 16px 16px; min-height: 0; }
  .b-tool img { width: 30px; height: 30px; margin-bottom: 12px; }
  .b-tool .name { font-size: 15px; }
  .b-tool .cat { font-size: 13px; flex: 0 0 auto; }
  .b-tool .more { font-size: 13px; padding-top: 12px; }
}

/* Capability panels · SVG scene container (hero-quality visuals) */
.brand .rec-viz { margin-top: 10px; }
.brand .rec-viz svg { width: 100%; height: auto; display: block; }

/* ============================================================
   CAPABILITY PANELS · product-UI screens (toolbars, tables, chips)
   ============================================================ */
.brand .ui-screen {
  margin-top: 14px;
  border: 1px solid rgba(23,42,45,0.12);
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 8px 22px -14px rgba(23,42,45,0.2);
  font-family: var(--font-sans);
}
.brand .re-console .sp { flex: 1 1 auto; }
.brand .ui-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: #F5F1EA;
  border-bottom: 1px solid rgba(23,42,45,0.08);
}
.brand .ui-bar .ui-title { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.brand .ui-sub { font-size: 11px; color: rgba(23,42,45,0.5); font-weight: 500; }
.brand .ui-pill {
  font-size: 10px; font-weight: 600; color: rgba(23,42,45,0.6);
  background: #FFFFFF; border: 1px solid rgba(23,42,45,0.1);
  border-radius: 6px; padding: 3px 8px;
}
.brand .ui-live { display:inline-flex; align-items:center; gap:6px; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:#2E7D46; font-weight:600; }
.brand .ui-live::before { content:""; width:7px; height:7px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,0.2); }
.brand .ui-fav { width:15px; height:15px; border-radius:4px; vertical-align:middle; display:inline-block; }

.brand .ui-thead, .brand .ui-tr { display:grid; grid-template-columns: var(--cols, 1fr); align-items:center; gap:10px; }
.brand .ui-thead {
  padding: 8px 14px; font-size:9px; letter-spacing:0.07em; text-transform:uppercase;
  color: rgba(23,42,45,0.4); border-bottom:1px solid rgba(23,42,45,0.07); background:#FCFAF7; font-weight:700;
}
.brand .ui-tr { padding: 11px 14px; font-size:12.5px; color: rgba(23,42,45,0.68); border-bottom:1px solid rgba(23,42,45,0.05); animation: recRowIn .45s ease both; }
.brand .ui-tr:last-child { border-bottom:none; }
.brand .ui-tr:nth-child(3){animation-delay:.06s}
.brand .ui-tr:nth-child(4){animation-delay:.12s}
.brand .ui-tr:nth-child(5){animation-delay:.18s}
.brand .ui-tr:nth-child(6){animation-delay:.24s}
.brand .ui-tr .co { font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; }
.brand .ui-avatar { width:22px; height:22px; border-radius:6px; background:#EFE4D2; display:inline-grid; place-items:center; font-size:9px; font-weight:700; color:#8A5410; flex:none; }
.brand .ui-num { font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }

.brand .ui-chip { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.brand .ui-chip.amber { background:#FAC064; color:#172A2D; }
.brand .ui-chip.ink { background:#172A2D; color:#fff; }
.brand .ui-chip.ok { background:rgba(34,197,94,0.15); color:#2E7D46; }
.brand .ui-chip.dim { background:#EDE7DE; color:rgba(23,42,45,0.5); }
.brand .ui-chip.soft { background:#FBF0DC; color:#8A5410; }

.brand .ui-foot {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:11px 14px; background:#FCFAF7; border-top:1px solid rgba(23,42,45,0.06);
  font-size:11px; color:rgba(23,42,45,0.55);
}

/* key/value list */
.brand .ui-kv { padding:2px 14px; }
.brand .ui-kv-row { display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:baseline; padding:11px 0; border-bottom:1px dashed rgba(23,42,45,0.08); }
.brand .ui-kv-row:last-child { border-bottom:none; }
.brand .ui-kv-row.hi { background:linear-gradient(90deg, rgba(225,150,46,0.1), transparent); margin:0 -14px; padding:11px 14px; border-radius:4px; border-bottom:none; }
.brand .ui-kv-k { font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(23,42,45,0.42); font-weight:700; }
.brand .ui-kv-v { font-size:12.5px; color:rgba(23,42,45,0.72); line-height:1.45; }
.brand .ui-kv-v b { color:var(--ink); font-weight:600; }
.brand .ui-kv-v i { font-style:italic; color:#8A5410; font-weight:600; }

/* score / report bars */
.brand .ui-bars { padding:14px; display:flex; flex-direction:column; gap:12px; }
.brand .ui-b { display:grid; grid-template-columns:152px 1fr 52px; gap:12px; align-items:center; font-size:12px; color:rgba(23,42,45,0.62); }
.brand .ui-trk { height:7px; background:rgba(23,42,45,0.07); border-radius:4px; overflow:hidden; }
.brand .ui-trk i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#2C3B3E,#62777C); animation:recBarFill 1.1s cubic-bezier(.4,0,.2,1) both; }
.brand .ui-trk.amber i { background:linear-gradient(90deg,#E1962E,#FAC064); }
.brand .ui-b b { text-align:right; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }

/* scoring badge */
.brand .ui-scorewrap { display:flex; align-items:center; gap:18px; padding:16px 14px 4px; }
.brand .ui-badge { width:66px; height:66px; border-radius:16px; background:#172A2D; display:grid; place-items:center; flex:none; }
.brand .ui-badge b { font-size:25px; font-weight:700; line-height:1; color:#fff; }
.brand .ui-badge span { font-size:7.5px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-top:3px; }

/* orchestration rules */
.brand .ui-rule { display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid rgba(23,42,45,0.05); font-size:12.5px; }
.brand .ui-rule:last-child { border-bottom:none; }
.brand .ui-when { color:rgba(23,42,45,0.5); }
.brand .ui-arrow { color:rgba(23,42,45,0.3); }
.brand .ui-then { color:var(--ink); font-weight:600; }

/* composer */
.brand .ui-compose { padding:14px; }
.brand .ui-signal { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:#8A5410; background:#FBF0DC; border:1px solid rgba(225,150,46,0.3); border-radius:8px; padding:6px 11px; margin-bottom:12px; }
.brand .ui-draft { font-size:12.5px; line-height:1.65; color:rgba(23,42,45,0.72); }
.brand .ui-draft .hl { background:#FBF0DC; color:#172A2D; padding:1px 4px; border-radius:4px; box-shadow:inset 0 -2px 0 rgba(225,150,46,0.55); }

/* capability SVG scenes · subtle live motion */
@keyframes capIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes capFlow { to { stroke-dashoffset: -10; } }
@keyframes capRing { 0%,100% { opacity: 0; } 50% { opacity: 0.55; } }
@keyframes capDot  { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
.brand .rec-viz .cap-layer   { animation: capIn 0.5s ease both; }
.brand .rec-viz .cap-flow    { animation: capFlow 1.1s linear infinite; }
.brand .rec-viz .cap-ring    { animation: capRing 2.2s ease-in-out infinite; }
.brand .rec-viz .cap-live-dot{ animation: capDot 1.7s ease-in-out infinite; }

/* capability panels · centered intro copy */
.brand .rec-cap-head { text-align: center; }
.brand .rec-cap-desc { max-width: 60ch; margin-left: auto; margin-right: auto; }

/* ============================================================
   LIVING WORKFLOW · flywheel finale (one explains, one proves)
   ============================================================ */
.wf-flywheel { margin-top: 56px; }
.wf-flywheel svg { width: 100%; height: auto; display: block; }
.wf-fly-head { text-align: center; margin-bottom: 28px; }
.wf-fly-head .b-eyebrow { display: block; margin-bottom: 10px; }
.wf-fly-head h3 {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.wf-fly-head h3 .serif {
  font-family: "Noto Serif", serif;
  font-style: italic;
  font-weight: 500;
  color: var(--amber-text);
}

/* ============================================================
   LIVING WORKFLOW · live system canvas
   The chassis (panel, header, node bar, glass card) is untouched.
   Inside it: a dot-grid automation canvas — three phase zones,
   nine compact step nodes (name + tool logos + one stat), animated
   wires with traveling packets, a dark engine hub with a ticking
   counter, and the amber loop wire carrying 09 back into 01.
   ============================================================ */
.wfs-wrap { width: 100%; }   /* .wf-cumulative is a centering flex row · give it one full-width child */
.wfs-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono, monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(23,42,45,0.45);
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(23,42,45,0.18);
}
.wfs {
  position: relative;
  height: 700px;
  border-radius: 16px;
  background-image: radial-gradient(rgba(23,42,45,0.10) 1px, transparent 1px);
  background-size: 18px 18px;
}
.wfs-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.wfs-wire {
  fill: none;
  stroke: rgba(23,42,45,0.28);
  stroke-width: 2;
  stroke-dasharray: 5 7;
  animation: wfsFlow 1.1s linear infinite;
}
.wfs-wire.loop {
  stroke: #E1962E;
  stroke-width: 2.5;
  stroke-dasharray: 7 7;
  animation-duration: 0.9s;
}
.wfs-wire.eng {
  stroke: rgba(23,42,45,0.15);
  stroke-width: 1.5;
  stroke-dasharray: 2 6;
  animation: none;
}
@keyframes wfsFlow { to { stroke-dashoffset: -12; } }
.wfs-wire.loop { stroke-dasharray: 7 7; }
.wfs-dot { fill: #2C3B3E; }
.wfs-dot.loop { fill: #E1962E; }

/* phase zones */
.wfs-zone {
  position: absolute;
  top: 24px;
  height: 540px;
  background: rgba(255,255,255,0.42);
  border: 1.5px dashed rgba(23,42,45,0.14);
  border-radius: 18px;
  z-index: 0;
}
.wfs-zone-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px 0;
  white-space: nowrap;
}
.wfs-zone-head b {
  font-family: var(--mono, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(23,42,45,0.5);
}
.wfs-zone-head span {
  font-size: 11px;
  color: rgba(23,42,45,0.38);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* step nodes */
.wfs-node {
  position: absolute;
  width: 240px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #FFFFFF;
  border: 1px solid rgba(23,42,45,0.13);
  border-radius: 14px;
  padding: 10px 12px 11px;
  box-shadow: 0 4px 16px -8px rgba(23,42,45,0.16);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.wfs-node:hover {
  transform: translate(-50%, -2px);
  border-color: rgba(23,42,45,0.28);
  box-shadow: 0 10px 24px -10px rgba(23,42,45,0.24);
}
.wfs-node.current {
  border-color: #E1962E;
  box-shadow: 0 10px 26px -10px rgba(225,150,46,0.5);
}
.wfs-node-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wfs-nnum {
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #FAC064;
  background: #172A2D;
  border-radius: 5px;
  padding: 2px 6px;
}
.wfs-nname {
  font-size: 13.5px;
  font-weight: 700;
  color: #172A2D;
  letter-spacing: -0.01em;
}
.wfs-nlogos {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wfs-logo {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #FCFAF7;
  border: 1px solid rgba(23,42,45,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.wfs-logo:hover {
  border-color: #E1962E;
  transform: translateY(-2px);
}
.wfs-nstat {
  font-family: var(--mono, monospace);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: #8A5410;
}

/* the engine hub · dark, alive, counting */
.wfs-engine {
  position: absolute;
  left: 51%;
  top: 596px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 22px;
  background: #172A2D;
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 14px 30px -14px rgba(23,42,45,0.55);
}
.wfs-engine-left {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wfs-engine-tag {
  font-family: var(--mono, monospace);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.wfs-engine-logos {
  display: flex;
  gap: 6px;
}
.wfs-engine .wfs-logo { background: #FFFFFF; border-color: transparent; }
.wfs-engine-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  border-left: 1px solid rgba(255,255,255,0.14);
  padding-left: 18px;
}
.wfs-engine-count b {
  font-family: var(--mono, monospace);
  font-size: 19px;
  font-weight: 700;
  color: #FAC064;
  line-height: 1.1;
}
.wfs-engine-count span {
  font-size: 9.5px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

/* the loop chip · sits on the amber top leg */
.wfs-loop-chip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: #8A5410;
  background: #FBF0DC;
  border: 1px solid rgba(225,150,46,0.4);
  border-radius: 999px;
  padding: 5px 15px;
}