/* @ll-tokens start · generated by _navtools/gen-tokens.py from assets/brand.tokens.json · do not edit */
:root {
  /* ── color ── */
  --ll-color-sand-primary: #D2D2C2; /* Warm neutral — default marketing surface, card fills on marketing, calm sections, image holds */
  --ll-color-sand-accent: #F0F0E0; /* Soft tint — subtle section breaks, large page backgrounds */
  --ll-color-orange-primary: #EC7523; /* Daring accent — CTAs, highlights, bold hero moments, use sparingly */
  --ll-color-orange-accent: #FF9626; /* Warmer tint — hover states, secondary highlights, illustrated accents */
  --ll-color-orange-product: #F26B17; /* Crisp --highlight. Product UI only. */
  --ll-color-midnight-primary: #141E28; /* Deep anchor — body text, premium dark surfaces, logo backgrounds */
  --ll-color-midnight-accent: #2C353E; /* Softer dark — cards on dark surfaces, subtle separation within dark backgrounds */
  --ll-color-sage-200: #EDEDE5; /* Soft section backgrounds */
  --ll-color-sage-400: #DCDCCC; /* Feature surfaces, logo ground, secondary illustration fills */
  --ll-color-sage-600: #B9B9A9; /* Decorative accents, dividers */
  --ll-color-sage-800: #868571; /* Mid warm-green */
  --ll-color-sage-900: #696954; /* Contrast accent, iconography on light */
  --ll-color-grey-25: #FBFBFA; /* Near-white backgrounds */
  --ll-color-grey-50: #F7F7F5; /* Light canvas */
  --ll-color-grey-100: #F2F2F0; /* Card surfaces, skeletons */
  --ll-color-grey-200: #EEEEEB; /* Quiet fills */
  --ll-color-grey-300: #E7E7E3; /* Borders, quiet separators */
  --ll-color-grey-400: #D8D8D3; /* Hairlines, structure strokes */
  --ll-color-grey-500: #ABABA7; /* Secondary text on light */
  --ll-color-grey-600: #91918D; /* Tertiary text */
  --ll-color-grey-700: #656563; /* Captions, labels */
  --ll-color-grey-800: #4F4F4C; /* Strong secondary text */
  --ll-color-grey-900: #252820; /* Deepest contrast — its own token, NOT Midnight */
  --ll-color-paper: #F9F7F0; /* Crisp --background (HSL 48 33% 97%) — "page background, warm off-white" */
  --ll-color-white: #FFFFFF; /* Crisp --card — card surfaces in the light theme */
  --ll-color-calloutInk: #4A3321; /* Bold --badge. Our callout text colour. */
  /* ── surface ── */
  --ll-surface-page: var(--ll-color-paper); /* Crisp --background. The one page ground. */
  --ll-surface-card: var(--ll-color-white); /* Crisp --card. White cards on warm off-white — in EVERY venue: documents, decks, product. */
  --ll-surface-cardDark: var(--ll-color-midnight-accent); /* Card on a dark surface */
  --ll-surface-emphasis: var(--ll-color-midnight-primary); /* Emphasis panel · one or two per deliverable */
  --ll-surface-callout: var(--ll-color-sand-primary);
  --ll-surface-accent: var(--ll-color-orange-primary); /* Solid orange block · one per page */
  --ll-surface-imageHold: var(--ll-color-sand-primary);
  --ll-surface-hairline: var(--ll-color-grey-400); /* Hairlines and structure strokes — the deck/document default */
  --ll-surface-hairlineDark: var(--ll-color-midnight-accent);
  --ll-surface-bar: var(--ll-color-grey-300); /* Data bar fill. Grey 300, same value as gridlines; orange marks only the one that matters. */
  --ll-surface-gridline: var(--ll-color-grey-300); /* Chart gridlines */
  --ll-surface-emphasisFill: var(--ll-color-sand-accent);
  --ll-surface-sectionBreak: var(--ll-color-sand-accent); /* Sand Accent — subtle section breaks and large page backgrounds. Its documented role; NOT card fills. */
  --ll-surface-divider: var(--ll-color-sage-600); /* Decorative dividers and accents — a deliberate warm rule, not a default border */
  --ll-surface-border: var(--ll-color-grey-300); /* Card borders, quiet separators */
  /* ── text ── */
  --ll-text-primary: var(--ll-color-midnight-primary);
  --ll-text-secondary: var(--ll-color-midnight-accent); /* Body copy */
  --ll-text-muted: var(--ll-color-grey-700); /* Captions, source notes, footer text */
  --ll-text-faint: var(--ll-color-grey-500); /* Secondary text on light */
  --ll-text-onDark: var(--ll-color-paper); /* Never pure white on midnight */
  --ll-text-onDarkMuted: var(--ll-color-grey-500);
  --ll-text-onAccent: var(--ll-color-paper);
  --ll-text-onCallout: var(--ll-color-calloutInk);
  --ll-text-accent: var(--ll-color-orange-primary);
  --ll-text-kicker: var(--ll-color-grey-700); /* Kickers, labels and captions */
  --ll-text-iconOnLight: var(--ll-color-sage-900); /* Iconography and contrast accents on light */
  /* ── stroke ── */
  --ll-stroke-structure: 0.75pt; /* Grids, lifelines, table rules, borders — the default */
  --ll-stroke-content: 1.5pt; /* Dividers, shape outlines, markers */
  --ll-stroke-emphasis: 2pt; /* Axes, the one accent line, flow arrows */
  --ll-stroke-isometric: 1.25pt; /* Line-graphics figures only */
  --ll-stroke-dash: 6 4; /* Dashed means projected / not yet. No other dash pattern. */
  /* ── radius ── */
  --ll-radius-card: 12px;
  --ll-radius-tile: 8px; /* 8px — Crisp --radius, the documented product default. */
  --ll-radius-input: 4px;
  --ll-radius-none: 0px;
  --ll-radius-pill: 999px; /* Pill — capsule markers, tags */
  /* ── space ── */
  --ll-space-1: 4px;
  --ll-space-2: 8px;
  --ll-space-3: 12px;
  --ll-space-4: 16px;
  --ll-space-5: 20px;
  --ll-space-6: 24px;
  --ll-space-8: 32px;
  --ll-space-10: 40px;
  --ll-space-12: 48px;
  --ll-space-16: 64px; /* Page margin */
  --ll-space-ruleGap: 4px; /* The space ABOVE a head's rule — head text to hairline. 4 units = 3 pt. Below the rule the following text gets  */
  /* ── font ── */
  --ll-font-display: 'Abhaya Libre', Georgia, serif; /* Titles, quotes, statements. Never below 20 pt. */
  --ll-font-sans: 'Public Sans', 'Helvetica Neue', system-ui, sans-serif; /* Body, card heads, stats */
  --ll-font-mono: 'Roboto Mono', ui-monospace, monospace; /* Kickers, labels, metadata, numeric grids. Always uppercase. */
  /* ── type ── */
  --ll-type-floor-mono: 8pt; /* Mono may go smaller than other faces */
  --ll-type-floor-other: 10pt;
  --ll-type-floor-body: 12pt;
  --ll-type-deck: {'$value': {'value': 24, 'unit': 'pt'}, '$extensions': {'font': '{font.sans}', 'weight': 700, 'provenance': 'policy', 'note': "In-card numbers. Approved 9 Sep: the master's 24 / 28 / 36 pt values fold onto this one step, with stat 31.5 for standalone figures."}};
  --ll-type-doc-h1: 60px;
  --ll-type-doc-h2: 34px;
  --ll-type-doc-h3: 16px;
  --ll-type-doc-lead: 14px;
  --ll-type-doc-body: 12.5px;
  --ll-type-doc-bodySmall: 11.5px;
  --ll-type-doc-stat: 30px;
  --ll-type-doc-label: 9.5px;
  --ll-type-doc-tableHead: 9px;
  --ll-type-product-h1: 20px;
  --ll-type-product-h2: 18px;
  --ll-type-product-h3: 16px;
  --ll-type-product-h4: 15px;
  --ll-type-product-h5: 14px;
  --ll-type-product-body: 14px;
  /* ── grid ── */
  --ll-grid-margin: 64px;
  --ll-grid-contentWidth: 1152px;
  --ll-grid-titleTop: 40px; /* 1280-space units · 30 pt from the top edge — the skill’s 0.42 in */
  --ll-grid-titleHeight: 70px; /* 1280-space units = 52.5 pt · holds two lines of 23 pt · header rule, kicker and content zone unchanged */
  --ll-grid-headerRule: 120px;
  --ll-grid-kickerTop: 127px;
  --ll-grid-contentTop: 164px;
  --ll-grid-contentBottom: 620px;
  --ll-grid-footerRule: 642px;
  --ll-grid-footerTop: 666px; /* Logo top. Footer rule 642 + one ident height (24) = 666; lockup bottom 690, leaving 30 to the slide edge. */
  --ll-grid-gutter: 32px;
  --ll-grid-columns: 1152 / 560+560 / 362.7×3 / 264×4;
  /* ── motion ── */
  --ll-motion-fast: 120ms;
  --ll-motion-base: 200ms;
  --ll-motion-slow: 280ms;
  --ll-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  /* ── component ── */
  --ll-component-card-radius: var(--ll-radius-card);
  --ll-component-card-padding: var(--ll-space-4);
  --ll-component-card-border: var(--ll-surface-hairline);
  --ll-component-marker-radius: var(--ll-radius-none);
  --ll-component-marker-stroke: var(--ll-stroke-content);
  --ll-component-marker-color: var(--ll-color-midnight-accent); /* Outline colour for markers and drawn figures. Retired #363C38 (absent from Notion) on 8 Sep 2026. */
  --ll-component-orangeBar-large: 56 12;
  --ll-component-orangeBar-medium: 40 8;
  --ll-component-orangeBar-small: 24 6;
  --ll-component-callout-surface: var(--ll-surface-callout);
  --ll-component-callout-border: var(--ll-color-orange-primary);
  --ll-component-callout-borderStyle: 1.4px dashed;
  --ll-component-callout-text: var(--ll-text-onCallout);
  --ll-component-callout-radius: 2px;
  --ll-component-bullet-size: 5px;
  --ll-component-bullet-color: var(--ll-color-orange-primary);
  --ll-component-logo-clearSpace: ident-height; /* At least the height of the IDENT MARK on all sides, free of other content. In the full lockup the ident is ful */
  --ll-component-logo-minHeightLockup: 24px; /* Horizontal lockup — 24px / 6mm high */
  --ll-component-logo-minHeightIdent: 16px; /* Ident — 16px / 4mm */
  --ll-component-logo-onPhotography: solid-container-required; /* Notion don’ts: never place the logo on a busy photo WITHOUT a solid container. A paper or ink plate is require */
  --ll-component-icon-sizes: 20 24 32 48 64;
  --ll-component-icon-strokeConstruction: var(--ll-stroke-structure);
  --ll-component-icon-strokeOutline: var(--ll-stroke-content);
}
/* @ll-tokens end */
/* ==========================================================
   Lleverage v2 - built to wonderful.ai's measured spec.

   Their system, pulled from the live DOM:
   · display = light grotesque, weight 300 only
     h1 82px / lh 86 / ls -4.1px   h2 48px / lh 50 / ls -1.92px
     card title 32px / lh 37 / ls -1.28px
   · body = Inter, 16/26 and 20/25 for the hero lead
   · from the company deck (design-elements/brand/company-deck-2026-08.md):
   ·   ground #FAFAFA neutral, sage fills #EDEDE5 / #DCDCCC, ink #141E28,
   ·   cards #FFF, accent #EC7523 on light and #FF9626 on dark. NO cream --
   ·   the warmth comes from the sage fills, never from tinting the ground.
     #171719 ink, #393939 headings, #6B6B6B muted, #E6E6E6 lines
   · pill buttons 50px radius, 12px label, 50px tall
   · cards ~583 square, 10px radius, no shadows anywhere
   · few, long, cinematic sections; one dark block mid-page

   Ours: their structure and type, our brand orange as the
   single accent and our indigo for the dark blocks.
   ========================================================== */

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

:root {
  /* v2's own variables. Where a value equals a master-template token (the --ll-* block above,
     generated from assets/brand.tokens.json) it POINTS at the token, so the two cannot drift.
     Where v2 deliberately differs, the value stays and the comment names the nearest token.
     Those deltas are Matteo's open decisions (2026-09-17), not mistakes. */
  --bg:        #FAFAFA;      /* v2 neutral ground · template is --ll-color-paper #F9F7F0 (warm) */
  --bg-2:      #F0F0F0;      /* neutral grey band · nearest --ll-color-grey-100 #F2F2F0 */
  --sage-2:    var(--ll-color-sage-400);        /* #DCDCCC, an exact template value */
  --white:     var(--ll-color-white);
  --dark:      var(--ll-color-midnight-primary); /* #141E28 */
  --dark-2:    #18222C;      /* v2's own dark step · template has --ll-color-midnight-accent #2C353E */
  --ink:       #171719;      /* v2 text ink · template text is midnight #141E28 */
  --ink-2:     #393939;      /* section headings sit here, not black · nearest --ll-color-grey-800 #4F4F4C */
  --muted:     #6B6B6B;      /* nearest --ll-color-grey-700 #656563 */
  --muted-2:   #9A9A9A;      /* nearest --ll-color-grey-500 #ABABA7 */
  --line:      #E4E4DC;      /* nearest --ll-color-grey-300 #E7E7E3 */
  --line-d:    rgba(250,250,250,.16);

  --orange:    var(--ll-color-orange-primary);  /* #EC7523 */
  --orange-br: var(--ll-color-orange-accent);   /* #FF9626 */

  --f-d: var(--ll-font-display);   /* Abhaya Libre */
  --f-b: var(--ll-font-sans);      /* Public Sans */
  --f-m: 'Fragment Mono', 'Roboto Mono', ui-monospace, monospace;   /* v2 mono · template is --ll-font-mono Roboto Mono */

  --gut: 40px;
  --max: 1440px;
  --ease: cubic-bezier(.22,1,.36,1);
  /* the nav panel needs a longer, gentler curve than the site's quint-out,
     which is so front-loaded it reads as a snap on anything that changes height */
  --ease-dd: cubic-bezier(.30,.55,.15,1);
  /* CLOSING needs its own curve. An ease-OUT on a close rips the panel away in the
     first few frames and then creeps - that is what read as "very very bad". This
     one starts almost flat, accelerates, then settles. */
  --ease-dd-c: cubic-bezier(.55,.06,.25,1);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f-b); background: var(--bg); color: var(--ink);
  font-size: 16px; line-height: 1.62; letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
::selection { background: rgba(236,117,35,.22); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); width: 100%; }

/* ── display type: one face, one weight, size + tracking only ── */
.d1, .d2, .d3, .d4 { font-family: var(--f-d); font-weight: 400; color: var(--ink); }
.d1 { font-size: clamp(46px, 6.2vw, 88px); line-height: 1.0;  letter-spacing: -.035em; }
.d2 { font-size: clamp(34px, 3.7vw, 52px); line-height: 1.04; letter-spacing: -.03em; }
.d3 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.12; letter-spacing: -.026em; color: var(--ink); }
.d4 { font-size: 22px; line-height: 1.16; letter-spacing: -.024em; color: var(--ink); }
.on-d .d1, .on-d .d2, .on-d .d3, .on-d .d4 { color: #FAFAFA; }

.lead  { font-size: 20px; line-height: 1.25; letter-spacing: -.018em; color: var(--muted); }
.p     { font-size: 16px; line-height: 1.62; color: var(--muted); }
.p-s   { font-size: 14px; line-height: 1.5;  color: var(--muted); }
.on-d .lead, .on-d .p, .on-d .p-s { color: rgba(250,250,250,.66); }

.kick { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-m); font-size: 10px; font-weight: 400; letter-spacing: .18em;
  text-transform: uppercase; color: var(--orange); }
.kick img, .kick svg { width: 17px; height: 17px; flex: none; display: block; opacity: .9; }
.on-d .kick { color: var(--orange); }
.on-d .kick img { filter: invert(1) brightness(1.6); }

/* ── pill buttons (50px radius, 12px label) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 24px; border-radius: 0;
  font-family: var(--f-b); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  background: var(--orange); border: 1px solid rgba(146,60,10,.42); color: #fff;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn:hover { background: var(--orange-br); border-color: var(--orange-br); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-w  { background: #FAFAFA; border-color: #FAFAFA; color: var(--ink); }
.btn-w:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-wo { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn-wo:hover { background: #FAFAFA; border-color: #FAFAFA; color: var(--ink); }
.btn-sm { min-height: 38px; padding: 0 17px; }

.lnk { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
.on-d .lnk { color: #FAFAFA; }
.lnk .ar { transition: transform .35s var(--ease); }
.lnk:hover { color: var(--orange); }
.lnk:hover .ar { transform: translateX(4px); }

/* ── nav: 96px, transparent over the hero ── */
.nav { position: fixed; inset: 0 0 auto; z-index: 300; color: #fff;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent; }
.nav-in { display: flex; align-items: center; gap: 44px; height: 96px; }
/* The lockup is optically 2px low next to the links: its box IS centred, but its
   wordmark is 14px cap against the links' 11px, so a centred box puts its baseline
   below theirs. Nudge to sit the two baselines on the same line. */
.nav-logo img { height: 24px; width: auto; transform: translateY(-2px);
  filter: invert(1) brightness(2); transition: filter .45s var(--ease); }
.nav-menu { display: flex; align-items: center; gap: 34px; }
.nav-menu > a, .nav-item > a, .nav .login { font-size: 14px; font-weight: 500; opacity: .86;
  transition: opacity .2s; }
.nav-menu > a:hover, .nav-item:hover > a, .nav .login:hover { opacity: 1; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav .btn { background: var(--orange); border-color: var(--orange); color: #fff; }
.nav .btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; } /* orange, not white (Matteo 2026-09-24) */
.nav.solid { background: var(--bg); border-bottom-color: var(--line); color: var(--ink); }
/* when the bar sits over a dark section it keeps light text and an inverted logo */
.nav.solid.on-dark { color: #FAFAFA; }
.nav.solid.on-dark .nav-logo img { filter: invert(1) brightness(2); }
.nav.solid.on-dark .btn { background: var(--orange); border-color: var(--orange); color: #fff; }
.nav.solid.on-dark .btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; } /* orange, not white (Matteo 2026-09-24) */
.nav.solid .nav-logo img { filter: none; }
.nav.solid .btn { background: var(--orange); border-color: var(--orange); color: #fff; }
.nav.solid .btn:hover { background: var(--orange-br); border-color: var(--orange-br); }

/* ── hero: full-bleed, headline bottom-left, copy bottom-right ── */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--dark); }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.10) sepia(.08) brightness(1.02); }
.hero-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,10,14,.44) 0%, rgba(8,10,14,.04) 26%, rgba(8,10,14,.30) 58%, rgba(8,10,14,.84) 100%); }
.hero-body { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 62px; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); gap: 60px; align-items: end; }
.hero .d1 { color: #FAFAFA; max-width: 17ch; }
.hero-right { padding-bottom: 8px; }
.hero-right .lead { color: #E9E9E9; margin-bottom: 26px; max-width: 34ch; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── bands ── */
.band   { padding: 130px 0; }
.band-t { padding: 84px 0 92px; }
.b-w    { background: var(--white); }
.b-2    { background: var(--bg-2); }
.b-d    { background: var(--dark); }
.b-d2   { background: var(--dark-2); }

.shead { max-width: 980px; }
.shead .kick { margin-bottom: 22px; }
.shead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }

/* ── client wall: bordered grid ── */
.wall-wrap { max-width: 1600px; margin: 0 auto; padding: 0 24px; width: 100%; }
.wall-title { font-family: var(--f-d); font-weight: 400; font-size: 27px; line-height: 1.22;
  letter-spacing: -.035em; color: var(--ink); text-align: center; margin-bottom: 44px; }
.wall { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.wc { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  height: 116px; display: flex; align-items: center; justify-content: center; padding: 16px; }
.wc img { height: calc(var(--lh,52) * 1px); width: auto; max-width: min(240px, 100%); object-fit: contain; opacity: 1; }
.lg-spl-treatments{--lh:55} .lg-solifi{--lh:57} .lg-royal-houdijk{--lh:76} .lg-dekker{--lh:52} .lg-lufthansa-cargo{--lh:62} .lg-natures-pride{--lh:53} .lg-royal-a-ware{--lh:57} .lg-sitech{--lh:57} .lg-bosch{--lh:61} .lg-topa{--lh:70} .lg-kisch{--lh:62} .lg-royal-kaak{--lh:60} .lg-allnex{--lh:58} .lg-tpvision{--lh:55} .lg-mobilae{--lh:52} .lg-xpol{--lh:54} .lg-ynvolve{--lh:52} .lg-oude-reimer{--lh:54}

/* ── case-study rail: square cards, 10px radius, arrows top-right ── */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 44px; }
.rail-nav { display: flex; gap: 8px; }
.rail-btn { width: 44px; height: 44px; border-radius: 0; border: 1px solid var(--line);
  background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s; }
.rail-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.rail { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  padding-bottom: 6px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.cs { position: relative; flex: 0 0 clamp(300px, 30vw, 430px); aspect-ratio: 1/1;
  border-radius: 0; overflow: hidden; scroll-snap-align: start; background: var(--dark); isolation: isolate; }
/* Two layers. The STILL carries the look - graded, toned, held back.
   The VIDEO underneath is left natural, so hovering resolves into normal
   footage rather than into more treatment. */
.cs video, .cs .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--zoom, 1)); }
.cs video { z-index: 1; filter: saturate(1.16) sepia(.10) brightness(calc(var(--exp, 1) * 1.04)); }
.cs .still { z-index: 2; filter: saturate(1.16) sepia(.10) contrast(1.0) brightness(calc(var(--exp, 1) * 1.01)) url(#cardgrade);
  transition: opacity .45s var(--ease), transform 1.2s var(--ease); }
.cs .tint { position: absolute; inset: 0; z-index: 3; background: var(--tint); mix-blend-mode: color;
  opacity: var(--tintop, .14); transition: opacity .45s var(--ease); }
.cs .shade { position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(180deg, rgba(8,10,14,.16) 0%, rgba(8,10,14,.01) 38%, rgba(8,10,14,.58) 100%); }
.cs.playing .still { opacity: 0; }
.cs:hover .tint { opacity: 0; }
.cs:hover video, .cs:hover .still { transform: scale(calc(var(--zoom, 1) * 1.03)); }
/* Per-card exposure so independently generated clips land at one brightness. */
/* Seven hues, now all held on the WARM side of neutral -- amber through rust,
   with the accent orange as the family they sit around. They used to be seven
   blues, which is what made the rail fight the page. */
.cs.c1 { --tint: #9A5A22; --exp: 1.30; --tintop: .30; }
/* Dekker card runs the bright daylight forklift clip now (2026-09-15): the 1.30 exposure was set for the old dark
   office clip and blew the hover out. The still keeps its look; only the playing video is held back. */
.cs.c1 video { filter: saturate(1.12) sepia(.10) brightness(1.12); }
.cs.c2 { --tint: #B2661F; --exp: 1.06; }
.cs.c3 { --tint: #8A5C2A; --exp: 1.06; --tintop: .24; }
.cs.c4 { --tint: #A05430; --exp: 1.14; }
.cs.c5 { --tint: #8E6428; --exp: 1.22; }
.cs.c6 { --tint: #A45E2C; --exp: 1.16; }
.cs.c7 { --tint: #B06A24; --exp: 1.16; --tintop: .30; }
/* the five cards added 2026-09-04 (two customer cases, three guides) */
.cs.c8 { --tint: #B2661F; --exp: 1.00; --tintop: .12; }
.cs.c9 { --tint: #8E6428; --exp: 1.10; }
.cs.c10 { --tint: #8A5C2A; --exp: 1.08; }
.cs.c11 { --tint: #A05430; --exp: 1.10; }
.cs.c12 { --tint: #9A5A22; --exp: 1.16; --tintop: .26; }
/* the 13 solution-rail cards added 2026-09-07 (3 guides per page + Solifi) */
.cs.c13 { --tint: #9A5A22; --exp: 1.12; }
.cs.c14 { --tint: #B2661F; --exp: 1.06; }
.cs.c15 { --tint: #8A5C2A; --exp: 1.10; }
.cs.c16 { --tint: #A05430; --exp: 1.10; --tintop: .26; }
.cs.c17 { --tint: #8E6428; --exp: 1.12; }
.cs.c18 { --tint: #A45E2C; --exp: 1.14; --tintop: .26; }
.cs.c19 { --tint: #B06A24; --exp: 1.08; }
.cs.c20 { --tint: #9A5A22; --exp: 1.10; }
.cs.c21 { --tint: #8E6428; --exp: 1.12; }
.cs.c22 { --tint: #A05430; --exp: 1.12; --tintop: .26; }
.cs.c23 { --tint: #8A5C2A; --exp: 1.10; }
.cs.c24 { --tint: #B2661F; --exp: 1.08; }
.cs.c25 { --tint: #9A5A22; --exp: 1.12; }
.cs.c26 { --tint: #B06A24; --exp: 1.10; }
.cs.c27 { --tint: #8E6428; --exp: 1.12; }
.cs .in { position: absolute; inset: 0; z-index: 5; padding: 28px; display: flex; flex-direction: column; }
.cs .tag { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.72); }
.cs .ttl { margin-top: auto; font-family: var(--f-d); font-weight: 300; font-size: clamp(24px,2.3vw,32px);
  line-height: 1.15; letter-spacing: -.04em; color: #fff; max-width: 15ch; }
.cs .arw { position: absolute; z-index: 5; top: 24px; right: 26px; font-size: 18px; color: #fff; opacity: .9;
  transition: transform .35s var(--ease); }
/* the customer's mark, BOTTOM RIGHT - wonderful's device, measured off their cards.
   Theirs are far bigger than a polite corner logo: OTE's roundel is ~9% of the card width
   tall and 18% wide, the "Banco Caja Social" wordmark runs 31% of the card width, both
   inset ~28px from the bottom right corner. Sized to those fractions here, which is
   roughly double a first pass that Matteo called "very bad" - a small mark on a photo
   just reads as a smudge.

   ⚠ The shared `customer-logos/` files are the ink CENTRED on a 900x300 transparent
   canvas (~31% of the width empty each side). Invisible in the client wall's grid cells,
   but aligned to an edge it insets every mark by a DIFFERENT amount. So the card uses
   TRIMMED copies in `v2img/marks/` - PNGs cropped to the alpha bbox with PIL, SVGs
   retargeted to their `getBBox()` ink (measured in the browser; no SVG rasteriser exists
   on this Mac) with 0.4 units of bleed. Ink edge = box edge, so `right: 28px` lands
   exactly on the padding.

   `brightness(0) invert(1)` makes the flat #252820 ink clean white. The drop-shadow comes
   AFTER the invert so it uses the white shape - it is what holds the mark where a card's
   sky is bright. */
/* TOP LEFT at the big size (his call: bottom right was tried and moved back up).
   `top: 39px` + `translateY(-50%)` centres ANY mark height on the arrow's optical centre
   (measured: the arrow's mid-Y is 39 from the card top and it never moves across
   breakpoints), so a 36px lockup and a 15px wordmark both sit level with the arrow
   opposite without a per-logo top. Top-aligning instead would stagger them. */
.cs .clg { position: absolute; z-index: 6; left: 28px; top: 39px;
  transform: translateY(-50%); line-height: 0; }
.cs .clg img { height: var(--mh, 30px); width: auto;
  /* TWO shadows: a tight dark halo that separates the mark from a bright sky, and a soft
     one underneath for lift. One wide soft shadow alone just hazes and does not separate. */
  filter: brightness(0) invert(1)
          drop-shadow(0 1px 2px rgba(8,10,14,.62))
          drop-shadow(0 3px 14px rgba(8,10,14,.48)); }
/* ⚠ SIZED BY EQUAL INK AREA, NOT equal height and NOT equal width.
   Matteo: "the logos are very different in size and color... make them all look like the
   SPL treatments". They were all already pure white, so the "colour" difference he saw was
   WEIGHT: a fat wordmark at 28px puts far more white on the card than a hairline one at
   15px, and reads brighter and heavier.
   Method: render each mark to a canvas, sum the alpha, and solve for the height that gives
   every mark the same ink area as SPL at 15px (605 px^2).
     H = sqrt(A / (coverage * aspect))
   Measured coverage/aspect - spl .2765/9.73 · dekker .3954/4.50 · topa .3584/2.43 ·
   oude-reimer .3627/5.55 · kisch .3572/2.54 · xpol .3168/2.31.
   Widths then fall out at 15-34% of the card purely from name length, which is correct and
   is what wonderful's own cards do (OTE 18%, Banco Caja Social 31%).
   Pure equal-area then needed three corrections by eye, because it over-sizes a mark made
   of FEW large thin letters (it has to grow tall to reach the same mass) and under-sizes
   one whose ink is mostly a solid symbol. Final pass matches the WORDMARK's letter size
   against SPL's: xpol 29 -> 18, kisch 26 -> 24, oude-reimer 17 -> 20.
   All six then went up ~18% on his ask ("a bit bigger, and more visible"), keeping the
   ratios above intact so the set stays matched. */
.mk-spl { --mh: 18px; }         /* the anchor - 9.7:1, the thinnest and so the widest */
.mk-dekker { --mh: 21px; }
.mk-xpol { --mh: 21px; }
.mk-oude-reimer { --mh: 24px; }
.mk-kisch { --mh: 28px; }
.mk-topa { --mh: 31px; }
.mk-kaak { --mh: 36px; }
.mk-schreuders { --mh: 24px; }
.mk-solifi { --mh: 24px; }      /* viewBox trimmed to the ink (3.1:1); letters then match oude-reimer */
/* the metric sits bottom LEFT and the mark bottom RIGHT, so they share the last line.
   `padding-right` on the title was wrong - it shrinks EVERY line and shredded the copy
   into four words on a narrow card. The title keeps its own 15ch measure; the small-card
   clash is handled by tightening that measure, not by padding. */

/* ── product rows inside the dark block ── */
.plist { margin-top: 68px; border-top: 1px solid var(--line-d); }
.prow { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 48px;
  padding: 46px 0; border-bottom: 1px solid var(--line-d); align-items: start; }
.prow h3 { font-family: var(--f-d); font-weight: 300; font-size: clamp(24px,2.2vw,30px);
  letter-spacing: -.04em; line-height: 1.15; color: #FAFAFA; }
.prow p { font-size: 16px; line-height: 1.6; color: rgba(250,250,250,.62); max-width: 62ch; margin-bottom: 18px; }

/* ── two-up ── */
.twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tu { background: var(--white); border: 1px solid var(--line); border-radius: 0; padding: 48px 44px 44px; min-height: 340px;
  display: flex; flex-direction: column; }
.tu h3 { font-family: var(--f-d); font-weight: 300; font-size: clamp(26px,2.4vw,34px);
  letter-spacing: -.04em; line-height: 1.12; color: var(--ink); max-width: 16ch; }
.tu p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 18px 0 26px; max-width: 46ch; }
.tu .lnk { margin-top: auto; }

/* ── solution cards (their industry grid) ── */
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.sc { position: relative; border-radius: 0; background: var(--white);
  border: 1px solid var(--line); padding: 34px 32px 30px; min-height: 240px;
  display: flex; flex-direction: column; transition: border-color .3s var(--ease); }
.sc:hover { border-color: var(--ink); }
.sc .n  { font-size: 12px; font-weight: 500; color: var(--muted-2); }
.sc h3 { font-family: var(--f-d); font-weight: 300; font-size: 30px; letter-spacing: -.04em;
  line-height: 1.1; color: var(--ink); margin: 14px 0 12px; }
.sc p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.sc .arw { margin-top: auto; padding-top: 22px; font-size: 16px; color: var(--muted-2);
  transition: transform .35s var(--ease), color .3s; }
.sc:hover .arw { transform: translate(3px,-3px); color: var(--orange); }

/* Solutions: centred head over our plain cards. */
.shead-c { max-width: none; text-align: center; }
.shead-c .d2 { margin-left: auto; margin-right: auto; max-width: 26ch; }
.shead-cta { margin-top: 30px; }

/* Solutions sits on a plate of our own footage, blurred until it is light
   and colour rather than a scene -- the trick wonderful.ai use behind their
   careers cards. Cards stay solid so they read against it. */
/* Solutions: our own footage running behind, washed back to a pale grey field
   so it reads as motion in the paper rather than as a photograph. */
/* The bar reads this colour when it sits over this block. Sampled off the
   composited plate at the top of the section -- the roof of the frame --
   so the nav matches what is actually behind it, not the ground under the video. */
.sol-bg { position: relative; background: #E5E5DA; overflow: hidden; }
.sol-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; filter: saturate(.78) sepia(.14) brightness(1.26) contrast(.88); }
.sol-bg::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(237,237,229,.90) 0%, rgba(237,237,229,.84) 45%, rgba(237,237,229,.92) 100%); }
.sol-bg > .wrap { position: relative; z-index: 1; }

/* ── Platform: a segmented selector over one big panel ──────────────────
   Wonderful's industries block, measured: 14px tab labels, active near-black,
   the rest grey, over a 2:1 image with the name at display size, one line of
   copy and a button. Theirs is pill-shaped; ours keeps the sharp corners. */
/* wonderful.ai's selector: a grey tray with the active tab as a white block
   inside it. Square instead of pilled. Only backgrounds change -- no tab draws
   a border or a shadow, so nothing can bleed over its neighbour, and the focus
   ring is suppressed for the pointer and kept for the keyboard. */
.ptabs-wrap { display: flex; justify-content: center; }
/* ⚠ `inline-grid` with equal tracks, not `inline-flex`. Flex sizes each tab to its
   own label, so "Agents" came out visibly narrower than "Intelligence" and the tray
   read as three different buttons. Equal tracks make all three the width of the
   longest label while the tray still shrink-wraps to its content. */
.ptabs { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  margin: 68px auto 0; padding: 6px; background: var(--bg-2); }
.ptab { appearance: none; border: 0; border-radius: 0; background: transparent; cursor: pointer;
  padding: 16px 34px; font-family: var(--f-b); font-size: 16px; font-weight: 500;
  letter-spacing: -.012em; color: var(--muted); white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease); }
.ptab:hover { color: var(--ink); }
.ptab.is-on { background: var(--white); color: var(--ink); }
.ptab:focus { outline: none; }
.ptab:focus-visible { box-shadow: inset 0 0 0 2px var(--orange); }

.ppanels { position: relative; margin: 56px auto 0; max-width: 1240px; aspect-ratio: 2/1; overflow: hidden;
  background: var(--dark); isolation: isolate; }
.ppanel { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease); }
.ppanel.is-on { opacity: 1; pointer-events: auto; }
.ppanel img, .hpanel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--zoom, 1));
  filter: saturate(1.18) sepia(.10) contrast(1.0) brightness(calc(var(--exp, 1) * 1.01)) url(#cardgrade); }
/* per-panel exposure, measured off each chosen frame */
.ppanel[data-i="0"] { --exp: 1.00; } .ppanel[data-i="1"] { --exp: 1.03; }
.ppanel[data-i="2"] { --exp: 1.02; } .ppanel[data-i="3"] { --exp: 1.02; }
.pshade { position: absolute; inset: 0;
  /* the copy sits dead centre, so the panel is darkened there rather than only
     top and bottom -- otherwise the subline lands on whatever the photo is doing */
  background:
    radial-gradient(64% 60% at 50% 52%, rgba(8,10,14,.46) 0%, rgba(8,10,14,.20) 58%, rgba(8,10,14,0) 80%),
    linear-gradient(180deg, rgba(8,10,14,.24) 0%, rgba(8,10,14,.06) 40%, rgba(8,10,14,.50) 100%); }
.pin { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 40px; }
.pttl { font-family: var(--f-d); font-weight: 400; color: #FAFAFA;
  font-size: clamp(34px, 5vw, 68px); line-height: 1.04; letter-spacing: -.04em; max-width: 20ch; }
.psub { margin-top: 16px; font-size: 15px; line-height: 1.5; color: rgba(250,250,250,.78);
  max-width: 52ch; }
.pin .btn { margin-top: 26px; }

/* ── Governance: the dark block the platform used to be ─────────────────── */
/* ── Governance: statement and list on the left, the model drawn on the right ── */
/* ── INTEGRATIONS ───────────────────────────────────────────────────────────
   Pulled OUT of the platform selector (it was a fourth tab) and given its own
   block between platform and governance. It is not the same KIND of thing as
   Agents/Automation/Intelligence: those are capabilities, this is a
   qualification answer ("will it work with our ERP?"), and nobody should have to
   click a tab to reach it.

   Governance's ANATOMY and, on Matteo's call, its GROUND too: one-line two-tone
   headline, outline CTA, hairline-separated points, on `--dark`. Two dark blocks
   back to back only work because the RIGHT sides are different in kind - a real
   product screen here, a diagram there. Never give them the same right-hand
   device or the pair reads as one template printed twice.

   ⚠ WHAT WAS HERE FIRST AND WHY IT WENT: a 3x4 grid of integration logo tiles.
   Matteo: "i dont like the visuals at all". He was right, for two reasons worth
   keeping. (1) The assets are square icon TILES - a coloured disc with the glyph
   knocked OUT in white - so `brightness(0)` flattened SAP, Exact, AFAS, NetSuite,
   Salesforce and Outlook into six identical black circles, and even
   `grayscale`+darken left them muddy and pale. (2) More importantly a boxed logo
   grid is the most generic object on any SaaS page, and it sat right next to
   governance's boxed 2x2. **A logo wall is decoration; the product screen is
   proof.** `ui-connections.jpg` is the real connections list, with the logos in
   colour where they belong - inside a product surface, not scattered on ours. */
.itg { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 76px;
  align-items: start; }
/* re-measured against THIS list and THIS visual - never copy `.gov2-r`'s value,
   the two columns are different heights. At 1440: listTop-from-grid-origin 240 +
   listH/2 308 - cardH/2 244 = 305 to centre, then the same 55px lift he asked for
   on governance. Re-measure whenever the copy or the screenshot changes. */
/* ⚠ `width: 520` even though the grid is only 482. The `auto` track sizes to its
   content, so without this the right column is 38px narrower than governance's and the
   visual starts 38px further right - the gap to the left column read as 223 against
   governance's 185. Pinning the column to the governance diagram's width and
   left-aligning the grid inside it lines the two visuals up down the page. */
.itg-r { padding-top: 218px; width: 520px; }
.itg-l { max-width: 640px; }
.itg-l .d2 { max-width: none; }
.itg-l .d2 em { font-style: normal; color: rgba(250,250,250,.40); }
.itg-cta { margin-top: 32px; }
.itg-list { margin-top: 54px; }
.ivi { border-top: 1px solid var(--line-d); padding: 24px 0 26px; }
.ivi:last-child { border-bottom: 1px solid var(--line-d); }
.ivi h3 { font-family: var(--f-b); font-size: 16px; font-weight: 500; letter-spacing: -.012em;
  color: #FAFAFA; margin-bottom: 10px; }
.ivi p { font-size: 14px; line-height: 1.6; color: rgba(250,250,250,.58); max-width: 46ch; }

/* Integrations and governance share `--dark`, on his call, so they run as one
   unbroken dark stretch. The seam is the site's own `.reg` device - a hairline
   with the three `+` register marks - not a plain `border-top`, which he asked
   for by example. `#integrations` drops its bottom padding so the rule lands on
   the true seam and governance's own 130px top padding supplies the air below. */
/* ⚠ ID-PREFIXED ON PURPOSE. `.reg` is declared ~280 lines LOWER in this file with
   `margin: 0 0 54px`, so a plain `.reg-d` loses at equal specificity: the rule kept
   the 54px BOTTOM margin, which then collapsed straight out through the section
   (its padding-bottom is 0) and opened a white band of page ground at the seam.
   Third time this file's declaration order has bitten - always check what comes
   after your rule, and read the computed value back from the page. */
#integrations { padding-bottom: 0; }
#integrations .reg-d { border-top-color: var(--line-d); margin: 130px 0 0; }
#integrations .reg-d .bpc { color: rgba(250,250,250,.30); }

/* ── the connection field ───────────────────────────────────────────────────
   Matteo's reference is Ramp's "200+ integrations to the tools you already use":
   a constellation of small app tiles, dense in the middle and dissolving into
   ghosts at the edge, quietly animating. Measured off their live DOM: tiles are
   36x36 white, 6px radius, NO shadow, and the fringe sits at opacity .6.
   Ours keeps the idea and our own materials - sharp corners, not their 6px, and
   a dark ground so the white tiles carry the light.
   The grid is deliberately IRREGULAR with holes inside the field. A filled block
   reads as a table; the holes are what make it read as a constellation.
   ⚠ THE LOGOS STAY IN COLOUR HERE. Flat ink was the rule for marks sitting on
   OUR surfaces; inside an app tile the colour is the system's own identity and
   is what makes the field legible at 28px. */
/* ── the integrations box ───────────────────────────────────────────────────
   A `framed` box - the site's hairline block with the `+` register marks injected
   at its corners - holding a 3 x 5 grid of the systems we can actually show, with
   "and 50+ more" under it.
   ⚠ WHITE TILES ARE NOT DECORATION. These logos are brand marks in their own
   colours and most of them (IBM, NetSuite, Oracle, eci) are dark or grey artwork
   that disappears on `--dark`. The tile is what lets them keep their colour, which
   is the point of showing a logo at all.
   Sized so the box lines up with the governance diagram below it. */
/* ── the integrations grid ──────────────────────────────────────────────────
   RESTORED - this was the first visual on the block and, after four detours
   (product screenshot, `.uicard` panel, a Ramp-style drifting cloud, a big white
   panel), the one to come back to. Matteo asked for it back by name.
   3 x 4 of `framed` cells - the hairline box with the `+` register marks the page
   script injects - each holding the system ICON with its NAME under it, and a
   twelfth cell reading "and more".
   ⚠ THE NAME IS NOT OPTIONAL. These assets are square ICON TILES, not wordmarks
   (the integrations page renders them as text for that same reason): Business
   Central and Dynamics are near-identical Microsoft symbols and nobody names
   "Infor" from a shape. The mark is the anchor, the label is the message.
   ⚠ NO FILTER ON THE LOGOS. `brightness(0)` flattens the knockout marks (Exact,
   Infor, Oracle are white glyphs punched out of a colour) into identical circles -
   that filter is what made him call the first version bad, and I threw the whole
   grid away instead of just deleting the filter. `grayscale + invert` is also wrong
   on this ground: these are mostly LIGHT tiles, and inverting sinks them into the
   dark. In colour, checked at 1:1, all of them read. */
.ilogos { display: grid; grid-template-columns: repeat(3, 146px); gap: 22px;
  width: max-content; margin-left: 0; }
.il { position: relative; height: 92px; border: 1px solid var(--line-d);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 0 12px; background: rgba(250,250,250,.03); }
/* ⚠ THE MARK SITS IN A FIXED-HEIGHT BOX so every NAME lands on the same line.
   Without it the cell is a centred flex column, so a shorter logo makes a shorter
   stack and its label rides up - IBM's 22px wordmark put its name 6px above all the
   others. The box is 40 tall whatever the mark inside it measures. */
.il-m { height: 44px; display: flex; align-items: center; justify-content: center; }
/* ⚠ Sized by INK AREA, measured, not by a flat height. The square icon tiles have
   near-identical coverage so one height reads even across them - but IBM is a 2.7:1
   WORDMARK and at the same height it covers three times the area and towers over the
   rest. `.sy-wide` is the hook for any wordmark that joins the set. */
/* ⚠ THE DISC IS STRIPPED FROM THE ARTWORK, not hidden with CSS. These Figma exports
   are all the same shape - a `<path>` circle filled with a pale brand tint, then the
   real mark as an 18x18 `<rect>` inset 3 in a 24 canvas. `_navtools`-style one-off
   script drops the path and retargets the viewBox to `3 3 18 18`, so the mark fills
   its frame instead of floating in 25% of padding. Cleaned copies live in
   `assets/v2img/sys/` (sap, exact, afas, oracle, salesforce); business-central,
   dynamics, infor and ibm never had a disc.
   ⚠ Cropping to `3 3 18 18` is NOT enough. Inside that square the artwork is still
   letterboxed - SAP, AFAS and Oracle are wide wordmarks sitting in a square frame -
   so they rendered small with empty air above and below. The viewBox is retargeted a
   SECOND time, to each mark's measured alpha bbox (canvas scan), so the ink itself
   fills the frame. Aspects afterwards: sap 2.02, afas 2.17, oracle 2.70,
   salesforce 1.43, exact 1.00.
   Sizes below are then by INK, not by box: square marks take the full height, wide
   wordmarks are stepped down so they do not cover several times the area. */
/* ⚠ EVERY per-logo size below sets `--mh`, never `height`. A per-logo selector is
   `(0,2,1)` and the media-query rule is `(0,1,1)`, so direct heights WIN over the
   phone override and the marks stayed at desktop size on a phone while the untuned
   ones shrank - the grid read as a dozen different sizes. One variable, one place
   that scales it. */
.il img { width: auto; height: var(--mh, 40px); max-width: 100%; object-fit: contain; }
/* ⚠ SAP IS A PNG, NOT THE CLEANED SVG. A full-height blue strip kept appearing at its
   right edge - NOT in the artwork (the embedded 3840x1900 source is clean) but thrown
   by the `<pattern>`/`<use scale()>` chain these Figma exports use, and it is
   SCALE-DEPENDENT: invisible when the SVG is rasterised at 600px wide, visible at the
   50px the page actually draws. Cropping the viewBox could not fix what the renderer
   was inventing. The embedded PNG is extracted straight out of the SVG with PIL and
   used directly - no pattern, no repeat edge, no scale dependence.
   ⚠ Judge this kind of edge AT THE RENDERED SIZE, never at a convenient one. */
.il img[src*="/sys/sap"], .il img[src*="/sys/afas"] { --mh: 26px; }
.il img[src*="/sys/oracle"] { --mh: 26px; }
.il img[src*="/sys/salesforce"] { --mh: 34px; }
.il img.sy-wide { --mh: 22px; }                 /* IBM is a 2.7:1 wordmark */
.il img[data-k="solid"] { --mh: 33px; }         /* Infor is a solid box, 100% ink */
/* the six he supplied, sized the same way - by ink, so a wide wordmark does not cover
   several times the area of a square mark at the same height */
/* ⚠ Zendesk, Navision, Ridder iQ and ServiceNow are DARK artwork on transparent and
   near invisible on `--dark` as supplied. `brightness(0) invert(1)` fixes that but
   makes them SOLID WHITE, and with four of them low in the grid the whole bottom went
   monochrome - Matteo pulled it up straight away.
   `invert(1) hue-rotate(180deg)` is the dark-mode trick instead: invert flips the
   luminance AND the hue, the hue-rotate puts the hue back. Dark artwork comes up
   light while ServiceNow keeps its green and Ridder its red dot. */
.il img[src*="/sys/zendesk"], .il img[src*="/sys/ridder-iq"],
.il img[src*="/sys/navision"], .il img[src*="/sys/servicenow"] {
  filter: invert(1) hue-rotate(180deg); opacity: .92; }
/* ⚠ Navision and Zendesk are CROPPED TO THEIR MARK - the wordmark is gone. Both were
   supplied as full lockups, and at cell size the type turned to mush while the label
   under the cell already says the name. The wordmark is a separate ink run, so a
   column scan finds the split cleanly (navision at x231, zendesk at x224). As square
   marks they now take a full height like the rest. */
.il img[src*="/sys/navision"]  { --mh: 38px; }  /* mark only, 1.06:1 */
.il img[src*="/sys/zendesk"]   { --mh: 32px; }  /* mark only, 1.32:1 */
.il img[src*="/sys/ridder-iq"] { --mh: 24px; }  /* 4.7:1 wordmark, stepped up on his ask */
.il img[src*="/sys/microsoft"] { height: 33px; }  /* solid four-square, heavy ink */
.il img[src*="/sys/epicor"]     { --mh: 34px; }  /* 1.2:1 square mark */
.il img[src*="/sys/servicenow"] { --mh: 15px; }  /* 6.8:1, the widest wordmark here */
/* a system whose artwork we do not have yet - the cell keeps its name and its place
   so the grid is finished and only the mark is pending */
.il-wait::after { content: ""; width: 30px; height: 30px; border-radius: 8px;
  background: rgba(250,250,250,.09); }
.il b { font-size: 12.5px; font-weight: 500; letter-spacing: -.008em; color: #FAFAFA;
  text-align: center; line-height: 1.2; }
/* the count moved out of the twelfth cell so every square is a real system - it now
   closes the block under the whole grid, centred on the GRID's 482 rather than on the
   520 column, or it reads off-centre against the squares above it */
/* it is a LINK to the integrations page. Colour only on hover - no lift, no shift,
   no underline; the grid above it is dead still and the line should be too. */
.ilogos-more { display: block; width: 482px; margin: 26px 0 0; text-align: center;
  font-family: var(--f-m); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(250,250,250,.62);
  transition: color .25s var(--ease); }
.ilogos-more:hover { color: #FAFAFA; }


.gov2 { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 76px;
  align-items: start; }
/* the diagram sits a little above the list's centre line -- 219 would centre it
   exactly, this lifts it 55px so it reads level with the block above */
.gov2-r { padding-top: 164px; }
.gov2-l { max-width: 640px; }
.gov2-l .d2 { max-width: none; }
.gov2-l .d2 em { font-style: normal; color: rgba(250,250,250,.40); }
.gov2-cta { margin-top: 32px; }
.gov2-list { margin-top: 54px; }
.gvi { border-top: 1px solid var(--line-d); padding: 24px 0 26px; }
.gvi:last-child { border-bottom: 1px solid var(--line-d); }
.gvi h3 { font-family: var(--f-b); font-size: 16px; font-weight: 500; letter-spacing: -.012em;
  color: #FAFAFA; margin-bottom: 10px; }
.gvi p { font-size: 14px; line-height: 1.6; color: rgba(250,250,250,.58); max-width: 46ch; }

/* The diagram, built to happyrobot.ai's measured proportions (vw 1280):
   cards 266x236, column gap 188, row gap 132, core 248 square, and the mark
   only 24% of the core. The huge gaps are the point -- the core sits in space
   between four small cards instead of covering the join between four big ones.
   Scaled 0.92 to fit our column. */
.gdiag { position: relative; display: grid; grid-template-columns: 250px 250px;
  gap: 20px; width: max-content; margin-left: auto; }
.gd { position: relative; min-height: 232px; padding: 26px 28px;
  border: 1px solid var(--line-d); display: flex; flex-direction: column; }
.gd-fill { background: rgba(250,250,250,.05); }
.gd-r { text-align: right; }
.gdt { font-family: var(--f-b); font-size: 11px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: #FAFAFA; margin-bottom: 15px; }
.gdi { font-size: 13px; line-height: 1.75; color: rgba(250,250,250,.5); }

/* no card, no label -- just the mark sitting on the crossing */
.gd-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; }
.gd-mark { width: 72px; height: 72px; display: block; }

@media (max-width: 1040px) {
  .gov2 { grid-template-columns: 1fr; gap: 54px; }
  .gov2-r { padding-top: 0; }
  .itg { grid-template-columns: 1fr; gap: 54px; }
  /* the fixed 520 that aligns the visual with the governance diagram would overflow
     a phone - release it once the columns stack */
  .itg-r { padding-top: 0; width: auto; }
  .ilogos-more { width: 100%; }
  /* the fixed 520 would blow straight through a 375 viewport */
  .ilogos { width: 100%; margin-left: 0; grid-template-columns: repeat(3, minmax(0,1fr)); }
  /* the seam rule's 130px top margin is a lot of dead air under "and more" on a
     phone. Declared with the ID so it beats the base rule 175 lines up. */
  #integrations .reg-d { margin-top: 76px; }
  .ilogos { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .il { height: 92px; }
  /* scales EVERY mark by the same factor, tuned sizes included */
  .il img { height: calc(var(--mh, 40px) * .74); }
  .il b { font-size: 11.5px; }
  /* 15 cells in a 2-up grid leaves one alone on the last row. ServiceNow is the
     odd one out and the widest mark in the set, so it steps out on phones. */
  .il:has(img[src*="/sys/servicenow"]) { display: none; }
  .ccell { aspect-ratio: 1; }
  .gdiag { margin-left: 0; }
}
@media (max-width: 620px) {
  .gdiag { grid-template-columns: 1fr; width: 100%; }
  .gd-core { display: none; }
}

/* ── stats ── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.st { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 0; padding: 36px 30px 32px; }
.st .n { font-family: var(--f-d); font-weight: 300; font-size: clamp(40px,3.8vw,56px);
  line-height: 1; letter-spacing: -.05em; color: var(--orange); margin-bottom: 16px; }
.st .t { font-size: 14px; line-height: 1.5; color: var(--muted); margin-bottom: 14px; }
.st .c { font-size: 12px; font-weight: 500; color: var(--ink); }
.b-d .st, .b-d2 .st { background: transparent; border-color: var(--line-d); }
.b-d .st .t, .b-d2 .st .t { color: rgba(250,250,250,.6); }
.b-d .st .c, .b-d2 .st .c { color: #FAFAFA; }

/* ── How we work + quotes ───────────────────────────────────────────────
   Built to happyrobot's measured anatomy (vw 1280): section heading 46px,
   then rows of FILLED cells separated by a 1px gap so the ground reads as a
   hairline between them. Cell padding 37px, eyebrow 11px tracked, title 21px,
   body 14.5px/23.9. Their block runs ~805px tall -- these are not small. */
.hhead { max-width: 27ch; margin-bottom: 64px; }
.hreg { margin: 0 0 120px; }
.hgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.hcell { background: var(--white); padding: 37px 37px 40px; margin: 0;
  display: flex; flex-direction: column; }

/* Two image panels, same treatment as the platform block: the graded still,
   the radial shade that darkens where the copy sits, white type over it. */
.hpair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 120px; }
.hpanel { position: relative; aspect-ratio: 12/5; overflow: hidden; isolation: isolate;
  background: var(--dark); text-decoration: none; display: block; }
/* these are the abstract long-exposure plates -- pushed further with a real
   blur and a slight scale so the blur has no soft edge at the frame */
.hpanel img { transform: scale(1.02); filter: saturate(1.02) contrast(.98)
  brightness(var(--exp, 1)); transition: transform 1.2s var(--ease); }
.hpanel:hover img { transform: scale(1.10); }
.hpanel .pttl { font-size: clamp(22px, 2.1vw, 28px); max-width: 20ch; }
.hpanel .psub { font-size: 14px; max-width: 46ch; margin-top: 11px; }
.hpanel .pin { padding: 34px; }
/* the plant vista is busier than the abstract plate, so this panel needs a
   little more darkening under the copy than the platform ones */
.hpanel .pshade { background:
  radial-gradient(66% 74% at 50% 50%, rgba(8,10,14,.54) 0%, rgba(8,10,14,.26) 60%, rgba(8,10,14,0) 82%),
  linear-gradient(180deg, rgba(8,10,14,.28) 0%, rgba(8,10,14,.08) 42%, rgba(8,10,14,.48) 100%); }
.hpanel .btn { margin-top: 18px; }
.hpanel[href$="about"] { --exp: 1.12; }
.hpanel[href$="stories"] { --exp: 1.14; }

/* Quotes: three slots, each cycling through its own card every 5.5s, the way
   the live site rotates them. Quote cards and photo tiles share the pool, and
   each photo carries its OWN tone so the row is not one look five times. */
.qrot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.qslot { min-height: 404px; }
.qslot { position: relative; }
/* A plain 1.4s opacity crossfade. No visibility toggle and no scale -- the
   visibility timing and the transform were what made the swap look broken,
   and every image is loaded up front so nothing pops in mid-fade. */
.qitem { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 1.4s cubic-bezier(.37,0,.28,1); }
.qitem.on { opacity: 1; pointer-events: auto; }

.qtile { background: var(--white); border: 1px solid var(--line); margin: 0;
  padding: 34px 34px 30px; display: flex; flex-direction: column; }
.qtile blockquote { margin: 0 0 auto; font-size: 16px; line-height: 1.6;
  letter-spacing: -.006em; color: var(--ink); }
.qtile figcaption { display: flex; align-items: center; gap: 13px; margin-top: 26px; }
.qava { width: 42px; height: 42px; flex-shrink: 0; border: 1px solid var(--line);
  background: var(--white); display: flex; align-items: center; justify-content: center; }
.qava img { width: 26px; height: 26px; object-fit: contain; display: block; }
.qmeta b { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.qmeta i { display: block; font-style: normal; font-size: 13px; color: var(--muted-2); margin-top: 2px; }

.qphoto { overflow: hidden; background: var(--dark); width: 100%; height: 100%; }
.qphoto img { width: 100%; height: 100%; object-fit: cover; display: block;
  /* the sources are all blue-hour, so a hue shift alone stays cool -- the sepia
     is what actually pulls the warm tiles warm */
  filter: sepia(var(--sep, 0)) saturate(var(--sat, 1.2)) contrast(var(--con, 1.02))
          brightness(var(--exp, 1)) hue-rotate(var(--hue, 0deg)); }
/* one tone per photo */
.t-gold  { --sep: .30; --sat: 1.52; --exp: 1.20; --hue: -14deg; }
.t-ice   { --sep: .62; --sat: 1.42; --exp: 1.30; --hue: -14deg; --con: 1.05; }
.t-warm  { --sep: .30; --sat: 1.42; --exp: 1.12; --hue: -14deg; }
.t-amber { --sep: .64; --sat: 1.52; --exp: 1.32; --hue: -12deg; }
.t-steel { --sep: .62; --sat: 1.44; --exp: 1.22; --hue: -14deg; --con: 1.06; }
.t-ember { --sep: .38; --sat: 1.42; --exp: 1.17; --hue: -12deg; }

@media (max-width: 900px) {
  .hgrid, .hpair, .qrot { grid-template-columns: 1fr; }
  .qslot { min-height: 360px; }
  .qphoto { aspect-ratio: 3/2; }
  .hcell { min-height: 0; }
  .hpanel { aspect-ratio: 3/2; }
  .hpanel .pin { padding: 32px; }
}

/* ── closing ── */
/* the closing CTA sits on the footer's own ground, so the two read as one
   block -- no seam between the last statement and the footer */
.finale { padding: 150px 0 140px; text-align: center; }
/* his rule: the closing statement is always ONE line. 15ch forced three, and
   the .d1 clamp tops out too large for the sentence -- capped and centred. */
.finale .d1, .finale .d2 { max-width: none; margin: 0 auto 38px;
  font-size: clamp(32px, 5vw, 70px); line-height: 1.06; }
.finale .kick { justify-content: center; }
.finale .hero-ctas { justify-content: center; }

/* ── footer ── */
.foot { background: var(--dark); color: #FAFAFA; padding: 60px 0 36px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; padding-bottom: 66px; }
.foot-brand img { height: 22px; width: auto; filter: invert(1) brightness(2); margin-bottom: 20px; }
.foot-brand p { font-size: 14px; line-height: 1.55; color: rgba(250,250,250,.5); max-width: 250px; }
.foot-col .h { display: block; font-size: 12px; font-weight: 500; color: rgba(250,250,250,.45); margin-bottom: 16px; }
.foot-col a { display: block; font-size: 14px; color: rgba(250,250,250,.72); padding: 5px 0; transition: color .2s; }
.foot-col a:hover { color: #fff; }
.foot-bot { border-top: 1px solid var(--line-d); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot-bot, .foot-bot a { font-size: 12px; color: rgba(250,250,250,.42); }
.foot-bot a:hover { color: rgba(250,250,250,.8); }
.foot-bot .l { display: flex; gap: 22px; }

/* ── interior page head ── */
.phd { padding: 186px 0 96px; }
.phd .kick { margin-bottom: 22px; }
.phd .d1 { max-width: 15ch; margin-bottom: 24px; }
.phd .lead { max-width: 46ch; margin-bottom: 34px; }

/* ── pricing plans ── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.pl { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 0;
  padding: 40px 34px 36px; display: flex; flex-direction: column; }
.pl.hl { border-color: var(--orange); }
.pl .tag { display: block; min-height: 18px; font-size: 12px; font-weight: 500; color: var(--orange); margin-bottom: 12px; }
.pl .nm { font-family: var(--f-d); font-weight: 300; font-size: 30px; letter-spacing: -.04em; color: var(--ink); }
.pl .for { font-size: 13px; color: var(--muted-2); margin-top: 6px; }
.pl .from { font-size: 12px; font-weight: 500; color: var(--muted-2); margin-top: 30px; }
.pl .price { font-family: var(--f-d); font-weight: 300; font-size: 48px; letter-spacing: -.05em;
  line-height: 1; color: var(--ink); margin: 8px 0 4px; }
.pl .per { font-size: 14px; color: var(--muted); }
.pl .rule { border-top: 1px solid var(--line); margin: 28px 0 20px; }
.pl .h { display: block; font-size: 12px; font-weight: 500; color: var(--ink); margin-bottom: 14px; }
.pl ul { list-style: none; margin-bottom: 30px; }
.pl li { font-size: 14px; line-height: 1.5; color: var(--muted); padding: 8px 0 8px 18px; position: relative; }
.pl li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 1px; background: var(--muted-2); }
.pl .btn { margin-top: auto; align-self: stretch; }

/* ── marquee ── */
.strip { overflow: hidden; margin-top: 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.strip-track { display: flex; align-items: center; gap: 72px; width: max-content; animation: strip 52s linear infinite; }
.strip img { height: 38px; width: auto; max-width: 150px; object-fit: contain; opacity: .5; filter: grayscale(1); }
@keyframes strip { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } }

/* ── reveal ── */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ── responsive ── */
@media (max-width: 1180px) {
  .wall { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .wc img { height: calc(var(--lh,52) * .82px); }
  .sgrid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  :root { --gut: 22px; }
  .nav-menu { display: none; }
  .nav-in { height: 74px; }
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero .d1 { max-width: 100%; }
  .prow, .twoup, .plans { grid-template-columns: 1fr; gap: 20px; }
  .band { padding: 84px 0; }
  .finale { padding: 96px 0 100px; }
  .phd { padding: 128px 0 64px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  /* minmax(0,1fr): with plain 1fr the logo images' intrinsic width sets the
     column min-content and the grid grows past the viewport. */
  .wall { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wall-wrap { padding: 0 var(--gut); }
  .wc { height: 92px; padding: 12px; }
  .wc img { height: calc(var(--lh,52) * .62px); max-width: 100%; }
  .cs .clg { left: 20px; }
  .cs .clg img { height: calc(var(--mh, 30px) * .68); }
  .wall-title { font-size: 23px; margin-bottom: 30px; }
  .sgrid, .stats { grid-template-columns: 1fr; }
  /* four link lists stacked ran the footer to 1340px; two up halves it */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-bottom: 44px; }
  .foot-brand { grid-column: 1 / -1; }

  /* ── phone pass ── */
  /* nav: the logo + Log in + button no longer fit at 375 with the desktop gaps */
  .nav-in { gap: 14px; height: 66px; }
  .nav-logo img { height: 21px; transform: translateY(-1.5px); }
  .nav-right { gap: 14px; }
  .nav .login { font-size: 13px; }
  .nav .btn.btn-sm { min-height: 36px; padding: 0 13px; font-size: 10px; letter-spacing: .1em; }
  .nav-mob .btn.btn-sm { font-size: 11px; padding: 0 16px; }

  /* platform selector: four tabs in a row are 488px wide, which was what
     pushed the whole document past the viewport. 2x2 keeps the tray. */
  .ptabs-wrap { display: block; }
  /* three tabs since Integrations became its own block - a 2x2 grid orphans one */
  .ptabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); width: 100%; margin-top: 40px; }
  .ptab { padding: 14px 6px; font-size: 13px; }

  /* platform panel: 2/1 is 165px tall at this width, which clipped the title
     and pushed the button out of the frame. Square, with the copy scaled down. */
  .ppanels { aspect-ratio: 1/1; margin-top: 32px; }
  .pin { padding: 26px 20px; }
  .pttl { font-size: 30px; letter-spacing: -.03em; }
  .psub { font-size: 14px; margin-top: 12px; }
  .pin .btn { margin-top: 20px; }

  /* the two partner panels: 3/2 was not tall enough for title + copy + button */
  .hpanel { aspect-ratio: 1/1; }
  .hpanel .pin { padding: 26px 20px; }
  .hpanel .pttl { font-size: 25px; }

  /* governance diagram: keep the 2x2 and the mark on the crossing. One column
     left four tall cards with dead space and the alternating alignment read as
     a mistake. */
  .gdiag { grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
  .gd { min-height: 0; padding: 16px 14px 20px; }
  .gd-r { text-align: left; }
  .gdt { font-size: 10px; letter-spacing: .1em; margin-bottom: 11px; }
  .gdi { font-size: 12px; line-height: 1.7; }
  .gd-core { display: block; }
  .gd-mark { width: 44px; height: 44px; }

  /* quotes: six stacked slots ran 2260px. Three per page keeps the rotation
     and the photo/quote mix on both pages. */
  .qslot:nth-child(n+4) { display: none; }
  .qslot { min-height: 320px; }
  .qtile { padding: 26px 24px 24px; }
  .qtile blockquote { font-size: 15px; }

  /* type: the display clamps top out too big for a 375 column */
  .hhead { margin-bottom: 40px; }
  .hreg { margin-bottom: 64px; }
  .hpair { margin-bottom: 64px; }
  .band { padding: 64px 0; }
  .finale { padding: 76px 0 80px; }
  .hero-ctas { flex-wrap: wrap; }
}


/* ── blueprint corner marks: the "+" register marks on framed elements ── */
.framed { position: relative; }
.bpc { position: absolute; width: 9px; height: 9px; pointer-events: none; z-index: 2;
  color: rgba(20,30,40,.30);
  background: linear-gradient(currentColor 0 0) center / 100% 1.2px no-repeat,
              linear-gradient(currentColor 0 0) center / 1.2px 100% no-repeat; }
.bpc.tl { top: 0;    left: 0;  transform: translate(-50%,-50%); }
.bpc.tr { top: 0;    right: 0; transform: translate(50%,-50%); }
.bpc.bl { bottom: 0; left: 0;  transform: translate(-50%,50%); }
.bpc.br { bottom: 0; right: 0; transform: translate(50%,50%); }
.on-d .bpc, .b-d .bpc, .b-d2 .bpc, .cs .bpc { color: rgba(250,250,250,.44); }

/* section register rail: a hairline with "+" marks at the content edges */
.reg { position: relative; border-top: 1px solid var(--line); height: 1px; margin: 0 0 54px; }
.on-d .reg { border-color: var(--line-d); }
.reg .bpc { top: 0; }
.reg .bpc.l { left: 0;  transform: translate(-50%,-50%); }
.reg .bpc.c { left: 50%; transform: translate(-50%,-50%); }
.reg .bpc.r { right: 0; transform: translate(50%,-50%); }

/* interior pages have no photographic hero: nav starts solid */
body.interior .nav { background: var(--bg); border-bottom-color: var(--line); color: var(--ink); }
body.interior .nav .nav-logo img { filter: none; }
body.interior .nav .btn { background: var(--orange); border-color: rgba(146,60,10,.42); color: #fff; }

/* ══════════════════════════════════════════════════════
   HERO VARIANTS
   ══════════════════════════════════════════════════════ */

/* a light hero the nav floats over: no background, but ink type and the solid
   button, because white-on-light would be invisible */
body.clearhero .nav { background: transparent; border-bottom-color: transparent; color: var(--ink); }
body.clearhero .nav .nav-logo img { filter: none; }
body.clearhero .nav .btn { background: var(--orange); border-color: var(--orange); color: #fff; }
body.clearhero .nav .btn:hover { background: var(--orange-br); border-color: var(--orange-br); }
body.clearhero .nav.solid { background: var(--bg); border-bottom-color: var(--line); }

/* light heroes: nav is solid from the top */
body.lighthero .nav { background: var(--bg); border-bottom-color: var(--line); color: var(--ink); }
body.lighthero .nav .nav-logo img { filter: none; }
body.lighthero .nav .btn { background: var(--orange); border-color: rgba(146,60,10,.42); color: #fff; }
body.lighthero .nav .btn:hover { background: var(--orange-br); border-color: var(--orange-br); }

/* ── P · product panel (Ramp): copy on top, big framed product below ── */
.heroP { padding: 184px 0 0; background: var(--bg); }
.heroP .kick { margin-bottom: 30px; }
.hp-top { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 60px;
  align-items: end; margin-bottom: 72px; }
.heroP .d1 { max-width: 15ch; }
.heroP .lead { max-width: 40ch; margin-bottom: 28px; }
.hp-aside { padding-bottom: 6px; }
.hp-frame { position: relative; border: 1px solid var(--line); background: var(--white); overflow: hidden; }
.hp-frame video { width: 100%; height: auto; display: block; }
.hp-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.hp-bar i { width: 8px; height: 8px; background: var(--line); display: block; }
.hp-bar span { margin-left: 8px; font-family: var(--f-m); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2); }

/* ── S · split (editorial): statement left, product right ── */
.heroS { padding: 176px 0 116px; background: var(--bg); }
.heroS-grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 64px; align-items: center; }
.heroS .kick { margin-bottom: 24px; }
.heroS .d1 { margin-bottom: 22px; }
.heroS .lead { max-width: 40ch; margin-bottom: 32px; }
.hs-frame { position: relative; border: 1px solid var(--line); background: var(--white); overflow: hidden; }
.hs-frame video { width: 100%; height: auto; display: block; }
.heroS-notes { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line);
  margin-top: 84px; }
.heroS-notes > div { padding: 28px 32px 0 0; border-right: 1px solid var(--line); }
.heroS-notes > div:last-child { border-right: 0; }
.heroS-notes > div:not(:first-child) { padding-left: 32px; }
.heroS-notes .k { font-family: var(--f-m); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 10px; display: block; }
.heroS-notes p { font-size: 14px; line-height: 1.5; color: var(--muted); }

@media (max-width: 980px) {
  .heroP { padding: 120px 0 0; }
  .hp-top { grid-template-columns: 1fr; gap: 26px; margin-bottom: 44px; }
  .heroS { padding: 116px 0 76px; }
  .heroS-grid { grid-template-columns: 1fr; gap: 40px; }
  .heroS-notes { grid-template-columns: 1fr; }
  .heroS-notes > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 0 !important; }
}

/* ══════════════════════════════════════════════════════
   SOLUTION PAGE  (first built for /solutions/quote-sell)
   Everything here is a variant of a homepage component, not a new language.
   ══════════════════════════════════════════════════════ */

/* interior hero: same grid as the homepage, shorter, so it reads as a page
   inside the site rather than a second front door */
.hero-s { height: 72svh; min-height: 560px; }
.hero-s .d1 { font-size: clamp(40px, 4.6vw, 66px); max-width: 20ch; }

/* the three processes: the solutions grid, three up */
.sgrid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
/* five cards in a three-column grid leaves a hole in the second row; flex lets
   the last row centre under the first */
.sgrid-5 { display: flex; flex-wrap: wrap; justify-content: center; }
.sgrid-5 > .sc { flex: 0 1 calc(33.333% - 14px); }
@media (max-width: 900px) { .sgrid-5 > .sc { flex: 0 1 100%; } }
.shead-sub { max-width: 62ch; margin: 18px auto 0; }
.ctarow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }

/* the process list runs straight into the full-bleed panel: 130 + 130 of band
   padding left 260px of empty white above it */
#processes { padding-bottom: 112px; }
#work { padding-top: 0; }

/* the diagram's vertical position is hand-computed per page: it must be
   re-measured whenever the left column's height changes.
   padding = listTop + listH/2 - diagH/2, then 55px less, his preference.
   quote-sell: listTop 240, listH 463, diagH 484 -> 394 - 55 */
#control .gov2-r { padding-top: 339px; }
@media (max-width: 1040px) { #control .gov2-r { padding-top: 0; } }
.shead-c .shead-sub { text-align: center; }

/* ── product UI over an industry frame ──────────────────────────────────
   The panel is the industry; the card is the product. The card is REAL
   markup, never a generated image -- image models garble UI text and small
   glyphs, and this has to survive a full-resolution look. */
.upanel { position: relative; overflow: hidden; background: var(--dark);
  isolation: isolate;
  /* full-bleed: breaks out of .wrap to the viewport edges */
  width: 100vw; margin-left: calc(50% - 50vw); aspect-ratio: 22/7; min-height: 440px; }
@media (max-width: 900px) { .upanel { width: auto; margin-left: 0; } }
.upanel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.18) sepia(.10) brightness(var(--exp, 1)) url(#cardgrade); }
.upanel .ushade { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,10,14,.82) 0%, rgba(8,10,14,.58) 42%, rgba(8,10,14,.30) 72%, rgba(8,10,14,.42) 100%); }
.uwrap { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 72px; padding: 0 40px;
  /* the panel is full-bleed but the content sits in the middle of it, not out
     at the viewport edges */
  max-width: 1120px; margin: 0 auto; }
.ucopy .d3 { font-family: var(--f-d); font-weight: 400; color: #FAFAFA;
  font-size: clamp(34px, 3.8vw, 56px); line-height: 1.03; letter-spacing: -.038em; max-width: 14ch; }
.ucopy p { margin-top: 20px; font-size: 17px; line-height: 1.52; color: rgba(250,250,250,.82);
  max-width: 38ch; }
.ucopy .btn { margin-top: 26px; }

/* the abstract product UI itself */
.uicard { justify-self: end; width: 100%; max-width: 500px; background: var(--white);
  border: 1px solid rgba(20,30,40,.14); box-shadow: 0 24px 60px rgba(8,10,14,.34); }
.uicard .uhead { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--line); }
.uicard .uttl { font-family: var(--f-m); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2); }
.uicard .ulive { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-m);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.uicard .ulive i { width: 6px; height: 6px; background: var(--orange); display: block; }
/* Quote & Sell's card is a CONFIDENCE feed -- what landed, how sure it was,
   what it did with it. Deliberately not the shape of Source & Procure's week
   board: this one is about throughput, that one is about time. */
.urow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px;
  padding: 16px 22px; border-bottom: 1px solid var(--line); }
.urow:last-of-type { border-bottom: 0; }
.urow .uref { font-size: 15px; color: var(--ink); display: flex; align-items: baseline; gap: 10px; }
.urow .usrc { font-family: var(--f-m); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }
.urow .utime { font-family: var(--f-m); font-size: 10px; letter-spacing: .05em; color: #B4B4AC; }
.urow .ustate { display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--muted); }
.urow .ustate::before { content: ""; width: 5px; height: 5px; background: #3F5B37; flex: none; }
/* the number alone was just a number -- the track is what makes it read as a signal */
.urow .uconf { display: block; min-width: 46px; text-align: right; }
.urow .uconf b { display: block; font-family: var(--f-m); font-size: 12px; font-weight: 400;
  color: var(--muted-2); }
.urow .uconf i { display: block; height: 2px; margin-top: 6px; background: var(--line); }
.urow .uconf i::after { content: ""; display: block; height: 2px;
  width: calc(var(--w, 100) * 1%); background: #3F5B37; }
.urow.is-ex { background: rgba(236,117,35,.06); }
.urow.is-ex .ustate::before, .urow.is-ex .uconf i::after { background: var(--orange); }
.urow.is-ex .uconf b { color: var(--orange); }

/* ── the line-load board: Plan & Produce's product UI ──────────────────
   Third distinct form on purpose. Quote & Sell's card is a feed (throughput),
   Source & Procure's is a calendar (time); this one is a MEASURE -- how full
   each line is against the hours it actually has. Prefixed llb-. */
.llb { padding: 6px 22px 18px; }
.llb-r { display: grid; grid-template-columns: 92px minmax(0,1fr) 44px; align-items: center;
  gap: 16px; padding: 13px 0 14px; border-bottom: 1px solid var(--line); }
.llb-r:last-of-type { border-bottom: 0; }
.llb-n { font-size: 13.5px; color: var(--ink); }
.llb-n span { display: block; font-family: var(--f-m); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 3px; }
/* the track runs to 125% so anything over capacity has somewhere to go, and the
   capacity line sits at 80% of the track -- an over-run must LOOK like an over-run */
.llb-t { position: relative; height: 8px; background: #F2F2EC; }
.llb-t i { position: absolute; left: 0; top: 0; height: 8px; background: #7E8C74;
  width: calc(var(--l) * 0.8%); }
.llb-t.over i { background: var(--orange); }
.llb-t::after { content: ""; position: absolute; left: 80%; top: -3px; width: 1px; height: 14px;
  background: var(--muted-2); }
.llb-p { font-family: var(--f-m); font-size: 12px; color: var(--muted-2); text-align: right; }
.llb-t.over ~ .llb-p, .llb-p.over { color: var(--orange); }

/* ── the shipment track: Deliver & Support's product UI ────────────────
   Fourth distinct form. Feed (Quote & Sell) / calendar (Source & Procure) /
   measure (Plan & Produce) / and this one, a JOURNEY -- five stops, filled up
   to wherever the shipment actually is. Prefixed shp-. */
.shp { padding: 6px 22px 18px; }
.shp-r { display: grid; grid-template-columns: 108px minmax(0,1fr) 84px; align-items: center;
  gap: 14px; padding: 15px 0 16px; border-bottom: 1px solid var(--line); }
.shp-r:last-of-type { border-bottom: 0; }
.shp-n { font-size: 13.5px; color: var(--ink); }
.shp-n span { display: block; font-family: var(--f-m); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 3px; }
/* five stops on a hairline; --at says how many are behind it */
.shp-t { position: relative; display: flex; align-items: center; justify-content: space-between; }
.shp-t::before { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1px;
  background: var(--line); }
.shp-t i { position: relative; width: 7px; height: 7px; background: #E4E4DC; flex: none; }
.shp-t i:nth-child(-n+1) { background: #7E8C74; }
.shp-t[data-at="2"] i:nth-child(-n+2), .shp-t[data-at="3"] i:nth-child(-n+3),
.shp-t[data-at="4"] i:nth-child(-n+4), .shp-t[data-at="5"] i:nth-child(-n+5) { background: #7E8C74; }
/* the one that stopped: everything behind it stays done, the stop itself is the problem */
.shp-t.held i:nth-child(3) { background: var(--orange); box-shadow: 0 0 0 3px rgba(236,117,35,.18); }
.shp-s { font-size: 12px; color: var(--muted); text-align: right; }
.shp-s.held { color: var(--orange); }

/* ── the debtor book: Pay & Collect's product UI ───────────────────────
   Fifth distinct form. Feed / calendar / measure / journey are all taken;
   this one is a COMPOSITION -- a single total cut into ageing buckets, so
   the shape of the book is the message. Prefixed dbk-. */
.dbk { padding: 4px 22px 18px; }
.dbk-tot { font-family: var(--f-d); font-weight: 400; font-size: 30px; line-height: 1;
  letter-spacing: -.03em; color: var(--ink); }
.dbk-tot span { display: block; margin-top: 7px; font-size: 12.5px; font-family: var(--f-b);
  letter-spacing: 0; color: var(--muted); }
.dbk-bar { display: flex; height: 12px; margin: 18px 0 0; gap: 2px; }
.dbk-bar i { display: block; height: 12px; }
.dbk-bar i:nth-child(1) { background: #7E8C74; }
.dbk-bar i:nth-child(2) { background: #A8B29E; }
.dbk-bar i:nth-child(3) { background: #D8CBB4; }
.dbk-bar i:nth-child(4) { background: var(--orange); }
.dbk-k { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.dbk-k div { border-top: 1px solid var(--line); padding-top: 11px; }
.dbk-k b { display: block; font-family: var(--f-m); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); font-weight: 400; }
.dbk-k em { display: block; font-style: normal; font-size: 13.5px; color: var(--ink); margin-top: 6px; }
.dbk-k div:last-child b, .dbk-k div:last-child em { color: var(--orange); }

/* ── master data health: Govern & Enable's product UI ──────────────────
   Sixth and last distinct form. Feed / calendar / measure / journey /
   composition are taken; this is a MATRIX -- fields across, systems down,
   one cell per intersection. Prefixed mdh-. */
.mdh { padding: 8px 22px 18px; }
.mdh-g { display: grid; grid-template-columns: 84px repeat(7, minmax(0,1fr)); gap: 0 6px;
  align-items: center; }
.mdh-h { font-family: var(--f-m); font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); padding-bottom: 12px; text-align: center; }
.mdh-h:first-child { text-align: left; }
.mdh-s { font-size: 12.5px; color: var(--ink); padding: 8px 0; }
.mdh-c { justify-self: center; width: 100%; height: 13px; background: #E7E7E0; }
.mdh-c.ok   { background: #7E8C74; }
.mdh-c.bad  { background: var(--orange); }
.mdh-c.none { background: repeating-linear-gradient(45deg,#F0F0EA 0 3px,#E7E7E0 3px 6px); }
.mdh-l { display: flex; gap: 20px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line);
  font-family: var(--f-m); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); }
.mdh-l span { display: inline-flex; align-items: center; gap: 7px; }
.mdh-l i { width: 9px; height: 9px; display: block; }

/* ── The split section, measured off happyrobot.ai/product/governance ───
   Their spine is a true 50/50 that alternates side AND ground tone, with
   copy anchored 48px from the outer edge and a floating product-UI card on
   the other half. Their numbers: H2 36/0.95/-0.045em w400, item head 17,
   body 13.5/1.7. NOT a table -- that was my mistake before. */
.hs { display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  min-height: 560px; border-top: 1px solid var(--line); }
.hs.tint { background: var(--bg-2); }   /* the site's own band colour, not the solutions plate */
.hs-c { padding: 76px 64px 76px 48px; max-width: 620px; justify-self: end; width: 100%; }
.hs.flip .hs-c { order: 2; justify-self: start; padding: 76px 48px 76px 64px; }
.hs.flip .hs-v { order: 1; }
.hs-c h2 { font-family: var(--f-d); font-weight: 400; font-size: 36px; line-height: .96;
  letter-spacing: -.045em; color: var(--ink); margin: 0; }
.hs-i { margin-top: 40px; }
.hs-i + .hs-i { margin-top: 34px; }
.hs-i b { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.012em; color: var(--ink); }
.hs-i p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.hs-v { padding: 64px 48px; display: flex; align-items: center; justify-content: center; }

/* the floating product card that sits on the tinted half */
.hsc { width: 100%; max-width: 470px; background: var(--white);
  border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(8,10,14,.13); }
.hsc-h { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px;
  border-bottom: 1px solid var(--line); font-family: var(--f-m); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.hsc-b { padding: 6px 20px 16px; }

/* ── Integrations gets a DIFFERENT device from Control, measured off
   happyrobot.ai/product/agents/integrations: floating rounded app tiles,
   then a numbered card row whose dividers are a 1px GRID GAP on a tinted
   ground. Their numbers: card pad 30/20, head 20/23, body 14/1.65. */
.tiles { display: grid; grid-template-columns: repeat(5, 96px); gap: 26px; justify-content: center; }
.tiles span { width: 96px; height: 96px; background: var(--white); border-radius: 20px;
  box-shadow: 0 14px 34px rgba(8,10,14,.13); display: flex; align-items: center;
  justify-content: center; padding: 20px; }
.tiles img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* wide wordmarks fill by width and end up short, which is correct for them,
   but they need less padding or they read as a sliver */
.tiles span.wide { padding: 26px 14px; }

.ncards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
  background: var(--line); margin-top: 52px; }
.ncards > div { background: var(--bg); padding: 30px 26px 34px; }
.ncards .k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-m);
  font-size: 10px; letter-spacing: .12em; color: var(--muted-2); }
.ncards .k i { width: 6px; height: 6px; background: var(--orange); display: block; }
.ncards b { display: block; font-size: 20px; line-height: 1.15; font-weight: 500;
  letter-spacing: -.018em; color: var(--ink); margin-top: 20px; }
.ncards p { margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(3, 84px); gap: 18px; }
  .tiles span { width: 84px; height: 84px; }
  .ncards { grid-template-columns: 1fr; }
}

@media (max-width: 1040px) {
  .hs { grid-template-columns: 1fr; min-height: 0; }
  .hs-c, .hs.flip .hs-c { padding: 56px 24px 8px; max-width: none; justify-self: stretch; order: 1; }
  .hs-v, .hs.flip .hs-v { order: 2; padding: 28px 24px 60px; }
}



/* the sweep wall inside the Govern & Enable scene -- 54 records at once */
[data-role="sw-grid"] i { display: block; height: 13px; background: #EDEDE7; transition: background .35s; }
[data-role="sw-grid"] i.seen { background: #7E8C74; }
[data-role="sw-grid"] i.flag { background: var(--orange); }

/* ── the PO book: a promised-date week, not a status feed ──────────────
   Source & Procure's product UI has to read as TIME, not as a queue -- the
   whole point of the block is that a date quietly moved. Prefixed pob-
   because .uc/.pb/.pd are all taken elsewhere in this file. */
.pob { padding: 20px 22px 22px; }
.pob-w { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; }
.pob-d { min-height: 152px; padding: 0 9px; border-left: 1px solid var(--line); }
.pob-d:first-child { border-left: 0; padding-left: 0; }
.pob-d:last-child { padding-right: 0; }

/* the day head reads like a calendar: weekday quiet, the date itself in ink */
.pob-dh { display: flex; align-items: baseline; gap: 5px; font-family: var(--f-m);
  font-size: 10px; letter-spacing: .04em; color: var(--ink); padding-bottom: 13px; }
.pob-dh i { font-style: normal; letter-spacing: .12em; text-transform: uppercase;
  font-size: 9px; color: var(--muted-2); }
.pob-d.today .pob-dh::before { content: ""; width: 5px; height: 5px; background: var(--orange);
  align-self: center; flex: none; }

/* a chip is a rule and its label, not a filled box -- boxes inside a bordered
   grid inside a bordered card was three frames deep and read as clutter */
.pob-c { border-left: 2px solid #C9C9C0; padding: 1px 0 2px 9px; margin-bottom: 14px; }
.pob-c b { display: block; font-family: var(--f-m); font-size: 10.5px; font-weight: 400;
  letter-spacing: .02em; color: var(--ink); }
.pob-c span { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.3;
  color: var(--muted); }
.pob-c.moved { border-left-color: var(--orange); }
.pob-c.moved b { color: var(--orange); }
.pob-slip { display: block; margin-top: 6px; font-family: var(--f-m); font-size: 9px;
  letter-spacing: .04em; color: var(--orange); white-space: nowrap; }
.pob-none { display: block; width: 10px; height: 1px; background: var(--line); margin-top: 6px; }
.urow.is-ex .ustate { color: var(--orange); }
.uicard .ufoot { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted-2); }
.uicard .ufoot b { font-weight: 500; color: var(--ink); }
/* declared AFTER .uicard .ufoot b on purpose -- that rule is (0,2,1) and would
   otherwise win, which is how the drifting count silently stayed ink. */
.uicard .ufoot b.pob-drift { color: var(--orange); }

/* proof row: the case rail, three cards, no scroller */
.prow3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.prow3 .cs { width: auto; }

@media (max-width: 1040px) {
  .uwrap { grid-template-columns: 1fr; gap: 26px; padding: 40px; }
  .uicard { justify-self: start; max-width: 420px; }
  .upanel { aspect-ratio: auto; min-height: 620px; }
}
@media (max-width: 900px) {
  .sgrid-3, .prow3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hero-s { height: auto; min-height: 0; padding: 104px 0 44px; }
  .uwrap { padding: 26px 20px; }
  .upanel { min-height: 0; }
  .uicard { max-width: 100%; }
}


/* ── solution hero: centred stack, one button, a wide frame under it ────
   Measured off happyrobot's solution hero (1920 viewport): headline ~72px on
   two lines with the second line dropped to grey, standfirst ~15px in a 460px
   measure, one small dark button, then a full-width frame inset ~13% a side
   with 60px of air above it. Scaled to our 1440 container. */
.shero { padding: 168px 0 0; background: var(--bg); text-align: center; }
.shero .d1 { font-size: clamp(38px, 4.4vw, 62px); line-height: 1.06; letter-spacing: -.036em;
  max-width: 20ch; margin: 0 auto; }
.shero .d1 em { font-style: normal; color: var(--muted-2); }
.shero .lead { max-width: 48ch; margin: 26px auto 0; font-size: 16px; color: var(--muted); }
.shero-cta { margin-top: 40px; }
.btn-ink { background: var(--dark); border-color: var(--dark); color: #FAFAFA; min-height: 42px;
  padding: 0 20px; }
.btn-ink:hover { background: var(--ink); border-color: var(--ink); color: #FAFAFA; }
.sframe { position: relative; margin-top: 62px; aspect-ratio: 16/8; overflow: hidden;
  background: var(--dark); }
.sframe video, .sframe img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(1.16) sepia(.10) brightness(1.02); }

/* ── the processes as an editorial list, not a card grid ───────────────── */
.plist { border-top: 1px solid var(--line); }
.prowi { display: grid; grid-template-columns: 56px minmax(0,.9fr) minmax(0,1.25fr);
  gap: 48px; align-items: start; padding: 34px 0 36px; border-bottom: 1px solid var(--line); }
.prowi .pn { font-family: var(--f-m); font-size: 12px; letter-spacing: .12em; color: var(--orange);
  padding-top: 6px; }
.prowi h3 { font-family: var(--f-d); font-weight: 400; font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.prowi p { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 52ch; }

/* ── supervised -> autonomous: the deck's taxonomy device, three tiers ─── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px;
  margin-top: 52px; }
.step { padding: 30px 28px 34px; border: 1px solid var(--line); display: flex;
  flex-direction: column; min-height: 260px; }
.step .sn { font-family: var(--f-m); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; }
.step h3 { font-family: var(--f-d); font-weight: 400; font-size: 25px; line-height: 1.12;
  letter-spacing: -.03em; margin-bottom: 12px; }
.step p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.step-1 { background: var(--dark); border-color: var(--dark); }
.step-1 .sn { color: rgba(250,250,250,.5); }
.step-1 h3 { color: #FAFAFA; }
.step-1 p { color: rgba(250,250,250,.66); }
.step-2 { background: var(--sage-2); border-color: var(--sage-2); }
.step-3 { background: var(--bg-2); border-color: var(--bg-2); }

/* ── the other five: a list, not another card grid ─────────────────────── */
.slist { border-top: 1px solid var(--line); }
.sli { display: grid; grid-template-columns: 150px minmax(0,1fr) 40px; gap: 30px;
  align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .3s var(--ease); }
.sli:hover { padding-left: 10px; }
.sli .k { font-family: var(--f-m); font-size: 11px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted-2); }
.sli h3 { font-family: var(--f-d); font-weight: 400; font-size: 26px; letter-spacing: -.03em;
  color: var(--ink); }
.sli p { font-size: 14.5px; color: var(--muted); margin-top: 4px; }
.sli .arw { font-size: 18px; color: var(--muted-2); justify-self: end; transition: transform .3s var(--ease); }
.sli:hover .arw { transform: translate(3px,-3px); }

@media (max-width: 900px) {
  .shero { padding: 116px 0 0; }
  .sframe { margin-top: 40px; aspect-ratio: 4/3; }
  .prowi { grid-template-columns: 1fr; gap: 12px; padding: 26px 0 28px; }
  .prowi .pn { padding-top: 0; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; }
  .sli { grid-template-columns: 1fr 30px; gap: 14px; }
  .sli .k { grid-column: 1 / -1; }
}

/* ── the walkthrough: the live site's document-handling flow, RESTYLED ───
   Same scene, same four nodes, same Idle/Running/Success states, same camera.
   The block is a CONTAINED panel now: title on the page ground, the scene in a
   framed box below it, the abstract plate inside that box. (The full-bleed
   treatment moved to the "Any format in" panel.) */
.walk { background: var(--bg); padding: 104px 0 110px; }
.walk .d2 { color: var(--ink); text-align: center; max-width: 22ch; margin: 0 auto; }
.walk .wsub { text-align: center; max-width: 52ch; margin: 18px auto 0; font-size: 15.5px;
  line-height: 1.55; color: var(--muted); }

/* the framed box: plate behind, scene centred on top */
.wbox { position: relative; margin: 46px auto 0; width: 100%; aspect-ratio: 16/9;
  overflow: hidden; background: #F1F0EC; isolation: isolate; border: 1px solid var(--line); }
.wbox > img, .wbox > video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: saturate(.20) brightness(1.44) contrast(.68); }
.wbox .wshade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(250,250,249,.72) 0%, rgba(250,250,249,.64) 46%, rgba(250,250,249,.76) 100%); }

/* The stage is 1280x800 and the camera pans INSIDE it, so it is centred whole
   in the box and scaled to fit - never cropped to a different aspect. */
.dhv2-fit { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center;
  justify-content: center; }
.dhv2-root { flex: none; }

/* ── anatomy: measured off happyrobot's solution page (airlines) ────────
   Their capability lists carry NO container chrome at all: background
   transparent, border 0, padding 0. A mono kicker, a two-tone serif headline,
   then flat items at 14px/20 with the grid and hairlines doing the structure.
   Mine had white fills and borders, which is what made it read as clutter. */
.ank { display: block; font-family: var(--f-m); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; }
.anhead .d2 em { font-style: normal; color: var(--muted-2); }
.anat { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 56px;
  margin-top: 64px; }
.anc h3 { font-family: var(--f-m); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.anc ul { list-style: none; margin: 0; padding: 0; }
.anc li { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.anc li b { display: block; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.anc li em { font-style: normal; display: block; font-size: 14px; line-height: 20px;
  color: var(--muted); margin-top: 5px; }

/* what it holds back: label left, plain ruled list right. No chips, no boxes. */
.anex { display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,1fr); gap: 56px;
  margin-top: 76px; padding-top: 34px; border-top: 1px solid var(--line); }
.anex h3 { font-family: var(--f-m); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); }
.anex p { font-size: 14px; line-height: 20px; color: var(--muted); margin-top: 12px; max-width: 34ch; }
.anex ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 56px; }
.anex li { font-size: 14.5px; line-height: 1.4; color: var(--ink); padding: 12px 0;
  border-bottom: 1px solid var(--line); break-inside: avoid; }

@media (max-width: 900px) {
  .walk { padding: 64px 0 70px; }
  .wc-body { min-height: 0; }
  .wl { grid-template-columns: 1fr auto; gap: 8px; }
  .wl .k { grid-column: 1 / -1; }
  .anat { grid-template-columns: 1fr; gap: 34px; }
  .anex { grid-template-columns: 1fr; gap: 22px; margin-top: 48px; }
  .anex ul { columns: 1; }
}

/* ── keyframes the ported workflow scene depends on ─────────────────────
   These are defined in the LIVE site's stylesheet, not in the markup I ported,
   so without them the scan bar, the Running dot and the ERP spinner all sit
   still while everything else animates. */
@keyframes dh-ping { 0% { box-shadow: 0 0 0 0 rgba(236,117,35,.45) }
  70% { box-shadow: 0 0 0 8px rgba(236,117,35,0) }
  100% { box-shadow: 0 0 0 8px rgba(236,117,35,0) } }
@keyframes dh-spin { to { transform: rotate(360deg) } }
@keyframes dh-scan { 0% { transform: translateY(0) } 100% { transform: translateY(86px) } }
@keyframes dh-flow { to { stroke-dashoffset: -20 } }
/* the Plan & Produce scene's three -- ported with it from the live stylesheet.
   Without these one element sits frozen and it reads as a bug, not a missing file. */
@keyframes pl-ping { 0%{box-shadow:0 0 0 0 rgba(236,117,35,.45)} 70%{box-shadow:0 0 0 7px rgba(236,117,35,0)} 100%{box-shadow:0 0 0 7px rgba(236,117,35,0)} }
@keyframes pl-bounce { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-4px);opacity:1} }
@keyframes pl-pulse { 0%,100%{opacity:.45} 50%{opacity:1} }
/* Deliver & Support's three -- keyframes always travel with a ported scene. */
@keyframes co-blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes co-bounce { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-4px);opacity:1} }
@keyframes co-spin { to{transform:rotate(360deg)} }
/* Pay & Collect's three -- keyframes always travel with a ported scene. */
@keyframes fa-ping { 0%{box-shadow:0 0 0 0 rgba(236,117,35,.45)} 70%{box-shadow:0 0 0 7px rgba(236,117,35,0)} 100%{box-shadow:0 0 0 7px rgba(236,117,35,0)} }
@keyframes fa-spin { to{transform:rotate(360deg)} }
@keyframes fa-typing { 0%,60%,100%{transform:translateY(0);opacity:.35} 30%{transform:translateY(-3px);opacity:1} }
/* Govern & Enable's two -- keyframes always travel with a ported scene. */
@keyframes dm-bounce { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-4px);opacity:1} }
@keyframes dm-ping { 0%{box-shadow:0 0 0 0 rgba(236,117,35,.45)} 70%{box-shadow:0 0 0 7px rgba(236,117,35,0)} 100%{box-shadow:0 0 0 7px rgba(236,117,35,0)} }

/* ── customer quote: one wide card, quote left, photo right ─────────────
   The reference Matteo sent is a narrow two-up card; this is the same anatomy
   run much wider, in v2 materials: sharp corners, hairline border, the orange
   only on the quote rule and the metric. */
.cq { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
  border: 1px solid var(--line); background: var(--white); overflow: hidden; }
.cq-l { padding: 54px 58px 48px; display: flex; flex-direction: column; }
.cq-mark { display: flex; align-items: center; gap: 13px; margin-bottom: 34px; }
.cq-mark img { height: 26px; width: auto; object-fit: contain; display: block; }
.cq-mark span { font-size: 15px; font-weight: 500; color: var(--ink); }
.cq blockquote { margin: 0; padding-left: 26px; border-left: 2px solid var(--orange);
  font-family: var(--f-d); font-weight: 400; font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.34; letter-spacing: -.018em; color: var(--ink); }
.cq-rule { margin: 38px 0 26px; border-top: 1px solid var(--line); }
.cq-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
  margin-top: auto; }
.cq-stat b { display: block; font-family: var(--f-d); font-weight: 400; font-size: 42px;
  line-height: 1; letter-spacing: -.04em; color: var(--orange); }
.cq-stat span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.cq-who { text-align: right; }
.cq-who b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.cq-who i { display: block; font-style: normal; font-size: 13.5px; color: var(--muted-2);
  margin-top: 3px; }
.cq-r { position: relative; min-height: 420px; background: var(--dark); }
.cq-r img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: sepia(.26) saturate(1.36) brightness(1.1) hue-rotate(-10deg); }

@media (max-width: 900px) {
  .cq { grid-template-columns: 1fr; }
  .cq-l { padding: 32px 26px 30px; order: 2; }
  .cq-r { order: 1; min-height: 0; aspect-ratio: 3/2; }
  .cq-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cq-who { text-align: left; }
}

/* ══════════════════════════════════════════════════════
   PLATFORM PAGE  (first built for /platform/agents)
   Measured off happyrobot's product/agents page: a hero, then repeated
   capability sections, each one headline + 3-4 FLAT items + one visual, the
   visual alternating sides. Their items carry no container chrome at all.
   ══════════════════════════════════════════════════════ */
.cap { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 84px;
  align-items: start; padding: 78px 0; }
.cap.flip .cap-media { order: -1; }
.cap-l .d3 { font-family: var(--f-d); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1; letter-spacing: -.032em; color: var(--ink); max-width: 18ch; }
.cap-l .lead-s { margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--muted);
  max-width: 44ch; }
.cap-items { margin-top: 34px; border-top: 1px solid var(--line); }
.cap-item { padding: 18px 0 20px; border-bottom: 1px solid var(--line); display: grid;
  grid-template-columns: 28px minmax(0,1fr); gap: 16px; }
.cap-item .n { font-family: var(--f-m); font-size: 11px; letter-spacing: .1em; color: var(--orange);
  padding-top: 3px; }
.cap-item.plain { grid-template-columns: minmax(0,1fr); }
.cap-item b { display: block; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.cap-item em { font-style: normal; display: block; font-size: 14px; line-height: 20px;
  color: var(--muted); margin-top: 5px; }

/* the visual half */
.cap-media { position: relative; }
.cap-frame { position: relative; overflow: hidden; background: #F1F0EC;
  border: 1px solid var(--line); aspect-ratio: 4/3; display: flex; align-items: center;
  justify-content: center; padding: 40px; }
.cap-frame > .plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; filter: saturate(.20) brightness(1.44) contrast(.68); }
.cap-frame > * { position: relative; z-index: 1; }
.cap-frame.photo { padding: 0; background: var(--dark); }
.cap-frame.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; filter: saturate(1.18) sepia(.10) brightness(1.02) url(#cardgrade); }
.cap-frame .uicard { max-width: 460px; width: 100%; box-shadow: 0 24px 60px rgba(8,10,14,.16); }
/* the 2x2 diagram, reused from the governance block but on a light ground */
.cap-frame .gdiag { width: max-content; margin: 0; }
.cap-frame .gd { border-color: rgba(20,30,40,.18); min-height: 150px; width: 190px;
  padding: 18px 18px 20px; background: #FFFFFF; box-shadow: 0 14px 34px rgba(8,10,14,.10); }
.cap-frame .gd-fill { background: #FFFFFF; }
.cap-frame .gdt { color: var(--ink); }
.cap-frame .gdi { color: var(--muted); font-size: 12.5px; }
.cap-frame .gd-core { background: #F1F0EC; padding: 8px; }
.cap-frame .bpc { color: rgba(20,30,40,.30); }

/* the rail cards bottom out at their 300px floor here, so the marks come down with them.
   The 11ch title tightening this block used to carry is GONE - it only existed because the
   mark sat bottom right on the metric's last line. */
@media (max-width: 1040px) {
  .cs .clg { left: 24px; }
  .cs .clg img { height: calc(var(--mh, 30px) * .72); }
}

@media (max-width: 1040px) {
  .cap { grid-template-columns: 1fr; gap: 40px; padding: 64px 0; }
  .cap.flip .cap-media { order: 0; }
  .cap-frame { aspect-ratio: 16/10; padding: 26px; }
  .cap-frame .gd { width: 150px; min-height: 128px; }
}

/* ⚠ THE 375px OVERFLOW on /platform/agents. `.cap-frame .gdiag` is `width: max-content`
   over two 150px cards = 312 + 52 of frame padding = 364 inside a 331 column, which
   pushed the document to 388 and let the whole page drag sideways. The frame could not
   shrink because nothing let the cards be fluid.
   This block MUST sit after `.cap-frame .gdiag` (~line 1007): the 620 block ~430 lines
   up declares `.gdiag { width: 100% }` and loses on specificity, and a media query adds
   none of its own. */
@media (max-width: 620px) {
  /* letting the diagram be fluid made it 236 tall inside a 16/10 frame that was
     only 207 - `overflow:hidden` then ate 31px of it. Content frames size to their
     content on a phone; `.photo` frames keep their ratio, the image needs it. */
  .cap-frame:not(.photo) { aspect-ratio: auto; }
  .cap-frame { padding: 16px; }
  .cap-frame .gdiag { width: 100%; }
  .cap-frame .gd { width: auto; min-width: 0; min-height: 112px; padding: 14px 13px 16px; }
  /* with the cards down to ~142px the centre mark's 54px box reaches 27px into
     each of them and ate the front of "YOUR ERP". There is no room for it at this
     size - the `+` register marks still read the crossing. (The homepage's own
     governance diagram is a different element and keeps its mark.) */
  .cap-frame .gd-core { display: none; }
}

/* ── platform hero: two columns, NOT the solutions page's centred stack ── */
.phero { position: relative; height: 100svh; min-height: 640px; overflow: hidden;
  background: #F1F0EC; display: flex; align-items: center; isolation: isolate; }
.phero-media { position: absolute; inset: 0; z-index: 0; }
.phero-media video, .phero-media img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.24) brightness(1.34) contrast(.74); }
/* ⛔ THE PLATFORM HEROES ALL RUN THE SAME PLATE (his instruction, 2026-09-02:
   "have them all have the same hero as agents just different colors"). The only
   thing that changes per page is the tint on it. Do not swap the clip. */
.phero.tint-cool .phero-media video, .phero.tint-cool .phero-media img {
  filter: saturate(.24) brightness(1.32) contrast(.74) sepia(.26) hue-rotate(176deg); }
.phero.tint-warm .phero-media video, .phero.tint-warm .phero-media img {
  filter: saturate(.34) brightness(1.32) contrast(.72) sepia(.42) hue-rotate(-14deg); }
.phero-scrim { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(70% 62% at 50% 50%, rgba(250,250,249,.62) 0%, rgba(250,250,249,.30) 62%, rgba(250,250,249,.44) 100%); }
.phero > .wrap { position: relative; z-index: 2; text-align: center; }
.phero .d1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -.038em;
  max-width: 17ch; margin: 0 auto; text-align: center; }
.phero .d1 em { font-style: normal; color: var(--muted-2); }
.phero .lead { margin: 24px auto 0; max-width: 50ch; font-size: 17px; color: var(--muted); }

/* ── Control: the only DARK hero on the site. Accountability should not
   arrive on the same drifting plate as everything else. No film at all. */
.phero.ink { background: var(--dark); }
.phero.ink .phero-scrim { background:
  radial-gradient(66% 58% at 50% 46%, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 70%); }
.phero.ink .ank { color: rgba(250,250,250,.52); }
.phero.ink .d1 { color: #FAFAFA; }
.phero.ink .d1 em { color: rgba(250,250,250,.40); }
.phero.ink .lead { color: rgba(250,250,250,.68); }
/* the rule pair under the copy: a hairline that steps in, like a boundary */
.phero-rule { display: flex; justify-content: center; gap: 6px; margin: 46px auto 0; }
.phero-rule i { display: block; height: 1px; background: rgba(250,250,250,.22); }
.phero-rule i:nth-child(1) { width: 190px; }
.phero-rule i:nth-child(2) { width: 58px; background: var(--orange); }
.phero-rule i:nth-child(3) { width: 190px; }

/* ── Integrations: its systems ARE the hero. No film either, and the tiles
   sit under the copy so the subject is visible in the first screen. */
.phero.grid-hero { background: var(--bg); height: auto; min-height: 0; padding: 168px 0 96px; }
.phero.grid-hero .phero-scrim { display: none; }
.phero-tiles { display: grid; grid-template-columns: repeat(6, 78px); gap: 18px;
  justify-content: center; margin: 52px auto 0; }
.phero-tiles span { width: 78px; height: 78px; background: var(--white); border-radius: 17px;
  box-shadow: 0 12px 30px rgba(8,10,14,.11); display: flex; align-items: center;
  justify-content: center; padding: 17px; }
.phero-tiles span.wide { padding: 22px 11px; }
.phero-tiles img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 900px) {
  .phero.grid-hero { padding: 132px 0 74px; }
  .phero-tiles { grid-template-columns: repeat(4, 66px); gap: 14px; }
  .phero-tiles span { width: 66px; height: 66px; padding: 14px; }
}
.phero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; justify-content: center; }

/* flipped capability rows must swap the COLUMN WIDTHS too, or the visual lands
   in the narrow column and every other image comes out smaller */
.cap.flip { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); }

/* ── what runs behind every agent: five ruled columns ─────────────────── */
/* the kicker's line box adds ~16px on top of the band padding, so a symmetric
   130/130 reads as more air above than below. 98 evens it out at 114/114. */
#anatomy { padding-top: 98px; }

/* ink variant: the deck's device, an ink block as the dark beat in a light
   stack. No photograph behind five columns of small type - it needs a scrim so
   heavy the picture turns to mud. */
.b-d .anat5 { border-top-color: var(--line-d); }
.b-d .an5 { border-right-color: var(--line-d); }
.b-d .an5 b { color: #FAFAFA; }
.b-d .an5 p { color: rgba(250,250,250,.62); }
.b-d .an5 .k { color: var(--orange-br); }
.b-d .ank { color: rgba(250,250,250,.52); }
.b-d .shead .p { color: rgba(250,250,250,.66); }
.anat5 { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0;
  border-top: 1px solid var(--line); margin-top: 52px; }
.an5 { padding: 30px 26px 34px; border-right: 1px solid var(--line); }
.an5:last-child { border-right: 0; }
.an5 .k { display: block; font-family: var(--f-m); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 16px; }
.an5 b { display: block; font-family: var(--f-d); font-weight: 400; font-size: 21px;
  line-height: 1.15; letter-spacing: -.028em; color: var(--ink); margin-bottom: 10px; }
.an5 p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* ── the systems strip ──────────────────────────────────────────────── */
.sysrow { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 44px; }
.sysrow div { background: var(--white); display: flex; align-items: center;
  justify-content: center; padding: 22px 16px; min-height: 112px; }
.sysrow img { width: auto; height: calc(var(--sh, 30) * 1px); max-width: 140px;
  object-fit: contain; opacity: .84; }
/* per-logo sizing: every one of these carries a different amount of baked-in
   whitespace, so a shared height renders them at wildly different optical sizes */
.sys-sap { --sh: 46 } .sys-bc { --sh: 54 } .sys-exact { --sh: 46 }
.sys-afas { --sh: 30 } .sys-infor { --sh: 42 } .sys-sf { --sh: 58 }

/* ── stat row: the deck's big orange serif numerals ──────────────────── */
.statrow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px;
  margin-top: 8px; }
.stt { border: 1px solid var(--line); background: var(--white); padding: 34px 32px 36px; }
.stt b { display: block; font-family: var(--f-d); font-weight: 400; font-size: 52px;
  line-height: 1; letter-spacing: -.045em; color: var(--orange); margin-bottom: 16px; }
.stt p { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.stt span { display: block; margin-top: 12px; font-family: var(--f-m); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }

@media (max-width: 1040px) {
  .phero { height: auto; min-height: 0; padding: 128px 0 84px; }
  .cap.flip { grid-template-columns: 1fr; }
  .anat5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .an5 { border-bottom: 1px solid var(--line); }
  .sysrow { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .statrow { grid-template-columns: 1fr; }
}

/* ── the path to live: numbered phases with a time marker ─────────────── */
.path { border-top: 1px solid var(--line); margin-top: 52px; }
.prw { display: grid; grid-template-columns: 46px minmax(0,.74fr) minmax(0,1.16fr) 216px;
  gap: 40px; align-items: start; padding: 30px 0 32px; border-bottom: 1px solid var(--line); }
.prw .n { font-family: var(--f-m); font-size: 12px; letter-spacing: .1em; color: var(--orange);
  padding-top: 7px; }
.prw h3 { font-family: var(--f-d); font-weight: 400; font-size: clamp(21px, 1.8vw, 27px);
  line-height: 1.12; letter-spacing: -.03em; color: var(--ink); }
.prw p { font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 54ch; }
.prw .w { display: block; font-family: var(--f-m); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); }

/* the meter: how much of the work is posting without a person. It is the whole
   argument of the block - the threshold moving - drawn instead of described. */
.meter { margin-top: 14px; }
.meter .bar { display: block; position: relative; height: 8px; background: var(--line);
  overflow: hidden; }
.meter .bar i { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%);
  background: var(--orange); display: block;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.rv.in .meter .bar i, .meter.on .bar i { transform: scaleX(1); }
.prw:nth-child(2) .meter .bar i { transition-delay: .05s }
.prw:nth-child(3) .meter .bar i { transition-delay: .18s }
.prw:nth-child(4) .meter .bar i { transition-delay: .31s }
.meter .mcap { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.45;
  color: var(--muted); }
.meter .mcap b { font-weight: 500; color: var(--ink); }
.path-note { display: flex; align-items: flex-start; gap: 14px; margin-top: 34px;
  font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 72ch; }
.path-note i { width: 8px; height: 8px; background: var(--orange); display: block; flex: none;
  margin-top: 7px; }
@media (max-width: 900px) {
  .prw { grid-template-columns: 34px minmax(0,1fr); gap: 8px 14px; }
  .prw p { grid-column: 2; margin-top: 6px; }
  .prw .w { grid-column: 2; text-align: left; padding-top: 8px; }
}

/* ══════════════════════════════════════════════════════
   PRICING PAGE
   ══════════════════════════════════════════════════════ */
.plans3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px;
  margin-top: 56px; align-items: stretch; }
.pl3 { position: relative; background: var(--white); border: 1px solid var(--line);
  padding: 34px 32px 34px; display: flex; flex-direction: column; }
.pl3.is-ent { border-top: 2px solid var(--orange); }
.pl3-pill { position: absolute; top: -11px; right: 26px; background: var(--orange); color: #fff;
  font-family: var(--f-m); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; }
.pl3 .nm { font-family: var(--f-d); font-weight: 400; font-size: 27px; letter-spacing: -.03em;
  color: var(--ink); }
.pl3 .seg { display: block; margin-top: 7px; font-family: var(--f-m); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--orange); }
.pl3 .price { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.pl3 .price b { font-family: var(--f-d); font-weight: 400; font-size: 40px; line-height: 1;
  letter-spacing: -.04em; color: var(--ink); display: block; }
.pl3 .price b small { font-size: 20px; letter-spacing: -.02em; color: var(--muted-2); }
.pl3 .price span { display: block; margin-top: 8px; font-size: 13px; color: var(--muted-2); }
.pl3 .inc { margin-top: 26px; font-family: var(--f-m); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted-2); }
.pl3 ul { list-style: none; margin: 14px 0 0; padding: 0; }
.pl3 li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--line);
  font-size: 14px; line-height: 1.45; color: var(--ink); }
.pl3 li:last-child { border-bottom: 0; }
.pl3 li::before { content: ""; position: absolute; left: 0; top: 18px; width: 7px; height: 7px;
  background: var(--orange); }
.pl3 .btn { width: 100%; }
.pl3 .btn-wrap { margin-top: auto; padding-top: 30px; }

/* the three notes under the plans */
.pnote { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 56px;
  margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--line); }
.pnote h3 { font-family: var(--f-m); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 14px; }
.pnote b { display: block; font-family: var(--f-d); font-weight: 400; font-size: 23px;
  line-height: 1.16; letter-spacing: -.028em; color: var(--ink); margin-bottom: 10px; }
.pnote p { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* questions: a real accordion, built on <details> so it still works with no JS */
.faq { border-top: 1px solid var(--line); margin-top: 48px; }
.fq { border-bottom: 1px solid var(--line); }
.fq summary { list-style: none; cursor: pointer; display: grid;
  grid-template-columns: minmax(0,1fr) 28px; align-items: center; gap: 24px;
  padding: 26px 0 27px; transition: padding-left .3s var(--ease); }
.fq summary::-webkit-details-marker { display: none; }
.fq summary:hover { padding-left: 8px; }
.fq summary h3 { font-family: var(--f-d); font-weight: 400; font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.2; letter-spacing: -.026em; color: var(--ink); margin: 0; }
/* the marker is a plus that loses its upright stroke when the row opens */
.fq .mk { position: relative; width: 15px; height: 15px; justify-self: end; }
.fq .mk::before, .fq .mk::after { content: ""; position: absolute; background: var(--muted-2);
  transition: transform .35s var(--ease), background .2s; }
.fq .mk::before { left: 0; top: 7px; width: 15px; height: 1.5px; }
.fq .mk::after { left: 7px; top: 0; width: 1.5px; height: 15px; }
.fq[open] .mk::after { transform: scaleY(0); }
.fq[open] .mk::before { background: var(--orange); }
.fq summary:hover .mk::before, .fq summary:hover .mk::after { background: var(--ink); }
.fq-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
.fq[open] .fq-wrap { grid-template-rows: 1fr; }
.fq-inner { overflow: hidden; }
.fq-inner p { font-size: 14.5px; line-height: 1.65; color: var(--muted); max-width: 68ch;
  padding: 0 60px 30px 0; margin: 0; }

@media (max-width: 1040px) {
  .plans3 { grid-template-columns: 1fr; }
  .pnote { grid-template-columns: 1fr; gap: 30px; }
  .fq summary { gap: 16px; }
  .fq-inner p { padding-right: 0; }
}

/* ── pricing hero, to the reference Matteo sent: a big title on the left and
   one row of logos running on the right, masked at both ends. No CTA in the
   hero - the buttons live on the plan cards. ─────────────────────────────── */
.prhero { background: var(--bg); padding: 176px 0 92px; }
.prhero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 72px; align-items: start; }
.prhero .d1 { font-size: clamp(42px, 4.8vw, 68px); line-height: 1.03; letter-spacing: -.042em;
  max-width: 13ch; margin: 0; text-align: left; }
.prhero .d1 em { font-style: normal; color: var(--muted-2); }
.prhero .lead { margin: 26px 0 0; max-width: 42ch; font-size: 16px; color: var(--muted);
  text-align: left; }
.prhero-r { padding-top: 16px; margin-right: calc(50% - 50vw); }
.prhero-r .mq {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%); }

.mq { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
/* Two IDENTICAL sets, each carrying its own trailing gap. With a single flex
   row and `gap`, the total width is 2 sets + an extra gap, so translating -50%
   lands a gap short of the loop point and you see a hitch once per cycle. */
.mq-track { display: flex; align-items: center; width: max-content;
  animation: mqa 32s linear infinite;
  will-change: transform; backface-visibility: hidden; }
.mq-set { display: flex; align-items: center; gap: 64px; padding-right: 64px; flex: none; }
.mq.rev .mq-track { animation-name: mqb; animation-duration: 52s; }
.mq img { width: auto; height: calc(var(--lh, 38) * .86px); max-width: 140px; object-fit: contain; }
@keyframes mqa { from { transform: translate3d(0,0,0) } to { transform: translate3d(-50%,0,0) } }
@keyframes mqb { from { transform: translate3d(-50%,0,0) } to { transform: translate3d(0,0,0) } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none } }

@media (max-width: 1040px) {
  .prhero { padding: 124px 0 60px; }
  .prhero-grid { grid-template-columns: 1fr; gap: 40px; }
  .prhero .d1 { max-width: 18ch; }
  .prhero-r { padding-top: 0; margin-right: 0; }
}

/* the trusted-by marquee band between the hero and the plans: ONE row, held
   in the container rather than run edge to edge */
.mqband { background: var(--bg); padding: 76px 0 104px; }
.mqband .mqk { display: block; text-align: center; font-family: var(--f-m); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 46px; }
.mqband .mq img { height: calc(var(--lh, 38) * 1.06px); max-width: 190px; }


/* ══════════════════════════════════════════════════════
   BOOK A DEMO - the live page's CSS RULES ported, not values measured at one
   width. Fluid where it is fluid: the card is clamp(280px, 82vw, 620px).
   ══════════════════════════════════════════════════════ */
.bd { display: grid; grid-template-columns: 1fr 1fr; height: 100dvh; }
.bd > * { min-width: 0; }

.bd-form { position: relative; display: flex; flex-direction: column; align-items: center;
  background: var(--bg); padding: 34px 72px 40px; overflow-y: auto; scrollbar-width: thin; }
.bd-logo { display: block; width: max-content; align-self: flex-start; }
.bd-logo img { display: block; height: 28px; width: auto; }
.bd-form-in { margin: auto; width: 100%; max-width: 430px; padding: 24px 0; }
.bd-form .d1 { font-family: var(--f-d); font-weight: 400; font-size: clamp(38px, 3.6vw, 58px);
  line-height: 1.02; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.bd-form .d1 em { font-style: normal; color: var(--muted-2); }
/* the form is pulled 40px LEFT of the heading, not the other way round */
.bd-form-in .hs-form-frame { margin: 26px 0 0 -40px; width: calc(100% + 40px); min-height: 380px; }
.bd-form-in .hs-form-frame iframe { width: 100% !important; max-width: 100% !important; border: 0;
  display: block; }

.bd-vis { display: flex; flex-direction: column; justify-content: center; background: var(--bg-2);
  border-left: 1px solid var(--line); overflow: hidden; }
.bd-vis .d2 { flex: 0 0 auto; padding: 0 40px; text-align: center; font-family: var(--f-d);
  font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -.015em;
  color: var(--ink); margin: 0; }
.bd-vis .d2 em { font-style: normal; color: var(--muted-2); }

.bdq-rail { position: relative; flex: 0 0 auto; margin-top: 62px; overflow: hidden;
  cursor: grab; -webkit-user-select: none; user-select: none; }
.bdq-rail.is-drag { cursor: grabbing; }
.bdq-rail-in { display: flex; align-items: stretch; gap: 20px; padding: 0 36px; width: max-content; }
/* the cards carry the /solutions quote-card language: bigger padding, the mark
   over the name, a serif quote on an orange rule, a hairline, then the metric
   in orange serif with the person on the right. */
.bdq { flex: 0 0 clamp(280px, 88vw, 660px); min-height: clamp(240px, 38vh, 360px);
  display: grid; grid-template-columns: 1fr .86fr; gap: 0; padding: 0;
  background: var(--white); border: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 10px 30px rgba(8,10,14,.06); }
.bdq-l { display: flex; flex-direction: column; min-width: 0; padding: 26px 28px 26px; }
.bdq-who { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.bdq-who img { max-height: 24px; max-width: 80px; width: auto; object-fit: contain; display: block; }
.bdq-who span { font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
/* the rule has to breathe past the first and last line, or it stops dead on the
   text and reads like a crop. And the quote needs real air before the hairline. */
.bdq blockquote { flex: 0 0 auto; margin: 0 0 32px; padding: 5px 0 7px 20px;
  border-left: 2px solid var(--orange); overflow: hidden;
  font-family: var(--f-d); font-weight: 400; font-size: 16px; line-height: 1.5;
  letter-spacing: -.01em; color: var(--ink); }
.bdq-foot { flex: 0 0 auto; margin-top: auto; padding-top: 22px; min-height: 74px;
  border-top: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.bdq-stat b { display: block; font-family: var(--f-d); font-weight: 400; font-size: 27px;
  line-height: 1; letter-spacing: -.035em; color: var(--orange); }
.bdq-stat span { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.4;
  color: var(--muted); max-width: 30ch; white-space: nowrap; }
.bdq-per { text-align: right; flex: none; }
.bdq-per b { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.bdq-per i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted-2);
  margin-top: 2px; }
.bdq-ph { position: relative; overflow: hidden; background: var(--bg-2); }
.bdq-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; filter: sepia(.22) saturate(1.3) brightness(1.06) hue-rotate(-10deg); }

.bd-tb { flex: 0 0 auto; text-align: center; margin-top: 58px; padding: 0 40px;
  font-family: var(--f-m); font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); }
.bd-vis .mq { flex: 0 0 auto; width: min(680px, 100%); margin: 42px auto 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.bd-vis .mq-set { gap: 42px; padding-right: 42px; }
.bd-vis .mq img { height: 44px; max-width: none; opacity: .85; }

@media (max-width: 980px) {
  .bd { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .bd-form { padding: 24px 40px 36px; overflow: visible; }
  .bd-logo img { height: 24px; }
  .bd-form-in { max-width: 520px; padding: 28px 0 0; margin: 0 auto; }
  .bd-vis { border-left: 0; border-top: 1px solid var(--line); padding: 34px 0 36px; }
  .bdq-rail { margin-top: 34px; }
  .bdq-rail-in { padding: 0 20px; }
  .bdq { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .bdq-l { padding: 22px 22px 24px; }
  .bdq-ph { order: -1; height: 150px; }
  .bdq-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bdq-per { text-align: left; }
  .bd-tb { margin-top: 30px; }
  .bd-vis .mq { width: min(560px, 100%); margin-top: 30px; }
  .bd-vis .mq img { height: 34px; }
}

/* ── nav dropdowns, to wonderful's actual menu ──────────────────────────
   A FULL-WIDTH white band under the bar - not a small floating box. Inside:
   a muted section label, a two-column list of name + one grey line on the left,
   and a featured card with an image on the right. No border, no shadow.
   ⚠ NEVER :focus / :focus-within here - clicking a label pins the panel open.
   Keyboard path is `:has(> a:focus-visible)` in its own rule. */
.nav-item { position: static; display: inline-flex; align-items: center; }
.nav-item > a { cursor: default; }
/* The panel opens by height, not just opacity, so it reads as the bar expanding.
   State is driven by JS (`.is-open` / `.nav.menu-open`) rather than :hover, so the
   band survives the gaps between labels - see the controller in the page script. */
.dropdown { position: absolute; top: 100%; left: 0; width: 100%;
  display: grid; grid-template-rows: 0fr; opacity: 0; pointer-events: none;
  /* CLOSING - the band holds its surface, rolls up, and only then goes.
     The opacity is DELAYED on purpose: fading first makes it read as a snap-out
     rather than a collapse. */
  transition: grid-template-rows .7s var(--ease-dd-c),
              opacity .52s var(--ease-dd-c) .12s; }
.dropdown > * { overflow: hidden; min-height: 0; }
/* OPENING - longer than the close, and the fade runs the full height so the panel
   never sits fully opaque while it is still growing */
.nav-item.is-open .dropdown { grid-template-rows: 1fr; opacity: 1; pointer-events: auto;
  z-index: 3;
  transition: grid-template-rows .76s var(--ease-dd), opacity .56s var(--ease-dd); }

/* ── SWAPPING BETWEEN LABELS ──────────────────────────────────────────────────
   ⚠ The surface must NEVER blink. Two things caused it to:
   1. keying the fast crossfade off `menu-open`, which is set in the same frame as
      `is-open` - so the FIRST open matched it too and never animated its height.
      `menu-swap` is only set when a panel was already open.
   2. cross-fading the two panels' OPACITY against each other. Both dip below 1 in
      the middle, so the page showed through, and the incoming contents were still
      on their slow .5s open curve while the outgoing ones had already gone - a hole.
   The fix: during a swap NEITHER panel fades. The outgoing one is held at full
   height and full opacity by `.is-out` while only its CONTENTS fade out, and the
   incoming one is placed instantly at full height and opacity with only its
   contents fading in. One opaque band is painted at every frame. */
.nav.menu-swap .dropdown { transition: none !important; }
/* the outgoing panel keeps the band up under the incoming one */
.nav-item.is-out .dropdown { grid-template-rows: 1fr !important; opacity: 1 !important;
  z-index: 2; transition: none !important; }
/* ...and once `.is-out` is dropped it must reset with NO animation, or it collapses
   underneath the panel that replaced it and its edge shows */
/* ⚠ `menu-swap`, NOT `menu-open` - `menu-open` lingers past `hide()` so the bar can
   settle last, and keying this on it made the closing panel snap shut instead. */
.nav.menu-swap .nav-item:not(.is-open):not(.is-out) .dropdown { transition: none !important; }
.nav-item:has(> a:focus-visible) .dropdown { grid-template-rows: 1fr; opacity: 1;
  pointer-events: auto; }
/* the contents settle in just behind the panel, list first then the featured card.
   On the way out they leave quickly, so the band collapses onto empty space rather
   than dragging text down with it. */
.dd-grid > * { opacity: 0; transform: translateY(10px);
  /* on the way out the contents only FADE - the transform is snapped back after
     they are already invisible, or the text visibly slides down as it leaves */
  transition: opacity .3s var(--ease-dd-c), transform 0s linear .32s; }
.nav-item.is-open .dd-grid > * { opacity: 1; transform: none;
  transition: opacity .58s var(--ease-dd) .14s, transform .66s var(--ease-dd) .14s; }
.nav-item.is-open .dd-grid > *:nth-child(2) { transition-delay: .24s; }
/* on a swap the contents are the ONLY thing that moves: old out, new in, band held */
.nav.menu-swap .nav-item.is-open .dd-grid > * {
  transition: opacity .34s var(--ease-dd) .1s, transform .34s var(--ease-dd) .1s !important; }
.nav.menu-swap .nav-item.is-open .dd-grid > *:nth-child(2) { transition-delay: .17s !important; }
.nav-item.is-out .dd-grid > * { opacity: 0 !important; transform: none !important;
  transition: opacity .18s var(--ease-dd) !important; }

.dd-band { background: var(--bg); border-bottom: 1px solid var(--line); padding: 28px 0 42px; }
.dd-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 64px;
  align-items: start; }

/* our label device: mono, tracked, uppercase - not wonderful's grey sentence case */
.dd-k { display: block; font-family: var(--f-m); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 16px; }

/* hairline-ruled rows, the same structure as the anatomy and solutions lists */
.dd-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; max-width: 760px;
  border-top: 1px solid var(--line); }
.dd-items a { display: block; color: var(--ink); padding: 15px 0 16px;
  border-bottom: 1px solid var(--line); }
.dd-items b { display: block; font-size: 15.5px; font-weight: 500; letter-spacing: -.012em;
  color: var(--ink); transition: color .18s var(--ease); }
.dd-items span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45;
  color: var(--muted); }
.dd-items a:hover b { color: var(--orange); }

/* the featured card is a framed block: register marks, mono kicker, serif line */
.dd-feat { display: block; color: var(--ink); position: relative; background: var(--white);
  border: 1px solid var(--line); padding: 14px 14px 18px; }
.dd-feat-img { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--bg-2); }
.dd-feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.16) sepia(.10) brightness(1.02) url(#cardgrade); }
.dd-feat .k { display: block; margin: 15px 0 8px; font-family: var(--f-m); font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--orange); }
.dd-feat b { display: block; font-family: var(--f-d); font-weight: 400; font-size: 19px;
  line-height: 1.22; letter-spacing: -.022em; color: var(--ink);
  transition: color .18s var(--ease); }
.dd-feat:hover b { color: var(--orange); }

/* the bar goes solid while a panel is open, so the band reads as one surface */
/* ⚠ the nav-sync script writes an INLINE background on every scroll, so the bar
   keeps whatever colour the section behind it has. While the menu is open the
   bar must be the panel's own surface wherever you are on the page - inline
   styles only lose to !important. */
.nav.menu-open { background: var(--bg) !important; border-bottom-color: transparent !important;
  color: var(--ink) !important; }
.nav.menu-open .nav-logo img { filter: none !important; }
.nav.menu-open .nav-menu > a, .nav.menu-open .nav-item > a, .nav.menu-open .login {
  color: var(--ink) !important; }
.nav.menu-open .btn { background: var(--orange) !important; border-color: var(--orange) !important;
  color: #fff !important; }

/* ── PHONE NAV ───────────────────────────────────────────────────────────────
   Below 980px the dropdown bands are hidden, which left Platform / Solutions /
   Company as dead text in the bar. A `+` glyph - the site's own register mark -
   opens one full-width band carrying the SAME materials as the desktop panels
   (mono tracked section labels, hairline-ruled rows) on the SAME two curves, so
   the phone motion matches the one he approved on desktop. */
.nav-burger { display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: -9px; padding: 0; flex: none;
  background: none; border: 0; color: inherit; cursor: pointer; }
.nav-burger svg { width: 15px; height: 15px; overflow: visible;
  transition: transform .5s var(--ease-dd); }
.nav-burger line { stroke: currentColor; stroke-width: 1.3; }
.nav.mob-open .nav-burger svg { transform: rotate(45deg); }

/* the panel opens by height exactly like the desktop band. Three nested boxes:
   .nav-mob is the 0fr/1fr grid · .nav-mob-clip does the overflow:hidden the grid
   trick needs · .nav-mob-in does the scrolling. They cannot be the same element. */
.nav-mob { position: absolute; top: 100%; left: 0; width: 100%;
  display: none; grid-template-rows: 0fr; opacity: 0; pointer-events: none;
  transition: grid-template-rows .7s var(--ease-dd-c),
              opacity .52s var(--ease-dd-c) .12s; }
.nav-mob-clip { overflow: hidden; min-height: 0; }
.nav.mob-open .nav-mob { grid-template-rows: 1fr; opacity: 1; pointer-events: auto;
  transition: grid-template-rows .76s var(--ease-dd), opacity .56s var(--ease-dd); }
.nav-mob-in { background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 0 0 26px; max-height: calc(100dvh - 96px);
  overflow-y: auto; overscroll-behavior: contain;
  /* the list is taller than a phone, so this scrolls - but a visible track
     inside a design made of hairlines looks cheap */
  scrollbar-width: none; }
.nav-mob-in::-webkit-scrollbar { width: 0; height: 0; }
/* ── the accordion, measured off wonderful.ai's phone panel (Matteo's reference):
   68px row pitch, 16px names, a hairline under every row, a chevron hard right,
   and ONE full-width CTA closing the panel. Our materials: sharp corners, our
   ink and hairline, the orange button with its amber border. ───────────────── */
.mob-nav { border-top: 1px solid var(--line); margin-top: 10px; }
.mob-sec { border-bottom: 1px solid var(--line); }
.mob-row { display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 68px; padding: 0; gap: 16px;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: -.012em;
  color: var(--ink); transition: color .2s var(--ease); }
a.mob-row { border-bottom: 1px solid var(--line); }
.mob-sec.open > .mob-row { color: var(--orange); }
.mob-row:active { color: var(--orange); }
/* a plain CSS chevron - two borders on a square, rotated. It flips to point up
   on the same curve the panel opens on. */
.mob-ch { flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 1.4px solid var(--muted-2); border-bottom: 1.4px solid var(--muted-2);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .5s var(--ease-dd), border-color .2s var(--ease); }
.mob-sec.open .mob-ch { transform: translateY(2px) rotate(-135deg);
  border-color: var(--orange); }
/* the sub-list opens by height, same mechanic and same two curves as everything
   else in this nav */
.mob-sub { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-dd-c); }
.mob-sub > div { overflow: hidden; min-height: 0; }
.mob-sec.open .mob-sub { grid-template-rows: 1fr;
  transition: grid-template-rows .58s var(--ease-dd); }
.mob-sub a { display: block; padding: 11px 0; font-size: 15px; letter-spacing: -.008em;
  color: var(--muted); }
.mob-sub a:first-child { padding-top: 1px; }
.mob-sub a:last-child { padding-bottom: 24px; }
.mob-sub a:active { color: var(--orange); }

.mob-cta { display: flex; width: 100%; min-height: 54px; margin-top: 28px; }
.mob-login { display: block; margin-top: 20px; text-align: center;
  font-size: 15px; font-weight: 500; color: var(--muted); }

/* same solid bar as an open desktop panel, and for the same reason: nav-sync
   writes an inline background on every scroll, so these need !important */
.nav.mob-open { background: var(--bg) !important; border-bottom-color: transparent !important;
  color: var(--ink) !important; }
.nav.mob-open .nav-logo img { filter: none !important; }
.nav.mob-open .nav-burger, .nav.mob-open .login { color: var(--ink) !important; }
.nav.mob-open .btn { background: var(--orange) !important; border-color: var(--orange) !important;
  color: #fff !important; }

@media (max-width: 980px) {
  .dropdown { display: none; }
  .nav-menu { display: none; }       /* dead labels without their panels */
  .nav-burger { display: inline-flex; }
  .nav-mob { display: grid; }
  /* Log in lives in the panel. The CTA STAYS in the bar while the panel is shut -
     it is the point of the page - and fades out when the panel opens, because the
     panel carries its own full-width one. Fading, not `display:none`, so it leaves
     on the same curve as everything else in this nav. */
  .nav-right > .login { display: none; }
  .nav-right > .btn { transition: opacity .3s var(--ease-dd-c), background .3s var(--ease),
                                  border-color .3s var(--ease), color .3s var(--ease); }
  .nav.mob-open .nav-right > .btn { opacity: 0; pointer-events: none; }
}
/* ⚠ These MUST live here, after the phone-nav base rules. They were originally in
   the 620 block ~900 lines up and silently did nothing: a media query adds no
   specificity, so the later base declaration won and `Log in` had no home at all
   below 620 while the panel kept a 96px bar's ceiling. */
@media (max-width: 620px) {
  .nav-mob-in { max-height: calc(100dvh - 66px); }
  .mob-row { min-height: 64px; }
}

/* ── /platform/integrations: the systems AS the hero frame ──────────────
   Matteo, 2026-09-01: the title, then "multiple multiple logos in the boxes
   like the homepage", about as big as the wide image frame under a solution
   hero. Then: "a bit smaller and a bit wider... and i want each box to be a
   UNIQUE BOX like the homepage one" - so these are separate `framed` cells
   with gaps and their own `+` register marks, NOT one ruled table. Eight
   across, three down, the homepage's flat 1.5:1 proportion. */
.igtab { margin-top: 96px; display: grid; grid-template-columns: repeat(8, minmax(0,1fr));
  gap: 18px; }
/* the partners page runs the same table with six marks in one row */
.igtab.n6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.igc { position: relative; min-height: 108px; border: 1px solid var(--line);
  background: var(--white); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 0 10px; }
/* the mark box is a fixed height so every NAME lands on the same line - without
   it a short mark makes a short stack and its label rides up */
.igc-m { height: 54px; display: flex; align-items: center; justify-content: center; }
/* ⚠ per-logo sizes are an inline `--mh`, never a height: a media query adds no
   specificity and a direct height would survive the phone override */
.igc img { width: auto; height: var(--mh, 34px); max-width: 100%; object-fit: contain;
  display: block; }
.igc b { font-size: 12px; font-weight: 500; letter-spacing: -.008em; color: var(--ink-2);
  text-align: center; line-height: 1.2; }
.igc.more { background: transparent; text-decoration: none;
  transition: background .3s var(--ease), border-color .3s var(--ease); }
.igc.more:hover { background: var(--white); border-color: var(--muted-2); }
.igc.more:hover b { color: var(--ink); }
.igc.more b { font-family: var(--f-m); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); }
@media (max-width: 1180px) {
  .igtab, .igtab.n6 { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 16px; }
}
@media (max-width: 900px) {
  .igtab, .igtab.n6 { margin-top: 64px; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
}
@media (max-width: 620px) {
  .igtab, .igtab.n6 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
  .igc { min-height: 98px; gap: 8px; padding: 0 6px; }
  .igc-m { height: 42px; }
  .igc img { height: calc(var(--mh, 34px) * .82); }
  .igc b { font-size: 10.5px; letter-spacing: -.004em; }
}

/* the connected-systems card: this page's own product-UI form, so the three
   capability rows read as a card, a diagram and a photograph rather than as
   three of the same block */
.dcard .drow { display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 14px; padding: 13px 0 14px; border-bottom: 1px solid var(--line); }
.dcard .drow:last-of-type { border-bottom: 0; }
.dcard .dnm { font-size: 14px; color: var(--ink); }
.dcard .ddr { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); border: 1px solid var(--line);
  padding: 3px 7px; white-space: nowrap; }
.dcard .dds { grid-column: 1 / -1; margin-top: -6px; font-size: 11.5px; line-height: 1.5;
  color: var(--muted-2); }
.dcard .ufoot { display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; border-top: 1px solid var(--line); font-family: var(--f-m);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.dcard .dbody { padding: 4px 20px 8px; }

/* ── /platform/control ─────────────────────────────────────────────────
   Rebuilt 2026-09-01 on the shape Matteo approved for integrations: the
   solution pages' light hero, the page's OWN object where `.sframe` sits,
   then three capability rows whose visuals are three different KINDS.
   His copy from the rejected version is kept word for word - what failed
   was the staging, not the writing. */

/* ⚠ `.arw` WAS ALREADY THE CARD ARROW on the homepage, the case rail and every
   solution page. My audit row took the name and put a border-bottom and a grid
   on all of them: a stray line under every card logo and the solution cards
   knocked off centre. Renamed `.atrow`. THIRD collision this session after
   `.phd` and `.pl` - grep the stylesheet AND the pages before naming a class. */
/* the hero object: the autonomy board, one row per process */
.ctab { margin-top: 84px; border: 1px solid var(--line); background: var(--white); }
.ctab-h { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,.72fr) minmax(0,1.25fr);
  gap: 32px; align-items: center; padding: 15px 28px; border-bottom: 1px solid var(--line);
  font-family: var(--f-m); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); text-align: left; }
.ctr { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,.72fr) minmax(0,1.25fr);
  gap: 32px; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--line);
  text-align: left; }
.ctr:last-child { border-bottom: 0; }
.ctr .cnm { font-size: 16px; color: var(--ink); }
.ctr .cwho { font-size: 12.5px; color: var(--muted); }
.ctr .cln { display: flex; align-items: center; gap: 16px; }
.ctr .ctrack { position: relative; flex: 1; height: 3px; background: #EDEDE7; }
.ctr .ctrack i { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: #7E8C74;
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .15s; }
.rv.in .ctr .ctrack i { transform: scaleX(1); }
.ctr .cval { font-family: var(--f-m); font-size: 12px; color: #7E8C74; min-width: 104px;
  text-align: right; }
.ctr.hold .ctrack i { background: var(--orange); }
/* a stop at zero, so a row that never posts itself reads as a line pinned at
   the start rather than as a track with no data in it */
.ctr.hold .ctrack::before { content: ""; position: absolute; left: 0; top: -4px; bottom: -4px;
  width: 2px; background: var(--orange); }
.ctr.hold .cval { color: var(--orange); }

/* the approval card and the audit trail: the same product-UI family as the
   rest of the site, as CLASSES - the rejected version carried them as a wall
   of inline styles, which is why nothing about them could be tuned */
.apcard .apbody { padding: 18px 20px 20px; }
.apcard .aptl { font-size: 15px; font-weight: 600; color: var(--ink); }
.apcard .apsub { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 6px; }
.apcard .apbtns { display: flex; gap: 9px; margin-top: 18px; }
.apcard .apb { flex: 1; text-align: center; padding: 10px; background: var(--dark);
  color: #fff; font-size: 12.5px; font-weight: 600; }
.apcard .apb2 { padding: 10px 16px; border: 1px solid var(--line); font-size: 12.5px;
  font-weight: 600; color: var(--ink); }
.apcard .aprt { font-family: var(--f-m); font-size: 10px; color: var(--muted-2); margin-top: 14px; }

.aud .arow { display: grid; grid-template-columns: 62px 74px minmax(0,1fr); gap: 12px;
  align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.aud .arow:last-child { border-bottom: 0; }
.aud .at { font-family: var(--f-m); font-size: 10.5px; color: var(--muted-2); }
.aud .aa { font-family: var(--f-m); font-size: 10.5px; color: var(--ink); }
.aud .ad { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.aud .ad b { font-weight: 500; color: var(--ink); }
.aud .arow.held { background: rgba(236,117,35,.05); }
.aud .arow.held .aa { color: var(--orange); }
.aud .abody { padding: 4px 20px 10px; }

/* the third visual is FLAT on purpose: two cards and a table, not three cards.
   ⚠ `pt-` prefixed: `.phd` is ALREADY the page-header class with 186px of
   padding, and a bare `.phd` here inherited it and blew a 230px hole in the
   table's head. And `.ptab` was ALREADY the homepage platform-tab button: its border-top
   leaked onto those buttons as a grey line (he caught it 2026-09-08), so the table is `.pt-table`. */
.pt-table { border-top: 1px solid var(--line); width: 100%; }
.pt-table .pt-row { display: grid; grid-template-columns: minmax(0,1fr) 54px 54px; gap: 18px;
  align-items: center; padding: 20px 0 21px; border-bottom: 1px solid var(--line); }
.pt-table .pt-row.pt-head { padding: 13px 0 14px; }
.pt-table .pt-nm { display: block; font-size: 16px; color: var(--ink); }
.pt-table .pt-ds { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.pt-table .pt-hd { font-family: var(--f-m); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); text-align: center; padding: 0; }
.pt-table .pt-hd.l { text-align: left; }
.pt-table .pt-dot { justify-self: center; width: 9px; height: 9px; background: #7E8C74; display: block; }
.pt-table .pt-dot.off { background: var(--line); }

/* a capability row on the dark ground - control's one dark beat, where the
   audit trail lives. Nothing here exists on the other platform pages. */
.b-d .cap-l .d3 { color: #FAFAFA; }
.b-d .cap-l .lead-s { color: rgba(250,250,250,.66); }
.b-d .cap-items, .b-d .cap-item { border-color: var(--line-d); }
.b-d .cap-item b { color: #FAFAFA; }
.b-d .cap-item em { color: rgba(250,250,250,.62); }
.b-d .cap-frame { background: var(--dark-2); border-color: var(--line-d); }
.cap-frame.bare { background: transparent; border: 0; padding: 0; aspect-ratio: auto; }
.cap-frame.bare .uicard { max-width: 100%; }

@media (max-width: 1040px) {
  .ctab-h, .ctr { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; }
  .ctab-h span:nth-child(2), .ctr .cwho { display: none; }
}
@media (max-width: 620px) {
  .ctab { margin-top: 44px; }
  .ctab-h { padding: 13px 16px; }
  .ctr { padding: 16px; gap: 14px; }
  .ctr .cnm { font-size: 14px; }
  /* a 30px stub of a track says nothing - below 620 the verdict carries the row */
  .ctr .ctrack { display: none; }
  .ctr .cval { font-size: 11px; min-width: 0; }
  .pt-table .pt-row { grid-template-columns: minmax(0,1fr) 40px 40px; gap: 10px; }
}

/* ── control's hero object: the audit trail, full width ─────────────────
   The autonomy board was rejected here (2026-09-01): three tracks at 96, 98
   and 100 are visually identical, so a wide slot carried almost no
   information. What made the integrations hero work is DENSITY of real
   specifics, and the trail is the densest true thing this page owns.
   A hairline spine down the left with a register square per event turns the
   table into a picture without inventing a diagram. */
.atab { margin-top: 84px; border: 1px solid var(--line); background: var(--white);
  text-align: left; }
.atab-h { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 28px; border-bottom: 1px solid var(--line);
  font-family: var(--f-m); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); }
.atab-h b { color: var(--ink); font-weight: 400; }
.atab-b { padding: 8px 28px 18px; }
.atrow { display: grid; grid-template-columns: 78px 30px 108px minmax(0,1fr) 168px;
  gap: 20px; align-items: baseline; padding: 15px 0 16px; border-bottom: 1px solid var(--line);
  position: relative; }
.atrow:last-child { border-bottom: 0; }
.atrow .atm { font-family: var(--f-m); font-size: 11px; color: var(--muted-2); }
/* the spine: one hairline through the whole set, a square where each event sits */
.atrow .asp { position: relative; align-self: stretch; }
.atrow .asp::before { content: ""; position: absolute; left: 50%; top: -16px; bottom: -16px;
  width: 1px; background: var(--line); transform: translateX(-50%); }
.atrow:first-child .asp::before { top: 8px; }
.atrow:last-child .asp::before { bottom: calc(100% - 9px); }
.atrow .asp::after { content: ""; position: absolute; left: 50%; top: 5px; width: 7px; height: 7px;
  background: var(--muted-2); transform: translateX(-50%); }
.atrow .aac { font-family: var(--f-m); font-size: 11px; letter-spacing: .12em; color: var(--ink); }
.atrow .adt { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.atrow .adt b { font-weight: 500; color: var(--ink); }
.atrow .asys { font-family: var(--f-m); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); text-align: right; }
.atrow.held .aac, .atrow.held .asys { color: var(--orange); }
.atrow.held .asp::after { background: var(--orange); }
/* the three things the trail proves, under the object they describe */
.atab-cap { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid var(--line); margin-top: 0; text-align: left; }
.atab-cap > div { padding: 26px 30px 28px; border-right: 1px solid var(--line); }
.atab-cap > div:last-child { border-right: 0; }
.atab-cap b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.atab-cap p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* the autonomy board, compact, as the card beside "you set the line" */
.abcard .abb { padding: 6px 20px 14px; }
.abcard .abr { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px;
  align-items: baseline; padding: 12px 0 13px; border-bottom: 1px solid var(--line); }
.abcard .abr:last-child { border-bottom: 0; }
.abcard .abn { font-size: 13.5px; color: var(--ink); }
.abcard .abv { font-family: var(--f-m); font-size: 11.5px; color: #7E8C74; }
.abcard .abt { grid-column: 1 / -1; position: relative; height: 3px; background: #EDEDE7;
  margin-top: 3px; }
.abcard .abt i { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: #7E8C74;
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .2s; }
.rv.in .abcard .abt i { transform: scaleX(1); }
.abcard .abr.hold .abv { color: var(--orange); }
.abcard .abr.hold .abt::before { content: ""; position: absolute; left: 0; top: -3px; bottom: -3px;
  width: 2px; background: var(--orange); }

@media (max-width: 1040px) {
  .atrow { grid-template-columns: 72px 24px 100px minmax(0,1fr); gap: 16px; }
  .atrow .asys { display: none; }
  .atab-cap { grid-template-columns: 1fr; }
  .atab-cap > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .atab-cap > div:last-child { border-bottom: 0; }
}
@media (max-width: 620px) {
  .atab { margin-top: 44px; }
  .atab-h { padding: 14px 16px; font-size: 9.5px; }
  .atab-b { padding: 6px 16px 14px; }
  .atrow { grid-template-columns: 62px 20px minmax(0,1fr); gap: 12px; padding: 13px 0 14px; }
  .atrow .aac { grid-column: 3; font-size: 10px; }
  .atrow .adt { grid-column: 3; font-size: 13.5px; margin-top: 4px; }
  .atab-cap > div { padding: 20px 16px 22px; }
}

/* ── /company/about ────────────────────────────────────────────────────
   The page's own dense object is a PHOTO WALL. Our only real company
   photography is candid: two office interiors, group shots, an offsite and
   two customer visits. Full-bleed beside the hero film they would read as
   phone snaps; held small the candidness becomes the point, and NONE of them
   ever gets a full-bleed moment.
   ⚠ A strict flush grid read as a contact sheet, correct but flat. Measured
   off clay.com/about, which Matteo likes: their photographs are STAGGERED -
   different sizes, different vertical starts, air between them - so the block
   reads as a company rather than as an archive. Ours does the same on an
   explicit 12-column grid (no rotation, no overlap: this is our register, not
   theirs) with the site's hairline, shadow and still treatment on every frame. */
/* the hero needs a floor under a staggered wall: `.shero` has no bottom
   padding because a solution page's `.sframe` is meant to meet the next band */
.shero:has(.pwall) { padding-bottom: 128px; }
/* a solution page's frame is meant to meet the next band; on partners it needs
   air, because what follows is a card block rather than a coloured section */
.shero:has(.sframe.warm) { padding-bottom: 122px; }
.pwall { margin-top: 84px; display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 88px; gap: 22px; }
.pwall > span { position: relative; overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(8,10,14,.10); display: block; }
.pwall img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; filter: saturate(1.16) sepia(.10) brightness(1.02) url(#cardgrade); }
/* a cell whose photograph does not exist yet - obviously a placeholder, and it
   says what to shoot rather than sitting there as grey filler */
.pwall .pw-ph { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; background: var(--bg-2); box-shadow: none;
  text-align: center; padding: 20px; }
.pwall .pw-ph i { width: 11px; height: 11px; display: block; color: var(--muted-2);
  background: linear-gradient(currentColor 0 0) center / 100% 1.4px no-repeat,
              linear-gradient(currentColor 0 0) center / 1.4px 100% no-repeat; }
.pwall .pw-ph span { font-family: var(--f-m); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); line-height: 1.6; }

/* our space: a WIDE strip, not floating rectangles. Three small photographs
   scattered beside a column of copy read thin - the same pictures run edge to
   edge at the band's full width read like photography. */
.space-head { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 80px; align-items: end; }
.space-head .p { max-width: 52ch; }
.space-g { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px;
  margin-top: 56px; }
.space-g > span { position: relative; overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--line); aspect-ratio: 4/3; display: block; }
.space-g img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; filter: saturate(1.16) sepia(.10) brightness(1.02) url(#cardgrade); }
.space-g .pw-ph { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; text-align: center; padding: 20px; }
.space-g .pw-ph i { width: 11px; height: 11px; display: block; color: var(--muted-2);
  background: linear-gradient(currentColor 0 0) center / 100% 1.4px no-repeat,
              linear-gradient(currentColor 0 0) center / 1.4px 100% no-repeat; }
.space-g .pw-ph span { font-family: var(--f-m); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted-2); line-height: 1.6; }

/* the story: a passage, not a product card. Serif lead-in, then two columns. */
.story { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 84px;
  align-items: start; }
.story-l .d2 { max-width: 14ch; }
.story-cols { columns: 2; column-gap: 56px; }
/* ⚠ a single paragraph cannot flow into a second column - `break-inside: avoid`
   keeps it whole - so it renders as one narrow column with dead space beside
   it. One paragraph, one column. */
.story-cols.one { columns: 1; }
/* a partner passage that carries a bullet list cannot be two columns either */
.story-cols:has(.blist) { columns: 1; }
.story-cols .blist { margin-top: 26px; max-width: none; }
.story-cols .blist + p { margin-top: 30px; }
.story-cols.one p { font-size: 16px; max-width: 62ch; }
.story-cols p { font-size: 15.5px; line-height: 1.72; color: var(--muted);
  break-inside: avoid; margin-bottom: 20px; }
.story-cols p:last-child { margin-bottom: 0; }
.story-cols p b { font-weight: 500; color: var(--ink); }

/* where we are: the careers line under the capability items */
.cap-more { display: inline-flex; align-items: center; gap: 9px; margin-top: 30px;
  font-family: var(--f-m); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
  padding-bottom: 7px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.cap-more:hover { color: var(--orange); border-color: var(--orange); }

@media (max-width: 1040px) {
  .pwall { grid-auto-rows: 74px; }
  .space-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .story { grid-template-columns: 1fr; gap: 34px; }
  .story-l .d2 { max-width: none; }
  .story-cols { columns: 1; }
}
@media (max-width: 620px) {
  .pwall { margin-top: 44px; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 148px;
    gap: 12px; }
  .pwall > span { grid-column: span 3 !important; grid-row: auto !important; }
  .space-g { grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }
  .pwall .pw-ph span { font-size: 9px; letter-spacing: .1em; }
  .story-cols p { font-size: 15px; }
}

/* the trust strip under the customer wall on /company/about. Four facts, and
   ⚠ EVERY ONE OF THEM IS ALREADY PUBLISHED ELSEWHERE ON THE SITE - EU hosting,
   GDPR, residency, on-prem, and "your data never trains anyone else's model".
   Never state a certification we do not hold on a diligence page. */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid var(--line); margin-top: 78px; }
.trust > div { padding: 30px 30px 32px 0; border-right: 1px solid var(--line); }
.trust > div:last-child { border-right: 0; padding-right: 0; }
.trust > div + div { padding-left: 30px; }
.trust .k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-m);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.trust .k i { width: 6px; height: 6px; background: var(--orange); display: block; }
.trust b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.012em;
  color: var(--ink); margin-top: 16px; }
.trust p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.trust-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; }
.trust-foot p { font-size: 13.5px; color: var(--muted-2); margin: 0; }
@media (max-width: 900px) {
  .trust { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .trust > div { border-bottom: 1px solid var(--line); padding-right: 24px; }
  .trust > div:nth-child(2n) { border-right: 0; padding-right: 0; }
  .trust > div:nth-child(2n+1) { padding-left: 0; }
  .trust > div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 620px) {
  .trust { grid-template-columns: 1fr; margin-top: 52px; }
  .trust > div { border-right: 0; padding: 24px 0 26px !important; }
  .trust > div:last-child { border-bottom: 0; }
}

/* ── /company/about, content rebuilt 2026-09-01 from origin/main ────────
   ⚠ Our staging checkout was BEHIND main: the About copy Matteo likes came
   from PRs #34/#35 and is not in the local `site/` folder. Read the page
   from `git show origin/main:site/company/about.html`, not from the working
   tree. Same for `founders-group.jpg` and `peak-capital.svg`. */

/* ⚠ About's title is 22 characters on its longest line and the shared 38px
   phone size wraps it to three. Scoped, so the approved solution and platform
   titles keep the size they were signed off at. */
@media (max-width: 620px) {
  .shero-long .d1 { font-size: clamp(26px, 7.6vw, 38px); }
}

/* the purpose line. Was a dark band; Matteo asked for a white box with the
   register marks on it instead, so it is a `framed` card on the light ground.
   Then: give it a background. The plate recipe from the solution pages -
   washed almost to nothing under a near-white scrim - so the serif stays crisp
   and the box has a ground rather than a flat fill. */
/* ⚠ the CLIP goes on the background layer, not on the box: `overflow:hidden`
   here eats the register marks, which are placed half outside the corners. */
.purpose { position: relative; text-align: center;
  background: var(--white); border: 1px solid var(--line); padding: 96px 40px 104px;
  isolation: isolate; }
/* ⚠ THE DARK HAIRLINE AROUND THE PICTURE WHILE THE BLOCK REVEALS.
   Isolated by elimination: it appears only when the BOX and the IMAGE both
   carry a transform at the same time. The `.rv` reveal translates the box
   while the drift transforms the image inside a clip, and Chrome antialiases
   the nested composited edge into a dark line for the length of the
   transition. Neither an inset, a layer hint nor a background fill touches it.
   The fix is `.rv-fade` on the box: reveal on opacity alone, no transform. */
.purpose-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* a real industry frame, not the abstract plate: an aerial of a distribution
   depot at golden hour, pulled from the hero film's own `53-aerial-depot`
   shot (letterbox cropped, 107/108). Washed to almost nothing and drifting
   slowly, so it reads as a ground with movement in it rather than as a
   photograph behind type. */
.purpose-bg img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.42) brightness(1.26) contrast(.76) sepia(.18);
  transform-origin: 54% 48%; animation: purpose-drift 46s ease-in-out infinite alternate;
  backface-visibility: hidden; will-change: transform; }
@keyframes purpose-drift {
  from { transform: scale(1.06) translate3d(-1.1%, 0.6%, 0); }
  to   { transform: scale(1.14) translate3d(1.4%, -0.8%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .purpose-bg img { animation: none; transform: scale(1.06); }
}
.purpose-bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(74% 66% at 50% 46%, rgba(250,250,250,.84) 0%,
              rgba(250,250,250,.70) 55%, rgba(250,250,250,.80) 100%); }
.purpose .ank, .purpose p { position: relative; z-index: 1; }
.purpose .ank { color: var(--muted); }
.purpose p { font-family: var(--f-d); font-weight: 400; font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.14; letter-spacing: -.032em; color: var(--ink); max-width: 27ch;
  margin: 22px auto 0; }

/* an opacity-only reveal, for a box that carries a transformed child */
.rv-fade { transform: none !important; }

/* the picture that closes the belief table */
.vs-photo { position: relative; margin-top: 64px; overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 24/8; background: var(--bg-2); }
.vs-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.16) sepia(.10) brightness(1.02) url(#cardgrade); }
@media (max-width: 620px) {
  .purpose { padding: 62px 24px 66px; }
  .vs-photo { aspect-ratio: 4/3; margin-top: 40px; }
}

/* what we believe: the world as it runs against the world we envision */
.vs { border-top: 1px solid var(--line); margin-top: 52px; }
.vs-h { display: grid; grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr); gap: 32px;
  padding: 14px 0 15px; border-bottom: 1px solid var(--line);
  font-family: var(--f-m); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); }
.vs-h span:last-child { color: var(--ink); }
.vs-r { display: grid; grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr); gap: 32px;
  align-items: center; padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
.vs-r p { font-size: 16px; line-height: 1.55; margin: 0; }
.vs-now { color: var(--muted-2); }
.vs-next { color: var(--ink); }
.vs-next b { font-weight: 500; }
/* the middle cell is a register mark with a hairline through it, not an arrow */
.vs-m { position: relative; height: 100%; display: flex; align-items: center;
  justify-content: center; }
.vs-m::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--line); transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease) .3s; }
.vs-r.in .vs-m::before { transform: scaleX(1); }
.vs-m i { position: relative; width: 9px; height: 9px; display: block; color: var(--orange);
  background: linear-gradient(currentColor 0 0) center / 100% 1.3px no-repeat,
              linear-gradient(currentColor 0 0) center / 1.3px 100% no-repeat; }
.vs-close { margin-top: 44px; font-family: var(--f-d); font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2; letter-spacing: -.028em; color: var(--muted-2); max-width: 26ch; }
.vs-close b { font-weight: 400; color: var(--ink); }

/* the four founders, and who backs us */
.fphoto { position: relative; margin-top: 56px; overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 24/9; background: var(--bg-2); }
.fphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 34%; filter: saturate(1.16) sepia(.10) brightness(1.02) url(#cardgrade); }
.fnd { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0;
  border-top: 1px solid var(--line); margin-top: 0; }
.fnd > div { padding: 26px 26px 30px; border-right: 1px solid var(--line); }
.fnd > div:first-child { padding-left: 0; }
.fnd > div:last-child { border-right: 0; padding-right: 0; }
.fnd b { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.014em; color: var(--ink); }
.fnd i { display: block; font-style: normal; font-family: var(--f-m); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-top: 7px; }
.fnd p { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* who backs us / who delivers with us. First pass was two bare columns with a
   figure floating beside a logo and a thin strip of partner marks - it read as
   an afterthought. Now two `framed` panels, the number owning its own card and
   the partners in a proper ruled grid with room to breathe. */
.bkg { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: 24px;
  margin-top: 78px; align-items: stretch; }
 /* the two panels are the "squares with no background and an x on the corners"
   he asked for: no fill, a hairline, and the register marks. The marks belong
   to THESE boxes, not to the logo cells inside them. */
.bkg-c { background: transparent; border: 1px solid var(--line); padding: 40px 40px 44px;
  display: flex; flex-direction: column; }
.bkg h4 { font-family: var(--f-m); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 400; margin: 0 0 auto; }
.bkg .fig { display: block; font-family: var(--f-d); font-size: clamp(52px, 5.4vw, 76px);
  line-height: .92; letter-spacing: -.045em; color: var(--ink); margin: 44px 0 0; }
.bkg .figsub { display: block; font-size: 13.5px; line-height: 1.6; color: var(--muted);
  margin-top: 14px; max-width: 30ch; }
.bkg .inv { display: flex; align-items: center; gap: 13px; margin-top: 30px; padding-top: 24px;
  border-top: 1px solid var(--line); }
.bkg .inv img { width: 30px; height: 30px; object-fit: contain; display: block; }
.bkg .inv b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.012em;
  color: var(--ink); }
/* ⚠ scoped to `i`: a bare `.inv span` also matched the WRAPPER span and set the
   name itself in mono uppercase */
.bkg .inv i { display: block; font-style: normal; font-family: var(--f-m); font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); margin-top: 4px; }
.bkg .pcopy { font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 46ch;
  margin: 26px 0 0; }
/* the partner marks: transparent cells with the register marks at their
   corners, no fill and no grid rules (his ask). Two rows of three.
   ⚠ The logos are keyed to FLAT BRAND INK by the house recipe - alpha from
   distance-to-white so internal whites knock out too (Korper's K survives as a
   hole in the square), then recoloured #252820. A CSS `brightness(0)` would
   have filled that K in solid, which is the mistake the integrations block
   already taught us. Copies in `v2img/partners/*-ink.png`. */
.plogos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px;
  margin-top: 30px; }
.plogos span { position: relative; background: transparent; min-height: 94px;
  display: flex; align-items: center; justify-content: center; padding: 20px 18px; }
.plogos img { height: var(--ph, 26px); width: auto; max-width: 100%; object-fit: contain;
  display: block; }

/* the proof cards: one customer number each, linked to the story */
.pfg { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 52px; }
.pfg > * { background: var(--bg); padding: 30px 28px 32px; text-decoration: none; display: block;
  transition: background .3s var(--ease); }
a.pfg-c:hover { background: var(--white); }
/* ⚠ `.pl` is ALREADY the pricing-plan card (white fill, border, padding) and a
   bare `.pl` here drew a white box around every logo. Short class names collide:
   grep before inventing one. Same lesson as `.phd` on the control page. */
.pfg .pfg-l { height: 34px; display: flex; align-items: center; }
/* ⚠ the wall logos sit on padded 900x300 canvases: at any max-height the ink
   comes out at half the size. The TRIMMED copies in `v2img/marks/` are the ones
   to use here, each at its own measured height. */
.pfg .pfg-l img { height: var(--mh, 24px); width: auto; max-width: 150px;
  object-fit: contain; display: block; }
.pfg b { display: block; font-family: var(--f-d); font-weight: 400; font-size: 40px; line-height: 1;
  letter-spacing: -.036em; color: var(--ink); margin-top: 22px; }
.pfg span.pfg-t { display: block; font-size: 14px; line-height: 1.6; color: var(--muted); margin-top: 12px; }
.pfg em { display: block; font-style: normal; font-family: var(--f-m); font-size: 10px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--orange); margin-top: 16px; }

@media (max-width: 1040px) {
  .fnd { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fnd > div { border-bottom: 1px solid var(--line); padding-left: 26px; }
  .fnd > div:first-child, .fnd > div:nth-child(3) { padding-left: 0; }
  .fnd > div:nth-child(2n) { border-right: 0; padding-right: 0; }
  .fnd > div:nth-last-child(-n+2) { border-bottom: 0; }
  .bkg { grid-template-columns: 1fr; gap: 20px; }
  .pfg { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fphoto { aspect-ratio: 16/9; }
}
@media (max-width: 620px) {
  .vs-h, .vs-r { grid-template-columns: 1fr; gap: 10px; }
  .vs-h span:nth-child(2), .vs-m { display: none; }
  .vs-r p { font-size: 15px; }
  .vs-now { padding-bottom: 2px; }
  .fnd { grid-template-columns: 1fr; }
  .fnd > div { padding: 22px 0 24px !important; border-right: 0; }
  .plogos { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .plogos span { min-height: 86px; padding: 16px 12px; }
  .bkg-c { padding: 30px 26px 34px; }
  .pfg { grid-template-columns: 1fr; }
  .bkg .fig { font-size: 44px; }
}

/* ── /company/careers ──────────────────────────────────────────────────
   Built on the settled spine, copy from `origin/main` (PR-era careers page).
   Reuses About's devices: the photo wall, the ruled editorial list, the
   framed statement with a faded frame behind it, `.fnd` for the founders -
   which is where the four bios live now that About dropped its team block. */
.vals { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0;
  border-top: 1px solid var(--line); margin-top: 52px; }
.vals > div { position: relative; padding: 36px 34px 40px; border-right: 1px solid var(--line); }
.vals > div:first-child { padding-left: 0; }
.vals > div:last-child { border-right: 0; padding-right: 0; }
.vals b { display: block; font-family: var(--f-d); font-weight: 400; font-size: 28px;
  line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.vals p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.vals .n { display: block; font-family: var(--f-m); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 18px; }

/* the open-positions banner: copy left, the one button right, on white */
.posb { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 48px; align-items: center;
  background: var(--white); border: 1px solid var(--line); padding: 46px 48px 50px;
  position: relative; }
.posb .ank { margin-bottom: 16px; }
.posb h2 { font-family: var(--f-d); font-weight: 400; font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.08; letter-spacing: -.032em; color: var(--ink); }
.posb p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
@media (max-width: 900px) {
  .vals { grid-template-columns: 1fr; }
  .vals > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px 0 30px; }
  .vals > div:last-child { border-bottom: 0; }
  .posb { grid-template-columns: 1fr; gap: 28px; padding: 34px 26px 38px; }
}

/* ── /company/partners ─────────────────────────────────────────────────
   The three partner models reuse the PRICING page's `.pl3` card verbatim -
   same job, three tiers with a headline number, a list and one button.
   The partners themselves are a ruled editorial list, one row each. */
.prt { border-top: 1px solid var(--line); margin-top: 52px; }
.prt-row { display: grid; grid-template-columns: 190px minmax(0,1fr) 40px; gap: 48px;
  align-items: start; padding: 34px 0 36px; border-bottom: 1px solid var(--line);
  text-decoration: none; transition: background .3s var(--ease); }
.prt-row:hover { background: rgba(255,255,255,.6); }
.prt-mark { display: flex; align-items: center; min-height: 42px; }
.prt-mark img { height: var(--ph, 24px); width: auto; max-width: 100%; object-fit: contain;
  display: block; }
.prt-row h3 { font-family: var(--f-d); font-weight: 400; font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.prt-row p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--muted);
  max-width: 74ch; }
.prt-row .arw { font-size: 18px; color: var(--muted-2); justify-self: end; padding-top: 6px;
  transition: transform .3s var(--ease), color .3s var(--ease); }
.prt-row:hover .arw { transform: translate(3px,-3px); color: var(--orange); }
@media (max-width: 900px) {
  .prt-row { grid-template-columns: minmax(0,1fr) 30px; gap: 20px; }
  .prt-mark { grid-column: 1 / -1; }
}

/* a hero whose source is already saturated takes NO grade - Solifi's press image
   is a sunset at full chroma and the standard saturate/sepia clips it */
.sframe.asis img { filter: none; }

/* the partners hero frame runs a touch warmer: the source is a cool office
   with blue screens and at the standard .10 sepia it sat apart from the
   warm stills everywhere else on the site */
.sframe.warm img { filter: saturate(1.14) sepia(.22) brightness(1.05) contrast(.98); }

/* the partner cards: the box cards he asked for, at a real size. Logo, the
   name big and bold, then a preview of their description and an arrow. */
/* seven partners, three across: the last row carries one card, on purpose.
   Each card is cut in two - the mark centred in the top half, a hairline, then
   the name and the preview below (his ask). */
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px;
  margin-top: 52px; }
.pcards a { position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); min-height: 380px;
  text-decoration: none; transition: box-shadow .35s var(--ease); }
.pcards a:hover { box-shadow: 0 24px 60px rgba(8,10,14,.10); }
.pcards .pc-m { height: 132px; display: flex; align-items: center; justify-content: center;
  padding: 20px 28px; border-bottom: 1px solid var(--line); }
.pcards .pc-m img { height: var(--ph, 26px); width: auto; max-width: 76%;
  object-fit: contain; display: block; }
.pcards .pc-b { flex: 1; display: flex; flex-direction: column; padding: 30px 32px 26px; }
.pcards b { display: block; font-family: var(--f-d); font-weight: 500; font-size: 30px;
  line-height: 1.06; letter-spacing: -.032em; color: var(--ink); }
.pcards p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.pcards .pc-go { margin-top: auto; padding-top: 26px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; font-family: var(--f-m); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
  transition: color .3s var(--ease); }
.pcards a:hover .pc-go { color: var(--ink); }
.pcards .pc-go i { font-style: normal; font-size: 17px; transition: transform .3s var(--ease); }
.pcards a:hover .pc-go i { transform: translate(3px,-3px); color: var(--orange); }
@media (max-width: 900px) { .pcards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) {
  .pcards { grid-template-columns: 1fr; gap: 14px; }
  .pcards a { min-height: 0; }
  .pcards .pc-m { height: 108px; }
  .pcards .pc-b { padding: 24px 24px 22px; }
  .pcards b { font-size: 26px; }
}

/* ── a partner's own page ──────────────────────────────────────────────
   Hero SPLIT on his instruction: the back link, name, their words and the two
   chips on the LEFT, the mark in a framed panel on the RIGHT. `.shero` centres
   its own copy, so every one of those has to be undone here. Sections come
   straight from `origin/main`, re-rendered as our numbered list (a
   "Label: sentence" line) or the two-column passage. */
.shero-split { padding-bottom: 118px; }
.shero-split > .wrap { text-align: left; }
.pt-hero { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
  gap: 76px; align-items: center; }
.shero-split .d1 { text-align: left; margin: 0; max-width: 12ch;
  font-size: clamp(40px, 4.6vw, 64px); }
.shero-split .lead { text-align: left; margin: 24px 0 0; max-width: 52ch; }
.back { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-m);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
  text-decoration: none; margin-bottom: 26px; transition: color .3s var(--ease); }
.back:hover { color: var(--ink); }
.pt-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.pt-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  background: var(--white); padding: 11px 16px; font-size: 13px; color: var(--ink);
  text-decoration: none; transition: border-color .3s var(--ease), color .3s var(--ease); }
.pt-chip:hover { border-color: var(--muted-2); color: var(--orange); }
.pt-chip i { font-style: normal; font-size: 15px; color: var(--muted-2); }
.pt-panel { margin: 0; background: var(--white); border: 1px solid var(--line);
  min-height: 320px; display: flex; align-items: center; justify-content: center; padding: 44px; }
.pt-panel img { height: var(--ph, 46px); width: auto; max-width: 74%; object-fit: contain;
  display: block; }
@media (max-width: 980px) {
  .pt-hero { grid-template-columns: 1fr; gap: 44px; }
  .shero-split .d1, .shero-split .lead { max-width: none; }
}
@media (max-width: 620px) {
  .pt-panel { min-height: 180px; padding: 26px; }
  .pt-panel img { height: calc(var(--ph, 46px) * .74); max-width: 78%; }
}

/* clean bullets, for a partner section that is a long list of short items and
   would be a wall of paragraphs. Same marker as the pricing card's list. */
.blist { list-style: none; margin: 40px 0 0; padding: 0; max-width: 80ch;
  border-top: 1px solid var(--line); }
.blist li { position: relative; padding: 15px 0 15px 24px; border-bottom: 1px solid var(--line);
  font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.blist li::before { content: ""; position: absolute; left: 0; top: 22px; width: 7px; height: 7px;
  background: var(--orange); }
.blist li b { font-weight: 500; color: var(--ink); }

/* ── /company/customer-stories ─────────────────────────────────────────
   REBUILT 2026-09-02 (round 2). Matteo rejected the first version outright and
   sent two references: our OWN live page and happyrobot.ai/customers. Both are
   the same page: a centred hero, a trusted-by logo strip, a three-up grid of
   tiles carrying the customer's MARK (not a photograph), and the close. No
   outcome board, no quote card, no solutions list - those were mine, and they
   were the problem.
   The tile is the live page's `.scard-photo` rule ported (its indigo IS our
   --dark), renamed because `.sgrid` already means the homepage solution grid. */
.stgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 70px 34px; }
.stcard { display: block; text-decoration: none; }
/* the tile: a soft grainy mesh gradient in the house indigo, mark knocked out
   white. The blooms are per-card so the set does not read as six identical panels. */
.stcard-tile { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background:
    radial-gradient(105% 85% at var(--p1, 16% 14%), var(--b1, rgba(62,86,116,.42)) 0%, transparent 58%),
    radial-gradient(95% 80% at var(--p2, 86% 88%), var(--b2, rgba(94,120,152,.24)) 0%, transparent 62%),
    radial-gradient(120% 95% at 62% 108%, rgba(10,15,21,.55) 0%, transparent 70%),
    linear-gradient(146deg, #141E28 0%, #18222C 58%, #1D2836 100%);
  border: 1px solid rgba(20,30,40,.16); }
/* film grain - what stops the panel reading as flat colour */
.stcard-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; }
.stcard:nth-child(2) .stcard-tile { --p1: 78% 16%; --p2: 14% 86%; --b1: rgba(76,100,130,.36); --b2: rgba(44,64,90,.44); }
.stcard:nth-child(3) .stcard-tile { --p1: 20% 84%; --p2: 84% 18%; --b1: rgba(56,82,112,.44); --b2: rgba(104,128,158,.22); }
.stcard:nth-child(4) .stcard-tile { --p1: 50% 8%;  --p2: 50% 96%; --b1: rgba(88,112,142,.28); --b2: rgba(40,60,86,.46); }
.stcard:nth-child(5) .stcard-tile { --p1: 12% 22%; --p2: 92% 70%; --b1: rgba(48,72,102,.48); --b2: rgba(98,122,152,.22); }
.stcard-mark { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center;
  justify-content: center; transition: transform .5s var(--ease); }
.stcard:hover .stcard-mark { transform: scale(1.04); }
/* ⚠ the width is a per-card `--lw`, measured on the live page. These marks carry
   wildly different amounts of canvas, so one shared width renders Xpol twice the
   optical size of Topa. */
.stcard-mark img { width: var(--lw, 52%); height: auto; max-height: 58%; object-fit: contain;
  display: block; filter: brightness(0) invert(1); opacity: .97; }
.stcard-name { font-family: var(--f-d); font-weight: 400; font-size: 29px; line-height: 1.18;
  letter-spacing: -.02em; color: var(--ink); margin: 26px 0 11px; }
.stcard-desc { font-size: 15px; line-height: 1.62; color: var(--muted); margin: 0 0 18px; }
.stcard-more { display: inline-flex; align-items: center; gap: 7px; font-size: 14px;
  font-weight: 500; color: var(--ink); }
.stcard-more i { font-style: normal; font-family: var(--f-m); transition: transform .2s var(--ease); }
.stcard:hover .stcard-more i { transform: translateX(4px); }
/* the hero has no bottom padding by design (a solution page's frame meets the
   next band); here the logo strip needs air above it */
.shero-cs { padding-bottom: 38px; }
/* the live page sets this headline at 58px in a 760px measure, which is what
   breaks it over THREE lines. `.shero .d1` runs 62px in 20ch and gives four. */
.shero-cs .d1 { font-size: clamp(36px, 4.05vw, 58px); max-width: 800px; }

@media (max-width: 1020px) {
  .stgrid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px 26px; }
  .stcard-name { font-size: 25px; }
}
@media (max-width: 640px) { .stgrid { grid-template-columns: 1fr; gap: 44px; } }

/* ── a customer's own story ────────────────────────────────────────────
   The partner page's split hero, with the story's own headline (much longer
   than a partner name, so it gets its own measure and size) and the mark in
   the same framed panel. Then the wide photograph, the three outcomes on the
   deck's `.stt` tiles, and the piece itself as one reading column with the
   facts ruled beside it. */
/* ⚠ REBUILT 2026-09-02 to the LIVE story page, on his instruction: the mark
   centred over the kicker, the headline and standfirst centred under it, then
   the photograph full width. The split hero was my invention and it went. */
/* ⚠ `.shero` ships with NO bottom padding (a solution page's frame is meant to
   meet the next band). Every page that ends its hero in a picture has had to put
   it back - about 128, partners 122 - and he has now caught it twice. The
   photograph must NOT touch the grey band under it. */
.shero-story { padding-bottom: 122px; text-align: center; }
.shero-story .back { display: inline-flex; float: left; margin: 0 0 40px; }
.st-mark { clear: both; display: flex; justify-content: center; align-items: center;
  margin-bottom: 28px; }
.st-mark img { height: var(--ph, 46px); width: auto; max-width: 62%; object-fit: contain;
  display: block; }
.shero-story .ank { color: var(--orange); }
.shero-story .d1 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12;
  letter-spacing: -.03em; max-width: 820px; margin: 0 auto; }
.shero-story .lead { max-width: 60ch; margin: 24px auto 0; }
.shero-story .pt-chips { justify-content: center; margin-top: 30px; }
@media (max-width: 620px) { .st-mark img { height: calc(var(--ph, 46px) * .8); } }

.cst-body { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 76px;
  align-items: start; max-width: 1000px; margin: 0 auto; }
.cst-art { max-width: none; }
/* the outcomes here are phrases, not numerals: at the deck's 52px they read as
   three headlines shouting over the piece */
.cst-stats .stt b { font-size: clamp(23px, 2.2vw, 30px); line-height: 1.12;
  letter-spacing: -.03em; margin-bottom: 14px; }
.cst-art > h2 { font-family: var(--f-d); font-weight: 400; font-size: clamp(24px, 2.2vw, 31px);
  line-height: 1.14; letter-spacing: -.028em; color: var(--ink); margin: 62px 0 20px; }
.cst-art > h2:first-child { margin-top: 0; }
.cst-art > p { font-size: 16.5px; line-height: 1.72; color: var(--ink-2); margin-bottom: 20px; }

/* the pull quote: the site's quote rule, at article scale */
.cst-q { margin: 46px 0 46px; padding-left: 26px; border-left: 2px solid var(--orange); }
.cst-q blockquote { margin: 0; font-family: var(--f-d); font-weight: 400;
  font-size: clamp(21px, 1.9vw, 26px); line-height: 1.34; letter-spacing: -.018em;
  color: var(--ink); }
.cst-q cite { display: block; font-style: normal; margin-top: 18px; font-family: var(--f-m);
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); }

.cst-fig { margin: 46px 0; position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--dark); }
.cst-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.14) sepia(.10) brightness(1.02); }
/* a cut-out asset (transparent ground) floats on the band instead: no frame, no
   crop, no grade - a 16/9 cover crop would cut the top and bottom panels off */
.cst-fig.free { aspect-ratio: auto; overflow: visible; background: transparent;
  margin: 52px 0 54px; }
.cst-fig.free img { position: static; width: 100%; height: auto; object-fit: contain;
  filter: none; }

/* the film: the poster is the page until it is clicked, then the embed
   replaces it. Nothing from YouTube loads before that. */
.cst-vid { margin: 46px 0; position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--dark); cursor: pointer; border: 0; width: 100%; padding: 0; display: block; }
.cst-vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.06) brightness(.94); transition: transform 1.1s var(--ease); }
.cst-vid:hover img { transform: scale(1.02); }
.cst-vid i { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 74px; height: 74px; border: 1px solid rgba(250,250,250,.6);
  background: rgba(20,30,40,.34); backdrop-filter: blur(3px); display: flex;
  align-items: center; justify-content: center; font-style: normal; font-size: 19px;
  color: #FAFAFA; padding-left: 4px; transition: background .3s var(--ease); }
.cst-vid:hover i { background: rgba(236,117,35,.9); border-color: transparent; }
.cst-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* the facts: mono labels, hairlines, and the solution this story runs on */
.cst-facts { position: sticky; top: 118px; border-top: 1px solid var(--line); }
.cst-facts div { padding: 15px 0 16px; border-bottom: 1px solid var(--line); }
.cst-facts i { display: block; font-style: normal; font-family: var(--f-m); font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 7px; }
.cst-facts b { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.4;
  color: var(--ink); }
.cst-facts a.sol { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 26px; border: 1px solid var(--line); background: var(--white); padding: 18px 20px;
  font-size: 14px; color: var(--ink); transition: border-color .3s var(--ease); }
.cst-facts a.sol:hover { border-color: var(--muted-2); }
.cst-facts a.sol em { font-style: normal; display: block; font-family: var(--f-m);
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 6px; }
.cst-facts a.sol .t { display: block; }
.cst-facts a.sol .g { font-size: 17px; color: var(--muted-2); }

@media (max-width: 1040px) {
  .cst-body { grid-template-columns: 1fr; gap: 54px; }
  .cst-facts { position: static; }
  .cst-art { max-width: none; }
}
@media (max-width: 620px) {
  .cst-art > p { font-size: 16px; }
  .cst-q { margin: 34px 0; padding-left: 18px; }
  .cst-vid i { width: 58px; height: 58px; font-size: 16px; }
}

/* ── /company/blog ─────────────────────────────────────────────────────
   The LIVE blog is the brief (his words: "look at our current live blog..
   i really like it... just take that make it v2 brand"). Its rules are
   ported here one for one, with v2's variables, type and hairlines:
   #F3F2ED plate -> --bg-2, --hairline -> --line, --text-2 -> --muted,
   --f-display -> --f-d. Structure and proportions are untouched. */
.shero-blog { padding-bottom: 74px; }
.shero-blog .d1 { font-size: clamp(34px, 3.8vw, 54px); max-width: 900px; }
/* the back link reads as a label, not a centred line: same float as the story
   pages, and the ank below it has to clear the float */
.shero-blog .back { display: inline-flex; float: left; margin: 0 0 34px; }
.shero-blog .ank { clear: both; }

.bx-sec { margin-top: 60px; border-top: 1px solid var(--line); padding-top: 28px; }
.bx-sec.first { margin-top: 0; border-top: 0; padding-top: 0; }
.bx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  margin: 0 0 26px; }
.bx-title { font-family: var(--f-d); font-size: clamp(22px, 2.4vw, 30px); font-weight: 400;
  letter-spacing: -.02em; color: var(--ink); margin: 0; }
.bx-all { font-family: var(--f-m); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); white-space: nowrap; transition: color .2s var(--ease); }
.bx-all:hover { color: var(--orange); }
.bx-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px 28px; }
.bx-card { display: block; }
.bx-img { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line); }
.bx-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s var(--ease); }
.bx-card:hover .bx-img img, .ft-lead:hover .bx-img img, .ft-side:hover .bx-img img {
  transform: scale(1.05); }
.bx-date { display: block; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin: 15px 0 8px; }
.bx-card h3 { font-family: var(--f-d); font-size: 18.5px; font-weight: 500; letter-spacing: -.01em;
  line-height: 1.32; color: var(--ink); margin: 0; }

/* featured: the lead story left, two secondaries stacked right */
.ft-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px 48px; align-items: start; }
.ft-lead { display: block; }
.ft-lead .bx-date { margin-top: 20px; }
.ft-lead h2 { font-family: var(--f-d); font-size: clamp(24px, 2.7vw, 35px); font-weight: 400;
  letter-spacing: -.016em; line-height: 1.16; color: var(--ink); margin: 0 0 12px; }
.ft-lead p { font-size: 15px; line-height: 1.62; color: var(--muted); margin: 0; max-width: 600px; }
.ft-side { display: block; padding-bottom: 24px; border-bottom: 1px solid var(--line);
  margin-bottom: 24px; }
.ft-side:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.ft-side .bx-img { aspect-ratio: 16 / 9; }
.ft-side .bx-date { margin-top: 13px; }
.ft-side h3 { font-family: var(--f-d); font-size: 19px; font-weight: 500; letter-spacing: -.01em;
  line-height: 1.3; color: var(--ink); margin: 0; }

/* ── a post ─────────────────────────────────────────────────────────── */
.blhead { padding: 168px 0 0; background: var(--bg); text-align: center; }
.blhead .back { display: inline-flex; float: left; margin: 0 0 34px; }
/* ⚠ the back link is FLOATED, so anything centred after it is centred in the space
   BESIDE the float and sits off-axis. The kicker has to clear it too, not just the
   headline - he spotted the kicker sitting right of centre. */
.blhead .ank { clear: both; }
.blhead .d1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12;
  letter-spacing: -.03em; max-width: 880px; margin: 0 auto; }
.bl-meta { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; font-family: var(--f-m); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-2); }
.bl-meta b { color: var(--ink); font-weight: 500; }
.bl-meta i { font-style: normal; color: var(--line); }
.bl-hero { max-width: 900px; margin: 46px auto 0; aspect-ratio: 1200 / 626; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2); }
.bl-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bl-grid { display: grid; grid-template-columns: minmax(0, 720px) 210px; gap: 64px;
  justify-content: center; align-items: start; }
.bl-art { max-width: 720px; margin: 0; padding: 56px 0 0; }
/* ⚠ some posts end on a source list of bare URLs, which are unbreakable and push
   the page 20px wide on a phone. One post in 116 - so wrap the prose, do not
   patch the post. */
.bl-art p, .bl-art li, .bl-art h2, .bl-art h3 { overflow-wrap: anywhere; }
.bl-art h2 { font-family: var(--f-d); font-size: clamp(23px, 2.4vw, 29px); font-weight: 400;
  letter-spacing: -.02em; line-height: 1.2; color: var(--ink); margin: 42px 0 14px;
  scroll-margin-top: 100px; }
.bl-art h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 30px 0 10px; }
.bl-art h2:first-child, .bl-art h3:first-child { margin-top: 0; }
.bl-art p { font-size: 15.5px; line-height: 1.7; color: var(--muted); margin: 0 0 15px; }
.bl-art blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--orange);
  font-family: var(--f-d); font-size: 18px; line-height: 1.5; color: var(--ink); }
.bl-art ul, .bl-art ol { margin: 0 0 15px; padding: 0 0 0 4px; list-style: none; }
.bl-art li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.65;
  color: var(--muted); margin-bottom: 8px; }
.bl-art ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px;
  background: var(--orange); }
.bl-art ol { counter-reset: bl; }
.bl-art ol li { padding-left: 26px; counter-increment: bl; }
.bl-art ol li::before { content: counter(bl) "."; position: absolute; left: 0; top: 0;
  font-family: var(--f-m); font-size: 12.5px; font-weight: 500; color: var(--orange); }
.bl-art p a, .bl-art li a { color: var(--ink); font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  transition: color .2s var(--ease); }
.bl-art p a:hover, .bl-art li a:hover { color: var(--orange); }
.bl-fig { margin: 30px 0; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.bl-fig img { width: 100%; height: auto; display: block; }
.bl-fig figcaption { font-family: var(--f-m); font-size: 10.5px; letter-spacing: .04em;
  color: var(--muted-2); padding: 9px 12px; border-top: 1px solid var(--line); background: var(--white); }
.bl-tbl { margin: 28px 0; overflow-x: auto; border: 1px solid var(--line); background: var(--white); }
.bl-tbl table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: 13.5px; }
.bl-tbl th { font-family: var(--f-m); font-size: 10px; font-weight: 400; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2); text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--line); background: var(--bg); white-space: nowrap; }
.bl-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--muted);
  line-height: 1.5; vertical-align: top; }
.bl-tbl tr:last-child td { border-bottom: 0; }
.bl-tbl td:first-child { font-weight: 500; color: var(--ink); white-space: nowrap; }

.bl-toc { position: sticky; top: 104px; padding-top: 56px; }
.bl-toc-t { display: block; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.bl-toc a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--line);
  font-size: 12.5px; line-height: 1.45; color: var(--muted-2);
  transition: color .2s var(--ease), border-color .2s var(--ease); }
.bl-toc a:hover { color: var(--ink); }
.bl-toc a.on { color: var(--ink); border-left-color: var(--orange); }

@media (max-width: 1180px) { .bl-grid { grid-template-columns: minmax(0, 720px); } .bl-toc { display: none; } }
@media (max-width: 1020px) {
  .ft-grid { grid-template-columns: 1fr; }
  .bx-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) { .bx-grid { grid-template-columns: 1fr; } }

/* ── platform capability visuals: PRODUCT on a faded industry ground ────
   Matteo, 2026-09-02: "the visuals can have a faded industry background... but
   the main visual needs to be product... thats why we're in the platform pages".
   So a capability row is `.cap-frame` (which already fades whatever sits behind)
   with a still as the ground and a real card on top - never a photograph alone. */
/* ⛔ IN COLOUR, AND MOVING. I read "faded" as desaturated and greyed all nine
   grounds; he meant the site's own drifting treatment: *"why are all the visuals
   now in grey?? i want color i liked it before more.... with faded i meant shaky
   ... but the v2 style man you know how that isss"*. So: the standard v2 still
   grade (the same one every photograph on the site carries, `#cardgrade`
   included) and the About purpose block's slow drift, which is the "shaky" he
   named there too. The card carries its own white fill and shadow, so it holds
   over a picture in full colour. */
.cap-frame > img.plate { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: saturate(1.18) sepia(.10) brightness(1.02) url(#cardgrade);
  transform: scale(1.04); }
/* ⛔ NO DRIFT ON THESE. He asked for the "shaky" treatment, saw it behind the
   product cards and hated it: "why tf in the visual 2 the image in the
   background is MOVIING???". The About purpose block keeps its drift; a
   capability ground is still. */
.cap-frame .uicard { max-width: 460px; }

/* the label/value card: a brief, a permission set, a learned fact. Deliberately
   NOT the queue shape the solution pages use - same materials, different form. */
.pcd .pcr { display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 18px;
  padding: 13px 20px; border-bottom: 1px solid var(--line); align-items: baseline; }
.pcd .pcr:last-of-type { border-bottom: 0; }
.pcd .pck { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); }
.pcd .pcv { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.pcd .pcv em { font-style: normal; color: var(--muted); }
.pcd .pcv b { font-weight: 500; }
.pcd .pcr.no .pcv { color: var(--muted-2); }
.pcd .pcr.no .pck { color: var(--orange); }
/* the one changed value, shown as it changed */
.pcd .pcv .was { color: var(--muted-2); text-decoration: line-through;
  text-decoration-color: rgba(154,154,154,.7); }
.pcd .pcv .now { color: var(--ink); font-weight: 500; }
.pcd .pcv .arw2 { font-family: var(--f-m); font-size: 11px; color: var(--orange); margin: 0 7px; }
@media (max-width: 620px) {
  .pcd .pcr { grid-template-columns: 1fr; gap: 5px; padding: 12px 16px; }
}

/* ── the AI coworker card ───────────────────────────────────────────────
   Matteo sent the live site's own coworker panel as the reference for
   "It works where your team already works", so this is that panel in v2
   materials: sharp corners, hairlines, Public Sans and Fragment Mono, orange
   as the only accent, and the Lleverage mark instead of a face for the bot. */
.cw { width: 100%; max-width: 470px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.cw-top { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 13px;
  align-items: center; padding: 20px 24px 17px; }
/* ⚠ the avatar FILLS the square - he hated the mark floating on a dark box */
.cw-av { width: 40px; height: 40px; overflow: hidden; }
.cw-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-id b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.01em;
  color: var(--ink); line-height: 1.2; }
.cw-id span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
/* the channel switch: two states, the live one on ink */
.cw-sw { display: flex; border: 1px solid var(--line); }
.cw-sw span { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); padding: 7px 11px; }
.cw-sw span.on { background: var(--dark); color: #FAFAFA; }
.cw-mail { display: flex; align-items: baseline; gap: 10px; padding: 0 20px 15px;
  border-bottom: 1px solid var(--line); }
.cw-mail i { font-style: normal; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); }
.cw-mail b { font-family: var(--f-m); font-size: 12px; font-weight: 400; color: var(--ink); }
.cw-ch { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--bg); }
.cw-ch b { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.cw-ch i { font-style: normal; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); }
.cw-msg { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 13px;
  padding: 18px 24px 0; }
.cw-msg:last-of-type { padding-bottom: 20px; }
.cw-in { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-m); font-size: 11px; color: #FAFAFA; background: #6E7A6B; }
.cw-in.bot { background: transparent; padding: 0; overflow: hidden; }
.cw-in.bot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-hd { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
.cw-hd b { font-size: 14px; font-weight: 500; color: var(--ink); }
.cw-hd time { font-family: var(--f-m); font-size: 10px; color: var(--muted-2); }
.cw-hd em { font-style: normal; font-family: var(--f-m); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); border: 1px solid var(--line); padding: 1px 5px; }
.cw-tx { font-size: 15px; line-height: 1.58; color: var(--ink-2); }
.cw-tx mark { background: rgba(236,117,35,.16); color: var(--orange); padding: 1px 4px;
  font-weight: 500; }
.cw-reply { margin: 6px 24px 22px; border: 1px solid var(--line); padding: 13px 16px;
  font-size: 14px; color: var(--muted-2); }
@media (max-width: 620px) {
  .cw-top { grid-template-columns: 36px minmax(0,1fr); row-gap: 12px; }
  .cw-sw { grid-column: 1 / -1; justify-self: start; }
}

/* ── agents: the three remaining capability devices ─────────────────────
   His note was that the label/value cards were not good enough. Each row now
   gets a device with a real product form: a pipeline, a rule receipt and a
   permission matrix. Same white card, same hairlines, different anatomy. */

/* 1 · THE JOB: the four stages the agent owns, and today's run under them */
.pipe { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.pipe > div { padding: 16px 14px 15px; border-right: 1px solid var(--line); position: relative; }
.pipe > div:last-child { border-right: 0; }
.pipe .pst { display: block; font-family: var(--f-m); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); }
.pipe .pnm { display: block; font-family: var(--f-d); font-size: 25px; line-height: 1;
  letter-spacing: -.03em; color: var(--ink); margin-top: 9px; }
.pipe .pun { display: block; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.pipe > div.held .pnm { color: var(--orange); }
/* today's orders as ticks: the three that stopped are the orange ones */
.ticks { display: flex; flex-wrap: wrap; gap: 3px; padding: 16px 20px 4px; }
.ticks i { width: 7px; height: 16px; background: #DFDFD6; display: block; }
.ticks i.ok { background: #9AA69A; }
.ticks i.on { background: var(--orange); }

/* 2 · THE CORRECTION becoming a rule: the edit, then what it wrote */
.krule .kr-e { padding: 16px 20px 15px; border-bottom: 1px solid var(--line); }
.krule .kr-l { display: block; font-family: var(--f-m); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 9px; }
.krule .kr-v { font-size: 15px; color: var(--ink); }
.krule .kr-v s { color: var(--muted-2); text-decoration-color: rgba(154,154,154,.7); }
.krule .kr-v span { font-family: var(--f-m); font-size: 11px; color: var(--orange); margin: 0 8px; }
.krule .kr-w { padding: 15px 20px 16px; border-bottom: 1px solid var(--line); background: var(--bg); }
.krule .kr-w p { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin-top: 2px; }
.krule .kr-f { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 20px; font-family: var(--f-m); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }
.krule .kr-f b { color: var(--orange); font-weight: 400; }

/* 3 · PERMISSIONS as a matrix: system by what it may do */
.pmx { width: 100%; border-collapse: collapse; }
.pmx th { font-family: var(--f-m); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 400; text-align: center; padding: 13px 6px 11px;
  border-bottom: 1px solid var(--line); }
.pmx th:first-child { text-align: left; padding-left: 20px; }
.pmx td { font-size: 13.5px; color: var(--ink); padding: 12px 6px; text-align: center;
  border-bottom: 1px solid var(--line); }
.pmx td:first-child { text-align: left; padding-left: 20px; color: var(--ink); }
.pmx tr:last-child td { border-bottom: 0; }
.pmx .y { color: #6E7A6B; }          /* allowed */
.pmx .n { color: #D8D8D0; }          /* not granted */
.pmx .never td { color: var(--muted-2); }
.pmx .never td:first-child { color: var(--orange); font-family: var(--f-m); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; }

/* ── the desk filling up, driven by the scroll ──────────────────────────
   His brief, twice: *"like a backoffice getting bigger and automated more with
   more agents"*, then *"now its too tall... how can we compact that and also
   ANIMATE IT... like while you scroll down you see it being filled"*. So the
   four tall columns became ONE board of twelve slots that fills as the section
   scrolls, pinned while it does. Fixed height, no wall of chips. */
.grow-sec { padding: 0; position: relative; }
.grow-run { height: 300vh; }                       /* the scroll runway */
.grow-stage { position: sticky; top: 0; height: 100vh; min-height: 620px;
  display: flex; align-items: center; }
.gstage { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 72px;
  align-items: center; margin-top: 44px; }

/* the left column: where the desk is now */
.gphase { display: block; font-family: var(--f-m); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--orange); }
.gcount { display: block; font-family: var(--f-d); font-weight: 400; font-size: 92px; line-height: .9;
  letter-spacing: -.05em; color: var(--ink); margin: 14px 0 0; font-variant-numeric: tabular-nums; }
.gcount-l { display: block; font-family: var(--f-m); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 12px; }
/* ⚠ FIXED AT THREE LINES. It used to run to four on one phase and the whole
   column grew and shrank as you scrolled - he caught it. The copy is written to
   fit three at this measure; check it here if you ever edit those strings. */
.gnote { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-top: 20px;
  max-width: 34ch; height: calc(1.55em * 3); overflow: hidden; }
.gmeter { margin-top: 24px; height: 3px; background: var(--line); position: relative; }
.gmeter i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--orange);
  transition: width .5s var(--ease); }
.gmk { display: block; font-family: var(--f-m); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 10px; }

/* the board: twelve slots, filling in */
.gboard { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.gcell { position: relative; min-height: 96px; border: 1px solid var(--line); background: transparent;
  padding: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  transition: border-color .45s var(--ease), transform .45s var(--ease);
  transform: translateY(6px); }
.gcell::before { content: "+"; position: absolute; left: 13px; top: 10px; font-family: var(--f-m);
  font-size: 12px; color: var(--line); transition: opacity .3s var(--ease); }
/* ⚠ the industry is the CARD'S OWN BACKGROUND, not a thumbnail above the text
   (his correction: "i just wanted the industry image as the full background of
   the card and then the use case text on top"). It carries the site grade and a
   white scrim, so ink type reads over any of the twelve. */
.gth { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: 0;
  transition: opacity .5s var(--ease); }
.gth img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.10) sepia(.10) brightness(1.06) url(#cardgrade); }
.gth::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(250,250,249,.46) 0%, rgba(250,250,249,.62) 40%,
              rgba(250,250,249,.86) 100%); }
.gcell.on .gth { opacity: 1; }
/* the type sits on its own plate rather than relying on the scrim alone: the
   picture stays legible at the top of the card and the words stay readable */
.gcell .gtx { position: relative; z-index: 1; display: block; padding: 13px 13px 12px;
  background: linear-gradient(180deg, rgba(252,252,251,0) 0%, rgba(252,252,251,.86) 24%,
              rgba(252,252,251,.97) 100%); }
.gcell .gtx b, .gcell .gtx i { display: block; }
.gcell .gtx b { font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--ink);
  opacity: 0; transition: opacity .45s var(--ease) .06s; }
.gcell .gtx i { font-style: normal; font-family: var(--f-m); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); margin-top: 6px;
  opacity: 0; transition: opacity .45s var(--ease) .06s; }
.gcell.on .gtx b, .gcell.on .gtx i { opacity: 1; }
/* the company brain, counting up beside the desk */
.gbrain { margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--line); }
.gbrain b { font-family: var(--f-m); font-size: 12px; color: var(--ink); }
.gbrain span { display: block; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 7px; }
.gcell.on { border-color: rgba(20,30,40,.16); transform: translateY(0);
  box-shadow: 0 10px 26px rgba(8,10,14,.07); }
.gcell.on::before { opacity: 0; }
.gcell.on b, .gcell.on i { opacity: 1; }
/* the one that just arrived */
.gcell.fresh { border-left: 2px solid var(--orange); }
.gcell.fresh i { color: var(--orange); }

/* the rail: four stops, the reached ones in ink */
.grail { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; margin-top: 46px;
  border-top: 1px solid var(--line); }
.grail span { padding: 14px 0 0; font-family: var(--f-m); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); position: relative; }
.grail span::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease); }
.grail span.hit { color: var(--ink); }
.grail span.hit::before { transform: scaleX(1); }

@media (max-width: 1040px) {
  .grow-run { height: 260vh; }
  .gstage { grid-template-columns: 1fr; gap: 34px; margin-top: 30px; }
  .gcount { font-size: 68px; }
  .gnote { min-height: 0; }
}
@media (max-width: 620px) {
  /* ⚠ no runway on a phone: with the stage static, 220vh of runway left 1,300px
     of nothing under the block. The board simply shows filled instead. */
  .grow-run { height: auto; }
  .grow-stage { height: auto; min-height: 0; position: static; padding: 96px 0 90px; }
  .gboard { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .gcell { min-height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .grow-stage { position: static; height: auto; padding: 90px 0; }
  .grow-run { height: auto; }
  .gcell { transform: none; }
}

/* ── agents row 1: the chat, at their proportions ───────────────────────
   *"the chat ui needs to be way way better man... look at wonderful product
   visuals... why ours look so bad?"*. Measured against theirs: their message
   type is 16-17px on ~1.6, two messages only, and the padding is enormous.
   Ours was 13px, four messages, and tight. This is the same card at their
   proportions - no window chrome, he did not want that, just the air. */
.ach { width: 100%; max-width: 470px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.ach-hd { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 13px;
  align-items: center; padding: 20px 24px 18px; border-bottom: 1px solid var(--line); }
.ach-hd .av { width: 36px; height: 36px; overflow: hidden; }
.ach-hd .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ach-hd b { font-size: 15px; font-weight: 500; color: var(--ink); display: block; line-height: 1.2; }
.ach-hd span.r { font-size: 12.5px; color: var(--muted); display: block; margin-top: 2px; }
.ach-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-m);
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.ach-live i { width: 6px; height: 6px; background: #6E7A6B; display: block; }
.ach-t { padding: 8px 24px 4px; }
.ach-m { padding: 18px 0 4px; }
/* name left, time right, on one line - the thing that makes theirs read as a
   real client rather than a styled list */
.ach-m .who { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 8px; }
.ach-m .who b { font-size: 14px; font-weight: 500; color: var(--ink); }
.ach-m .who time { font-family: var(--f-m); font-size: 10px; color: var(--muted-2); }
.ach-m p { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }
.ach-m p b { color: var(--ink); font-weight: 500; }
.ach-reply { margin: 18px 24px 22px; border: 1px solid var(--line); padding: 14px 16px;
  font-size: 14px; color: var(--muted-2); }

/* the coworker card's channel switch, now with the real marks and clickable */
.cw-sw { display: flex; border: 1px solid var(--line); background: var(--white); }
.cw-sw button { display: inline-flex; align-items: center; gap: 7px; background: none;
  border: 0; cursor: pointer; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); padding: 7px 11px; transition: all .25s var(--ease); }
.cw-sw button img { width: 13px; height: 13px; object-fit: contain; display: block;
  filter: grayscale(1); opacity: .5; transition: all .25s var(--ease); }
.cw-sw button.on { background: var(--dark); color: #FAFAFA; }
.cw-sw button.on img { filter: none; opacity: 1; }

/* ── agents row 3: a correction landing in the company brain ────────────
   "now its just text". So the mechanism is drawn: the line as it was on the
   order, the fix, and the fact arriving in the brain with the count moving and
   every agent picking it up. */
.kn { width: 100%; max-width: 470px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.kn-hd { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px;
  border-bottom: 1px solid var(--line); font-family: var(--f-m); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
/* the order line, as a row of a document */
.kn-doc { padding: 17px 22px 18px; border-bottom: 1px solid var(--line); }
.kn-doc .l { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 12px;
  align-items: baseline; font-size: 14.5px; color: var(--muted); padding: 7px 0; }
.kn-doc .l .n { font-family: var(--f-m); font-size: 10px; color: var(--muted-2); }
.kn-doc .l.hit { color: var(--ink); }
.kn-doc .l.hit s { color: var(--muted-2); text-decoration-color: rgba(154,154,154,.8); }
.kn-doc .l.hit b { font-weight: 500; color: var(--ink); }
.kn-doc .l .arw3 { font-family: var(--f-m); font-size: 11px; color: var(--orange); margin: 0 7px; }
.kn-doc .who { display: block; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 10px; }
/* the drop into the brain */
.kn-drop { display: flex; justify-content: center; padding: 12px 0 0; }
.kn-drop i { display: block; width: 1px; height: 26px;
  background: linear-gradient(180deg, rgba(236,117,35,0), var(--orange)); position: relative; }
.kn-drop i::after { content: ""; position: absolute; left: -3px; bottom: -1px; width: 7px; height: 7px;
  background: var(--orange); }
.kn-fact { margin: 0 22px; border: 1px solid var(--line); border-left: 2px solid var(--orange);
  padding: 13px 15px; background: var(--bg); }
/* ⚠ direct child only: the sentence carries an inner <b> for the suffix, and a
   blanket display:block put "-X" on a line of its own */
.kn-fact > b { display: block; font-size: 14.5px; line-height: 1.55; color: var(--ink); font-weight: 400; }
.kn-fact > b b { display: inline; font-weight: 500; font-family: var(--f-m); font-size: 12.5px; }
.kn-fact span { display: block; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 7px; }
.kn-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 22px 18px; margin-top: 15px; border-top: 1px solid var(--line); }
.kn-foot .cnt { font-family: var(--f-m); font-size: 12px; color: var(--ink); }
.kn-foot .cnt s { color: var(--muted-2); }
.kn-foot .cnt b { color: var(--orange); font-weight: 400; }
.kn-foot .who { display: flex; align-items: center; gap: 5px; }
/* the LLEVERAGE mark, filling its square - it is a square tile already, so no
   wrapper colour and no padding */
.kn-foot .who i { width: 19px; height: 19px; display: block; }
.kn-foot .who i img { width: 100%; height: 100%; display: block; }
.kn-foot .who em { font-style: normal; font-family: var(--f-m); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-left: 4px; }

/* ── agents row 4: the settings screen ──────────────────────────────────
   A permission matrix was "very boring", and a confidence distribution he did
   not read at all: "the visual 4 makes no sense man i dont get it". So it is
   the actual setting: what this agent may do on its own, where the line sits,
   and what it may never touch. A screen a customer would recognise. */
.aut { width: 100%; max-width: 470px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.aut-hd { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px;
  border-bottom: 1px solid var(--line); font-family: var(--f-m); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.aut-line { padding: 17px 22px 18px; border-bottom: 1px solid var(--line); background: var(--bg); }
.aut-line .t { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.aut-line .t b { font-size: 15px; font-weight: 500; color: var(--ink); }
.aut-line .t span { font-family: var(--f-d); font-size: 22px; letter-spacing: -.03em;
  color: var(--orange); line-height: 1; }
.aut-track { position: relative; height: 4px; background: var(--line); margin: 14px 0 0; }
.aut-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 96%; background: #C4CBC0; }
.aut-track b { position: absolute; left: 96%; top: -6px; width: 3px; height: 16px;
  background: var(--orange); transform: translateX(-1px); }
.aut-legend { display: flex; justify-content: space-between; margin-top: 10px;
  font-family: var(--f-m); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); }
.aut-legend .hi { color: var(--ink); }
.aut-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center;
  padding: 14px 22px; border-bottom: 1px solid var(--line); }
.aut-row:last-of-type { border-bottom: 0; }
.aut-row b { font-size: 15px; font-weight: 400; color: var(--ink); display: block; }
.aut-row em { font-style: normal; font-family: var(--f-m); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); display: block; margin-top: 4px; }
.sw2 { width: 34px; height: 19px; border: 1px solid var(--line); background: var(--bg-2);
  position: relative; display: block; }
.sw2::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  background: #C6C6BE; transition: all .3s var(--ease); }
.sw2.on { background: rgba(110,122,107,.16); border-color: rgba(110,122,107,.5); }
.sw2.on::after { left: 17px; background: #6E7A6B; }
.sw2.never { background: rgba(236,117,35,.10); border-color: rgba(236,117,35,.45); }
.sw2.never::after { background: var(--orange); }
.aut-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 22px; border-top: 1px solid var(--line); font-family: var(--f-m); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

/* ── TRIAL, agents row 1 only: wonderful's composition in our materials ──
   Three moves, and nothing else changes: the ground is one of our own film
   frames blurred into a colour field, the card sits off-centre instead of
   politely in the middle, and a real fragment of the same product floats over
   the corner. ⚠ Do NOT crop the main card - only the fragment overlaps. */
.cap-frame.soft > img.plate { filter: saturate(1.10) brightness(1.04) contrast(.96); }
/* intelligence's plates ran too bright behind white cards (his call, 2026-09-04): pulled down */
.pg-intel .cap-frame.soft > img.plate { filter: saturate(1.04) brightness(.84) contrast(.98); }
.pg-intel .say-h, .pg-intel .say-f { color: rgba(250,250,250,.78); }
.pg-intel .iso-l b { color: #FAFAFA; }
.pg-intel .iso-l .n, .pg-intel .iso-l em { color: rgba(250,250,250,.62); }
.cap-frame.soft::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(140deg, rgba(250,250,249,.30) 0%, rgba(250,250,249,.06) 52%,
              rgba(250,250,249,.34) 100%); }
/* the card sits in the MIDDLE of the frame - his call after seeing it hard right */
.cap-frame.soft > .ach, .cap-frame.soft > .cw, .cap-frame.soft > .kn, .cap-frame.soft > .aut {
  position: relative; z-index: 1; margin: 0 auto; }
/* the fragment: one real detail, floated, and the only thing that moves */
.frag { position: absolute; z-index: 2; background: var(--white);
  border: 1px solid rgba(20,30,40,.12); box-shadow: 0 16px 40px rgba(8,10,14,.20);
  padding: 10px 13px; display: flex; align-items: center; gap: 9px;
  animation: frag-float 7s ease-in-out infinite alternate; }
@keyframes frag-float { from { transform: translateY(0) } to { transform: translateY(-6px) } }
@media (prefers-reduced-motion: reduce) { .frag { animation: none } }
.frag b { font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.frag em { font-style: normal; font-family: var(--f-m); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.frag i { width: 7px; height: 7px; background: var(--orange); display: block; flex: none; }
.frag.ok i { background: #6E7A6B; }
.frag-tl { left: 14px; top: 16px; }
.frag-bl { left: 14px; bottom: 20px; }
@media (max-width: 1040px) { .cap-frame.lay { padding: 20px; } .frag { display: none; } }

/* ── row 1: the chat as FLOATING BUBBLES, not a card ────────────────────
   *"theyre all squares... exactly look the same"*. So the four rows stop being
   four white rectangles: this one loses its container entirely and becomes two
   messages floating on the field at different widths. */
.bub { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 16px; }
.bub-m { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 12px; align-items: start; }
.bub-m .av { width: 32px; height: 32px; overflow: hidden; background: #6E7A6B; display: flex;
  align-items: center; justify-content: center; font-family: var(--f-m); font-size: 12px;
  color: #FAFAFA; }
.bub-m .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bub-b { background: var(--white); border: 1px solid rgba(20,30,40,.10);
  box-shadow: 0 20px 46px rgba(8,10,14,.20); padding: 14px 17px 15px; }
.bub-b .who { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 7px; }
.bub-b .who b { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.bub-b .who time { font-family: var(--f-m); font-size: 9.5px; color: var(--muted-2); }
.bub-b p { font-size: 15px; line-height: 1.58; color: var(--ink-2); }
.bub-b p b { color: var(--ink); font-weight: 500; }
/* the two are different widths and offset, so it reads as a conversation */
.bub-m.a { max-width: 82%; }
.bub-m.b { margin-left: auto; max-width: 96%; }
.bub-m.b .av { background: var(--dark); }

/* ── row 3: TWO cards, overlapping ─────────────────────────────────────── */
.kpair { position: relative; width: 100%; max-width: 470px; }
.kpair .kn-doc2 { background: var(--white); border: 1px solid rgba(20,30,40,.10);
  box-shadow: 0 20px 46px rgba(8,10,14,.20); width: 76%; }
/* ⚠ the overlap must not eat a line of type: at -26px it covered "corrected by
   Sanne" on the card underneath */
.kpair .kn-fact2 { background: var(--white); border: 1px solid rgba(20,30,40,.10);
  border-left: 2px solid var(--orange); box-shadow: 0 24px 54px rgba(8,10,14,.24);
  width: 80%; margin: -12px 0 0 auto; position: relative; z-index: 2; padding: 15px 18px 16px; }
/* ⚠ DIRECT CHILD. As `.kpair .kn-fact2 span` this was (0,2,1) and beat
   `.kpair .marks` (0,2,0), so the three marks rendered as blocks and stacked
   vertically. The label is a direct child; the marks are not. */
.kpair .kn-fact2 > span { display: block; font-family: var(--f-m); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; }
.kpair .kn-fact2 p { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.kpair .kn-fact2 p b { font-family: var(--f-m); font-size: 13px; font-weight: 400; }
.kpair .kn-fact2 .f { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: nowrap; white-space: nowrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--f-m); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); }
.kpair .kn-fact2 .f b { color: var(--orange); font-weight: 400; }
.kpair .marks { display: flex; gap: 4px; flex: none; }
.kpair .marks i { width: 17px; height: 17px; display: block; }
.kpair .marks i img { width: 100%; height: 100%; display: block; }

/* ── row 4: a WIDE, SHORT control panel ────────────────────────────────── */
.autw { width: 100%; max-width: 560px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.24); }
.autw-top { padding: 18px 22px 20px; border-bottom: 1px solid var(--line); }
.autw-top .k { display: block; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; }
.autw-top .t { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.autw-top .t b { font-size: 15px; font-weight: 500; color: var(--ink); }
.autw-top .t span { font-family: var(--f-d); font-size: 26px; letter-spacing: -.03em;
  color: var(--orange); line-height: 1; }
.autw-cells { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.autw-c { padding: 15px 16px 17px; border-right: 1px solid var(--line); }
.autw-c:last-child { border-right: 0; }
.autw-c b { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.autw-c em { font-style: normal; display: block; font-family: var(--f-m); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-top: 6px; }
.autw-c .sw2 { margin-top: 12px; }
@media (max-width: 1040px) { .autw-cells { grid-template-columns: 1fr; }
  .autw-c { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ── /platform/automation: four forms, none of them agents' ─────────────
   Same standard as agents (a colour field, a centred device, 15px type on 22-24
   padding) but four DIFFERENT anatomies, so the two pages do not twin:
   a night timeline · a fan of documents · a document with one field flagged ·
   the night as a chart. */

/* 1 · the night, as a line with the runs plotted on it */
.nite { width: 100%; max-width: 500px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.nite-hd { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px;
  border-bottom: 1px solid var(--line); font-family: var(--f-m); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.nite-hd b { color: var(--ink); font-weight: 400; }
.nite-band { position: relative; margin: 30px 22px 0; height: 96px; }
.nite-rule { position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--line); }
.nite-ev { position: absolute; top: 0; transform: translateX(-50%); text-align: center; }
.nite-ev i { display: block; width: 9px; height: 9px; background: #6E7A6B; margin: 18px auto 0; }
.nite-ev.retry i { background: var(--orange); }
.nite-ev b { display: block; font-family: var(--f-m); font-size: 9.5px; color: var(--ink);
  white-space: nowrap; }
.nite-ev em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted);
  white-space: nowrap; margin-top: 9px; }
.nite-ends { display: flex; justify-content: space-between; margin: 4px 22px 0;
  font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em; color: var(--muted-2); }
.nite-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 20px; padding: 15px 22px 16px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink); }
.nite-foot em { font-style: normal; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }

/* 2 · the formats, as three DOCUMENTS ──────────────────────────────────
   *"i dont want them titled!!! i want them like that yeah but clean and nice
   looking"* - so they stop being cards with headings and become documents: the
   format chip, the page itself as skeleton lines the way the Extract node draws
   it, and one quiet line of what came out. */
/* ⚠ A STACK HIDES SOMETHING - decide what. Three 165px cards cannot stack clear
   inside a 4:3 frame, so the result moved UP into the header row and the step is
   mostly downward: every card shows its chip, its result, its title and its
   description, and all that is ever covered is the skeleton at the foot. */
/* ⚠ every card the SAME size and the SAME step - he counted */
.fan { position: relative; width: 100%; max-width: 404px; height: 366px; margin: 0 auto; }
.fan-d { position: absolute; background: #fff; border: 1px solid #E4E4DC; width: 300px;
  height: 130px; padding: 13px 15px; box-sizing: border-box; }
.fan-d .t { display: flex; align-items: center; gap: 8px; }
/* the result rides in the header, so the stack can never bury it */
.fan-d .t .res { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-m); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: #171719; white-space: nowrap; }
.fan-d .t .res u { text-decoration: none; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(74,103,65,.16); color: #3F5B37; display: inline-flex; align-items: center;
  justify-content: center; font-size: 7px; flex: none; }
.fan-d .t i { font-style: normal; width: 22px; height: 22px; background: rgba(20,30,40,.07);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-m);
  font-size: 7.5px; letter-spacing: .04em; color: #5A5A5A; flex: none; }
.fan-d .t span { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #9A9A9A; }
.fan-d b { display: block; font-size: 13.5px; font-weight: 600; color: #141E28; margin-top: 10px; }
.fan-d em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.42;
  color: #4A5A72; margin-top: 3px; }
.fan-d .sk { display: none; }
.fan-d .sk { margin-top: 10px; }
.fan-d .sk i { display: block; height: 5px; background: #EAE9E1; margin-bottom: 6px; }
.fan-d .sk i:last-child { margin-bottom: 0; }
.fan-d .out { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid #EFEEE8; font-family: var(--f-m); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: #171719; }
.fan-d .out u { text-decoration: none; width: 13px; height: 13px; border-radius: 50%;
  background: rgba(74,103,65,.16); color: #3F5B37; display: inline-flex; align-items: center;
  justify-content: center; font-size: 7.5px; flex: none; }
.fan-1 { left: 0;   top: 0;   box-shadow: 0 10px 26px rgba(8,10,14,.13); }
.fan-2 { left: 52px; top: 118px; box-shadow: 0 18px 42px rgba(8,10,14,.19); }
.fan-3 { left: 104px; top: 236px; box-shadow: 0 28px 62px rgba(8,10,14,.27); }
@media (max-width: 620px) {
  .fan { height: 372px; max-width: 100%; }
  .fan-d { width: 238px; padding: 11px 12px 12px; }
  .fan-1 { left: 0;  top: 0; }
  .fan-2 { left: 34px; top: 124px; }
  .fan-3 { left: 68px; top: 248px; }
}

/* ── automation row 3: THE HUMAN-IN-THE-LOOP NODE ───────────────────────
   His brief: *"its a simple design its a human in the loop node where a lead
   approves/denies something and can give feedback"*. So it is a node from the
   same canvas as row 1, opened up: what it is asking, who it is asking, the two
   buttons and a feedback field. Two cards and a field table came before this. */
.hitl { width: 100%; max-width: 430px; background: #FFFFFF; border: 1px solid rgba(20,30,40,.09);
  border-radius: 10px; box-shadow: 0 30px 70px rgba(8,10,14,.26); overflow: hidden; }
.hitl-hd { display: flex; align-items: center; gap: 9px; padding: 12px 14px 11px;
  border-bottom: 1px solid rgba(20,30,40,.07); }
/* the Lleverage mark, not a coloured square */
.hitl-hd i { width: 18px; height: 18px; flex: none; display: block; }
.hitl-hd i img { width: 100%; height: 100%; display: block; }
.hitl-hd b { font-size: 12px; font-weight: 600; color: #141E28; }
.hitl-hd span { margin-left: auto; font-family: var(--f-m); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }
.hitl-b { padding: 15px 16px 4px; }
.hitl-b .q { font-size: 14.5px; line-height: 1.5; color: #1B2836; }
.hitl-b .q b { font-weight: 600; }
.hitl-b .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hitl-b .meta span { border: 1px solid rgba(20,30,40,.10); border-radius: 5px; padding: 5px 8px;
  font-size: 11.5px; color: #4A5A72; }
.hitl-who { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 10px; align-items: center;
  margin: 14px 16px 0; padding-top: 13px; border-top: 1px solid rgba(20,30,40,.07); }
.hitl-who .av { width: 26px; height: 26px; border-radius: 50%; background: #6E7A6B; display: flex;
  align-items: center; justify-content: center; font-family: var(--f-m); font-size: 10.5px;
  color: #FAFAFA; }
.hitl-who b { display: block; font-size: 13px; font-weight: 500; color: #141E28; }
.hitl-who em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted-2); }
.hitl-in { margin: 13px 16px 0; border: 1px solid rgba(20,30,40,.10); border-radius: 7px;
  padding: 10px 12px; font-size: 12.5px; color: var(--muted-2); background: #FBFAF7; }
.hitl-act { display: flex; gap: 8px; padding: 12px 16px 15px; }
.hitl-act button { border: 0; border-radius: 7px; padding: 9px 15px; font-family: var(--f-b);
  font-size: 12.5px; font-weight: 500; cursor: pointer; }
.hitl-act .yes { background: #3F5B37; color: #FAFAFA; }
.hitl-act .no { background: #FFFFFF; color: #A8332B; border: 1px solid rgba(168,51,43,.35); }
.hitl-act .rest { margin-left: auto; align-self: center; font-family: var(--f-m); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

/* 3 · one document, one field flagged */
.doc { width: 100%; max-width: 450px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.doc-hd { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px;
  border-bottom: 1px solid var(--line); font-family: var(--f-m); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.doc-f { display: grid; grid-template-columns: 132px minmax(0,1fr) auto; gap: 14px;
  align-items: baseline; padding: 13px 22px; border-bottom: 1px solid var(--line); }
.doc-f:last-of-type { border-bottom: 0; }
.doc-f i { font-style: normal; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }
.doc-f b { font-size: 15px; font-weight: 400; color: var(--ink); }
.doc-f em { font-style: normal; font-family: var(--f-m); font-size: 10px; color: #6E7A6B; }
.doc-f.flag { background: rgba(236,117,35,.06); border-left: 2px solid var(--orange);
  padding-left: 20px; }
.doc-f.flag b { color: var(--muted-2); }
.doc-f.flag em { color: var(--orange); }
.doc-note { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 22px 16px; border-top: 1px solid var(--line); font-family: var(--f-m);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

/* 4 · the night as a chart */
.nchart { width: 100%; max-width: 520px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.nchart-hd { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 22px 6px; }
.nchart-hd b { font-family: var(--f-d); font-size: 27px; letter-spacing: -.03em; color: var(--ink);
  line-height: 1; }
.nchart-hd span { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); }
.nchart-bars { display: flex; align-items: flex-end; gap: 5px; height: 92px; padding: 16px 22px 0; }
.nchart-bars i { flex: 1; background: #C7CEC3; height: var(--h, 20%); display: block; }
.nchart-bars i.retry { background: var(--orange); }
.nchart-ax { display: flex; justify-content: space-between; padding: 9px 22px 0;
  font-family: var(--f-m); font-size: 9px; letter-spacing: .08em; color: var(--muted-2); }
.nchart-f { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 16px;
  border-top: 1px solid var(--line); }
.nchart-f div { padding: 13px 16px 15px; border-right: 1px solid var(--line); }
.nchart-f div:last-child { border-right: 0; }
.nchart-f b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.nchart-f em { display: block; font-style: normal; font-family: var(--f-m); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-top: 5px; }
.nchart-f div.on b { color: var(--orange); }
@media (max-width: 620px) { .fan { height: 260px; } .fan-d { width: 200px; } .fan-2 { left: 50px } .fan-3 { left: 100px } }

/* ⚠ MEASURE THE FRAME BEFORE SIZING THE CONTENT. The media column is 689px at
   1440, not the ~600 I kept assuming. 3 x 198 + 2 x 26 = 646, inside 649 of
   usable frame, with room for a real connector between the cards. */
.cap-frame:has(.wfx) { padding: 20px; }

/* ── automation row 1: three workflow cards, in a row ───────────────────
   ⛔ EXACTLY the cards he approved - pill floating above, icon tile, 16px title,
   subtitle, then the node's own content - just THREE of them instead of two, in
   a row, with the third running off the frame the way his own reference does.
   Do not restyle these again; the only thing that ever changed was the count. */
.wfx { position: relative; width: 100%; max-width: 646px; height: 300px; }
.wfx-n { position: absolute; top: 58px; width: 182px; }
.wfx-n .pill { position: absolute; left: 0; top: -32px; display: inline-flex; align-items: center;
  gap: 7px; padding: 5px 10px; border: 1px solid rgba(20,30,40,.10); background: rgba(255,255,255,.94);
  font-size: 11px; font-weight: 600; color: #6B6B6B; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(8,10,14,.10); }
.wfx-n .pill i { width: 8px; height: 8px; display: block; background: #9A9A9A; }
.wfx-n.ok  .pill { color: #3F5B37; } .wfx-n.ok  .pill i { background: #3F5B37; }
.wfx-n.run .pill { color: #C05E14; } .wfx-n.run .pill i { background: var(--orange); }
.wfx-c { background: #fff; border: 1px solid #E4E4DC; box-shadow: 0 20px 46px rgba(8,10,14,.20);
  padding: 15px 16px 16px; }
.wfx-n.run .wfx-c { box-shadow: 0 0 0 1px var(--orange), 0 0 0 4px rgba(236,117,35,.14),
  0 22px 52px rgba(8,10,14,.22); }
.wfx-hd { display: flex; align-items: center; gap: 10px; }
.wfx-hd .ic { width: 20px; height: 20px; display: inline-flex; align-items: center;
  justify-content: center; font-style: normal; color: #2C353E; flex: none; }
.wfx-hd .ic svg, .wfx-hd .ic img { width: 20px; height: 20px; object-fit: contain; display: block; }
.wfx-hd .k { font-family: var(--f-m); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: #9A9A9A; }
.wfx-t { font-size: 15.5px; font-weight: 600; color: #141E28; margin-top: 13px;
  letter-spacing: -.012em; }
.wfx-s { font-size: 12.5px; color: #6B6B6B; margin-top: 4px; line-height: 1.45; min-height: 36px; }
.wfx-file { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 9px;
  border: 1px solid #E4E4DC; background: #FAFAFA; }
.wfx-file img { width: 16px; height: 16px; object-fit: contain; display: block; }
.wfx-file b { font-size: 12px; font-weight: 500; color: #171719; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.wfx-chk { display: flex; align-items: center; gap: 9px; margin-top: 11px; font-size: 12.5px;
  color: #171719; }
.wfx-chk i { width: 15px; height: 15px; border-radius: 50%; background: rgba(74,103,65,.16);
  color: #3F5B37; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 8.5px; flex: none; }
.wfx-sk { margin-top: 12px; padding: 11px; background: #FAFAFA; border: 1px solid #EFEEE8; }
.wfx-sk i { display: block; height: 6px; background: #E7E6DE; margin-bottom: 7px; }
.wfx-sk i:last-child { margin-bottom: 0; }
/* the connector: a hairline out of one card into the next, with a small chevron
   at the end and a port on each side. A 14px dashed stub read as a smudge. */
/* The connector has to read on a photographic ground, so every part of it carries
   a white halo. A flat dark hairline disappeared into the plate. */
/* THE CONNECTOR IS THE ONE FROM THE QUOTE & SELL SCENE, not one of my own:
   a 1.5px #D8D8D2 rule, an orange 2/8 dashed overlay on it, and a 4px white port
   at each end. Same proportion too (gap = .28 of the node width). It is a still:
   the dash does NOT flow here, this visual holds nothing that moves. */
.wfx-svg { position: absolute; left: 0; top: 0; width: 100%; height: 300px; overflow: visible;
  pointer-events: none; }
@media (max-width: 700px) {
  .wfx { height: auto; max-width: 100%; display: flex; flex-direction: column; gap: 44px; }
  .wfx-n { position: static; width: 100%; }
  .wfx-svg { display: none; }
}

/* 2 · the formats, as three DOCUMENTS ──────────────────────────────────
   *"i dont want them titled!!! i want them like that yeah but clean and nice
   looking"* - so they stop being cards with headings and become documents: the
   format chip, the page itself as skeleton lines the way the Extract node draws
   it, and one quiet line of what came out. */
/* ⚠ A STACK HIDES SOMETHING - decide what. Three 165px cards cannot stack clear
   inside a 4:3 frame, so the result moved UP into the header row and the step is
   mostly downward: every card shows its chip, its result, its title and its
   description, and all that is ever covered is the skeleton at the foot. */
/* ⚠ every card the SAME size and the SAME step - he counted */
.fan { position: relative; width: 100%; max-width: 404px; height: 366px; margin: 0 auto; }
.fan-d { position: absolute; background: #fff; border: 1px solid #E4E4DC; width: 300px;
  height: 130px; padding: 13px 15px; box-sizing: border-box; }
.fan-d .t { display: flex; align-items: center; gap: 8px; }
/* the result rides in the header, so the stack can never bury it */
.fan-d .t .res { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-m); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: #171719; white-space: nowrap; }
.fan-d .t .res u { text-decoration: none; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(74,103,65,.16); color: #3F5B37; display: inline-flex; align-items: center;
  justify-content: center; font-size: 7px; flex: none; }
.fan-d .t i { font-style: normal; width: 22px; height: 22px; background: rgba(20,30,40,.07);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-m);
  font-size: 7.5px; letter-spacing: .04em; color: #5A5A5A; flex: none; }
.fan-d .t span { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #9A9A9A; }
.fan-d b { display: block; font-size: 13.5px; font-weight: 600; color: #141E28; margin-top: 10px; }
.fan-d em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.42;
  color: #4A5A72; margin-top: 3px; }
.fan-d .sk { display: none; }
.fan-d .sk { margin-top: 10px; }
.fan-d .sk i { display: block; height: 5px; background: #EAE9E1; margin-bottom: 6px; }
.fan-d .sk i:last-child { margin-bottom: 0; }
.fan-d .out { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid #EFEEE8; font-family: var(--f-m); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: #171719; }
.fan-d .out u { text-decoration: none; width: 13px; height: 13px; border-radius: 50%;
  background: rgba(74,103,65,.16); color: #3F5B37; display: inline-flex; align-items: center;
  justify-content: center; font-size: 7.5px; flex: none; }
.fan-1 { left: 0;   top: 0;   box-shadow: 0 10px 26px rgba(8,10,14,.13); }
.fan-2 { left: 52px; top: 118px; box-shadow: 0 18px 42px rgba(8,10,14,.19); }
.fan-3 { left: 104px; top: 236px; box-shadow: 0 28px 62px rgba(8,10,14,.27); }
@media (max-width: 620px) {
  .fan { height: 372px; max-width: 100%; }
  .fan-d { width: 238px; padding: 11px 12px 12px; }
  .fan-1 { left: 0;  top: 0; }
  .fan-2 { left: 34px; top: 124px; }
  .fan-3 { left: 68px; top: 248px; }
}

/* ── automation row 3: THE HUMAN-IN-THE-LOOP NODE ───────────────────────
   His brief: *"its a simple design its a human in the loop node where a lead
   approves/denies something and can give feedback"*. So it is a node from the
   same canvas as row 1, opened up: what it is asking, who it is asking, the two
   buttons and a feedback field. Two cards and a field table came before this. */
.hitl { width: 100%; max-width: 430px; background: #FFFFFF; border: 1px solid rgba(20,30,40,.09);
  border-radius: 10px; box-shadow: 0 30px 70px rgba(8,10,14,.26); overflow: hidden; }
.hitl-hd { display: flex; align-items: center; gap: 9px; padding: 12px 14px 11px;
  border-bottom: 1px solid rgba(20,30,40,.07); }
/* the Lleverage mark, not a coloured square */
.hitl-hd i { width: 18px; height: 18px; flex: none; display: block; }
.hitl-hd i img { width: 100%; height: 100%; display: block; }
.hitl-hd b { font-size: 12px; font-weight: 600; color: #141E28; }
.hitl-hd span { margin-left: auto; font-family: var(--f-m); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }
.hitl-b { padding: 15px 16px 4px; }
.hitl-b .q { font-size: 14.5px; line-height: 1.5; color: #1B2836; }
.hitl-b .q b { font-weight: 600; }
.hitl-b .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hitl-b .meta span { border: 1px solid rgba(20,30,40,.10); border-radius: 5px; padding: 5px 8px;
  font-size: 11.5px; color: #4A5A72; }
.hitl-who { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 10px; align-items: center;
  margin: 14px 16px 0; padding-top: 13px; border-top: 1px solid rgba(20,30,40,.07); }
.hitl-who .av { width: 26px; height: 26px; border-radius: 50%; background: #6E7A6B; display: flex;
  align-items: center; justify-content: center; font-family: var(--f-m); font-size: 10.5px;
  color: #FAFAFA; }
.hitl-who b { display: block; font-size: 13px; font-weight: 500; color: #141E28; }
.hitl-who em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted-2); }
.hitl-in { margin: 13px 16px 0; border: 1px solid rgba(20,30,40,.10); border-radius: 7px;
  padding: 10px 12px; font-size: 12.5px; color: var(--muted-2); background: #FBFAF7; }
.hitl-act { display: flex; gap: 8px; padding: 12px 16px 15px; }
.hitl-act button { border: 0; border-radius: 7px; padding: 9px 15px; font-family: var(--f-b);
  font-size: 12.5px; font-weight: 500; cursor: pointer; }
.hitl-act .yes { background: #3F5B37; color: #FAFAFA; }
.hitl-act .no { background: #FFFFFF; color: #A8332B; border: 1px solid rgba(168,51,43,.35); }
.hitl-act .rest { margin-left: auto; align-self: center; font-family: var(--f-m); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

/* 3 · one document, one field flagged */
.doc { width: 100%; max-width: 450px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.doc-hd { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px;
  border-bottom: 1px solid var(--line); font-family: var(--f-m); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.doc-f { display: grid; grid-template-columns: 132px minmax(0,1fr) auto; gap: 14px;
  align-items: baseline; padding: 13px 22px; border-bottom: 1px solid var(--line); }
.doc-f:last-of-type { border-bottom: 0; }
.doc-f i { font-style: normal; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }
.doc-f b { font-size: 15px; font-weight: 400; color: var(--ink); }
.doc-f em { font-style: normal; font-family: var(--f-m); font-size: 10px; color: #6E7A6B; }
.doc-f.flag { background: rgba(236,117,35,.06); border-left: 2px solid var(--orange);
  padding-left: 20px; }
.doc-f.flag b { color: var(--muted-2); }
.doc-f.flag em { color: var(--orange); }
.doc-note { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 22px 16px; border-top: 1px solid var(--line); font-family: var(--f-m);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

/* 4 · the night as a chart */
.nchart { width: 100%; max-width: 520px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.nchart-hd { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 22px 6px; }
.nchart-hd b { font-family: var(--f-d); font-size: 27px; letter-spacing: -.03em; color: var(--ink);
  line-height: 1; }
.nchart-hd span { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); }
.nchart-bars { display: flex; align-items: flex-end; gap: 5px; height: 92px; padding: 16px 22px 0; }
.nchart-bars i { flex: 1; background: #C7CEC3; height: var(--h, 20%); display: block; }
.nchart-bars i.retry { background: var(--orange); }
.nchart-ax { display: flex; justify-content: space-between; padding: 9px 22px 0;
  font-family: var(--f-m); font-size: 9px; letter-spacing: .08em; color: var(--muted-2); }
.nchart-f { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 16px;
  border-top: 1px solid var(--line); }
.nchart-f div { padding: 13px 16px 15px; border-right: 1px solid var(--line); }
.nchart-f div:last-child { border-right: 0; }
.nchart-f b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.nchart-f em { display: block; font-style: normal; font-family: var(--f-m); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-top: 5px; }
.nchart-f div.on b { color: var(--orange); }
@media (max-width: 620px) { .fan { height: 260px; } .fan-d { width: 200px; } .fan-2 { left: 50px } .fan-3 { left: 100px } }

/* ── automation row 1: THREE nodes, cascading ───────────────────────────
   Three is the count he wants and 4:3 will not take three in a row at a size
   worth looking at, so they cascade: equal cards, equal steps, joined by elbow
   wires. No canvas. */
/* ⚠ the arithmetic, because guessing it is what kept breaking: three 112px
   cards with a 20px gap is 376px, which fits the 4:3 frame; the status pill
   moved INSIDE the header row because a pill floating above each card lands on
   the card above it in a cascade. */


/* 2 · the formats, as three DOCUMENTS ──────────────────────────────────
   *"i dont want them titled!!! i want them like that yeah but clean and nice
   looking"* - so they stop being cards with headings and become documents: the
   format chip, the page itself as skeleton lines the way the Extract node draws
   it, and one quiet line of what came out. */
/* ⚠ A STACK HIDES SOMETHING - decide what. Three 165px cards cannot stack clear
   inside a 4:3 frame, so the result moved UP into the header row and the step is
   mostly downward: every card shows its chip, its result, its title and its
   description, and all that is ever covered is the skeleton at the foot. */
.fan { position: relative; width: 100%; max-width: 400px; height: 358px; margin: 0 auto; }
.fan-d { position: absolute; background: #fff; border: 1px solid #E4E4DC; width: 300px;
  padding: 12px 14px 13px; }
.fan-d .t { display: flex; align-items: center; gap: 8px; }
/* the result rides in the header, so the stack can never bury it */
.fan-d .t .res { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-m); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: #171719; white-space: nowrap; }
.fan-d .t .res u { text-decoration: none; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(74,103,65,.16); color: #3F5B37; display: inline-flex; align-items: center;
  justify-content: center; font-size: 7px; flex: none; }
.fan-d .t i { font-style: normal; width: 22px; height: 22px; background: rgba(20,30,40,.07);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-m);
  font-size: 7.5px; letter-spacing: .04em; color: #5A5A5A; flex: none; }
.fan-d .t span { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #9A9A9A; }
.fan-d b { display: block; font-size: 13.5px; font-weight: 600; color: #141E28; margin-top: 10px; }
.fan-d em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.42;
  color: #4A5A72; margin-top: 3px; }
.fan-d .sk { margin-top: 10px; }
.fan-d .sk i { display: block; height: 5px; background: #EAE9E1; margin-bottom: 6px; }
.fan-d .sk i:last-child { margin-bottom: 0; }
.fan-d .out { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid #EFEEE8; font-family: var(--f-m); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: #171719; }
.fan-d .out u { text-decoration: none; width: 13px; height: 13px; border-radius: 50%;
  background: rgba(74,103,65,.16); color: #3F5B37; display: inline-flex; align-items: center;
  justify-content: center; font-size: 7.5px; flex: none; }
.fan-1 { left: 0;   top: 0;   box-shadow: 0 10px 26px rgba(8,10,14,.13); }
.fan-2 { left: 50px; top: 118px; box-shadow: 0 18px 42px rgba(8,10,14,.19); }
.fan-3 { left: 100px; top: 236px; box-shadow: 0 28px 62px rgba(8,10,14,.27); }
@media (max-width: 620px) {
  .fan { height: 372px; max-width: 100%; }
  .fan-d { width: 238px; padding: 11px 12px 12px; }
  .fan-1 { left: 0;  top: 0; }
  .fan-2 { left: 34px; top: 124px; }
  .fan-3 { left: 68px; top: 248px; }
}

/* ── automation row 3: THE HUMAN-IN-THE-LOOP NODE ───────────────────────
   His brief: *"its a simple design its a human in the loop node where a lead
   approves/denies something and can give feedback"*. So it is a node from the
   same canvas as row 1, opened up: what it is asking, who it is asking, the two
   buttons and a feedback field. Two cards and a field table came before this. */
.hitl { width: 100%; max-width: 430px; background: #FFFFFF; border: 1px solid rgba(20,30,40,.09);
  border-radius: 10px; box-shadow: 0 30px 70px rgba(8,10,14,.26); overflow: hidden; }
.hitl-hd { display: flex; align-items: center; gap: 9px; padding: 12px 14px 11px;
  border-bottom: 1px solid rgba(20,30,40,.07); }
/* the Lleverage mark, not a coloured square */
.hitl-hd i { width: 18px; height: 18px; flex: none; display: block; }
.hitl-hd i img { width: 100%; height: 100%; display: block; }
.hitl-hd b { font-size: 12px; font-weight: 600; color: #141E28; }
.hitl-hd span { margin-left: auto; font-family: var(--f-m); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }
.hitl-b { padding: 15px 16px 4px; }
.hitl-b .q { font-size: 14.5px; line-height: 1.5; color: #1B2836; }
.hitl-b .q b { font-weight: 600; }
.hitl-b .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hitl-b .meta span { border: 1px solid rgba(20,30,40,.10); border-radius: 5px; padding: 5px 8px;
  font-size: 11.5px; color: #4A5A72; }
.hitl-who { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 10px; align-items: center;
  margin: 14px 16px 0; padding-top: 13px; border-top: 1px solid rgba(20,30,40,.07); }
.hitl-who .av { width: 26px; height: 26px; border-radius: 50%; background: #6E7A6B; display: flex;
  align-items: center; justify-content: center; font-family: var(--f-m); font-size: 10.5px;
  color: #FAFAFA; }
.hitl-who b { display: block; font-size: 13px; font-weight: 500; color: #141E28; }
.hitl-who em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted-2); }
.hitl-in { margin: 13px 16px 0; border: 1px solid rgba(20,30,40,.10); border-radius: 7px;
  padding: 10px 12px; font-size: 12.5px; color: var(--muted-2); background: #FBFAF7; }
.hitl-act { display: flex; gap: 8px; padding: 12px 16px 15px; }
.hitl-act button { border: 0; border-radius: 7px; padding: 9px 15px; font-family: var(--f-b);
  font-size: 12.5px; font-weight: 500; cursor: pointer; }
.hitl-act .yes { background: #3F5B37; color: #FAFAFA; }
.hitl-act .no { background: #FFFFFF; color: #A8332B; border: 1px solid rgba(168,51,43,.35); }
.hitl-act .rest { margin-left: auto; align-self: center; font-family: var(--f-m); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

/* 3 · one document, one field flagged */
.doc { width: 100%; max-width: 450px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.doc-hd { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px;
  border-bottom: 1px solid var(--line); font-family: var(--f-m); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.doc-f { display: grid; grid-template-columns: 132px minmax(0,1fr) auto; gap: 14px;
  align-items: baseline; padding: 13px 22px; border-bottom: 1px solid var(--line); }
.doc-f:last-of-type { border-bottom: 0; }
.doc-f i { font-style: normal; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }
.doc-f b { font-size: 15px; font-weight: 400; color: var(--ink); }
.doc-f em { font-style: normal; font-family: var(--f-m); font-size: 10px; color: #6E7A6B; }
.doc-f.flag { background: rgba(236,117,35,.06); border-left: 2px solid var(--orange);
  padding-left: 20px; }
.doc-f.flag b { color: var(--muted-2); }
.doc-f.flag em { color: var(--orange); }
.doc-note { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 22px 16px; border-top: 1px solid var(--line); font-family: var(--f-m);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

/* 4 · the night as a chart */
.nchart { width: 100%; max-width: 520px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.nchart-hd { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 22px 6px; }
.nchart-hd b { font-family: var(--f-d); font-size: 27px; letter-spacing: -.03em; color: var(--ink);
  line-height: 1; }
.nchart-hd span { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); }
.nchart-bars { display: flex; align-items: flex-end; gap: 5px; height: 92px; padding: 16px 22px 0; }
.nchart-bars i { flex: 1; background: #C7CEC3; height: var(--h, 20%); display: block; }
.nchart-bars i.retry { background: var(--orange); }
.nchart-ax { display: flex; justify-content: space-between; padding: 9px 22px 0;
  font-family: var(--f-m); font-size: 9px; letter-spacing: .08em; color: var(--muted-2); }
.nchart-f { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 16px;
  border-top: 1px solid var(--line); }
.nchart-f div { padding: 13px 16px 15px; border-right: 1px solid var(--line); }
.nchart-f div:last-child { border-right: 0; }
.nchart-f b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.nchart-f em { display: block; font-style: normal; font-family: var(--f-m); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-top: 5px; }
.nchart-f div.on b { color: var(--orange); }
@media (max-width: 620px) { .fan { height: 260px; } .fan-d { width: 200px; } .fan-2 { left: 50px } .fan-3 { left: 100px } }

/* ── automation row 1: two nodes, on the field ──────────────────────────
   ⛔ No canvas - he cut it - and the cards themselves had to be worth looking
   at: *"the workflow cards are fucking horrendous man"*. The fault was cramming
   three 152px cards into a 4:3 frame, so titles wrapped and everything was
   small. TWO cards at 226px, generous padding, a 16px title, and a third node
   implied by the dashed run leaving the frame. */


/* 2 · the formats, as three DOCUMENTS ──────────────────────────────────
   *"i dont want them titled!!! i want them like that yeah but clean and nice
   looking"* - so they stop being cards with headings and become documents: the
   format chip, the page itself as skeleton lines the way the Extract node draws
   it, and one quiet line of what came out. */
/* ⚠ A STACK HIDES SOMETHING - decide what. Three 165px cards cannot stack clear
   inside a 4:3 frame, so the result moved UP into the header row and the step is
   mostly downward: every card shows its chip, its result, its title and its
   description, and all that is ever covered is the skeleton at the foot. */
.fan { position: relative; width: 100%; max-width: 400px; height: 358px; margin: 0 auto; }
.fan-d { position: absolute; background: #fff; border: 1px solid #E4E4DC; width: 300px;
  padding: 12px 14px 13px; }
.fan-d .t { display: flex; align-items: center; gap: 8px; }
/* the result rides in the header, so the stack can never bury it */
.fan-d .t .res { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-m); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: #171719; white-space: nowrap; }
.fan-d .t .res u { text-decoration: none; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(74,103,65,.16); color: #3F5B37; display: inline-flex; align-items: center;
  justify-content: center; font-size: 7px; flex: none; }
.fan-d .t i { font-style: normal; width: 22px; height: 22px; background: rgba(20,30,40,.07);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-m);
  font-size: 7.5px; letter-spacing: .04em; color: #5A5A5A; flex: none; }
.fan-d .t span { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #9A9A9A; }
.fan-d b { display: block; font-size: 13.5px; font-weight: 600; color: #141E28; margin-top: 10px; }
.fan-d em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.42;
  color: #4A5A72; margin-top: 3px; }
.fan-d .sk { margin-top: 10px; }
.fan-d .sk i { display: block; height: 5px; background: #EAE9E1; margin-bottom: 6px; }
.fan-d .sk i:last-child { margin-bottom: 0; }
.fan-d .out { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid #EFEEE8; font-family: var(--f-m); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: #171719; }
.fan-d .out u { text-decoration: none; width: 13px; height: 13px; border-radius: 50%;
  background: rgba(74,103,65,.16); color: #3F5B37; display: inline-flex; align-items: center;
  justify-content: center; font-size: 7.5px; flex: none; }
.fan-1 { left: 0;   top: 0;   box-shadow: 0 10px 26px rgba(8,10,14,.13); }
.fan-2 { left: 50px; top: 118px; box-shadow: 0 18px 42px rgba(8,10,14,.19); }
.fan-3 { left: 100px; top: 236px; box-shadow: 0 28px 62px rgba(8,10,14,.27); }
@media (max-width: 620px) {
  .fan { height: 372px; max-width: 100%; }
  .fan-d { width: 238px; padding: 11px 12px 12px; }
  .fan-1 { left: 0;  top: 0; }
  .fan-2 { left: 34px; top: 124px; }
  .fan-3 { left: 68px; top: 248px; }
}

/* ── automation row 3: THE HUMAN-IN-THE-LOOP NODE ───────────────────────
   His brief: *"its a simple design its a human in the loop node where a lead
   approves/denies something and can give feedback"*. So it is a node from the
   same canvas as row 1, opened up: what it is asking, who it is asking, the two
   buttons and a feedback field. Two cards and a field table came before this. */
.hitl { width: 100%; max-width: 430px; background: #FFFFFF; border: 1px solid rgba(20,30,40,.09);
  border-radius: 10px; box-shadow: 0 30px 70px rgba(8,10,14,.26); overflow: hidden; }
.hitl-hd { display: flex; align-items: center; gap: 9px; padding: 12px 14px 11px;
  border-bottom: 1px solid rgba(20,30,40,.07); }
/* the Lleverage mark, not a coloured square */
.hitl-hd i { width: 18px; height: 18px; flex: none; display: block; }
.hitl-hd i img { width: 100%; height: 100%; display: block; }
.hitl-hd b { font-size: 12px; font-weight: 600; color: #141E28; }
.hitl-hd span { margin-left: auto; font-family: var(--f-m); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }
.hitl-b { padding: 15px 16px 4px; }
.hitl-b .q { font-size: 14.5px; line-height: 1.5; color: #1B2836; }
.hitl-b .q b { font-weight: 600; }
.hitl-b .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hitl-b .meta span { border: 1px solid rgba(20,30,40,.10); border-radius: 5px; padding: 5px 8px;
  font-size: 11.5px; color: #4A5A72; }
.hitl-who { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 10px; align-items: center;
  margin: 14px 16px 0; padding-top: 13px; border-top: 1px solid rgba(20,30,40,.07); }
.hitl-who .av { width: 26px; height: 26px; border-radius: 50%; background: #6E7A6B; display: flex;
  align-items: center; justify-content: center; font-family: var(--f-m); font-size: 10.5px;
  color: #FAFAFA; }
.hitl-who b { display: block; font-size: 13px; font-weight: 500; color: #141E28; }
.hitl-who em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted-2); }
.hitl-in { margin: 13px 16px 0; border: 1px solid rgba(20,30,40,.10); border-radius: 7px;
  padding: 10px 12px; font-size: 12.5px; color: var(--muted-2); background: #FBFAF7; }
.hitl-act { display: flex; gap: 8px; padding: 12px 16px 15px; }
.hitl-act button { border: 0; border-radius: 7px; padding: 9px 15px; font-family: var(--f-b);
  font-size: 12.5px; font-weight: 500; cursor: pointer; }
.hitl-act .yes { background: #3F5B37; color: #FAFAFA; }
.hitl-act .no { background: #FFFFFF; color: #A8332B; border: 1px solid rgba(168,51,43,.35); }
.hitl-act .rest { margin-left: auto; align-self: center; font-family: var(--f-m); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

/* 3 · one document, one field flagged */
.doc { width: 100%; max-width: 450px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.doc-hd { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px;
  border-bottom: 1px solid var(--line); font-family: var(--f-m); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.doc-f { display: grid; grid-template-columns: 132px minmax(0,1fr) auto; gap: 14px;
  align-items: baseline; padding: 13px 22px; border-bottom: 1px solid var(--line); }
.doc-f:last-of-type { border-bottom: 0; }
.doc-f i { font-style: normal; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }
.doc-f b { font-size: 15px; font-weight: 400; color: var(--ink); }
.doc-f em { font-style: normal; font-family: var(--f-m); font-size: 10px; color: #6E7A6B; }
.doc-f.flag { background: rgba(236,117,35,.06); border-left: 2px solid var(--orange);
  padding-left: 20px; }
.doc-f.flag b { color: var(--muted-2); }
.doc-f.flag em { color: var(--orange); }
.doc-note { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 22px 16px; border-top: 1px solid var(--line); font-family: var(--f-m);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

/* 4 · the night as a chart */
.nchart { width: 100%; max-width: 520px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.nchart-hd { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 22px 6px; }
.nchart-hd b { font-family: var(--f-d); font-size: 27px; letter-spacing: -.03em; color: var(--ink);
  line-height: 1; }
.nchart-hd span { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); }
.nchart-bars { display: flex; align-items: flex-end; gap: 5px; height: 92px; padding: 16px 22px 0; }
.nchart-bars i { flex: 1; background: #C7CEC3; height: var(--h, 20%); display: block; }
.nchart-bars i.retry { background: var(--orange); }
.nchart-ax { display: flex; justify-content: space-between; padding: 9px 22px 0;
  font-family: var(--f-m); font-size: 9px; letter-spacing: .08em; color: var(--muted-2); }
.nchart-f { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 16px;
  border-top: 1px solid var(--line); }
.nchart-f div { padding: 13px 16px 15px; border-right: 1px solid var(--line); }
.nchart-f div:last-child { border-right: 0; }
.nchart-f b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.nchart-f em { display: block; font-style: normal; font-family: var(--f-m); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-top: 5px; }
.nchart-f div.on b { color: var(--orange); }
@media (max-width: 620px) { .fan { height: 260px; } .fan-d { width: 200px; } .fan-2 { left: 50px } .fan-3 { left: 100px } }

/* ── automation row 1: the WALKTHROUGH NODES, verbatim ──────────────────
   ⛔ Third attempt, and the answer was in our own site all along: he sent a shot
   of the document-handling scene on the solution pages. So these are those
   nodes, to the same spec - sharp corners, a status pill floating above the
   card, a 26px icon tile with a mono caps label, a 15px/600 title, a 12px
   subtitle, then the node's own content. The running one carries the orange
   ring. Do not invent a workflow card again; this one exists. */
/* ⚠ the nodes sit on a CANVAS, like every other visual on the page has a
   surface. Floating them straight onto the colour field was wrong. */


/* 2 · the formats, as a fan of documents ───────────────────────────────
   He liked the idea twice and asked for the positioning and the look to be
   better: even steps rather than a drift, a slight radius so it belongs with
   the app nodes on the rest of the page, the format as a tag and what came out
   of each document. */




/* 3 · one document, one field flagged */
.doc { width: 100%; max-width: 450px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.doc-hd { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px;
  border-bottom: 1px solid var(--line); font-family: var(--f-m); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.doc-f { display: grid; grid-template-columns: 132px minmax(0,1fr) auto; gap: 14px;
  align-items: baseline; padding: 13px 22px; border-bottom: 1px solid var(--line); }
.doc-f:last-of-type { border-bottom: 0; }
.doc-f i { font-style: normal; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }
.doc-f b { font-size: 15px; font-weight: 400; color: var(--ink); }
.doc-f em { font-style: normal; font-family: var(--f-m); font-size: 10px; color: #6E7A6B; }
.doc-f.flag { background: rgba(236,117,35,.06); border-left: 2px solid var(--orange);
  padding-left: 20px; }
.doc-f.flag b { color: var(--muted-2); }
.doc-f.flag em { color: var(--orange); }
.doc-note { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 22px 16px; border-top: 1px solid var(--line); font-family: var(--f-m);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

/* 4 · the night as a chart */
.nchart { width: 100%; max-width: 520px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.nchart-hd { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 22px 6px; }
.nchart-hd b { font-family: var(--f-d); font-size: 27px; letter-spacing: -.03em; color: var(--ink);
  line-height: 1; }
.nchart-hd span { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); }
.nchart-bars { display: flex; align-items: flex-end; gap: 5px; height: 92px; padding: 16px 22px 0; }
.nchart-bars i { flex: 1; background: #C7CEC3; height: var(--h, 20%); display: block; }
.nchart-bars i.retry { background: var(--orange); }
.nchart-ax { display: flex; justify-content: space-between; padding: 9px 22px 0;
  font-family: var(--f-m); font-size: 9px; letter-spacing: .08em; color: var(--muted-2); }
.nchart-f { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 16px;
  border-top: 1px solid var(--line); }
.nchart-f div { padding: 13px 16px 15px; border-right: 1px solid var(--line); }
.nchart-f div:last-child { border-right: 0; }
.nchart-f b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.nchart-f em { display: block; font-style: normal; font-family: var(--f-m); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-top: 5px; }
.nchart-f div.on b { color: var(--orange); }
@media (max-width: 620px) { .fan { height: 260px; } .fan-d { width: 200px; } .fan-2 { left: 50px } .fan-3 { left: 100px } }

/* ── automation row 1: THE WORKFLOW, in our app's own language ──────────
   His reference is a screenshot of our builder, and *"make them look like that
   like an app please - our app"*. So this follows the product, not the site:
   rounded cards, a pill header with a coloured icon, the body copy in the app's
   indigo, ports on the card edges and orthogonal connectors with a rounded
   corner, all on a dot-grid canvas. ⛔ The sharp-corner house rule is for site
   chrome; a depiction of the app follows the app. */
.wf { position: relative; width: 100%; max-width: 540px; padding: 22px 20px 20px;
  background: #FBFAF7; border: 1px solid rgba(20,30,40,.10); border-radius: 12px;
  box-shadow: 0 30px 70px rgba(8,10,14,.26);
  background-image: radial-gradient(rgba(20,30,40,.14) 1px, transparent 1px);
  background-size: 16px 16px; }
.wf-hd { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 16px; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); }
.wf-hd b { color: var(--ink); font-weight: 400; }
/* equal rows, so a port always sits at the same height in both cards of a row
   and the wires can be positioned against it */
.wf-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 34px;
  grid-auto-rows: 1fr; }
/* a node, as the app draws one */
.wf-n { position: relative; z-index: 2; background: #FFFFFF; border: 1px solid rgba(20,30,40,.09);
  border-radius: 9px; box-shadow: 0 4px 14px rgba(8,10,14,.06); padding: 10px 12px 12px; }
.wf-n .tag { display: inline-flex; align-items: center; gap: 7px; background: #F2F1EC;
  border-radius: 6px; padding: 4px 9px 4px 5px; margin-bottom: 8px; }
.wf-n .tag i { width: 15px; height: 15px; border-radius: 4px; display: flex; flex: none;
  align-items: center; justify-content: center; font-style: normal; font-size: 8px;
  font-weight: 600; color: #fff; background: var(--orange); }
.wf-n .tag i.bc { background: #2B6BD4; }
.wf-n .tag i.ai { background: #141E28; }
.wf-n .tag i.ok { background: #4F7A46; }
.wf-n .tag b { font-size: 11.5px; font-weight: 600; letter-spacing: -.005em; color: #141E28;
  white-space: nowrap; }
.wf-n p { font-size: 12.5px; line-height: 1.42; color: #4A5A72; }
/* the ports and the wires */
.wf-p { position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(20,30,40,.28); top: 50%; margin-top: -4px; }
.wf-p.in  { left: -4px; }
.wf-p.out { right: -4px; }
.wf-p.top { left: 50%; top: -4px; margin: 0 0 0 -4px; }
.wf-w { position: absolute; z-index: 1; pointer-events: none; border-color: rgba(20,30,40,.24);
  border-style: solid; border-width: 0; }
/* ⚠ MEASURED against the ports, not guessed: with equal rows they sit at 21.4%
   and 78.1% of the grid height, and the column gap runs 45.8% -> 52.8%. */
.wf-w.h1 { top: 21.4%; left: 45.8%; width: 7%; border-top-width: 1px; }
.wf-w.elbow { left: 45.8%; top: 21.4%; width: 3.5%; height: 56.7%;
  border-left-width: 1px; border-top-width: 1px; border-top-left-radius: 8px; }
.wf-w.v2 { left: 76%; top: 21.4%; height: 56.7%; border-left-width: 1px; }
.wf-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(20,30,40,.08); font-size: 13px;
  color: var(--ink); }
.wf-foot em { font-style: normal; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }
@media (max-width: 700px) {
  .wf { max-width: 100%; padding: 18px 14px 16px; }
  .wf-grid { grid-template-columns: 1fr; gap: 12px; }
  .wf-w, .wf-p { display: none; }
  .wf-n .tag b { white-space: normal; }
}

/* ── automation row 3: the handover ─────────────────────────────────────
   The field table was flat. This is the moment it stops: what it held, who it
   went to, and everything it had already gathered, attached. */
.hand { width: 100%; max-width: 460px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.26); }
.hand-top { display: flex; align-items: center; gap: 11px; padding: 16px 20px;
  border-bottom: 1px solid var(--line); }
.hand-top .dot { width: 8px; height: 8px; background: var(--orange); display: block; flex: none; }
.hand-top b { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); font-weight: 400; }
.hand-top span { margin-left: auto; font-family: var(--f-m); font-size: 9.5px; color: var(--muted-2); }
.hand-b { padding: 18px 20px 4px; }
.hand-b .ttl { font-size: 16px; font-weight: 500; color: var(--ink); }
.hand-b .why { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-top: 8px; }
.hand-to { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 11px; align-items: center;
  margin: 16px 20px 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.hand-to .av { width: 30px; height: 30px; background: #6E7A6B; display: flex; align-items: center;
  justify-content: center; font-family: var(--f-m); font-size: 12px; color: #FAFAFA; }
.hand-to b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.hand-to em { display: block; font-style: normal; font-family: var(--f-m); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-top: 3px; }
.hand-att { display: flex; flex-wrap: wrap; gap: 7px; padding: 16px 20px 18px; }
.hand-att span { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line);
  padding: 7px 10px; font-size: 12.5px; color: var(--ink); }
.hand-att span i { font-style: normal; font-family: var(--f-m); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }

/* ── automation · getting there ───────────────────────────────────────────
   Built to wonderful.ai/deployment's "Locally embedded deployment teams" pair
   (measured 2026-09-03): a big photo card with the title and text in its
   bottom-left corner beside a flat grey card with only a title low in it,
   792 + 518 wide, 542 tall, on white. Ours: the homepage panel's still grade
   and the case card's bottom-left copy on the photo; the grey card in bg-2.
   Under it, the supervision staircase: four ruled columns in the anat5 form,
   one bar each, the share a person still releases falling 100 > 92 > 42 > 3.
   His brief: "1st we automate not fully with more human supervision and the
   more we advance the less human supervision since it becomes smarter". */
.gt-pair { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 20px;
  margin-top: 56px; }
.gt-photo { position: relative; min-height: 540px; overflow: hidden; isolation: isolate;
  background: var(--dark); }
.gt-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; transform: scale(1.02); filter: saturate(1.10) sepia(.08) brightness(1.02) url(#cardgrade); }
.gt-photo .sh { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(8,10,14,.10) 0%, rgba(8,10,14,.02) 40%, rgba(8,10,14,.66) 100%); }
.gt-photo .in { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 32px; }
.gt-photo .k, .gt-alt .k { display: block; font-family: var(--f-m); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(250,250,250,.62); margin-bottom: 14px; }
.gt-photo b, .gt-alt b { display: block; font-family: var(--f-d); font-weight: 400; font-size: 30px;
  line-height: 1.1; letter-spacing: -.03em; color: #FAFAFA; }
.gt-photo p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: rgba(250,250,250,.82);
  max-width: 54ch; }
.gt-alt { position: relative; min-height: 540px; background: var(--bg-2); padding: 32px;
  display: flex; flex-direction: column; justify-content: flex-end; }
.gt-alt .k { color: var(--muted-2); }
.gt-alt b { color: var(--ink); }
.gt-alt p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 40ch; }
.gt-alt .lnk { margin-top: 18px; }
/* the badge in the grey card's top corner: what the same platform is, whichever door */
.gt-alt .top { position: absolute; left: 32px; top: 32px; right: 32px; display: flex;
  justify-content: space-between; font-family: var(--f-m); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); }

/* the staircase */
.gt-lead { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: end;
  margin-top: 104px; }
.gt-lead .d3 { max-width: none; }
.gt-lead .d3 span { white-space: nowrap; }
.gt-key { display: flex; gap: 22px; font-family: var(--f-m); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); padding-bottom: 6px; }
.gt-key span { display: inline-flex; align-items: center; gap: 8px; }
.gt-key i { width: 10px; height: 10px; display: inline-block; background: var(--ink); }
.gt-key i.a { background: var(--orange); }
.gt-cols { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0;
  border-top: 1px solid var(--line); margin-top: 30px; }
.gt-col { padding: 30px 26px 34px; border-right: 1px solid var(--line); }
.gt-col:last-child { border-right: 0; }
.gt-col .w { display: block; font-family: var(--f-m); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 18px; }
.gt-col .n { display: block; font-family: var(--f-d); font-weight: 400; font-size: 46px; line-height: 1;
  letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.gt-col .nl { display: block; font-family: var(--f-m); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 10px; }
.gt-bar { display: block; position: relative; height: 8px; background: var(--orange); margin-top: 18px; }
.gt-bar i { position: absolute; inset: 0 auto 0 0; width: var(--h, 0%); background: var(--ink);
  transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease); }
.rv.in .gt-bar i { transform: scaleX(1); }
.gt-col:nth-child(2) .gt-bar i { transition-delay: .08s } .gt-col:nth-child(3) .gt-bar i { transition-delay: .16s }
.gt-col:nth-child(4) .gt-bar i { transition-delay: .24s }
.gt-col b { display: block; font-family: var(--f-d); font-weight: 400; font-size: 21px; line-height: 1.15;
  letter-spacing: -.028em; color: var(--ink); margin: 26px 0 10px; }
.gt-col p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.gt-why { margin-top: 44px; }
@media (max-width: 1040px) {
  .gt-pair { grid-template-columns: 1fr; }
  .gt-photo, .gt-alt { min-height: 420px; }
  .gt-cols { grid-template-columns: 1fr 1fr; }
  .gt-col { border-bottom: 1px solid var(--line); }
  .gt-col:nth-child(2n) { border-right: 0; }
  .gt-lead { grid-template-columns: 1fr; gap: 18px; align-items: start; margin-top: 80px; }
}
@media (max-width: 620px) {
  .gt-photo, .gt-alt { min-height: 360px; padding: 24px; }
  .gt-photo .in { padding: 24px; }
  .gt-alt .top { left: 24px; top: 24px; right: 24px; }
  .gt-photo b, .gt-alt b { font-size: 25px; }
  .gt-cols { grid-template-columns: 1fr; }
  .gt-col { border-right: 0; padding: 24px 0 26px; }
  .gt-col .n { font-size: 40px; }
  .gt-key { flex-wrap: wrap; gap: 12px 20px; }
  .gt-lead .d3 br, #path .shead .d2 br { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gt-bar i { transform: scaleX(1); transition: none; } }

/* ── intelligence · four devices in four forms, on soft colour fields ──────
   Same standard as agents/automation (2026-09-03): the row's own film frame
   blurred into a colour field, one device centred, 15px type on ~1.6, 22-24px
   padding, real names and numbers. Forms not used anywhere else on v2:
   an export file with a stat strip · a stack of three slabs on a sources
   plane · a dated timeline that converges on a rule · a traced answer whose
   three sources hang off the quote-sell connector. */
.cap-frame.soft > .wb, .cap-frame.soft > .desk, .cap-frame.soft > .ways, .cap-frame.soft > .sldr, .cap-frame.soft > .say, .cap-frame.soft > .kx, .cap-frame.soft > .own, .cap-frame.soft > .hbk, .cap-frame.soft > .lyr, .cap-frame.soft > .iso, .cap-frame.soft > .crx, .cap-frame.soft > .trc {
  position: relative; z-index: 1; margin: 0 auto; }
.kx, .crx { width: 100%; max-width: 470px; background: var(--white);
  border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.22); }
.kx .k, .crx .k, .trc .k, .lyr-t { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); }
/* the export */
.kx-hd, .crx-hd { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px 14px; border-bottom: 1px solid var(--line); }
.kx-live, .crx-st { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-m); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.kx-live i, .crx-st i { width: 7px; height: 7px; background: #5E7A52; display: inline-block; }
.crx-st i { background: var(--orange); }
.kx-file { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; align-items: center; padding: 20px 24px 18px; }
.kx-ic { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-m); font-size: 15px; color: var(--ink); border: 1px solid var(--line); background: var(--bg-2); }
.kx-file b { display: block; font-family: var(--f-m); font-size: 14px; color: var(--ink); letter-spacing: -.01em; }
.kx-file em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.kx-rows { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kx-rows div { padding: 14px 24px 15px; border-right: 1px solid var(--line); }
.kx-rows div:last-child { border-right: 0; }
.kx-rows span { display: block; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.kx-rows b { display: block; font-family: var(--f-d); font-weight: 400; font-size: 26px; letter-spacing: -.03em; color: var(--ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
.kx-meta { padding: 14px 24px 0; }
.kx-meta span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.kx-act { display: flex; align-items: center; gap: 14px; padding: 18px 24px 22px; }
.kx-btn { display: inline-block; background: var(--dark); color: #FAFAFA; font-size: 13px; font-weight: 500; padding: 10px 16px; }
.kx-note { font-size: 12.5px; color: var(--muted-2); }
/* the three layers */
.lyr { width: 100%; max-width: 440px; }
.lyr-s { display: grid; grid-template-columns: 30px 106px auto minmax(0,1fr); gap: 12px; align-items: baseline;
  padding: 18px 22px; border: 1px solid rgba(20,30,40,.12); margin-bottom: -1px; }
.lyr-s.l1 { background: var(--white); box-shadow: 0 18px 44px rgba(8,10,14,.16); position: relative; z-index: 3; }
.lyr-s.l2 { background: var(--sage-2); position: relative; z-index: 2; }
.lyr-s.l3 { background: var(--bg-2); position: relative; z-index: 1; }
.lyr-n { font-family: var(--f-m); font-size: 10px; letter-spacing: .1em; color: var(--muted-2); }
.lyr-k { font-family: var(--f-d); font-weight: 400; font-size: 20px; letter-spacing: -.025em; color: var(--ink); }
.lyr-i { font-size: 12.5px; color: var(--muted); text-align: right; }
.lyr-g { position: relative; margin: 22px 0 0; padding: 16px 22px; border: 1px solid rgba(20,30,40,.22);
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px; background: rgba(255,255,255,.55); }
.lyr-g .lyr-k { font-size: 16px; }
.lyr-g .lyr-i { text-align: right; }
.lyr-g .bpc { color: rgba(20,30,40,.4); }
/* row 1, round 6, HIS brief: "cards of people in the company saying stuff and
   the agent making it a rule". Two pairs: a colleague's message (the hitl-who
   avatar device), the quote-and-sell connector, and the rule or fact the brain
   kept (the fan-d header device). Column labels so it reads at a glance. */
.say { width: 100%; max-width: 640px; }
.say-h { display: grid; grid-template-columns: minmax(0,1fr) 56px minmax(0,1fr); margin-bottom: 12px; padding: 0 2px;
  font-family: var(--f-m); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(20,30,40,.62); }
.say-r { display: grid; grid-template-columns: minmax(0,1fr) 56px minmax(0,1fr); align-items: center; margin-bottom: 22px; }
.say-r:last-child { margin-bottom: 0; }
.say-c { width: 56px; height: 20px; display: block; }
.say-p, .say-b { background: #FFFFFF; border: 1px solid rgba(20,30,40,.10); padding: 18px 20px 19px;
  box-shadow: 0 14px 34px rgba(8,10,14,.12); }
.say-who { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 11px; align-items: center; }
.say-who .av { width: 28px; height: 28px; border-radius: 50%; background: #6E7A6B; display: flex; align-items: center;
  justify-content: center; font-family: var(--f-m); font-size: 11px; color: #FAFAFA; }
.say-who .av.m { background: #8E7A8C; }
.say-who b { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.say-who em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted-2); }
.say-p p { margin: 13px 0 0; font-size: 15.5px; line-height: 1.45; color: #1B2836; }
.say-p p b { font-weight: 600; }
.say-b .t { display: flex; align-items: center; gap: 8px; }
.say-b .t i { font-style: normal; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 11px;
  background: rgba(236,117,35,.14); font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #B4581A; flex: none; }
.say-b .t span { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #9A9A9A; }
.say-b .t .res { margin-left: auto; color: #171719; letter-spacing: .08em; font-size: 9px; }
.say-b b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: #141E28; margin-top: 12px; }
.say-b em { display: block; font-style: normal; font-size: 12.5px; color: #4A5A72; margin-top: 6px; }
.say-f { margin-top: 6px; text-align: center; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(20,30,40,.62); }
@media (max-width: 620px) { .say-h { display: none; } .say-r { grid-template-columns: 1fr; gap: 6px; } .say-c { transform: rotate(90deg); margin: 0 auto; } }
/* row 1, round 5 - two options in wonderful's grammar (their tool chips / their
   governance panel, measured 2026-09-03), squared for v2.
   A `.fl`: white fact pills floating over the colour field, one sentence each,
   a small type tile at the left, an owner chip at the top. Nothing else.
   B `.gp`: one glass panel, plain word rows, a label pinned on its top edge. */
.cap-frame.soft > .fl, .cap-frame.soft > .gp { position: relative; z-index: 1; }
.cap-frame.soft > .fl { position: absolute; inset: 0; overflow: hidden; }
/* wonderful's field has visible grain; ours gets it from a turbulence tile */
.fl-grain { position: absolute; inset: 0; opacity: .13; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.fl-p { position: absolute; display: flex; align-items: center; gap: 14px; background: #FFFFFF; border-radius: 12px;
  padding: 12px 24px 12px 12px; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(8,10,14,.05), 0 22px 54px rgba(8,10,14,.16); }
.fl-p i { width: 38px; height: 38px; flex: none; border-radius: 9px; background: #F1F1EE; display: inline-flex; align-items: center;
  justify-content: center; color: var(--ink); }
.fl-p i svg { width: 18px; height: 18px; }
.fl-p span { font-size: 17px; line-height: 1.2; color: var(--ink); letter-spacing: -.012em; }
.fl-p span b { font-weight: 600; }
.fl-c { position: absolute; display: inline-flex; align-items: center; gap: 9px; background: #FFFFFF; border-radius: 9px; padding: 9px 14px;
  font-size: 12.5px; font-weight: 500; letter-spacing: -.005em; color: var(--ink); white-space: nowrap;
  box-shadow: 0 1px 2px rgba(8,10,14,.05), 0 12px 30px rgba(8,10,14,.12); }
.fl-c i { width: 7px; height: 7px; border-radius: 50%; background: #5E7A52; display: inline-block; }
/* the focal object: the mark on a white tile, like their sphere at the centre */
.fl-o { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 24px;
  background: linear-gradient(160deg, #FFFFFF 0%, #F3F1EC 100%); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(8,10,14,.06), 0 30px 70px rgba(8,10,14,.22), inset 0 -1px 0 rgba(8,10,14,.06); }
.fl-o img { width: 44px; height: 44px; display: block; }
.gp { width: 540px; padding: 44px 40px 40px; background: rgba(255,255,255,.58); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 30px 70px rgba(8,10,14,.16); margin: 0 auto; box-sizing: border-box; }
.gp-tag { position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); background: var(--ink); color: #FAFAFA;
  padding: 9px 16px; font-size: 13px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.gp-r { display: flex; align-items: center; justify-content: center; height: 54px; margin-bottom: 9px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(20,30,40,.12); font-size: 16.5px; color: var(--ink); letter-spacing: -.01em; }
.gp-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.gp-3 .gp-r { margin-bottom: 0; font-size: 15px; }
/* row 1, round 4: a page from the company's own handbook. The knowledge as a
   readable document: section, title, dated entries with their type in the
   margin and their source under each. Same card grammar as .crx / .fan-d. */
.hbk { width: 100%; max-width: 470px; background: var(--white); border: 1px solid #E4E4DC;
  box-shadow: 0 28px 62px rgba(8,10,14,.24); }
.hbk-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px 13px; border-bottom: 1px solid var(--line); }
.hbk-hd .k { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.hbk-own { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); }
.hbk-own i { width: 7px; height: 7px; background: #5E7A52; display: inline-block; }
.hbk-t { position: relative; padding: 20px 24px 16px; }
.hbk-sec { display: block; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.hbk-t h4 { margin: 8px 0 0; font-family: var(--f-d); font-weight: 400; font-size: 24px; letter-spacing: -.03em; color: var(--ink); }
.hbk-pg { position: absolute; right: 24px; top: 24px; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .08em; color: var(--muted-2); }
.hbk-e { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 16px; padding: 13px 24px 14px; border-top: 1px solid var(--line); }
.hbk-e .m b { display: block; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); font-weight: 400; }
.hbk-e .m time { display: block; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .06em; color: var(--muted-2); margin-top: 5px; }
.hbk-e p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.hbk-e p b { font-weight: 600; }
.hbk-e p em { display: block; font-style: normal; font-size: 12px; line-height: 1.4; color: var(--muted-2); margin-top: 5px; }
.hbk-ft { display: flex; justify-content: space-between; gap: 12px; padding: 14px 24px 16px; border-top: 1px solid var(--line);
  background: var(--bg); font-size: 12.5px; color: var(--muted); }
@media (max-width: 620px) { .hbk-e { grid-template-columns: 1fr; gap: 6px; } .hbk-e .m time { display: inline; margin-left: 8px; } .hbk-ft { flex-wrap: wrap; } }
/* row 1, round 3 (his pick): the company brain as one more box inside your
   own boundary, wired to the systems you already run with the quote-sell
   connector; "any model" sits outside the dashed line and nothing crosses */
.own { width: 100%; max-width: 470px; background: var(--white); border: 1px solid rgba(20,30,40,.10);
  box-shadow: 0 30px 70px rgba(8,10,14,.22); }
.own-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 13px; border-bottom: 1px solid var(--line); }
.own-hd .k { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.own-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); }
.own-live i { width: 7px; height: 7px; background: #5E7A52; display: inline-block; }
.own-map { position: relative; width: 426px; height: 250px; margin: 22px 22px 0; }
.own-svg { position: absolute; inset: 0; width: 426px; height: 250px; }
.own-bl { position: absolute; left: 12px; top: 8px; font-family: var(--f-m); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.own-t { position: absolute; width: 88px; height: 56px; background: var(--white); border: 1px solid rgba(20,30,40,.14);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; }
.own-t img { height: 20px; width: auto; max-width: 60px; object-fit: contain; display: block; }
.own-t img.sap { height: 15px; }
.own-t span { font-family: var(--f-m); font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.own-brain { width: 98px; height: 70px; border-color: var(--ink); gap: 4px; }
.own-brain img { height: 22px; }
.own-brain em { font-style: normal; font-family: var(--f-m); font-size: 8px; letter-spacing: .04em; color: var(--muted-2); white-space: nowrap; }
.own-out { width: 88px; height: 64px; background: transparent; border: 1px dashed rgba(20,30,40,.28); gap: 5px; }
.own-out b { font-family: var(--f-d); font-weight: 400; font-size: 14px; color: var(--muted-2); letter-spacing: -.02em; }
.own-out span { color: var(--muted-2); white-space: normal; text-align: center; font-size: 8px; line-height: 1.3; }
.own-nx { position: absolute; left: 318px; top: 170px; width: 108px; text-align: center; font-family: var(--f-m); font-size: 8.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.own-ft { display: flex; justify-content: space-between; gap: 10px; margin: 20px 22px 0; padding: 14px 0 18px; border-top: 1px solid var(--line); }
.own-ft span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 620px) { .own-map, .own-svg { width: 100%; } .own-map { height: auto; aspect-ratio: 426/250; } .own-svg { height: 100%; }
  .own-t, .own-bl, .own-nx { transform: scale(.8); transform-origin: top left; } .own-ft { flex-wrap: wrap; } }
/* the three planes, isometric, from his own reference picture (2026-09-03):
   three dashed rhombi stacked, the top one orange, scattered nodes in sage and
   mauve with one orange, faint lines tying a few nodes across the layers */
.iso { position: relative; width: 100%; max-width: 560px; height: 470px; }
.iso-svg { position: absolute; left: 0; top: 0; width: 500px; height: 470px; }
.iso-l { position: absolute; left: 446px; white-space: nowrap; }
/* row 1's frame is on the right, so its stack sits a little left to keep the labels off the edge */
.cap-frame.soft > .iso-x { transform: translateX(-26px); }
.iso-l .n { display: inline-block; font-family: var(--f-m); font-size: 10px; letter-spacing: .1em; color: rgba(20,30,40,.55); margin-right: 8px; }
.iso-l b { font-family: var(--f-d); font-weight: 400; font-size: 19px; letter-spacing: -.025em; color: var(--ink); }
.iso-l em { display: block; font-style: normal; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(20,30,40,.55); margin-top: 4px; }
.iso-src { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; padding-top: 12px; border-top: 1px solid rgba(20,30,40,.18); }
.iso-src .k { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.iso-src em { font-style: normal; font-size: 12.5px; color: rgba(20,30,40,.72); }
/* the export card shows the knowledge itself */
.kx-facts { border-bottom: 1px solid var(--line); }
.kx-facts > div { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 12px; align-items: baseline;
  padding: 12px 24px; border-bottom: 1px solid var(--line); }
.kx-facts > div:last-child { border-bottom: 0; }
.kx-facts .t { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.kx-facts p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.kx-facts p b { font-weight: 600; }
.kx-facts em { font-style: normal; font-family: var(--f-m); font-size: 10px; letter-spacing: .06em; color: var(--muted-2); white-space: nowrap; }
/* the corrections timeline */
.crx-tl { list-style: none; margin: 0; padding: 20px 24px 6px 24px; }
.crx-tl li { position: relative; display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 14px; padding: 0 0 16px 40px; }
.crx-tl li::before { content: ""; position: absolute; left: 12px; top: 28px; bottom: -6px; width: 1px; background: var(--line); }
.crx-tl li:last-child::before { display: none; }
.crx-tl .av { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: #6E7A6B;
  color: #FAFAFA; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.crx-tl .av.t { background: #8A6F7E; }
.crx-cnt { display: inline-flex; align-items: center; gap: 4px; }
.crx-cnt i { width: 8px; height: 8px; background: var(--line); display: inline-block; }
.crx-cnt i.on { background: var(--orange); }
.crx-cnt span { margin-left: 6px; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.crx-rh { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.crx-tl time { font-family: var(--f-m); font-size: 10.5px; letter-spacing: .08em; color: var(--muted-2); padding-top: 3px; }
.crx-tl p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.crx-tl p b { font-weight: 500; color: var(--ink); }
.crx-tl p s { color: var(--muted-2); }
.crx-rule { margin: 6px 24px 22px; padding: 16px 18px 16px 20px; border-left: 2px solid var(--orange); background: rgba(236,117,35,.05); }
.crx-rule p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.crx-rule p b { font-weight: 600; }
.crx-rule em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
/* the traced answer */
.trc { position: relative; width: 100%; max-width: 520px; height: 300px; }
.trc-svg { position: absolute; left: 0; top: 0; width: 100%; height: 300px; overflow: visible; }
.trc-a, .trc-s { position: absolute; background: var(--white); border: 1px solid rgba(20,30,40,.10);
  box-shadow: 0 24px 56px rgba(8,10,14,.20); box-sizing: border-box; }
.trc-a { left: 110px; top: 0; width: 300px; height: 96px; padding: 16px 20px; }
.trc-a .k { display: block; }
.trc-a b { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); margin-top: 8px; }
.trc-s { top: 204px; width: 160px; height: 96px; padding: 14px 16px; }
.trc-s .k { display: block; }
.trc-s b { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); margin-top: 7px; }
.trc-s em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 4px; }
@media (max-width: 620px) {
  .trc { height: auto; }
  .trc-svg { display: none; }
  .iso { height: auto; padding-bottom: 60px; }
  .iso-svg { position: static; width: 100%; height: auto; }
  .iso-l { display: none; }
  .trc-a, .trc-s { position: static; width: 100%; height: auto; margin-top: 10px; }
  .lyr-s { grid-template-columns: 24px 1fr; }
  .lyr-t, .lyr-i { grid-column: 2; text-align: left; }
  .kx-act { flex-wrap: wrap; }
}

/* ── intelligence · getting there: the numbered accordion ──────────────────
   Built to wonderful.ai/ai-transformation's "AI transformation principles"
   (measured 2026-09-03): title in a 480px left column, five rows in a 540px
   right column with a 60px gutter, "01" grey then the title at ~20px, a 22px
   chevron hard right, hairline dividers, one row open showing ~15px grey text.
   Ours: two-column grid, serif row titles, the mono phase line under each. */
.acc { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 80px; align-items: start; }
.acc-l { display: flex; flex-direction: column; align-self: stretch; }
.acc-l .d2 { max-width: 22ch; }
/* the note sits at the foot of the left column, so it ends level with the line under 04 */
.acc-note { margin-top: auto; padding-top: 40px; }
.acc-r { border-top: 1px solid var(--line); margin-top: 10px; }
.acc-i { border-bottom: 1px solid var(--line); }
.acc-h { appearance: none; background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 44px minmax(0,1fr) 22px; gap: 12px; align-items: center; padding: 20px 0; }
.acc-h .n { font-family: var(--f-m); font-size: 12px; letter-spacing: .1em; color: var(--muted-2); }
.acc-h .t { font-family: var(--f-d); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.025em; color: var(--ink); }
.acc-ch { position: relative; width: 22px; height: 22px; display: block; }
.acc-ch::before, .acc-ch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink);
  transform: translate(-50%,-50%); transition: transform .3s var(--ease); }
.acc-ch::after { transform: translate(-50%,-50%) rotate(90deg); }
.acc-i.is-on .acc-ch::after { transform: translate(-50%,-50%) rotate(0deg); }
.acc-h:focus { outline: none; }
.acc-h:focus-visible .t { box-shadow: 0 2px 0 var(--orange); }
.acc-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.acc-b > div { overflow: hidden; }
.acc-i.is-on .acc-b { grid-template-rows: 1fr; }
.acc-b p { margin: 0 0 0 56px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 52ch; }
.acc-m { display: block; margin: 14px 0 24px 56px; font-family: var(--f-m); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange); }
@media (max-width: 1040px) {
  .acc { grid-template-columns: 1fr; gap: 40px; }
  .acc-l .d2 { max-width: none; }
}
@media (max-width: 620px) {
  .acc-h { grid-template-columns: 32px minmax(0,1fr) 22px; padding: 16px 0; }
  .acc-h .t { font-size: 19px; }
  .acc-b p, .acc-m { margin-left: 0; }
}

/* ── intelligence · getting there: the brain filling up (his idea, 2026-09-04) ──
   "title on top... below one big card, on the left the 4 points that you can
   click on but also it goes automatic from 1 to 4... on the right a visual
   animation of the company brain layers getting more and more filled...
   very smooth". The card's data-phase drives every dot and line through CSS. */
.brn { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); margin-top: 56px;
  background: var(--white); border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(8,10,14,.10); overflow: hidden; }
.brn-l { padding: 22px 40px 26px; align-self: center; }
.brn-i { position: relative; border-top: 1px solid var(--line); }
.brn-i:first-child { border-top: 0; }
.brn-h { appearance: none; background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 12px; align-items: baseline; padding: 20px 0 18px;
  font-family: inherit; color: var(--ink); }
.brn-h .n { font-family: var(--f-m); font-size: 10px; letter-spacing: .12em; color: var(--muted-2); }
.brn-h .t { font-family: var(--f-d); font-weight: 400; font-size: 22px; line-height: 1.15; letter-spacing: -.028em; color: var(--muted); transition: color .3s var(--ease); }
.brn-i.is-on .brn-h .t, .brn-h:hover .t { color: var(--ink); }
.brn-i.is-on .brn-h .n { color: var(--orange); }
.brn-h:focus { outline: none; } .brn-h:focus-visible .t { box-shadow: 0 2px 0 var(--orange); }
.brn-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.brn-b > div { overflow: hidden; padding-left: 52px; }
.brn-i.is-on .brn-b { grid-template-rows: 1fr; }
.brn-b p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.brn-m { display: block; font-family: var(--f-m); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin: 14px 0 22px; }
.brn-prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--orange); z-index: 1; }
.brn-prog.run { animation: brn-prog 5s linear forwards; }
@keyframes brn-prog { from { width: 0 } to { width: 100% } }
.brn-r { position: relative; min-height: 560px; overflow: hidden; background: var(--bg-2); }
/* the ground: a mesh field in v2's OWN palette (sage, amber, olive, cream) with
   grain, the way wonderful's colour fields are built - `mesh-deep.jpg`, generated,
   nothing blue, nothing hue-shifted. He rejected: the ink pane (reads blue), the
   conveyor plate (blue-grey), the hero silk (too pale and busy). */
.brn-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brn-svg path[fill] { filter: drop-shadow(0 8px 18px rgba(8,10,14,.16)); }
.brn-stage { position: absolute; inset: 0; }
.brn-svg { position: absolute; left: 50%; top: 50%; width: 560px; height: 526px; transform: translate(-50%,-50%); }
.brn-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0;
  transition: transform .7s cubic-bezier(.2,.9,.3,1.2) var(--d, 0s), opacity .5s var(--ease) var(--d, 0s); }
.brn-ln { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease) calc(var(--d, 0s) + .25s); }
.brn[data-phase="1"] [data-ph="1"], .brn[data-phase="2"] [data-ph="1"], .brn[data-phase="2"] [data-ph="2"],
.brn[data-phase="3"] [data-ph="1"], .brn[data-phase="3"] [data-ph="2"], .brn[data-phase="3"] [data-ph="3"],
.brn[data-phase="4"] [data-ph] { transform: scale(1); opacity: 1; stroke-dashoffset: 0; }
.brn-l3, .brn-l2, .brn-l1 { position: absolute; left: calc(50% + 196px); white-space: nowrap; font-family: var(--f-d); font-size: 17px; letter-spacing: -.02em; color: #FAFAFA; }
.brn-l3 .n, .brn-l2 .n, .brn-l1 .n { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .1em; color: rgba(250,250,250,.65); margin-right: 8px; }
.brn-l3 { top: calc(50% - 146px); } .brn-l2 { top: calc(50% - 14px); } .brn-l1 { top: calc(50% + 118px); }
.brn-ct { position: absolute; left: 28px; bottom: 24px; display: flex; align-items: baseline; gap: 6px 8px; }
.brn-ct b { font-family: var(--f-d); font-weight: 400; font-size: 26px; letter-spacing: -.03em; color: #FAFAFA; font-variant-numeric: tabular-nums; }
.brn-ct span { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(250,250,250,.65); margin-right: 14px; }
@media (max-width: 1040px) {
  .brn { grid-template-columns: 1fr; }
  .brn-r { min-height: 460px; }
  .brn-svg { width: 460px; height: 432px; }
  .brn-l3, .brn-l2, .brn-l1 { left: calc(50% + 160px); }
  .brn-l3 { top: calc(50% - 120px); } .brn-l2 { top: calc(50% - 12px); } .brn-l1 { top: calc(50% + 96px); }
}
@media (max-width: 620px) {
  .brn-l { padding: 6px 20px 10px; }
  .brn-h { grid-template-columns: 32px 1fr; padding: 16px 0 14px; } .brn-h .t { font-size: 19px; }
  .brn-b > div { padding-left: 44px; }
  .brn-r { min-height: 380px; }
  .brn-svg { width: 360px; height: 338px; }
  .brn-l3, .brn-l2, .brn-l1 { display: none; }
  .brn-ct { left: 18px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .brn-dot, .brn-ln, .brn-b { transition: none; } .brn-prog.run { animation: none; }
}



/* ── control hero: the approval queue, in the old audit table's slot, no plate
   (his brief, 2026-09-04: "one card is open then gets approved / rejected, then
   goes down and the card from above opens, same loop infinite"; then "way
   smoother, way wider, way higher quality"). A stack of five: two waiting
   above, the open one, two resolved below. Every card has a fixed height per
   state and both faces stacked inside it, so opening is a height transition
   and a cross-fade, never a snap. */
.queue { position: relative; width: 100%; max-width: 1180px; margin: 84px auto 0; text-align: left; transition: height 1.3s cubic-bezier(.5,0,.15,1) .22s; }
.qc { position: absolute; left: 0; right: 0; top: 0; height: 58px; background: #FFFFFF; border: 1px solid rgba(20,30,40,.12); border-radius: 0;
  box-shadow: 0 1px 2px rgba(8,10,14,.04), 0 10px 26px rgba(8,10,14,.06); overflow: hidden; will-change: transform, height;
  transition: transform 1.3s cubic-bezier(.5,0,.15,1) .22s, height 1.3s cubic-bezier(.5,0,.15,1) .22s, opacity .9s cubic-bezier(.5,0,.15,1),
              border-color .6s var(--ease), box-shadow .6s var(--ease); }
.qc.out { opacity: 0; transform: translateY(420px) !important; }
.qc-row, .qc-open { position: absolute; left: 0; right: 0; top: 0; transition: opacity .22s ease, transform .5s ease; }
.qc-row { display: grid; grid-template-columns: 10px 30px minmax(0,1fr) auto; align-items: center; gap: 12px; height: 58px; padding: 0 22px; }
.qc-row .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(20,30,40,.20); display: block; }
.qc-row .av { width: 26px; height: 26px; border-radius: 50%; background: #6E7A6B; color: #FAFAFA; font-family: var(--f-m); font-size: 10.5px;
  display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s var(--ease); }
.qc-row .tx { font-size: 15.5px; color: var(--ink); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-row .tx b { font-weight: 600; }
.qc-row .at { font-family: var(--f-m); font-size: 10.5px; letter-spacing: .08em; color: var(--muted-2); }
.qc.pending .qc-row { grid-template-columns: 10px 0 minmax(0,1fr) auto; }
.qc.pending .qc-row .tx { color: var(--muted); }
.qc.done .qc-row .dot { background: #5E7A52; }
.qc.done.warn .qc-row .dot { background: var(--orange); }
.qc.done .qc-row .av { opacity: 1; }
.qc-open { padding: 22px 26px 24px; opacity: 0; pointer-events: none; }
.qc.active { height: 214px; border-color: var(--orange); box-shadow: 0 1px 2px rgba(8,10,14,.04), 0 12px 30px rgba(8,10,14,.07); }
.qc.active .qc-row { opacity: 0; }
.qc-open { transform: translateY(6px); }
.qc.active .qc-open { opacity: 1; transform: none; transition: opacity .6s ease .18s, transform .8s cubic-bezier(.22,1,.36,1) .18s; }
.qc.done .qc-row, .qc.pending .qc-row { transition: opacity .6s ease .18s; }
.qc-open .k { display: block; font-family: var(--f-m); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.qc-open b { display: block; font-size: 19px; font-weight: 600; color: var(--ink); margin-top: 9px; letter-spacing: -.015em; line-height: 1.25; }
.qc-open .s { display: block; font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 6px; }
.qc-open .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.qc-open .meta span { border: 1px solid rgba(20,30,40,.10); border-radius: 0; padding: 4px 8px; font-family: var(--f-m); font-size: 10px; letter-spacing: .04em; color: var(--ink-2); }
.qc-open .acts { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.qc-open .acts .yes, .qc-open .acts .no { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: 0; font-size: 14px; font-weight: 500;
  transition: transform .1s var(--ease), background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease); }
.qc-open .yes { background: var(--orange); color: #FFFFFF; border: 1px solid var(--orange); }
.qc-open .no { background: #FFFFFF; color: var(--ink); border: 1px solid rgba(20,30,40,.18); }
.qc-open .rest { margin-left: auto; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.qc-open .press { transform: scale(.96); }
.qc-open .yes.did { background: #3F5B37; border-color: #3F5B37; }
.qc-open .no.did { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.qc-open .did i { font-style: normal; font-size: 12px; }
@media (max-width: 900px) { .queue { margin-top: 56px; } .qc-row .tx { font-size: 14px; } .qc-open b { font-size: 16.5px; } .qc-open .rest { display: none; } .qc.active { height: 236px; } }
@media (prefers-reduced-motion: reduce) { .qc, .queue, .qc-row, .qc-open { transition: none; } }


/* ── control row 1: the line as a slider per process (2026-09-04, his "i dont
   get it" on the scatter). A knob on a track: right of it the process posts
   itself, left of it a person looks. Two rows sit at the far end: always a
   person, always a buyer. */
.sldr { width: 100%; max-width: 620px; background: #FFFFFF; border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.18); }
.sldr-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 13px; border-bottom: 1px solid var(--line); }
.sldr-hd .k { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.sldr-hd .chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.sldr-hd .chip i { width: 7px; height: 7px; background: var(--orange); display: inline-block; }
.sldr-lg, .sl-r { display: grid; grid-template-columns: 150px minmax(0,1fr) 112px; gap: 18px; align-items: center; padding: 0 22px; }
.sldr-lg { padding-top: 12px; }
.sldr-lg span:nth-child(2) { display: flex; justify-content: space-between; }
.sldr-lg em { font-style: normal; font-family: var(--f-m); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.sl-r { height: 54px; border-bottom: 1px solid var(--line); }
.sl-r:last-of-type { border-bottom: 0; }
.sl-r .nm { font-size: 14px; color: var(--ink); }
.sl-r .sl { position: relative; display: block; height: 8px; background: var(--line); }
.sl-r .sl .fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: rgba(20,30,40,.14); }
.sl-r .sl .knob { position: absolute; top: 50%; left: var(--p); width: 16px; height: 16px; transform: translate(-50%,-50%);
  background: #FFFFFF; border: 1.5px solid var(--orange); box-shadow: 0 2px 6px rgba(8,10,14,.12); }
.sl-r .sl .knob::before, .sl-r .sl .knob::after { content: ""; position: absolute; top: 4px; bottom: 4px; width: 1px; background: rgba(236,117,35,.6); left: 5px; }
.sl-r .sl .knob::after { left: 8px; }
.sl-r .val { font-family: var(--f-m); font-size: 11px; letter-spacing: .06em; color: var(--ink); text-align: right; }
.sl-r.max .sl .fill { background: rgba(236,117,35,.14); }
.sl-r.max .sl .knob { border-color: var(--orange); background: var(--orange); }
.sl-r.max .sl .knob::before, .sl-r.max .sl .knob::after { background: rgba(255,255,255,.7); }
.sl-r.max .val { color: var(--orange); }
.sldr-ft { padding: 14px 22px 16px; border-top: 1px solid var(--line); background: var(--bg); }
.sldr-ft span { display: block; font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.sldr-ft b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.sldr-ft em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; }
@media (max-width: 620px) { .sldr-lg, .sl-r { grid-template-columns: 100px minmax(0,1fr) 84px; gap: 10px; padding: 0 16px; } .sl-r .nm { font-size: 12.5px; } .sl-r .val { font-size: 10px; } }





/* ── control row 2: one request, routed to three channels below it (2026-09-04,
   round 5: rounded connectors, a bigger stage, and the three channel cards
   grown back into real messages). A tree: the request card on top, the
   connector drops to a bus and into three message cards. */
.route { position: relative; width: 660px; max-width: 100%; height: 470px; margin: 0 auto; }
.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-req { position: absolute; left: 0; top: 0; width: 660px; height: 170px; background: #FFFFFF; border: 1px solid rgba(20,30,40,.10);
  box-sizing: border-box; box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.rq-hd { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 11px; border-bottom: 1px solid var(--line); }
.rq-hd .k { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.rq-hd .rq-t { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.rq-body { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 28px; padding: 18px 22px 18px; }
.route-req b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.3; letter-spacing: -.01em; }
.route-req p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.rq-facts { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 7px 10px; font-size: 12px; line-height: 1.35; align-content: start; padding-left: 22px; border-left: 1px solid var(--line); }
.rq-facts span { font-family: var(--f-m); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); padding-top: 2px; }
.rq-facts em { font-style: normal; color: var(--ink); }
.route-to { position: absolute; top: 250px; width: 206px; height: 220px; background: #FFFFFF; border: 1px solid rgba(20,30,40,.10);
  padding: 13px 14px 14px; box-sizing: border-box; box-shadow: 0 14px 34px rgba(0,0,0,.26); display: flex; flex-direction: column; }
.route-to.t1 { left: 0; } .route-to.t2 { left: 227px; } .route-to.t3 { left: 454px; }
.rt-hd { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.rt-hd img { width: 18px; height: 18px; object-fit: contain; display: block; }
.rt-hd b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rt-hd i { margin-left: auto; font-style: normal; font-family: var(--f-m); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.rt-hd i.on { color: #2E7D4F; }
.rt-msg { padding-top: 10px; flex: 1; }
.rt-msg .who { display: block; font-family: var(--f-m); font-size: 9px; letter-spacing: .06em; color: var(--muted-2); margin-bottom: 5px; }
.rt-msg .who u { text-decoration: none; font-size: 7.5px; letter-spacing: .08em; padding: 1px 4px; background: rgba(20,30,40,.07); color: var(--muted); margin-left: 4px; }
.rt-msg p { margin: 0; font-size: 12px; line-height: 1.45; color: #1B2836; }
.rt-msg p b { font-weight: 600; }
.rt-act { display: flex; gap: 6px; margin-top: 10px; }
.rt-act span { display: inline-block; padding: 6px 11px; font-size: 11.5px; font-weight: 500; }
.rt-act .y { background: var(--ink); color: #FAFAFA; }
.rt-act .g { background: #FFFFFF; color: #2E7D4F; border: 1px solid #2E7D4F; }
.rt-act .o { border: 1px solid rgba(20,30,40,.18); color: var(--ink); }
.rt-att { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 10px; border: 1px solid rgba(20,30,40,.12); font-family: var(--f-m); font-size: 9.5px; letter-spacing: .04em; color: var(--ink-2); align-self: flex-start; }
.rt-att i { width: 9px; height: 12px; border: 1.5px solid var(--ink-2); display: inline-block; }
.cap-frame.bare:has(> .route) { height: auto; overflow: visible; aspect-ratio: auto; }
@media (max-width: 720px) { .route { height: auto; } .route-svg { display: none; } .route-req, .route-to { position: static; width: 100%; height: auto; margin-bottom: 12px; } .rq-body { grid-template-columns: 1fr; } .rq-facts { padding-left: 0; border-left: 0; } }

/* control row 3: the connected systems carry their marks (his ask, 2026-09-04),
   and the table sits a little lower beside the text */
#scope .pt-table { margin-top: 12px; }
.pt-table .pt-cell { display: flex; align-items: center; gap: 16px; }
.pt-table .pt-lg { width: 34px; height: 30px; object-fit: contain; object-position: left center; display: block; flex: none; }

/* ── integrations rows, redone 2026-09-04 ("the 4 visuals below are very bad, redo
   them nicely with a nice background"): three devices on three mesh grounds.
   Row 1 `.wb` the order as Business Central sees it, field by field, filled by
   the agent and validated by BC. Row 2 `.desk` the four apps open all day, each
   with one live line. Row 3 `.ways` the doors into the systems with no API. */
.wb, .desk, .ways { width: 100%; max-width: 540px; background: #FFFFFF; border: 1px solid rgba(20,30,40,.10); box-shadow: 0 30px 70px rgba(8,10,14,.18); }
.wb-hd { display: flex; align-items: center; gap: 10px; padding: 13px 20px 12px; border-bottom: 1px solid var(--line); }
.wb-hd img { width: 22px; height: 22px; object-fit: contain; display: block; }
.wb-hd span { font-size: 13px; font-weight: 600; color: var(--ink); }
.wb-hd i { margin-left: auto; font-style: normal; font-family: var(--f-m); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.wb-f { display: grid; grid-template-columns: 112px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 0 20px; height: 48px; border-bottom: 1px solid var(--line); }
.wb-f label { font-size: 12px; color: var(--muted-2); }
.wb-f b { font-size: 13.5px; font-weight: 500; color: var(--ink); border: 1px solid rgba(20,30,40,.12); background: var(--bg); padding: 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-f em { font-style: normal; font-family: var(--f-m); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); width: 40px; text-align: right; }
.wb-ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 13px; background: var(--bg); font-family: var(--f-m); font-size: 9.5px; letter-spacing: .06em; color: var(--muted-2); }
.wb-ft .ok { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-transform: none; letter-spacing: .02em; }
.wb-ft .ok u { text-decoration: none; width: 14px; height: 14px; border-radius: 50%; background: rgba(74,103,65,.16); color: #3F5B37; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; flex: none; }
.desk { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.desk-c { border: 1px solid rgba(20,30,40,.10); padding: 14px 16px 15px; }
.desk-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.desk-hd img { width: 20px; height: 20px; object-fit: contain; display: block; }
.desk-hd b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.desk-hd i { margin-left: auto; font-style: normal; font-family: var(--f-m); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.desk-c p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.desk-c p b { font-weight: 600; color: var(--ink); }
.desk-ft { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 4px 2px; font-size: 12.5px; color: var(--muted); }
.desk-ft i { width: 7px; height: 7px; background: var(--orange); display: inline-block; flex: none; }
.ways-hd { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px 12px; border-bottom: 1px solid var(--line); font-family: var(--f-m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.ways-hd span { color: var(--ink); }
.ways-hd i { font-style: normal; }
.ways-r { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.ways-r .ic { width: 34px; height: 34px; border: 1px solid rgba(20,30,40,.12); display: flex; align-items: center; justify-content: center; position: relative; }
.ways-r .ic img { width: 22px; height: 22px; object-fit: contain; display: block; }
.ways-r .ic.db::before { content: ""; width: 14px; height: 16px; border: 1.5px solid var(--ink-2); border-radius: 7px / 3px; }
.ways-r .ic.web::before { content: ""; width: 16px; height: 12px; border: 1.5px solid var(--ink-2); border-top-width: 4px; }
.ways-r .ic.file::before { content: ""; width: 12px; height: 15px; border: 1.5px solid var(--ink-2); }
.ways-r b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ways-r em { display: block; font-style: normal; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.ways-r u { text-decoration: none; font-family: var(--f-m); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border: 1px solid rgba(20,30,40,.12); padding: 4px 8px; white-space: nowrap; }
.ways-ft { display: flex; align-items: center; gap: 10px; padding: 12px 20px 13px; background: var(--bg); font-family: var(--f-m); font-size: 9.5px; letter-spacing: .06em; color: var(--ink); }
.ways-ft i { width: 7px; height: 7px; background: var(--orange); display: inline-block; }
@media (max-width: 620px) { .wb-f { grid-template-columns: 84px minmax(0,1fr) auto; height: auto; padding: 8px 14px; } .desk { grid-template-columns: 1fr; padding: 10px; } .ways-r { gap: 10px; padding: 10px 14px; } }

/* ── hero email capture (replaces the two hero buttons, 2026-09-15) ── */
.hero-cap { display: flex; gap: 10px; align-items: stretch; max-width: 416px; } /* = the lead's 34ch */
.hero-cap .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-cap input {
  flex: 1 1 200px; min-width: 0; min-height: 46px; padding: 0 16px; border-radius: 0;
  font-family: var(--f-b); font-size: 14px; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.55);
  transition: border-color .3s var(--ease), background .3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.hero-cap input::placeholder { color: rgba(255,255,255,.72); }
.hero-cap input:focus { outline: none; border-color: #FAFAFA; background: rgba(255,255,255,.12); }
.hero-cap-f { position: relative; flex: 1 1 200px; min-width: 0; display: flex; }
.hero-cap-f input { flex: 1 1 auto; width: 100%; }
.hero-cap .err { display: none; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-b); font-size: 12px; font-weight: 500; color: #FF5A4E; pointer-events: none; }
.hero-cap.bad input { border-color: #FF5A4E; color: rgba(255,255,255,.55); padding-right: 128px; }
.hero-cap.bad .err { display: block; }
.hero-cap .btn { flex: none; white-space: nowrap; }
@media (max-width: 620px) {
  .hero-cap { flex-direction: column; max-width: none; }
  .hero-cap-f { flex: 0 0 auto; }
  .hero-cap input { height: 50px; }
  .hero-cap .btn { width: 100%; }
}

/* ── the constellation (agents page, "One agent, then a workforce", 2026-09-15) ── */
.cst-sec { padding: 0; position: relative; }
.cst-run { height: 280vh; }                                    /* the scroll runway */
.cst-hold { position: sticky; top: 0; height: 100vh; min-height: 620px; }
/* the box ends INSIDE the screen: under the 96px nav, a gutter on every side, never full-bleed */
.cst-box { position: absolute; left: var(--gut); right: var(--gut); top: 116px; bottom: 32px;
  background: var(--dark); overflow: hidden;
  transform: scale(.68); transform-origin: 50% 50%; will-change: transform;
  box-shadow: 0 30px 90px rgba(20,30,40,.22), 0 6px 22px rgba(20,30,40,.10); }
.cst-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(640px, 44%); text-align: center; z-index: 3; }
.cst-center .d2 { color: #FAFAFA; font-size: clamp(44px, 5.4vw, 80px); line-height: 1.02; }
.cst-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.cst-lines line { stroke: rgba(250,250,250,.26); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke; }
.cst-nodes { position: absolute; inset: 0; z-index: 2; }
.cst-card { position: absolute; left: var(--x); top: var(--y); width: clamp(124px, 12.2%, 176px); display: block; overflow: hidden;
  background: var(--dark-2); border: 1px solid var(--line-d);
  transform: translate(-50%,-50%) scale(calc(.5 + .5 * var(--e, 0))); opacity: var(--e, 0); }
.cst-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 100%); }
.cst-card img { display: block; width: 100%; aspect-ratio: 420 / 236; object-fit: cover; filter: brightness(.96) saturate(1.3); }
.cst-card b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 6px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; color: #FFF; z-index: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,1), 0 0 12px rgba(0,0,0,.9); }
.cst-card.fresh { border-color: rgba(236,117,35,.7); }
.cst-nodes.blur .cst-card img { filter: saturate(1.15) brightness(.92); }   /* the blurred-colour variant */
.cst-nodes.blur .cst-card { border-color: rgba(250,250,250,.28); }
@media (max-width: 700px) {
  .cst-run { height: auto; }
  .cst-hold { position: static; height: auto; min-height: 0; padding: 72px 0; display: block; }
  .cst-box { position: relative; inset: auto; transform: none !important; width: calc(100vw - 2 * var(--gut)); margin: 0 auto; height: auto;
    padding: 56px 20px 20px; box-shadow: none; }
  .cst-center { position: static; transform: none; width: auto; max-width: 520px; margin: 0 auto; }
  .cst-lines { display: none; }
  .cst-nodes { position: static; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 36px; }
  .cst-card { position: relative; left: auto; top: auto; transform: none !important; opacity: 1 !important; width: auto; }
}

/* ── breakpoint pass (2026-09-15) ─────────────────────────────────────── */
/* Five-part anatomy grid: one column on phones; two columns of ~150px read cramped. */
@media (max-width: 620px) {
  .anat5 { grid-template-columns: 1fr; }
  .an5 { border-right: 0; }
}
/* Control route diagram: drawn at a fixed 660px, but between ~1180 and ~1360 its grid column is
   549-646px wide, so it overflowed the page (and on phones it stretched the whole viewport to 682px).
   The frame becomes a size container: the diagram scales to its column, and below 560px it stacks. */
.cap-frame.bare:has(> .route) { container-type: inline-size; container-name: route; width: 100%; }
@container route (min-width: 560px) and (max-width: 659.98px) { .route { max-width: none; } }
@container route (min-width: 627px) and (max-width: 659.98px) { .route { zoom: .95; } }
@container route (min-width: 594px) and (max-width: 626.98px) { .route { zoom: .9; } }
@container route (min-width: 560px) and (max-width: 593.98px) { .route { zoom: .848; } }
@container route (max-width: 559.98px) {
  .route { width: 100%; height: auto; }
  .route-svg { display: none; }
  .route-req, .route-to { position: static; width: 100%; height: auto; margin-bottom: 12px; }
  .rq-body { grid-template-columns: 1fr; }
  .rq-facts { padding-left: 0; border-left: 0; }
}
/* phones: the old viewport rule stacks the cards, so drop the container scale there */
@media (max-width: 720px) { .route { zoom: 1; } }
/* Constellation between the phone grid (700) and 900: the box is ~660px wide, so the 124px card
   minimum pushed the corner cards (x 9-10% / 90-91%) past the box edge. Narrower cards here. */
@media (min-width: 700.02px) and (max-width: 900px) {
  .cst-card { width: clamp(100px, 16%, 124px); }
  .cst-card b { font-size: 13.5px; }
}

/* ── phones (2026-09-15, his ask) ─────────────────────────────────────── */
/* solutions scenes: cropped, not shrunk (see rescale() on each solutions page) */
.wbox.crop { aspect-ratio: 9 / 8; }
/* "Any format in" photo block on phones: its contents were all absolutely placed, so below 620 the panel
   collapsed to zero height and vanished. The photo stays the background of the whole block, edge to edge as on
   desktop; the title and the card stack on top of it (no description, no button). */
@media (max-width: 620px) {
  .upanel { width: 100vw; margin-left: calc(50% - 50vw); aspect-ratio: auto; min-height: 0; }
  .upanel .ushade { background: linear-gradient(180deg, rgba(8,10,14,.80) 0%, rgba(8,10,14,.55) 38%, rgba(8,10,14,.40) 100%); }
  .upanel .uwrap { position: relative; inset: auto; display: flex; flex-direction: column; align-items: stretch;
    gap: 24px; padding: 40px var(--gut); max-width: none; }
  .upanel .ucopy p, .upanel .ucopy .btn { display: none; }
  .upanel .uicard { width: 100%; max-width: none; justify-self: auto; }
  .upanel .urow { gap: 10px; }
  .upanel .urow .uref { gap: 6px; font-size: 14px; }
}
/* Govern & Enable card on phones: the seven column labels are 17-40px of text in 16-26px columns,
   so they ran into each other. Below 620 the column labels stand vertical; the row labels stay put. */
@media (max-width: 620px) {
  .upanel .mdh-g .mdh-h:not(:first-child) { writing-mode: vertical-rl; transform: rotate(180deg);
    justify-self: center; align-self: end; letter-spacing: .06em; padding: 0 0 4px; }
}
/* Source & Procure "Promised this week" card on phones: five day columns of ~50px could not hold the
   supplier names (spilled 5-38px into the next day). Below 620 each day is a row: the day on the left,
   its purchase orders beside it, number and supplier on one line. Same content, phone arrangement. */
@media (max-width: 620px) {
  .upanel .pob-w { grid-template-columns: minmax(0,1fr); }
  .upanel .pob-d { display: grid; grid-template-columns: 58px minmax(0,1fr); column-gap: 12px; align-items: start;
    min-height: 0; padding: 11px 0; border-left: 0; border-top: 1px solid var(--line); }
  .upanel .pob-d:first-child { border-top: 0; padding-top: 2px; }
  .upanel .pob-d:last-child { padding-bottom: 0; }
  .upanel .pob-dh { grid-column: 1; grid-row: 1 / span 4; margin: 0; padding-bottom: 0; }
  .upanel .pob-c { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px;
    margin: 0 0 8px; }
  .upanel .pob-c:last-child { margin-bottom: 0; }
  .upanel .pob-c span { margin-top: 0; }
  .upanel .pob-c .pob-slip { flex-basis: 100%; margin-top: 3px; }
  .upanel .pob-none { grid-column: 2; align-self: center; margin-top: 0; }
}

/* ── the proof wall (homepage "Trusted by", 2026-09-17, his ask: bigger, four logos carry their number) ──
   Eight columns, four rows of 136px. Four 2x2 tiles (348 wide, 272 tall) hold a logo, the number and a link
   to the story; the other fourteen logos fill the holes (dense auto-flow), the two widest wordmarks on a
   double cell so no cell is empty. Same hairline grid, sharp corners, ink numbers in the .gcount grammar.
   Numbers are the rail-card / story wording, nothing new. Tile logos are the TRIMMED files (ink only). */
.wall.proof { grid-template-columns: repeat(8, minmax(0,1fr)); grid-auto-rows: 152px; grid-auto-flow: dense; }   /* one box, shared hairlines (his call) */
.wall.proof .wc { height: auto; min-height: 152px; }
/* One sizing rule for every logo (2026-09-17, "make them proportionate"): the files are TRIMMED to their
   ink, then sized by shape band, not by file: compact marks share one height, wordmarks share one width,
   the very wide ones a little more so they do not turn into hairlines. Widths are % of the cell so the
   rule survives every breakpoint. */
.wall.proof .wc img { height: auto; width: auto; max-width: none; }
.wall.proof .wc .b-mark  { height: 40px; }
.wall.proof .wc .b-mid   { width: 54%; max-width: 86px; }
.wall.proof .wc .b-wide  { width: 66%; max-width: 104px; }
.wall.proof .wc .b-xwide { width: 76%; max-width: 118px; }
.lg-gd-its{--lh:90} .lg-swmf{--lh:66}   /* his two logos, 2026-09-17 (Downloads, flattened to the house ink on the 900x300 canvas) */
.wpf { position: relative; display: block; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: transparent; padding: 22px 24px 20px; text-decoration: none; color: inherit;   /* same ground as the logo cells */
  transition: background .3s var(--ease); }
.wpf:hover { background: rgba(255,255,255,.7); }
/* his reference layout: top pair = tile · 2x2 logos · tile · 2x2 logos; bottom pair = the same shifted by two */
.wpf-a { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.wpf-b { grid-column: 5 / span 2; grid-row: 1 / span 2; }
.wpf-c { grid-column: 3 / span 2; grid-row: 3 / span 2; }
.wpf-d { grid-column: 7 / span 2; grid-row: 3 / span 2; }
.wpf-logo { position: absolute; left: 24px; top: 22px; display: block; }   /* logo top-LEFT, arrow top-right, like his example */
.wpf-logo img { height: var(--th, 32px); width: auto; max-width: 260px; object-fit: contain; display: block; }
.wpf-logo .lg-dekker { --th: 28px; } .wpf-logo .lg-topa { --th: 34px; } .wpf-logo .lg-spl-treatments { --th: 22px; } .wpf-logo .lg-kisch { --th: 30px; }
.wpf-arw { position: absolute; right: 20px; top: 18px; font-size: 16px; line-height: 1; color: var(--muted-2);
  transition: color .3s var(--ease), transform .3s var(--ease); }
.wpf:hover .wpf-arw { color: var(--orange); transform: translate(2px,-2px); }
.wpf-stat { position: absolute; left: 24px; right: 24px; bottom: 20px; display: block; }
.wpf-stat b { display: block; font-family: var(--f-d); font-weight: 400; font-size: 44px; line-height: .95;
  letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.wpf-stat i { display: block; font-style: normal; font-family: var(--f-m); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.wall.proof .wc .lg-xpol { width: 44%; }   /* his ask: Xpol a bit smaller than its band */
@media (max-width: 1180px) {
  .wall.proof { grid-template-columns: repeat(8, minmax(0,1fr)); }   /* the plain wall drops to 3 here; the proof wall holds 8 until 1040 */
}
@media (max-width: 1040px) {
  /* four columns x eight rows = 32 cells = 4 tiles (16) + 16 logos, no empty cell */
  .wall.proof { grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 136px; }
  .wall.proof .wc { min-height: 136px; }
  .wpf-a { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .wpf-b { grid-column: 3 / span 2; grid-row: 3 / span 2; }
  .wpf-c { grid-column: 1 / span 2; grid-row: 5 / span 2; }
  .wpf-d { grid-column: 3 / span 2; grid-row: 7 / span 2; }
  .wpf { padding: 20px 22px 18px; }
  .wpf-logo { left: 22px; top: 20px; }
  .wpf-logo img { height: calc(var(--th, 32px) * .85); max-width: 200px; }
  .wpf-arw { right: 20px; top: 18px; }
  .wpf-stat { left: 22px; right: 22px; bottom: 18px; }
  .wpf-stat b { font-size: 40px; }
}
@media (max-width: 620px) {
  .wall.proof { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: minmax(92px, auto); }
  .wpf { min-height: 200px; }
  .wall.proof .wc { min-height: 92px; }
  .wall.proof .wc .b-mark { height: 40px; }
  .wpf-a, .wpf-b, .wpf-c, .wpf-d { grid-column: 1 / span 2; grid-row: auto / span 2; }
  .wpf-stat b { font-size: 36px; }
  .wpf-logo img { height: calc(var(--th, 32px) * .7); max-width: 150px; }
}

/* ══════════════════════════════════════════════════════
   PLATFORM HEROES - the homepage capture, on a light hero (2026-09-23)
   Leonardo: "button book a demo should be same look and feel as in the
   homepage, also with the email field available. Remove 'how it works' cta".
   ⚠ .hero-cap is styled white-on-film for the homepage. Every platform hero is
   LIGHT (phero runs the pale plate, shero is plain --bg), so the field is
   restated in ink here rather than restyled five times.
   ══════════════════════════════════════════════════════ */
.hero-cap.ink { margin: 34px auto 0; }
.hero-cap.ink input { color: var(--ink); background: rgba(255,255,255,.70);
  border-color: rgba(20,30,40,.22); }
.hero-cap.ink input::placeholder { color: var(--muted); }
.hero-cap.ink input:focus { border-color: var(--ink); background: #FFFFFF; }
.hero-cap.ink.bad input { border-color: #C6402F; color: var(--muted-2); }
.hero-cap.ink .err { color: #C6402F; }

/* "Trusted by" + the rolling wall, directly under the hero capture. The same
   .mq machinery the pricing page uses, at hero scale: smaller, greyed back, so
   it reads as proof under the CTA and not as a band of its own. */
.phero-trust { margin-top: 76px; }
/* the light heroes carry a device straight after the wall (control's queue,
   integrations' logo table), so the strip needs air under it as well */
.shero .phero-trust { margin-bottom: 34px; }
.phero-trust-k { display: block; text-align: center; font-family: var(--f-m); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; }
.phero-trust .mq-set { gap: 54px; padding-right: 54px; }
.phero-trust .mq img { height: calc(var(--lh, 38) * .62px); max-width: 124px;
  filter: grayscale(1); opacity: .70; }
@media (max-width: 620px) {
  .phero-trust { margin-top: 54px; }
  .phero-trust .mq-set { gap: 36px; padding-right: 36px; }
  .phero-trust .mq img { height: calc(var(--lh, 38) * .44px); }
}

/* ══════════════════════════════════════════════════════
   FLAT CAPABILITY FRAME (2026-09-23)
   The automation page's four visuals sat on blurred photo plates while the
   agents page put its drawings on a flat sage panel with hairline strokes.
   Leonardo asked for one language, so .flat is the agents panel (#EDEDE5,
   .v3a-panel) applied to the shared .cap-frame, and the cards inside lose the
   heavy drop shadows that only existed to lift them off a photograph.
   ══════════════════════════════════════════════════════ */
.cap-frame.flat { background: #EDEDE5; border: 1px solid var(--line); padding: 28px; }
.cap-frame.flat::after { content: none; }
.cap-frame.flat .wfx-c,
.cap-frame.flat .hitl,
.cap-frame.flat .nchart,
.cap-frame.flat .fan-d { box-shadow: none; border: 1px solid #DCDCD4; background: #FFFFFF; }
/* the running node keeps its orange ring, without the shadow stack under it */
.cap-frame.flat .wfx-n.run .wfx-c { box-shadow: 0 0 0 1px var(--orange), 0 0 0 4px rgba(236,117,35,.14); }
/* the fan's three documents overlap, so they still need an edge to read against
   each other - a hairline, not a shadow */
.cap-frame.flat .fan-d { box-shadow: 0 1px 0 rgba(20,30,40,.04); }

/* ══════════════════════════════════════════════════════
   THE SYSTEM WALL (integrations, 2026-09-23)
   The 24-tile table used to sit in the hero, which meant the page opened on a
   logo grid instead of a sentence. Leonardo moved it down to be the visual
   beside "Your ERP stays the system of record" and asked for it scrolling:
   three rows on the flat panel, the middle one against the other two, on the
   same .mq machinery the customer wall uses.
   ══════════════════════════════════════════════════════ */
.syswall { width: 100%; display: grid; gap: 14px; }
.syswall .mq {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.syswall .mq-set { gap: 14px; padding-right: 14px; }
.syswall .mq-track { animation-duration: 64s; }
.syswall .mq.rev .mq-track { animation-duration: 72s; }
.sysc { flex: none; display: inline-flex; align-items: center; gap: 11px; height: 58px;
  padding: 0 18px; background: #FFFFFF; border: 1px solid #DCDCD4; }
/* ⚠ .mq img sizes the CUSTOMER logos off --lh. These are product marks with
   their own optical heights, carried on --sh. */
.syswall .sysc img { display: block; width: auto; height: var(--sh, 22px); max-width: 92px;
  object-fit: contain; }
.sysc b { font-family: var(--f-b); font-size: 12.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap; }
@media (max-width: 620px) {
  .syswall { gap: 10px; }
  .syswall .mq-set { gap: 10px; padding-right: 10px; }
  .sysc { height: 48px; padding: 0 13px; gap: 9px; }
  .sysc b { font-size: 11.5px; }
}

/* Platform hero variants share the Agents layout and drifting film. */
.phero.tint-sage .phero-media video,
.phero.tint-sage .phero-media img {
  filter: saturate(.24) brightness(1.32) contrast(.74) sepia(.30) hue-rotate(65deg);
}
.phero.tint-lavender .phero-media video,
.phero.tint-lavender .phero-media img {
  filter: saturate(.24) brightness(1.32) contrast(.74) sepia(.28) hue-rotate(235deg);
}
.pg-platform #control > .wrap > .queue { margin: 0 auto 96px; }
@media (max-width: 620px) {
  .pg-platform #control > .wrap > .queue { margin-bottom: 64px; }
}

/* Control follows the shared platform capability panels. */
.pg-control .sldr { box-shadow: none; border-color: #DCDCD4; }
.pg-control .control-permissions .pt-table { width: 100%; margin: 0; background: white; border: 1px solid #DCDCD4; }
.pg-control .control-permissions { aspect-ratio: auto; min-height: 360px; }

/* ══════════════════════════════════════════════════════
   PLATFORM TYPE SCALE (2026-09-23)
   Measured at 1400px before this block: block headings ran 30 / 32 / 32.2 /
   35 / 36px and body copy 13 / 13.5 / 14 / 14.5 / 15 / 15.5 / 16px, each set
   by whichever component happened to own it. One scale, stated once, scoped
   to the platform pages so the mockups' own chrome (.wfx-hd .k etc.) is
   untouched:
     D1 hero        .d1                         clamp → 64px
     D2 section     .d2                         clamp → 52px
     D3 block       .d3 / gain h2 / gt-lead h3  clamp → 36px
     D4 card        gt-photo b / gt-alt b / v3a-el-title   30px
     D5 item        gt-col b / an5 b / brn-h .t            22px
     hero lead      .lead                        17px / 1.5
     section lead   .p                           16px / 1.62
     block body     .lead-s, gain p, gt p, brn p 15px / 1.55
     support        cap-item em, v3a-el-p, gt-col p, an5 p, path-note  14px / 1.5
     kicker         .k (page level), .v3a-rule   10.5px / .14em
   ══════════════════════════════════════════════════════ */
.pg-platform .cap-l .d3,
.pg-platform .v3a-gain-c h2,
.pg-platform .gt-lead .d3 { font-family: var(--f-d); font-weight: 400;
  font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.032em; color: var(--ink); }
.pg-platform .gt-photo .in b,
.pg-platform .gt-alt b,
.pg-platform .v3a-el-title { font-size: 30px; line-height: 1.1; letter-spacing: -.03em; }
.pg-platform .gt-col b,
.pg-platform .an5 b,
.pg-platform .brn-h .t { font-family: var(--f-d); font-weight: 400; font-size: 22px; line-height: 1.16;
  letter-spacing: -.024em; }

.pg-platform .phero .lead,
.pg-platform .shero .lead { font-size: 17px; line-height: 1.5; letter-spacing: -.012em; color: var(--muted); }
.pg-platform .p { font-size: 16px; line-height: 1.62; color: var(--muted); }
.pg-platform .lead-s,
.pg-platform .v3a-gain-c p,
.pg-platform .gt-photo .in p,
.pg-platform .gt-alt p,
.pg-platform .brn-b p { font-size: 15px; line-height: 1.55; }
.pg-platform .cap-item em,
.pg-platform .v3a-el-p,
.pg-platform .gt-col p,
.pg-platform .an5 p,
.pg-platform .path-note,
.pg-platform .desk-c p { font-size: 14px; line-height: 1.5; }

.pg-platform .v3a-rule,
.pg-platform .an5 .k,
.pg-platform .gt-photo .k, .pg-platform .gt-alt .k,
.pg-platform .gt-col .w { font-family: var(--f-m); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; }

/* ── the FDE section head: copy left, the same capture right (2026-09-23) ── */
.path-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end;
  max-width: none; }
.path-head > div { max-width: 980px; }
.path-cap { margin: 0; }
.path-cap input { background: #FFFFFF; }
@media (max-width: 1040px) {
  .path-head { grid-template-columns: 1fr; align-items: start; gap: 28px; }
}
/* the intelligence layer labels were white for a dark photo plate; on the
   flat panel they need the page ink */
.cap-frame.flat .iso-l b { color: var(--ink); }
.cap-frame.flat .iso-l .n, .cap-frame.flat .iso-l em { color: var(--muted); }


/* ── Typography pass, 23 Sep 2026: ONE h1 scale and ONE h2 scale site-wide ──
   h1 = the homepage hero scale (89.28px at 1440); h2 = the v3 section-title scale
   (63.36px at 1440). !important so the page-level hero/section overrides that
   accumulated (.phero .d1, .prhero .d1, .bd-form .d1, .v3p-statement h2, .v3-about .h2
   and friends) no longer fight it; they keep their max-width/colour rules only.
   Headings inside cards or columns are <h3> and keep their own size. */
h1, h1.d1 { font-family: var(--f-d); font-weight: 400; font-size: clamp(48px, 6.2vw, 90px) !important; line-height: .98 !important; letter-spacing: -.035em !important; }
h2, h2.d2 { font-family: var(--f-d); font-weight: 400; font-size: clamp(38px, 4.4vw, 64px) !important; line-height: 1.02 !important; letter-spacing: -.035em !important; }