/* ==========================================================================
   Mi-C3 / Affectli — shared design system
   Layout concept: 12-col engineering grid, hairline structure, dark/light
   section rhythm, bracket + node motifs. One file, two brands via
   body[data-brand]. Components only read semantic tokens (--bg, --fg …),
   section themes (.t-*) map palette → semantic.
   ========================================================================== */

/* ---------- Palette (Mi-C3 default) ---------- */
:root {
  /* Mi-C3 palette */
  --ink: #0A0D12;
  --graphite: #12161D;
  --graphite-2: #1A1F28;
  --steel: #252C36;
  --slate: #8A949F;
  --mist: #D9DDE1;
  --paper: #F3F4F2;
  --white: #FFFFFF;
  --signal: #F7941D;
  --signal-deep: #B45F06;
  --telemetry: #7FA7C9;
  --ok: #0E8FB0;
  --warn: #F7941D;
  --crit: #E5484D;

  /* Affectli palette (available everywhere for cross-brand moments) */
  --midnight: #070B24;
  --navy: #0D184A;
  --navy-2: #13205C;
  --iris: #633B97;
  --cobalt: #3357A7;
  --azure: #0094D8;
  --cloud: #F5F7FB;
  --affectli-gradient: linear-gradient(115deg, #633B97 0%, #3357A7 32%, #0094D8 100%);

  /* Digital twin palette (illustrations on both sites, from Affectli's twin screens; scene.js PAL uses the same values) */
  --twin-ground: #121C2F;
  --twin-line: #2EA0F0;
  --twin-reading: #9FE8F5;
  --twin-light: #9FE8F5;
  --twin-data: #5FC4FF;
  --twin-fault: #F2385A;

  /* Brand-mapped roles (Mi-C3) */
  --dark-0: var(--ink);
  --dark-1: var(--graphite);
  --dark-2: var(--graphite-2);
  --dark-line: rgba(255, 255, 255, 0.10);
  --dark-line-strong: rgba(255, 255, 255, 0.22);
  --on-dark: #EEF0EE;
  --on-dark-muted: #9AA3AD;
  --light-0: var(--paper);
  --light-1: var(--white);
  --light-line: #D6DAD8;
  --light-line-strong: #B9BFBD;
  --on-light: #0E1116;
  --on-light-muted: #555E68;
  --accent: var(--signal);
  --accent-deep: var(--signal-deep);
  --accent-ink: #0A0D12;            /* text on accent fill */
  --accent-soft: rgba(247, 148, 29, 0.14);
  --focus: var(--signal);

  /* Type */
  --font-display: "Saira", "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-logo: "Poppins", "Public Sans", Arial, sans-serif;

  --fs-display-xl: clamp(3rem, 1.6rem + 5.6vw, 6.25rem);
  --fs-display-l: clamp(2.5rem, 1.5rem + 3.8vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.75rem;

  /* Space + layout */
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --maxw: 1280px;
  --maxw-wide: 1440px;
  --maxw-narrow: 860px;
  --section-y: clamp(5rem, 3.2rem + 6vw, 9rem);
  --header-h: 76px;
  --radius: 2px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);

  color-scheme: light;
}

/* ---------- Affectli brand mapping ---------- */
body[data-brand="affectli"] {
  --dark-0: var(--midnight);
  --dark-1: var(--navy);
  --dark-2: var(--navy-2);
  --dark-line: rgba(170, 190, 255, 0.13);
  --dark-line-strong: rgba(170, 190, 255, 0.26);
  --on-dark: #EEF1FA;
  --on-dark-muted: #9DA6C6;
  --light-0: var(--cloud);
  --light-1: var(--white);
  --light-line: #DCE1EC;
  --light-line-strong: #C3CADB;
  --on-light: #0A1033;
  --on-light-muted: #4F5878;
  --accent: #2F8BFF;               /* bright cobalt-azure for dark grounds */
  --accent-deep: var(--cobalt);
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(51, 87, 167, 0.12);
  --focus: var(--azure);
}

/* ---------- Section themes → semantic tokens ---------- */
.t-dark, .t-ink {
  --bg: var(--dark-0); --surface: var(--dark-1); --surface-2: var(--dark-2);
  --fg: var(--on-dark); --muted: var(--on-dark-muted);
  --line: var(--dark-line); --line-strong: var(--dark-line-strong);
  --accent-text: var(--accent); --btn-bg: var(--accent); --btn-fg: var(--accent-ink);
  --grid-line: rgba(255, 255, 255, 0.045);
  background: var(--bg); color: var(--fg);
}
.t-raised { --bg: var(--dark-1); --surface: var(--dark-2); background: var(--bg); }
.t-light, .t-paper {
  --bg: var(--light-0); --surface: var(--light-1); --surface-2: #E9ECEA;
  --fg: var(--on-light); --muted: var(--on-light-muted);
  --line: var(--light-line); --line-strong: var(--light-line-strong);
  --accent-text: var(--accent-deep); --btn-bg: var(--on-light); --btn-fg: #FFFFFF;
  --grid-line: rgba(14, 17, 22, 0.05);
  background: var(--bg); color: var(--fg);
}
.t-white {
  --bg: var(--light-1); --surface: var(--light-0); --surface-2: #EEF0EF;
  --fg: var(--on-light); --muted: var(--on-light-muted);
  --line: var(--light-line); --line-strong: var(--light-line-strong);
  --accent-text: var(--accent-deep); --btn-bg: var(--on-light); --btn-fg: #FFFFFF;
  --grid-line: rgba(14, 17, 22, 0.05);
  background: var(--bg); color: var(--fg);
}
body[data-brand="affectli"] .t-light,
body[data-brand="affectli"] .t-white { --btn-bg: var(--cobalt); --btn-fg: #FFFFFF; --surface-2: #E8ECF5; }
body[data-brand="affectli"] .t-dark { --btn-bg: var(--accent); --btn-fg: #FFFFFF; }

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  background: var(--dark-0);
  color: var(--on-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
main { display: block; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 1px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; font: 500 var(--fs-small)/1 var(--font-body); }
.skip-link:focus { top: 12px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: calc(var(--maxw-wide) + var(--gutter) * 2); }
.wrap--narrow { max-width: calc(var(--maxw-narrow) + var(--gutter) * 2); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section + .section.same-theme { padding-top: 0; }
.stack { --stack: 1.25rem; display: flex; flex-direction: column; gap: var(--stack); }
.stack--s { --stack: 0.75rem; } .stack--l { --stack: 2rem; } .stack--xl { --stack: 3.5rem; } .stack--xxl { --stack: clamp(4.5rem, 3rem + 4vw, 8rem); }
.row { display: flex; flex-wrap: wrap; gap: var(--row-gap, 1rem); align-items: center; }
.grid { display: grid; gap: var(--grid-gap, clamp(1.5rem, 1rem + 1.5vw, 2.5rem)); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 6rem); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--top { align-items: start; }
.split > *, .grid > * { min-width: 0; }
.span-2 { grid-column: span 2; }
.measure { max-width: 64ch; }
.measure-s { max-width: 46ch; }
.center { text-align: center; margin-inline: auto; }
.mt-s { margin-top: 0.75rem; } .mt-m { margin-top: 1.5rem; } .mt-l { margin-top: 2.5rem; } .mt-xl { margin-top: 4rem; }
.mb-l { margin-bottom: 2.5rem; } .mb-xl { margin-bottom: 4rem; }

@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split, .split--rev { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .g-2, .g-3, .split--even { grid-template-columns: minmax(0, 1fr); }
  .g-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2 { grid-column: auto; }
}
@media (max-width: 520px) {
  .g-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Typography ---------- */
.display-xl, .display-l, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 300;
  text-wrap: balance;
  color: var(--fg);
}
.display-xl { font-size: var(--fs-display-xl); line-height: 0.98; letter-spacing: -0.035em; }
.display-l, .h1 { font-size: var(--fs-display-l); line-height: 1.02; letter-spacing: -0.03em; }
.h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.025em; }
.h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -0.015em; font-weight: 400; }
.h4 { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.005em; font-weight: 500; color: var(--fg); }
.display-xl strong, .display-l strong, .h1 strong, .h2 strong, .h3 strong { font-weight: 500; }
.display-xl em, .display-l em, .h1 em, .h2 em { font-style: normal; color: var(--accent-text); }
.lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.lede strong { color: var(--fg); font-weight: 500; }
.body { color: var(--muted); text-wrap: pretty; }
.body p + p, .prose p + p { margin-top: 1em; }
.prose { color: var(--muted); max-width: 66ch; }
.prose strong { color: var(--fg); font-weight: 600; }
.small { font-size: var(--fs-small); line-height: 1.55; }
.muted { color: var(--muted); }
.fg { color: var(--fg); }
.accent { color: var(--accent-text); }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; }
.mono--plain { text-transform: none; letter-spacing: 0.01em; }
.tnum { font-variant-numeric: tabular-nums; }

/* Eyebrow with bracket motif:  [ Ontology ]  */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text);
  line-height: 1;
}
.eyebrow::before { content: "["; color: var(--muted); font-weight: 400; }
.eyebrow::after { content: "]"; color: var(--muted); font-weight: 400; }
.eyebrow .idx { color: var(--muted); }
.eyebrow--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: live 2.2s var(--ease) infinite; }
.eyebrow--live::after { content: none; }
.eyebrow--rule::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
.eyebrow--rule::after { content: none; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(247, 148, 29, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(247, 148, 29, 0); } }

.section-head { display: grid; gap: 1.25rem; max-width: 50rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-head--split { max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 2rem 4rem; }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
@media (max-width: 900px) { .section-head--split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Buttons + links ---------- */
.btn {
  --h: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  min-height: var(--h); padding: 0 1.4rem;
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.005em;
  border-radius: var(--radius); border: 1px solid transparent;
  background: var(--btn-bg, var(--accent)); color: var(--btn-fg, var(--accent-ink));
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease);
  white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
}
.btn .arr { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.btn:hover .arr, .btn:focus-visible .arr { transform: translateX(5px); }
.btn.is-mag .arr { transition: none; }
/* a soft sheen crosses the button once on hover */
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.22) 50%, transparent 68%); transform: translateX(-130%); transition: transform .95s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(130%); }
.btn:active { transform: scale(.985) !important; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.t-light .btn--primary, .t-paper .btn--primary, .t-white .btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { filter: brightness(1.06); box-shadow: 0 12px 30px -14px rgba(247, 148, 29, 0.6); }
body[data-brand="affectli"] .btn--primary:hover { box-shadow: 0 12px 30px -14px rgba(47, 139, 255, 0.65); }
.btn--signal { background: var(--signal); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.btn--sm { --h: 40px; padding: 0 1rem; font-size: 0.875rem; }
.btn--lg { --h: 58px; padding: 0 1.75rem; font-size: 1rem; }
.btn--block { width: 100%; }
@media (max-width: 420px) { .btn { white-space: normal; text-align: center; padding-block: 0.65rem; line-height: 1.3; } }

.link {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 500; color: var(--fg);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s var(--ease), color .2s;
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 1px; }
.link .arr { transition: transform .3s var(--ease); color: var(--accent-text); }
.link:hover .arr { transform: translateX(4px); }
.link--mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.ext::after { content: "↗"; font-size: 0.85em; margin-left: 0.3em; opacity: 0.7; }

/* ---------- Corner-bracket frame ---------- */
.frame { position: relative; --fc: var(--line-strong); --fa: 14px; --fo: -1px; }
.frame::before, .frame::after, .frame > .frame-c::before, .frame > .frame-c::after {
  content: ""; position: absolute; width: var(--fa); height: var(--fa); pointer-events: none; z-index: 3;
  border-color: var(--fc); border-style: solid;
}
.frame::before { top: var(--fo); left: var(--fo); border-width: 1px 0 0 1px; }
.frame::after { top: var(--fo); right: var(--fo); border-width: 1px 1px 0 0; }
.frame > .frame-c { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.frame > .frame-c::before { bottom: var(--fo); left: var(--fo); border-width: 0 0 1px 1px; }
.frame > .frame-c::after { bottom: var(--fo); right: var(--fo); border-width: 0 1px 1px 0; }
.frame--accent { --fc: var(--accent-text); }
.frame--out { --fo: -10px; }

/* ---------- Media ---------- */
.media { position: relative; overflow: hidden; background: var(--surface); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--1x1 { aspect-ratio: 1; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--21x9 { aspect-ratio: 21 / 9; }
.media--tall { aspect-ratio: 3 / 4; }
[class*="media--"] { max-width: 100%; }
.media--grade img { filter: saturate(0.82) contrast(1.04); }
.media--mono img { filter: grayscale(1) contrast(1.08) brightness(0.9); }
.media__scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,13,18,0) 35%, rgba(10,13,18,0.85) 100%); }
.media__caption {
  position: absolute; left: 1rem; bottom: 0.9rem; right: 1rem; z-index: 2;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.85);
  display: flex; justify-content: space-between; gap: 1rem;
}
a:hover .media img, .card:hover .media img { transform: scale(1.035); }

/* ---------- Engineering grid background ---------- */
.gridbg { background-image:
  linear-gradient(var(--grid-line) 1px, transparent 1px),
  linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px; background-position: -1px -1px; }
.gridbg--fade { -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  --fg: var(--on-dark); --muted: var(--on-dark-muted); --line: var(--dark-line); --line-strong: var(--dark-line-strong);
  color: var(--fg);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s, transform .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid, .site-header.is-open {
  background: color-mix(in srgb, var(--dark-0) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--dark-line);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header--light { --fg: var(--on-light); --muted: var(--on-light-muted); --line: var(--light-line); --line-strong: var(--light-line-strong); }
.site-header--light.is-solid, .site-header--light.is-open { background: color-mix(in srgb, var(--light-1) 90%, transparent); border-bottom-color: var(--light-line); }
.site-header__bar { height: var(--header-h); display: flex; align-items: center; gap: 2rem; }
.brand-logo { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; color: var(--fg); }
.brand-logo svg { height: 34px; width: auto; }
.brand-logo__word { font-family: var(--font-logo); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.01em; line-height: 1; }
.brand-logo--affectli svg { height: 30px; }
.nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.35rem; height: 40px; padding: 0 0.8rem;
  font-size: 0.9rem; font-weight: 500; color: var(--fg); opacity: 0.86; border-radius: var(--radius);
  transition: opacity .2s, background-color .2s;
}
.nav__link:hover, .nav__item.is-open > .nav__link, .nav__link[aria-current="page"] { opacity: 1; }
.nav__link[aria-current="page"]::after, .nav__item.is-current > .nav__link::after { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 4px; height: 1px; background: var(--accent); }
.nav__link .chev { width: 9px; height: 9px; transition: transform .25s var(--ease); opacity: 0.7; }
.nav__item.is-open .chev { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: 1rem; flex: none; }
.header-xlink { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 0.5rem; transition: color .2s; }
.header-xlink:hover { color: var(--fg); }
.header-xlink svg { height: 16px; width: auto; }

/* Mega menu */
.mega {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translate(-50%, 6px);
  width: min(860px, calc(100vw - 2 * var(--gutter)));
  background: var(--dark-1); color: var(--on-dark); border: 1px solid var(--dark-line);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .28s var(--ease), visibility 0s .28s;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  --fg: var(--on-dark); --muted: var(--on-dark-muted); --line: var(--dark-line); --accent-text: var(--accent);
}
.mega--narrow { width: min(560px, calc(100vw - 2 * var(--gutter))); grid-template-columns: minmax(0, 1fr); }
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -19px; height: 19px; }
.mega__list { padding: 1.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; align-content: start; }
.mega--narrow .mega__list { grid-template-columns: minmax(0, 1fr); }
.mega__label { grid-column: 1 / -1; padding: 0.4rem 0.75rem 0.6rem; }
.mega__link { display: grid; gap: 0.2rem; padding: 0.8rem 0.75rem; border-radius: var(--radius); transition: background-color .2s; }
.mega__link:hover { background: rgba(255,255,255,0.05); }
.mega__link b { font-weight: 500; font-size: 0.95rem; color: var(--fg); display: flex; gap: 0.4rem; align-items: center; }
.mega__link span { font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.mega__link:hover b .arr { transform: translateX(3px); color: var(--accent); }
.mega__link b .arr { transition: transform .25s var(--ease); opacity: 0.8; }
.mega__feature { position: relative; border-left: 1px solid var(--dark-line); min-height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; }
.mega__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; transition: transform 1s var(--ease), opacity .4s; }
.mega__feature:hover img { transform: scale(1.04); opacity: 0.62; }
.mega__feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.85)); }
.mega__feature > * { position: relative; z-index: 2; }
.mega__feature .h4 { margin-top: 0.5rem; font-weight: 400; }

/* Mobile nav */
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: auto; color: var(--fg); }
.nav-toggle span { position: relative; width: 22px; height: 1.5px; background: currentColor; transition: background-color .2s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.nav-toggle span::before { transform: translateY(-7px); }
.nav-toggle span::after { transform: translateY(7px); }
.is-open .nav-toggle span { background: transparent; }
.is-open .nav-toggle span::before { transform: rotate(45deg); }
.is-open .nav-toggle span::after { transform: rotate(-45deg); }
.mobile-nav { display: none; }
@media (max-width: 1080px) {
  .nav, .header-actions .header-xlink, .header-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-nav {
    display: block; position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 99;
    background: var(--dark-0); color: var(--on-dark); overflow-y: auto; padding: 1rem var(--gutter) 3rem;
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .3s;
    --fg: var(--on-dark); --muted: var(--on-dark-muted); --line: var(--dark-line); --accent-text: var(--accent);
  }
  .is-open + .mobile-nav, .mobile-nav.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .mobile-nav details { border-bottom: 1px solid var(--dark-line); }
  .mobile-nav summary, .mobile-nav > a { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; list-style: none; cursor: pointer; }
  .mobile-nav > a { border-bottom: 1px solid var(--dark-line); }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary::after { content: "+"; font-family: var(--font-mono); font-size: 1rem; color: var(--muted); }
  .mobile-nav details[open] summary::after { content: "–"; }
  .mobile-nav details a { display: block; padding: 0.55rem 0; color: var(--muted); }
  .mobile-nav details a:last-child { padding-bottom: 1.2rem; }
  .mobile-nav .btn { margin-top: 2rem; width: 100%; }
  .mobile-nav > a.btn { justify-content: center; gap: 0.7em; border-bottom: 0; padding: 0 1.4rem; min-height: 58px; font-family: var(--font-body); font-size: 1rem; font-weight: 500; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-top: calc(var(--header-h) + clamp(4rem, 2rem + 8vw, 9rem)); padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.hero--full { min-height: min(100svh, 980px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.hero--full .telemetry { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.hero--full .telemetry__cell { padding-bottom: 0.25rem; }
/* Hero photography is graded down so the type leads: cooler, darker, and darkest where the text sits.
   Per-page tuning: --hero-bright / --hero-sat (and --scrim-mid / --scrim-far for busy photos) on .hero__media, --hero-pos on the img. */
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; --scrim: 10,13,18; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 50%);
  filter: saturate(var(--hero-sat, 0.7)) brightness(var(--hero-bright, 0.66)) contrast(1.05);
  transform-origin: 70% 40%; animation: heroDrift 24s cubic-bezier(.22,.61,.36,1) both; }
@keyframes heroDrift { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero__media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(var(--scrim),0.94) 0%, rgba(var(--scrim),var(--scrim-mid, 0.84)) 30%, rgba(var(--scrim),var(--scrim-far, 0.42)) 60%, rgba(var(--scrim),0.2) 100%),
  linear-gradient(180deg, rgba(var(--scrim),0.72) 0%, rgba(var(--scrim),0) 24%, rgba(var(--scrim),0) 56%, var(--bg, #0A0D12) 100%); }
body[data-brand="affectli"] .hero__media { --scrim: 7,11,36; }
@media (max-width: 700px) {
  .hero__media::after { background: linear-gradient(180deg, rgba(var(--scrim),0.7) 0%, rgba(var(--scrim),0.62) 35%, rgba(var(--scrim),0.86) 70%, var(--bg, #0A0D12) 100%); }
}
.hero__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero__canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.section:has(> .glow), .hero:has(> .glow) { overflow: hidden; isolation: isolate; }
@media (max-width: 700px) { .hero__canvas { opacity: 0.85; } .hero--full:has(.hero__canvas), .hero--page:has(.hero__canvas) { padding-top: calc(var(--header-h) + 46vw + 1rem); } }
/* Planning grid: the Mi-C3 signature, a quiet engineering sheet over the photograph */
.hero__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 64px 64px; background-position: calc(50% + 32px) 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 78%, transparent 100%); }
.hero__grid::before, .hero__grid::after { content: ""; position: absolute; background-repeat: repeat; opacity: 0.5; }
.hero__grid::before { top: calc(var(--header-h) + 1rem); left: 0; right: 0; height: 7px; background-image: linear-gradient(90deg, rgba(255,255,255,0.35) 1px, transparent 1px); background-size: 16px 7px; background-position: calc(50% + 32px) 0; -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 75%); mask-image: linear-gradient(90deg, transparent 45%, #000 75%); }
.hero__grid::after { top: 0; bottom: 0; right: clamp(1rem, 0.5rem + 2vw, 3rem); width: 7px; background-image: linear-gradient(rgba(255,255,255,0.35) 1px, transparent 1px); background-size: 7px 16px; }
.hero__link { font-size: 1rem; color: var(--fg); min-height: 58px; padding-bottom: 0; background-position: 0 calc(50% + 0.85em); }
.hero__link .arr { color: var(--accent); }
.hero__inner { position: relative; display: grid; gap: 1.75rem; }
.hero__title { max-width: 15ch; }
.hero__lede { max-width: 56ch; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; margin-top: 0.75rem; }
.hero--page { padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.hero--page .hero__title { max-width: 18ch; }
@media (max-width: 600px) { .hero__ctas .btn { flex: 1 1 100%; } }
.crumbs { display: flex; gap: 0.6rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.crumbs a:hover { color: var(--fg); }
.crumbs span[aria-hidden] { opacity: 0.5; }

/* Telemetry strip (mono facts row) */
.telemetry {
  display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  border-top: 1px solid var(--line); margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.telemetry__cell { padding: 1.1rem 1.25rem 0 0; display: grid; gap: 0.35rem; align-content: start; border-right: 1px solid var(--line); margin-right: 1.25rem; }
.telemetry__cell:last-child { border-right: 0; margin-right: 0; }
.telemetry__k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.telemetry__v { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 400; letter-spacing: -0.01em; color: var(--fg); font-variant-numeric: tabular-nums; }
.telemetry__v small { font-size: 0.6em; color: var(--muted); margin-left: 0.15em; display: inline-block; white-space: nowrap; }
.telemetry--certs { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); }
.telemetry__cell--certs { gap: 0.7rem; }
.telemetry__cell { min-width: 0; }
.telemetry__cell--certs a { display: inline-flex; max-width: 100%; color: var(--fg); transition: color .25s var(--ease); }
.telemetry__cell--certs a:hover { color: var(--accent-text); }
@media (max-width: 780px) { .telemetry__cell--certs { grid-column: 1 / -1; } }
@media (max-width: 780px) {
  .telemetry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .telemetry__cell { border-right: 0; margin-right: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
}

/* ---------- Stats ---------- */
.stat { display: grid; gap: 0.6rem; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.stat__v { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.5rem, 1.5rem + 2.2vw, 3.5rem); line-height: 1; letter-spacing: -0.035em; color: var(--fg); font-variant-numeric: tabular-nums; }
.stat__v sup, .stat__v .u { font-size: 0.42em; letter-spacing: 0; color: var(--accent-text); vertical-align: top; margin-left: 0.08em; font-weight: 400; position: relative; top: 0.25em; }
.stat__k { font-size: var(--fs-small); color: var(--muted); max-width: 30ch; }

/* ---------- Hairline list / feature rows ---------- */
.hairlist { border-top: 1px solid var(--line); }
.hairlist > li, .hairlist > .hairlist__row { border-bottom: 1px solid var(--line); padding-block: clamp(1.25rem, 1rem + 1vw, 2rem); display: grid; gap: 0.5rem 2rem; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: baseline; }
.hairlist--3 > li { grid-template-columns: 5.5rem minmax(0, 4fr) minmax(0, 7fr); }
.hairlist__idx { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; color: var(--accent-text); }
.hairlist h3, .hairlist .h4 { margin: 0; }
@media (max-width: 780px) { .hairlist > li, .hairlist--3 > li { grid-template-columns: minmax(0, 1fr); } }

/* Feature (icon-less) columns with top rule */
.feature { display: grid; gap: 0.85rem; align-content: start; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); position: relative; }
.feature::before { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 1px; background: var(--accent-text); }
.feature__k { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.feature p { color: var(--muted); }
.feature ul { display: grid; gap: 0.45rem; margin-top: 0.25rem; }
.feature li, .ticks li { position: relative; padding-left: 1.35rem; color: var(--muted); font-size: 0.95rem; }
.feature li::before, .ticks li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1px; background: var(--accent-text); }
.ticks { display: grid; gap: 0.6rem; }

/* ---------- Cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: 1rem;
  background: var(--surface); border: 1px solid var(--line);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  transition: border-color .3s var(--ease), transform .4s var(--ease), background-color .3s;
}
a.card:hover, .card--hover:hover { border-color: var(--line-strong); }
a.card:hover .card__go { color: var(--accent-text); transform: translateX(4px); }
.card__go { margin-top: auto; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); transition: transform .3s var(--ease), color .2s; display: inline-flex; gap: 0.5rem; }
.card--media { padding: 0; overflow: hidden; }
.card--media .card__body { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.card p { color: var(--muted); font-size: 0.95rem; }
.card--flat { background: transparent; }

/* Sector tiles (photo cards) */
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; overflow: hidden; color: #fff; isolation: isolate; background: var(--dark-1); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(0.75) brightness(0.8); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,13,18,0.6) 0%, rgba(10,13,18,0.1) 24%, rgba(10,13,18,0.38) 50%, rgba(10,13,18,0.95) 100%); }
.tile:hover img { transform: scale(1.05); filter: saturate(0.95) brightness(0.9); }
.tile__body { padding: 1.5rem; display: grid; gap: 0.6rem; }
.tile__body p { color: rgba(255,255,255,0.75); font-size: 0.925rem; max-width: 40ch; }
.tile__top { position: absolute; top: 1.25rem; left: 1.5rem; right: 1.5rem; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.tile .h3 { color: #fff; }
.tile__go { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); display: inline-flex; gap: 0.5rem; margin-top: 0.4rem; }
body[data-brand="affectli"] .tile__go { color: #6FB6FF; }
.tile--tall { min-height: 560px; }

/* ---------- Chips / pills / badges ---------- */
.chip { display: inline-flex; align-items: center; gap: 0.4em; height: 26px; padding: 0 0.6rem; border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--fg); white-space: nowrap; }
.chip::before { content: "["; color: var(--muted); }
.chip::after { content: "]"; color: var(--muted); }
.chip--plain::before, .chip--plain::after { content: none; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.55rem; border-radius: 99px; background: rgba(127,167,201,0.14); color: var(--telemetry); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--ok { background: rgba(14,143,176,0.14); color: var(--ok); }
.pill--warn { background: rgba(247,148,29,0.16); color: var(--warn); }
.pill--crit { background: rgba(229,72,77,0.16); color: var(--crit); }
.pill--off { background: rgba(138,148,159,0.16); color: var(--slate); }
.t-light .pill, .t-paper .pill, .t-white .pill { color: #3B6487; }
.t-light .pill--warn, .t-paper .pill--warn, .t-white .pill--warn { color: var(--signal-deep); }
.t-light .pill--ok, .t-paper .pill--ok, .t-white .pill--ok { color: #0B6F8A; }
.t-light .pill--crit, .t-paper .pill--crit, .t-white .pill--crit { color: #B3262B; }
.t-light .pill--off, .t-paper .pill--off, .t-white .pill--off { color: var(--on-light-muted); }
.ui .pill, .t-light .ui .pill, .t-paper .ui .pill, .t-white .ui .pill { color: var(--telemetry); }
.ui .pill--ok, .t-light .ui .pill--ok, .t-paper .ui .pill--ok, .t-white .ui .pill--ok { color: var(--ok); }
.ui .pill--warn, .t-light .ui .pill--warn, .t-paper .ui .pill--warn, .t-white .ui .pill--warn { color: var(--warn); }
.ui .pill--crit, .t-light .ui .pill--crit, .t-paper .ui .pill--crit, .t-white .ui .pill--crit { color: var(--crit); }
.ui .pill--off, .t-light .ui .pill--off, .t-paper .ui .pill--off, .t-white .ui .pill--off { color: var(--slate); }

/* Certification seals, rendered by site.js from [data-certs="row|captioned|labelled"] */
.seal { width: var(--seal, 60px); height: auto; aspect-ratio: 1; flex: none; overflow: visible; color: inherit; }
.seal__o { fill: none; stroke: currentColor; stroke-width: 1.1; opacity: 0.5; }
.seal__i { fill: none; stroke: currentColor; stroke-width: 0.8; opacity: 0.3; }
.seal__arc { font-family: var(--font-mono); font-size: 9.4px; font-weight: 500; letter-spacing: 0.16em; fill: currentColor; opacity: 0.78; }
.seal__num { font-family: var(--font-display); font-weight: 500; font-size: 19.5px; letter-spacing: -0.01em; fill: currentColor; }
.seal__num--s { font-size: 14.5px; }
.seal__dot { fill: var(--accent); }
.certs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; color: var(--fg); }
.certs--captioned { display: grid; gap: 0.6rem; justify-items: start; }
.certs__seals { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.certs__caption { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.certs--labelled { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.cert-badge { display: flex; align-items: center; gap: 0.9rem; margin: 0; min-width: 0; }
.cert-badge figcaption { display: grid; gap: 0.15rem; min-width: 0; }
.cert-badge b { overflow-wrap: anywhere; font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: -0.005em; color: var(--fg); }
.cert-badge span { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.certs--lg { --seal: 84px; }
.certs--lg .cert-badge { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
@media (max-width: 960px) { .certs--labelled { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .certs--labelled { grid-template-columns: minmax(0, 1fr); } .certs--lg { --seal: 64px; } .certs--lg .cert-badge { flex-direction: row; align-items: center; } }
.cert-badge { max-width: 100%; }
.cert-badge figcaption { flex: 1 1 auto; min-width: 0; }
.lede strong, .hero__lede strong { color: var(--fg); font-weight: 500; }
.cert { display: grid; gap: 0.3rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); min-width: 0; }
.cert b { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--fg); letter-spacing: -0.01em; }
.cert span { font-size: 0.8125rem; color: var(--muted); }

/* ---------- Tabs ---------- */
.tabs__list { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { position: relative; padding: 1rem 1.25rem; font-size: 0.95rem; font-weight: 500; color: var(--muted); white-space: nowrap; transition: color .2s; display: inline-flex; gap: 0.6rem; align-items: baseline; }
.tabs__tab .mono { font-size: 0.6875rem; }
.tabs__tab:hover { color: var(--fg); }
.tabs__tab[aria-selected="true"] { color: var(--fg); }
.tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent-text); }
.tabs__panel { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.tabs__panel[hidden] { display: none; }
.tabs__panel.is-entering { animation: fadeUp .5s var(--ease); }

/* ---------- Accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.35rem 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 400; color: var(--fg); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.1rem; color: var(--accent-text); transition: transform .3s var(--ease); flex: none; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc .acc__body { padding: 0 0 1.5rem; color: var(--muted); max-width: 70ch; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 640px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 0.45rem; min-width: 0; }
.field > label, .field .label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 0.75rem 0.9rem;
  font: 400 1rem/1.4 var(--font-body); color: var(--fg);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 140px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 0.7; }
.check { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.875rem; color: var(--muted); cursor: pointer; }
.check input { appearance: none; flex: none; width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--line-strong); border-radius: 1px; background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--accent-text); border-color: var(--accent-text); }
.check input:checked::after { content: ""; width: 9px; height: 5px; border: 1.5px solid var(--bg); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.option-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.option-grid label { cursor: pointer; }
.option-grid input { position: absolute; opacity: 0; pointer-events: none; }
.option-grid span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 0.875rem; color: var(--muted); transition: all .2s; }
.option-grid input:checked + span { border-color: var(--accent-text); color: var(--fg); background: var(--accent-soft); }
.option-grid input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-success { display: grid; gap: 1rem; padding: 2rem; border: 1px solid var(--accent-text); background: var(--accent-soft); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band__media { position: absolute; inset: 0; z-index: -1; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.38; filter: saturate(0.8); }
.cta-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 15%, rgba(10,13,18,0.4) 70%, rgba(10,13,18,0.2)); }
body[data-brand="affectli"] .cta-band__media::after { background: linear-gradient(90deg, var(--bg) 15%, rgba(7,11,36,0.45) 70%, rgba(7,11,36,0.25)); }

/* ---------- Quote ---------- */
.quote { display: grid; gap: 1.5rem; }
.quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--fg); text-wrap: balance; }
.quote blockquote::before { content: "“"; color: var(--accent-text); }
.quote blockquote::after { content: "”"; color: var(--accent-text); }
.quote figcaption { display: flex; gap: 0.75rem; align-items: center; font-size: var(--fs-small); color: var(--muted); }
.quote figcaption b { color: var(--fg); font-weight: 600; }

/* ---------- Product UI mock-ups ---------- */
.ui {
  --ui-bg: #0E1219; --ui-panel: #141A23; --ui-line: rgba(255,255,255,0.08); --ui-fg: #E6E9EE; --ui-muted: #8A94A3;
  position: relative; background: var(--ui-bg); color: var(--ui-fg); border: 1px solid var(--ui-line);
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02);
  overflow: hidden; border-radius: 3px;
}
body[data-brand="affectli"] .ui { --ui-bg: #0A0F2C; --ui-panel: #10183E; --ui-line: rgba(160,180,255,0.11); --ui-muted: #8E98BE; }
.ui { --fg: var(--ui-fg); --muted: var(--ui-muted); --bg: var(--ui-bg); --surface: var(--ui-panel); --line: var(--ui-line); --line-strong: rgba(255,255,255,0.22); --accent-text: var(--accent); --grid-line: rgba(255,255,255,0.045); }
.ui__bar { display: flex; align-items: center; gap: 1rem; height: 38px; padding: 0 0.9rem; border-bottom: 1px solid var(--ui-line); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ui-muted); text-transform: uppercase; }
.ui__bar b { color: var(--ui-fg); font-weight: 500; }
.ui__bar .sp { margin-left: auto; display: flex; gap: 0.9rem; align-items: center; }
.ui__body { display: grid; grid-template-columns: 180px minmax(0, 1fr) 240px; min-height: 420px; }
.ui__body--2 { grid-template-columns: minmax(0, 1fr) 260px; }
.ui__side { border-right: 1px solid var(--ui-line); padding: 0.8rem 0.6rem; display: grid; gap: 0.15rem; align-content: start; }
.ui__side a, .ui__side div { padding: 0.45rem 0.6rem; border-radius: 2px; color: var(--ui-muted); display: flex; justify-content: space-between; }
.ui__side .on { background: rgba(255,255,255,0.06); color: var(--ui-fg); }
.ui__main { position: relative; min-width: 0; }
.ui__panel { background: var(--ui-panel); border-left: 1px solid var(--ui-line); padding: 0.9rem; display: grid; gap: 0.8rem; align-content: start; min-width: 0; }
.ui__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-muted); }
.ui__v { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.ui__row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ui-line); align-items: center; }
.ui__row:last-child { border-bottom: 0; }
.ui__row span:first-child { color: var(--ui-muted); }
.ui__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui__table th { text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-muted); padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--ui-line); }
.ui__table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--ui-line); white-space: nowrap; }
.ui__alert { border-left: 2px solid var(--warn); background: rgba(247,148,29,0.08); padding: 0.6rem 0.7rem; display: grid; gap: 0.2rem; }
.ui__alert--crit { border-left-color: var(--crit); background: rgba(229,72,77,0.08); }
.ui__alert b { font-weight: 600; font-size: 12px; }
.ui__alert span { color: var(--ui-muted); font-size: 11px; }
.ui .pill { font-size: 9.5px; }
.ui__map { position: absolute; inset: 0; }
.ui__map canvas, .ui__map svg { width: 100%; height: 100%; }
@media (max-width: 900px) {
  .ui__body { grid-template-columns: minmax(0, 1fr); }
  .ui__body--2 { grid-template-columns: minmax(0, 1fr); }
  .ui__side { display: none; }
  .ui__panel { border-left: 0; border-top: 1px solid var(--ui-line); }
  .ui__main { min-height: 300px; }
}
.ui-scroll { overflow-x: auto; }

/* ---------- Diagram helpers ---------- */
.diagram { position: relative; width: 100%; }
.diagram canvas, .diagram svg { width: 100%; height: auto; }
.diagram--canvas { aspect-ratio: 16 / 9; max-width: 100%; }
.diagram--canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 1.25rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.5rem; vertical-align: -1px; background: var(--c, var(--telemetry)); }

/* ---------- Ontology explorer ---------- */
.ox { display: grid; grid-template-columns: minmax(0, 1fr) 360px; border: 1px solid var(--line); background: var(--surface); min-height: 560px; }
.ox__stage { position: relative; min-width: 0; overflow: hidden; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; }
.ox__stage svg { width: 100%; height: 100%; display: block; }
.ox__panel { border-left: 1px solid var(--line); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; background: var(--bg); }
.ox__type { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.ox__name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; color: var(--fg); }
.ox__props { display: grid; border-top: 1px solid var(--line); }
.ox__props div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.ox__props dt, .ox__props span:first-child { color: var(--muted); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 0.15rem; }
.ox__props dd, .ox__props span:last-child { margin: 0; color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; }
.ox__links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ox__links button { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; padding: 0.35rem 0.55rem; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--fg); transition: border-color .2s, background-color .2s; }
.ox__links button:hover { border-color: var(--accent-text); background: var(--accent-soft); }
.ox__actions { display: grid; gap: 0.5rem; margin-top: auto; }
.ox__actions button { text-align: left; padding: 0.7rem 0.9rem; border: 1px solid var(--line); font-size: 0.875rem; display: flex; justify-content: space-between; color: var(--fg); transition: border-color .2s; }
.ox__actions button:hover { border-color: var(--accent-text); }
.ox__actions button::after { content: "→"; color: var(--accent-text); }
.ox__toast { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--accent-text); min-height: 1.2em; }
.ox-node { cursor: pointer; }
.ox-node text { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; fill: var(--muted); }
.ox-node .ox-label { fill: var(--fg); font-size: 15px; font-family: var(--font-display); font-weight: 500; letter-spacing: 0; }
.ox-node circle.ox-dot { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.25; transition: stroke .2s, fill .2s; }
.ox-node:hover circle.ox-dot, .ox-node:focus circle.ox-dot { stroke: var(--accent-text); }
.ox-node.is-active circle.ox-dot { fill: var(--accent-text); stroke: var(--accent-text); }
.ox-node.is-near circle.ox-dot { stroke: var(--accent-text); }
.ox-node:focus { outline: none; }
.ox-node:focus-visible circle.ox-ring { stroke: var(--focus); stroke-width: 2; }
.ox-node circle.ox-ring { fill: none; stroke: transparent; }
.ox-link { stroke: var(--line-strong); stroke-width: 1.2; fill: none; transition: stroke .25s, opacity .25s; }
.ox-link.is-near { stroke: var(--accent-text); stroke-width: 1.8; }
.ox-linklabel { font-family: var(--font-mono); font-size: 11.5px; fill: var(--muted); letter-spacing: 0.04em; opacity: 0; transition: opacity .25s; }
.ox-linklabel.is-near { opacity: 1; }
.ox.has-active .ox-node:not(.is-active):not(.is-near) { opacity: 0.55; }
.ox.has-active .ox-link:not(.is-near) { opacity: 0.4; }
.ox-node, .ox-link { transition: opacity .3s var(--ease); }
.ox.is-small .ox-node text { font-size: 22px; }
.ox.is-small .ox-node .ox-label { font-size: 26px; }
.ox.is-small .ox-linklabel { font-size: 18px; }
.ox.is-small .ox-node circle.ox-dot { r: 11px; }
@media (max-width: 960px) {
  .ox { grid-template-columns: minmax(0, 1fr); }
  .ox__stage { aspect-ratio: 4 / 3; }
  .ox__panel { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Logo strip / marquee ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: marquee 50s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Footer ---------- */
.site-footer { --bg: var(--dark-0); --fg: var(--on-dark); --muted: var(--on-dark-muted); --line: var(--dark-line); --line-strong: var(--dark-line-strong); --accent-text: var(--accent);
  background: var(--bg); color: var(--fg); padding-top: clamp(4rem, 3rem + 4vw, 7rem); padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
.footer__col h4, .footer__h { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; }
.footer__col ul { display: grid; gap: 0.6rem; }
.footer__col a { font-size: 0.9rem; color: var(--fg); opacity: 0.82; transition: opacity .2s; }
.footer__col a:hover { opacity: 1; }
.footer__brand p { color: var(--muted); font-size: 0.9rem; max-width: 34ch; margin-top: 1.25rem; }
.footer__addr { display: grid; gap: 1.1rem; margin-top: 1.75rem; font-size: 0.8125rem; color: var(--muted); }
.footer__addr b { display: block; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); margin-bottom: 0.25rem; }
.footer__certs { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 4fr); gap: 1.5rem 2.5rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); align-items: center; --seal: 52px; }
.footer__certs-k { display: grid; gap: 0.6rem; justify-items: start; }
.footer__certs-k .mono { color: var(--muted); }
.footer__certs-k .link { color: var(--fg); opacity: 0.82; }
.footer__certs .cert-badge b { font-size: 0.9375rem; }
.footer__certs .cert-badge span { font-size: 0.75rem; }
@media (max-width: 1080px) { .footer__certs { grid-template-columns: minmax(0, 1fr); } }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--muted); }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__bottom a:hover { color: var(--fg); }
.footer__proto { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.footer__word { font-family: var(--font-display); font-weight: 300; font-size: clamp(5rem, 2rem + 16vw, 17rem); line-height: 0.8; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px var(--dark-line-strong); margin-top: 3rem; white-space: nowrap; user-select: none; pointer-events: none; }
@media (max-width: 1080px) { .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Endorsement band (cross-brand) */
.endorse { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.endorse__mark svg { height: 26px; width: auto; }

/* ---------- Reveal on scroll (visible at rest; JS adds .rv only below the fold) ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Hero load sequence */
.load-seq > * { animation: fadeUp 1s var(--ease) both; }
.load-seq > *:nth-child(2) { animation-delay: .12s; }
.load-seq > *:nth-child(3) { animation-delay: .24s; }
.load-seq > *:nth-child(4) { animation-delay: .36s; }
.load-seq > *:nth-child(5) { animation-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}

/* ---------- Affectli-specific accents ---------- */
.grad-text { background: var(--affectli-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-brand="affectli"] .t-dark .grad-text { background: linear-gradient(100deg, #9C7BFF 0%, #5B8CFF 40%, #2FC0FF 100%); -webkit-background-clip: text; background-clip: text; }
.grad-rule { height: 1px; background: var(--affectli-gradient); border: 0; }
.glow { position: absolute; pointer-events: none; z-index: -1; filter: blur(60px); opacity: 0.55; border-radius: 50%; }
.glow--iris { background: radial-gradient(circle, rgba(99,59,151,0.9), transparent 65%); }
.glow--azure { background: radial-gradient(circle, rgba(0,148,216,0.75), transparent 65%); }
body[data-brand="affectli"] .eyebrow::before, body[data-brand="affectli"] .eyebrow::after { color: var(--muted); }
body[data-brand="affectli"] .t-dark .feature::before { background: linear-gradient(90deg, #9C7BFF, #2FC0FF); }
body[data-brand="affectli"] .t-light .feature::before, body[data-brand="affectli"] .t-white .feature::before { background: var(--affectli-gradient); }

/* Utility: hide on small */
@media (max-width: 780px) { .hide-s { display: none !important; } }
@media (min-width: 781px) { .show-s { display: none !important; } }

/* =====================================================================
   Motion layer (round 3) · see assets/js/motion.js
   Quiet, decorative motion. Hover effects only bind with a fine pointer;
   everything stands still under prefers-reduced-motion.
   ===================================================================== */
@property --fa { syntax: '<length>'; inherits: true; initial-value: 14px; }
.frame::before, .frame::after, .frame > .frame-c::before, .frame > .frame-c::after { transition: width .45s var(--ease), height .45s var(--ease), border-color .45s var(--ease); }
.frame.is-hover { --fa: 22px; --fc: var(--accent-text); }

/* Hero reel: a slow sequence of sector photographs */
.reel .reel__img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; animation: none; filter: none; } /* grade is baked into the reel JPEGs */
.reel .reel__img.is-on { opacity: 1; }
.reel .reel__img.is-moving, .reel__mk.is-moving { animation: reelDrift 10.5s linear both; }
@keyframes reelDrift { from { transform: scale(1.035); } to { transform: scale(1); } }
.reel-paused .reel__img, .reel-paused .reel__mk, .reel-offscreen .reel__img, .reel-offscreen .reel__mk { animation-play-state: paused; }

/* Tracking marks pinned to assets in the photograph: asset → linked object → crew */
.reel__marks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.reel__mk { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; transform-origin: 70% 40%; }
.reel__mk.is-on { opacity: 1; }
.reel__links { position: absolute; inset: 0; overflow: visible; }
.reel__ln { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; fill: none; transition: stroke-dashoffset .8s cubic-bezier(.4, 0, .2, 1); }
.reel__trail { stroke: var(--signal); stroke-width: 1.5; stroke-linecap: round; opacity: 0; }
.reel__pulse { fill: var(--signal); opacity: 0; filter: drop-shadow(0 0 5px rgba(247, 148, 29, 0.85)); }
.rmk { position: absolute; width: 0; height: 0; opacity: 0; transform: scale(.7); transition: opacity .7s ease, transform .7s var(--ease); }
.rmk.is-in { opacity: 1; transform: none; }
.rmk__dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(10, 13, 18, 0.5); transition: background .5s ease; }
.rmk__ring { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); opacity: 0; }
.rmk.is-in .rmk__ring { animation: mkPing 2s ease-out both; }
.rmk--end.is-hit .rmk__dot { background: var(--signal); }
.rmk--end.is-hit .rmk__ring { border-color: rgba(247, 148, 29, 0.75); animation: mkHit 2s ease-out both; }
@keyframes mkPing { 0% { transform: scale(.4); opacity: .9; } 55% { transform: scale(1.9); opacity: 0; } 56% { transform: scale(1); opacity: 0; } 100% { transform: scale(1); opacity: .4; } }
@keyframes mkHit { 0% { transform: scale(.5); opacity: 1; } 55% { transform: scale(2.1); opacity: 0; } 56% { transform: scale(1); opacity: 0; } 100% { transform: scale(1); opacity: .6; } }
.reel__mk.is-static .rmk__ring { opacity: .4; animation: none; }
.motion-paused .rmk__ring { animation: none; }
.rmk__t { position: absolute; left: 16px; top: calc(-19px + var(--dy, 0px)); display: grid; gap: 3px; white-space: nowrap; padding: 5px 8px 5px 9px; background: rgba(10, 13, 18, 0.76); border-left: 1px solid rgba(255, 255, 255, 0.4); font-family: var(--font-mono); font-size: 10.5px; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.94); }
.rmk__t b { font-weight: 500; }
.rmk__t span { color: rgba(255, 255, 255, 0.66); letter-spacing: 0.06em; }
.rmk--end.is-hit .rmk__t { border-left-color: var(--signal); }
.rmk--l.rmk--end.is-hit .rmk__t { border-right-color: var(--signal); }
.rmk__t em { font-style: normal; color: var(--signal); opacity: 0; transition: opacity .6s ease; }
.rmk.is-hit .rmk__t em, .reel__mk.is-static .rmk__t em { opacity: 1; }
.rmk--l .rmk__t { left: auto; right: 16px; text-align: right; border-left: 0; border-right: 1px solid rgba(255, 255, 255, 0.4); padding: 5px 9px 5px 8px; }
@media (max-width: 899px) { .reel__marks { display: none; } }

/* Hero row: text block on the left, the sequence caption on the right */
.hero__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 3rem; }
.reel__cap { display: grid; gap: 0.5rem; justify-items: end; text-align: right; min-width: 15rem; padding: 0.75rem 0.9rem; margin-bottom: 0.1rem; background: rgba(10, 13, 18, 0.66); border-right: 1px solid rgba(255, 255, 255, 0.28); }
.reel__top { display: flex; align-items: baseline; gap: 0.8rem; }
.reel__n { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.72); }
.reel__n b { color: var(--fg); font-weight: 500; }
.reel__s { font-family: var(--font-display); font-size: 1.05rem; color: var(--fg); letter-spacing: -0.005em; }
.reel__o, .reel__note { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.reel__note { color: rgba(255, 255, 255, 0.56); }
.reel-still .reel__n { display: none; }
.reel__ctl { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }
.reel__bar { position: relative; width: 132px; height: 1px; background: var(--line-strong); overflow: hidden; }
.reel__bar i { position: absolute; inset: 0; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); }
.reel__btn { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); padding: 0.32rem 0.6rem; cursor: pointer; transition: color .2s, border-color .2s; }
.reel__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.reel__btn:hover, .reel__btn:focus-visible { color: var(--fg); border-color: var(--fg); }
.reel__cap > * { transition: opacity .5s ease; }
@media (max-width: 899px) {
  .hero__row { grid-template-columns: minmax(0, 1fr); }
  .reel__cap { justify-items: start; text-align: left; min-width: 0; }
  .reel__o, .reel__note { display: none; }
  .reel__cap { background: transparent; border: 0; padding: 0; }
}

/* Cursor light: a soft spotlight that follows the pointer on cards and framed interfaces */
.t-ink, .t-dark, .t-raised, .tile { --spot: rgba(255, 255, 255, 0.07); }
.t-paper, .t-white, .t-light { --spot: rgba(247, 148, 29, 0.09); }
body[data-brand="affectli"] .t-dark { --spot: rgba(111, 182, 255, 0.1); }
body[data-brand="affectli"] .t-light, body[data-brand="affectli"] .t-white { --spot: rgba(51, 87, 167, 0.08); }
.spot { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .45s ease; overflow: hidden; }
.spot > i { position: absolute; left: 0; top: 0; width: 960px; height: 960px; margin: -480px 0 0 -480px; background: radial-gradient(circle closest-side, var(--spot, rgba(255, 255, 255, 0.07)), transparent); will-change: transform; }
.is-hover > .spot { opacity: 1; }

/* Planning crosshair with grid coordinates (Mi-C3 grid sections) */
.has-xhair { position: relative; isolation: isolate; }
.xhair { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s ease; overflow: hidden; }
.is-xhair .xhair { opacity: 1; }
.xhair__v, .xhair__h { position: absolute; background: rgba(255, 255, 255, 0.13); }
.xhair__v { top: 0; bottom: 0; left: 0; width: 1px; }
.xhair__h { left: 0; right: 0; top: 0; height: 1px; }
.xhair__c { position: absolute; left: -5px; top: -5px; width: 11px; height: 11px; border: 1px solid var(--accent-text); border-radius: 50%; }
.xhair__t { position: absolute; left: 0; top: 0; transition: opacity .2s ease; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; color: var(--accent-text); white-space: nowrap; }

/* Affectli point field */
.af-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Live feed (Events Monitor) */
.ui__alert.is-new { animation: feedIn .7s var(--ease) both; }
.ui__feed { display: grid; gap: 0.8rem; align-content: start; overflow: hidden; contain: layout paint; }
.ui__feed .ui__alert b, .ui__feed .ui__alert span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ui__alert--ok { border-left-color: var(--ok); background: rgba(14, 143, 176, 0.08); }
@keyframes feedIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Interface rows populate when a mock-up first scrolls into view */
.ui--seq .ui__row, .ui--seq tbody tr, .ui--seq .ui__side > div { opacity: 0; transform: translateY(4px); }
.ui--seq.is-seq .ui__row, .ui--seq.is-seq tbody tr, .ui--seq.is-seq .ui__side > div { animation: seqIn .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + 250ms); }
@keyframes seqIn { to { opacity: 1; transform: none; } }

/* Sector tiles: the tracking label lights on hover */
.tile__top { transition: color .35s ease; }
.tile:hover .tile__top, .tile.is-hover .tile__top { color: var(--signal); }
body[data-brand="affectli"] .tile:hover .tile__top, body[data-brand="affectli"] .tile.is-hover .tile__top { color: #6FB6FF; }

/* Site-wide motion switch (footer, hero caption, product mock-ups) */
.footer__motion { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; }
.footer__motion:hover, .footer__motion:focus-visible { color: var(--fg); }
.mock-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.4rem 1.25rem; }
.mock-note button { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); background: none; border: 0; border-bottom: 1px solid var(--line-strong); padding: 0 0 2px; cursor: pointer; }
.mock-note button:hover, .mock-note button:focus-visible { border-bottom-color: var(--fg); }

/* =====================================================================
   Plain-language layer (round 4)
   ===================================================================== */
/* The answer to the problem: one statement, then the three words as a reading order */
.answer { margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--line); display: grid; gap: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.answer__line { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.12; letter-spacing: -0.025em; color: var(--fg); max-width: 28ch; text-wrap: balance; }
.answer__line strong { font-weight: 500; }
.answer__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); list-style: none; margin: 0; padding: 0; }
.answer__steps a { display: grid; gap: 0.35rem; padding: 1.1rem 1.25rem 1.2rem; background: var(--bg); color: var(--fg); transition: background-color .25s var(--ease); }
.answer__steps a:hover { background: var(--surface); }
.answer__steps .mono { color: var(--accent-text); }
.answer__steps b { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: -0.01em; }
.answer__steps small { color: var(--muted); font-size: 0.875rem; }
@media (max-width: 640px) { .answer__steps { grid-template-columns: minmax(0, 1fr); } }

/* Keyword bands: a big plain word, a one-line meaning, then the detail and a quiet, captioned visual */
.pillars { display: grid; gap: clamp(3.5rem, 2.5rem + 4vw, 7rem); list-style: none; margin: 0; padding: 0; }
.pillar { display: grid; gap: clamp(1.75rem, 1.25rem + 2vw, 3rem); padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-top: 1px solid var(--line-strong); }
.pillar, .pillar > *, .pillar__grid > *, .pillar__visual > *, .answer__steps > li { min-width: 0; }
.pillar__head { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.6rem 0; align-items: start; }
.pillar__n { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; color: var(--accent-text); padding-top: 1.1em; }
.pillar__word { grid-column: 2; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 1.2rem + 6vw, 6.5rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--fg); text-wrap: balance; }
.pillar__def { grid-column: 2; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); max-width: 26ch; margin-top: 0.5rem; text-wrap: balance; }
.pillar__def strong { font-weight: 500; }
.pillar__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.pillar__grid > :first-child { padding-left: 4.5rem; }
.pillar__so { display: grid; gap: 0.4rem; padding-left: 1rem; border-left: 2px solid var(--accent); }
.pillar__so b { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; }
.pillar__so span { font-family: var(--font-display); font-size: 1.2rem; color: var(--fg); line-height: 1.35; letter-spacing: -0.005em; }
.pillar__visual { display: grid; gap: 0.9rem; min-width: 0; }
.pillar__cap { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
@media (max-width: 960px) {
  .pillar__grid { grid-template-columns: minmax(0, 1fr); }
  .pillar__grid > :first-child { padding-left: 0; }
  .pillar__head { grid-template-columns: minmax(0, 1fr); }
  .pillar__n { padding-top: 0; }
  .pillar__word, .pillar__def { grid-column: 1; }
}

/* Affectli fabric web (hero): nodes, links and the courier mark */
.af-courier { position: absolute; left: 0; top: 0; width: 24px; height: 24px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s ease; filter: drop-shadow(0 0 9px rgba(111, 182, 255, 0.55)); will-change: transform; }
.af-courier.is-on { opacity: 1; }
.af-courier svg { width: 100%; height: 100%; display: block; }

/* Keyword bands: a plain facts strip (what it holds, what it connects, what you control) */
.pillar__facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0; }
.pillar__facts b { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-right: 0.9rem; }
.pillar__facts span { font-family: var(--font-display); font-size: 1.05rem; color: var(--fg); letter-spacing: -0.005em; }
.pillar__facts span:not(:last-child)::after { content: "·"; color: var(--accent-text); margin: 0 0.55rem; }
.pillar--solo { border-top: 0; padding-top: 0; }
.answer--section { margin-top: 0; padding-top: 0; border-top: 0; }
.answer--section .answer__line { max-width: 30ch; }

/* =====================================================================
   Mi-C3 layout system (round 6)
   One content edge for every section, header and footer; two-column
   structures split evenly; section labels sit on their own line above
   both columns so the heading and its introduction start together.
   ===================================================================== */
body[data-brand="mic3"] { --col-gap: clamp(2.5rem, 1rem + 4vw, 6rem); }
body[data-brand="mic3"] .wrap--wide { max-width: calc(var(--maxw) + var(--gutter) * 2); }

@media (min-width: 901px) {
  body[data-brand="mic3"] .section-head--split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.25rem var(--col-gap); }
  body[data-brand="mic3"] .section-head--split > .stack:first-child { display: contents; }
  body[data-brand="mic3"] .section-head--split > .stack:first-child > .eyebrow { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  body[data-brand="mic3"] .section-head--split > .stack:first-child > .h2 { grid-column: 1; grid-row: 2; }
  body[data-brand="mic3"] .section-head--split > :last-child { grid-column: 2; grid-row: 2; padding-top: 0.1rem; }
}
@media (min-width: 1081px) {
  body[data-brand="mic3"] .split:not(.split--contact) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
}

/* Keyword bands, paired: the word and its explanation on one side, the captioned visual on the other.
   The second band mirrors the first, so the three read as a rhythm down the page. */
.pillar--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap, clamp(2.5rem, 1rem + 4vw, 6rem)); align-items: center; padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.pillar--pair .pillar__text { display: grid; gap: 1.75rem; align-content: start; }
.pillar--pair .pillar__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
.pillar--pair .pillar__n { padding-top: 0; text-transform: uppercase; }
.pillar--pair .pillar__word, .pillar--pair .pillar__def { grid-column: 1; }
.pillar--pair .pillar__word { font-size: clamp(2.25rem, 1.4rem + 4.4vw, 5.25rem); }
.pillar--pair .pillar__text > *, .pillar--pair .pillar__head > * { min-width: 0; }
.pillar--pair .pillar__def { margin-top: 0; max-width: 22ch; font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); }
.pillar--pair .pillar__visual { margin: 0; gap: 1rem; }
.pillar--pair.pillar--flip .pillar__text { grid-column: 2; grid-row: 1; }
.pillar--pair.pillar--flip .pillar__visual { grid-column: 1; grid-row: 1; }
/* Facts strip: the label on its own line, the items beneath it */
.pillar--pair .pillar__facts { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 0.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.pillar--pair .pillar__facts b { flex: 0 0 100%; margin: 0 0 0.3rem; }
.pillar--pair .pillar__facts span { line-height: 1.6; }
@media (max-width: 960px) {
  .pillar--pair { grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem; }
  .pillar--pair.pillar--flip .pillar__text, .pillar--pair.pillar--flip .pillar__visual { grid-column: 1; grid-row: auto; }
}
/* The plain statement, centred between the problem and the three bands */
.answer--center { justify-items: center; text-align: center; }
.answer--center .answer__line { max-width: 30ch; }
.answer--center .answer__steps { justify-self: stretch; text-align: left; }
/* Tables inside an even two-column split: text cells may wrap so nothing is cut off */
.ui__table--wrap td, .ui__table--wrap th { white-space: normal; }
.ui__table--wrap td { min-width: 6.5em; line-height: 1.4; }
/* "What Mi-C3 does": a white planning sheet between the dark problem section and the keyword bands */
.answer-band { isolation: isolate; border-bottom: 1px solid var(--line); }
.answer-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(14, 17, 22, 0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 17, 22, 0.075) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 75% 95% at 50% 45%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 75% 95% at 50% 45%, #000 30%, transparent 78%); }

/* =====================================================================
   Affectli hero in three planes (experiment, round 7) — affectli/depth.html
   Back: the data fabric, a floor of points running to a horizon.
   Middle: the message. Front: the product, standing on that floor.
   motion.js sets --px/--py (pointer, -1..1) and --p (scroll, 0..1) on .dp,
   and the tilt of the product on .dp-rig.
   ===================================================================== */
.dp { --px: 0; --py: 0; --p: 0; padding-bottom: 0; padding-top: calc(var(--header-h) + clamp(3rem, 1.5rem + 6vw, 6.5rem)); }
.dp-back { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.dp-glow { will-change: transform; transform: translate3d(calc(var(--px) * -22px), calc(var(--py) * -14px + var(--p) * 60px), 0); }
.dp-glow--a { width: 780px; height: 780px; left: -260px; top: -240px; }
.dp-glow--b { width: 700px; height: 700px; right: -240px; top: 40px; opacity: 0.4; }
.dp-floor { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 1.6s var(--ease) .3s; }
.dp.is-ready .dp-floor { opacity: 1; }
/* A thin line of light where the floor meets the sky */
.dp-horizon { position: absolute; left: 0; right: 0; top: var(--hz, 50%); height: 1px; opacity: 0; transition: opacity 1.6s var(--ease) .5s;
  background: linear-gradient(90deg, transparent 4%, rgba(111, 182, 255, 0.28) 32%, rgba(156, 123, 255, 0.3) 68%, transparent 96%);
  box-shadow: 0 0 60px 18px rgba(47, 139, 255, 0.07); }
.dp.is-ready .dp-horizon { opacity: 1; }
.dp-mid { position: relative; z-index: 2; will-change: transform; transform: translate3d(calc(var(--px) * 7px), calc(var(--py) * 5px - var(--p) * 36px), 0); }
/* The product: a screen standing on the floor, tilted back, lifting upright as you scroll */
.dp-stage { position: relative; z-index: 3; perspective: 1600px; perspective-origin: 50% 0%; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.dp-rig { position: relative; max-width: 1200px; margin-inline: auto; transform-style: preserve-3d; transform-origin: 50% 100%;
  transform: translateY(var(--lift, 0px)) rotateX(var(--tilt, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
.dp-screen { box-shadow: 0 70px 140px -50px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(170, 190, 255, 0.08); }
.dp-screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: radial-gradient(600px 300px at var(--gx, 50%) var(--gy, 0%), rgba(170, 200, 255, 0.07), transparent 70%); }
/* Two cards float in front of the screen, each at its own depth */
.dp-card { position: absolute; z-index: 5; width: 256px; display: grid; gap: 0.55rem; padding: 1rem 1.1rem 0.9rem; color: var(--on-dark);
  background: rgba(12, 18, 48, 0.74); border: 1px solid rgba(170, 190, 255, 0.22); border-radius: 2px;
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  opacity: 0; transition: opacity 1s var(--ease); }
.dp.is-ready .dp-card { opacity: 1; transition-delay: 0.9s; }
.dp.is-ready .dp-card--own { transition-delay: 1.15s; }
/* Offsets follow the margin beside the screen, so perspective never pushes a card off the page */
.dp-card--onto { right: max(-64px, calc(70px - (100vw - 1200px) / 2)); top: 15%; transform: translateZ(130px); }
.dp-card--own { left: max(-72px, calc(50px - (100vw - 1200px) / 2)); top: 50%; transform: translateZ(80px); }
.dp-card__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6FB6FF; }
.dp-card__t { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.005em; }
.dp-card__rows { list-style: none; margin: 0; padding: 0; display: grid; }
.dp-card__rows li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-top: 1px solid rgba(170, 190, 255, 0.12); font-size: 0.8125rem; color: var(--on-dark-muted); }
.dp-card__rows li span:last-child { color: var(--on-dark); font-variant-numeric: tabular-nums; }
.dp-card { width: 244px; }
@media (max-width: 1240px) { .dp-card { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .dp-rig, .dp-mid, .dp-glow { transform: none !important; }
  .dp-card { transform: none; }
  .dp-floor, .dp-horizon, .dp-card { transition: none; opacity: 1; }
}

/* Flow diagrams (graph.js): on phones the four stages stack, so give them a taller box */
@media (max-width: 640px) { .diagram--canvas[data-graph="flow"] { aspect-ratio: 2 / 3 !important; } }

/* =====================================================================
   Mi-C3 International lock-ups (round 12): three options for setting "International" under the wordmark.
   Sizes are in em of the wordmark, so a lock-up scales as one piece. Fitted options are tracked so their
   ink spans the wordmark's ink exactly, and shifted so the first letter sits under the M. */
.lockup-int { display: inline-flex; align-items: center; gap: 0.9rem; }
.lockup-int > span[data-mark] svg { height: 72px; width: auto; }
.lockup-int__w { display: grid; justify-items: start; font-size: 3.1rem; color: inherit; }
.lockup-int__w b { display: block; font-family: var(--font-logo); font-weight: 600; font-size: 1em; letter-spacing: -0.01em; line-height: 0.74; padding-top: 0.04em; }
.lockup-int__s { display: block; line-height: 1; white-space: nowrap; }
.lockup-int--a .lockup-int__s { font-family: var(--font-logo); font-weight: 500; font-size: 0.29em; letter-spacing: 0.2254em; margin: 0.62em -0.2254em 0 0.163em; text-transform: uppercase; }
.lockup-int--b .lockup-int__s { font-family: var(--font-mono); font-weight: 500; font-size: 0.27em; letter-spacing: 0.2754em; margin: 0.5em -0.2754em 0 0.1756em; text-transform: uppercase; color: var(--int-accent, #F7941D); }
.lockup-int--b .lockup-int__w::after { content: ""; order: 1; width: 2.96em; height: 1px; margin: 0.16em 0 0 0.069em; background: currentColor; opacity: 0.35; }
.lockup-int--b .lockup-int__s { order: 2; }
.lockup-int--c .lockup-int__s { font-family: var(--font-logo); font-weight: 400; font-size: 0.36em; letter-spacing: 0.01em; margin: 0.42em 0 0 0.1147em; opacity: 0.72; }

/* =====================================================================
   Round 14: Mi-C3 home on phones. The hero, the scene caption and the proof strip are centred,
   with the eyebrow rule mirrored on both sides; the access policy table tightens so it fits.
   ===================================================================== */
@media (max-width: 760px) {
  .hero--reel .hero__inner { justify-items: center; text-align: center; }
  .hero--reel .eyebrow--rule { justify-content: center; }
  .hero--reel .eyebrow--rule::after { content: ""; width: 28px; height: 1px; background: var(--accent); }
  .hero--reel .hero__title { text-wrap: balance; }
  .hero--reel .hero__lede { margin-inline: auto; max-width: 34ch; }
  .hero--reel .hero__ctas { justify-content: center; }
  .hero--reel .reel__cap { justify-items: center; text-align: center; margin-top: 0.5rem; }
  .hero--reel .reel__top { justify-content: center; }
  .hero--reel .reel__ctl { justify-content: center; }
  .hero--reel .telemetry { text-align: center; }
  .hero--reel .telemetry__cell { justify-items: center; }
  .hero--reel .telemetry__cell:nth-child(3) { grid-column: 1 / -1; }
  .hero--reel .telemetry__cell--certs .certs--captioned { justify-items: center; }
  .hero--reel .telemetry__cell--certs .certs__seals { justify-content: center; }
  .hero--reel .telemetry__cell--certs .certs__caption { text-align: center; }
  .hero--reel .telemetry__cell--certs a { justify-content: center; }
}
@media (max-width: 480px) {
  .pillar__visual .ui__table th, .pillar__visual .ui__table td { padding: 0.5rem 0.4rem; }
  .pillar__visual .ui__table th { font-size: 9px; letter-spacing: 0.05em; }
  .pillar__visual .ui__table td:first-child { font-size: 0.75rem; }
  .pillar__visual .ui__table .pill { font-size: 0.56rem; padding: 0.2rem 0.38rem; gap: 0.28em; letter-spacing: 0.04em; }
  .pillar__visual .ui__table .pill::before { width: 5px; height: 5px; }
}
@media (max-width: 420px) {
  .footer__certs .certs--labelled { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; }
  .footer__certs .cert-badge { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* Mi-C3 International lock-up in the header and footer (round 18: brand kit option A, as a proposal) */
.brand-logo--int { gap: 0.6rem; }
.brand-logo--int .brand-logo__mark svg { height: 40px; }
.brand-logo--int .lockup-int__w { font-size: 1.75rem; color: inherit; }
.footer__brand .brand-logo--int .lockup-int__w { font-size: 2rem; }
.footer__brand .brand-logo--int .brand-logo__mark svg { height: 46px; }
@media (max-width: 600px) { .brand-logo--int .lockup-int__w { font-size: 1.6rem; } .brand-logo--int .brand-logo__mark svg { height: 36px; } }
@media (max-width: 380px) { .brand-logo--int .lockup-int__w { font-size: 1.4rem; } .brand-logo--int .brand-logo__mark svg { height: 32px; } }

/* Location map cards (round 19, contact page): a live Google map on the published site, a drawn placeholder in review copies */
.locs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.loc { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line-strong); background: var(--surface); min-width: 0; }
.loc__view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2, #E9ECEA); border-bottom: 1px solid var(--line); }
.loc__view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.85) contrast(1.04); }
.loc__ph { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; background-position: center; }
.loc__ph::before, .loc__ph::after { content: ""; position: absolute; background: color-mix(in srgb, var(--signal) 45%, transparent); }
.loc__ph::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.loc__ph::after { top: 50%; left: 0; right: 0; height: 1px; }
.loc__ring { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 1px solid color-mix(in srgb, var(--signal) 50%, transparent); border-radius: 50%; }
.loc__ring--2 { width: 132px; height: 132px; margin: -66px 0 0 -66px; border-color: color-mix(in srgb, var(--signal) 22%, transparent); }
.loc__pin { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px color-mix(in srgb, var(--signal) 60%, transparent); }
.loc__tag { position: absolute; left: 12px; top: 10px; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); background: var(--surface); padding: 0.2rem 0.45rem; }
.loc__live { position: absolute; left: 12px; bottom: 10px; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--surface); padding: 0.15rem 0.4rem; }
.loc.is-live .loc__ph { display: none; }
.loc__meta { display: grid; gap: 0.4rem; align-content: start; padding: 1.25rem 1.4rem 1.4rem; }
.loc__meta .mono { color: var(--accent-text); }
.loc__meta h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--fg); }
.loc__meta address { font-style: normal; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.loc__meta .link { margin-top: 0.4rem; justify-self: start; }
@media (max-width: 760px) { .locs { grid-template-columns: minmax(0, 1fr); } .loc__meta { justify-items: center; text-align: center; } .loc__meta .link { justify-self: center; } }

/* Operational map demo (round 21): side-panel facts light up in step with the map */
.op-live [data-op-step] { opacity: 0.32; transition: opacity .5s ease, color .5s ease; }
.op-live [data-op-step].is-on { opacity: 1; }
.op-live [data-op-step].is-now { color: var(--fg); }
.op-live .ui__row[data-op-step].is-now span:last-child, .op-live span[data-op-step].is-now { color: var(--accent); }

/* Round 23: every demonstration frame opens with one plain sentence saying what it shows */
.ui__say { display: block; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--ui-line); background: rgba(255, 255, 255, 0.025); font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.5; color: var(--ui-muted); letter-spacing: 0; text-transform: none; }
.ui__say b { color: var(--ui-fg); font-weight: 600; margin-right: 0.35rem; }
.ui__say .n, .mx-say .n { display: inline-grid; place-items: center; width: 15px; height: 15px; margin: 0 0.3rem 0 0.55rem; border-radius: 50%; background: var(--signal); color: #0A0D12; font: 600 9.5px/1 var(--font-mono); vertical-align: 1px; }
.ui__say .n:first-of-type { margin-left: 0.2rem; }
@media (max-width: 600px) { .ui__say { font-size: 0.75rem; } }

/* =====================================================================
   Round 35 (28 Oct 2026): header, menus, single-topic pages, display settings, dark theme
   ===================================================================== */

/* Header: a solid bar once the page moves, a little shorter so the page keeps the focus */
.site-header.is-solid, .site-header.is-open { background: var(--dark-0); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header--light.is-solid, .site-header--light.is-open { background: var(--light-1); }
.site-header__bar { transition: height .3s var(--ease); }
.site-header.is-scrolled .site-header__bar { height: 60px; }
.site-header .brand-logo svg, .site-header .brand-logo--int .lockup-int__w { transition: height .3s var(--ease), font-size .3s var(--ease); }
.site-header.is-scrolled .brand-logo svg { height: 28px; }
.site-header.is-scrolled .brand-logo--affectli svg { height: 25px; }
.site-header.is-scrolled .brand-logo--int .brand-logo__mark svg { height: 32px; }
.site-header.is-scrolled .brand-logo--int .lockup-int__w { font-size: 1.45rem; }
.site-header.is-scrolled .mega { top: calc(100% + 10px); }

/* Menu items with a dropdown: the label opens the overview page, the chevron (or hover) opens the menu */
.nav__item[data-mega] { display: flex; align-items: center; }
.nav__link--parent { padding-right: 0.2rem; }
.nav__chev { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 40px; margin-right: 0.4rem; color: var(--fg); opacity: 0.7; border-radius: var(--radius); transition: opacity .2s; }
.nav__chev:hover, .nav__item.is-open > .nav__chev { opacity: 1; }
.nav__chev .chev { width: 9px; height: 9px; transition: transform .25s var(--ease); }
.nav__item.is-open .nav__chev .chev { transform: rotate(180deg); }
.mega__all { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; padding: 0.85rem 0.75rem 0.3rem; border-top: 1px solid var(--dark-line); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.mega__all .arr { transition: transform .25s var(--ease); }
.mega__all:hover .arr { transform: translateX(3px); }
@media (max-width: 1080px) {
  .header-actions { margin-left: auto; gap: 0.5rem; }
  .nav-toggle { margin-left: 0.25rem; }
}

/* Single-topic pages: cards to the overview's other pages */
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.rel-card { display: grid; gap: 0.55rem; align-content: start; padding: 1.35rem 1.25rem 1.5rem; background: var(--surface); color: var(--fg); border: 1px solid var(--line); transition: border-color .2s, transform .3s var(--ease); }
.rel-card:hover, .rel-card:focus-visible { border-color: var(--accent-text); transform: translateY(-2px); }
.rel-card__t { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); line-height: 1.2; }
.rel-card__t .arr { color: var(--accent-text); transition: transform .25s var(--ease); }
.rel-card:hover .rel-card__t .arr { transform: translateX(4px); }
.rel-card__d { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.rel-card__d strong { font-weight: inherit; }

/* Partner logos (written permission still to confirm): one charcoal tone on light ground, white on dark */
.pdir__logo { display: block; height: calc(var(--h, 40) * 0.72px); width: auto; max-width: 100%; margin-bottom: 0.35rem; filter: brightness(0); opacity: 0.72; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2.25rem; margin: 0; padding: 0; list-style: none; }
.logo-row img { display: block; height: calc(var(--h, 40) * 0.62px); width: auto; filter: brightness(0); opacity: 0.6; transition: opacity .2s; }
.logo-row a:hover img { opacity: 0.9; }
.logo-row__k { display: block; text-align: center; margin-bottom: 1.25rem; color: var(--muted); }
.t-dark .pdir__logo, .t-ink .pdir__logo, .t-dark .logo-row img, .t-ink .logo-row img { filter: brightness(0) invert(1); }

/* Affectli gradient on words: the brand blues, light to dark from left to right (official values to confirm from the brand guidelines) */
.grad-text { background: linear-gradient(90deg, #0094D8 0%, #3357A7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-brand="affectli"] .t-dark .grad-text { background: linear-gradient(90deg, #6CCBFF 0%, #2FA7E6 45%, #4E78D6 100%); -webkit-background-clip: text; background-clip: text; }

/* Display and accessibility panel */
.a11y { position: relative; display: flex; }
.a11y__btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--fg); opacity: 0.85; border: 1px solid var(--line-strong); transition: opacity .2s, border-color .2s, background-color .2s; }
.a11y__btn:hover, .a11y.is-open .a11y__btn { opacity: 1; border-color: var(--fg); }
.a11y__btn svg { width: 20px; height: 20px; }
.a11y__panel { position: absolute; right: 0; top: calc(100% + 14px); width: min(290px, calc(100vw - 2rem)); padding: 1.1rem; display: grid; gap: 0.9rem; z-index: 120;
  background: var(--dark-1); color: var(--on-dark); border: 1px solid var(--dark-line-strong); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); }
.a11y__panel[hidden] { display: none; }
.a11y__h { margin: 0; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-muted); }
.a11y__row { display: grid; gap: 0.4rem; }
.a11y__k { font-size: 0.8125rem; color: var(--on-dark); }
.a11y__seg { display: flex; border: 1px solid var(--dark-line-strong); border-radius: var(--radius); overflow: hidden; }
.a11y__seg button { flex: 1; padding: 0.55rem 0.4rem; font-size: 0.8125rem; line-height: 1; color: var(--on-dark-muted); transition: background-color .2s, color .2s; }
.a11y__seg button + button { border-left: 1px solid var(--dark-line-strong); }
.a11y__seg button:hover { color: var(--on-dark); }
.a11y__seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.a11y__reset { justify-self: start; font-size: 0.75rem; color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 3px; }
.a11y__reset:hover { color: var(--on-dark); }

/* Text size, link underlines and reduced motion */
html[data-text="lg"] { font-size: 112.5%; }
html[data-text="xl"] { font-size: 125%; }
html[data-links="underline"] main a:not(.btn), html[data-links="underline"] .site-footer a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
html[data-motion="reduce"] .rv { opacity: 1 !important; transform: none !important; }

/* Dark theme: light sections take the dark tokens, so every component follows */
html[data-theme="dark"] { color-scheme: dark; background: var(--dark-0); }
html[data-theme="dark"] body { background: var(--dark-0); }
html[data-theme="dark"] .t-light, html[data-theme="dark"] .t-paper, html[data-theme="dark"] .t-white {
  --fg: var(--on-dark); --muted: var(--on-dark-muted);
  --line: var(--dark-line); --line-strong: var(--dark-line-strong);
  --accent-text: var(--accent); --btn-bg: var(--accent); --btn-fg: var(--accent-ink);
  --grid-line: rgba(255, 255, 255, 0.045); --spot: rgba(255, 255, 255, 0.07);
  color: var(--fg);
}
html[data-theme="dark"] .t-light, html[data-theme="dark"] .t-paper { --bg: var(--dark-1); --surface: var(--dark-2); --surface-2: var(--dark-2); background: var(--bg); }
html[data-theme="dark"] .t-white { --bg: var(--dark-0); --surface: var(--dark-1); --surface-2: var(--dark-2); background: var(--bg); }
html[data-theme="dark"] .site-header--light { --fg: var(--on-dark); --muted: var(--on-dark-muted); --line: var(--dark-line); --line-strong: var(--dark-line-strong); }
html[data-theme="dark"] .site-header--light.is-solid, html[data-theme="dark"] .site-header--light.is-open { background: var(--dark-0); border-bottom-color: var(--dark-line); }
html[data-theme="dark"] .pdir__logo, html[data-theme="dark"] .logo-row img { filter: brightness(0) invert(1); }
html[data-theme="dark"] body[data-brand="affectli"] .t-light .grad-text, html[data-theme="dark"] body[data-brand="affectli"] .t-white .grad-text { background: linear-gradient(90deg, #6CCBFF 0%, #2FA7E6 45%, #4E78D6 100%); -webkit-background-clip: text; background-clip: text; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { color-scheme: dark; }

/* Tabs read as tabs (Katie: they looked like the coloured border): a segmented control, the chosen tab filled */
.tabs__list { gap: 0.3rem; padding: 0.3rem; width: fit-content; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.tabs__tab { padding: 0.7rem 1.1rem; border-radius: 6px; transition: color .2s, background-color .2s; }
.tabs__tab:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.tabs__tab[aria-selected="true"] { color: var(--btn-fg); background: var(--btn-bg); }
.tabs__tab[aria-selected="true"]::after { display: none; }
.tabs__tab[aria-selected="true"] .mono { color: inherit; opacity: 0.8; }
html[data-theme="dark"] .pm__logo { filter: brightness(0) invert(1); opacity: 0.7; }

/* 29 Oct 2026: certification badge images (site.js CERT_IMAGES) */
.seal--img { display: block; object-fit: contain; border-radius: 50%; overflow: hidden; }

/* ---------- 29 Oct 2026: dark theme, components that painted their own light ground ----------
   Found by a contrast check of every page in dark mode (light text was landing on white, or dark text on dark). */
html[data-theme="dark"] .card[style*="var(--light-1)"] { background: var(--surface) !important; }            /* Affectli: Book a demo form */
html[data-theme="dark"] .hb-silo { background: var(--surface); }                                                /* Mi-C3 home: the three systems */
html[data-theme="dark"] .pm__name { color: var(--fg); }                                                         /* Mi-C3 home: partner names */
html[data-theme="dark"] :is(.t-light, .t-paper, .t-white) .pill { color: #8FB3D3; }                             /* status pills on sections that turn dark */
html[data-theme="dark"] :is(.t-light, .t-paper, .t-white) .pill--ok { color: #4FC3DE; }
html[data-theme="dark"] :is(.t-light, .t-paper, .t-white) .pill--warn { color: #F7A845; }
html[data-theme="dark"] :is(.t-light, .t-paper, .t-white) .pill--crit { color: #FF7A85; }
html[data-theme="dark"] .pill--off { color: #A3ABB6; }
html[data-theme="dark"] [style*="color:var(--cobalt)"] { color: #8EA9F0 !important; }                          /* Affectli-blue labels on the hub and brand page */
html[data-theme="dark"] .chip-b--af { color: #8EA9F0; border-color: rgba(142, 169, 240, 0.45); }
/* stages that keep their own light ground (logo and scene showcases): their captions stay dark */
html[data-theme="dark"] .logo-stage:is([style*="#F3F4F2"], [style*="#F5F7FB"], [style*="background:#fff"], [style*="#F7941D"]) .logo-stage__cap { color: #4A525C; }
html[data-theme="dark"] :is(.demo__stage--white, .demo__stage--light-af, .demo__stage--paper, .demo__trio > div), html[data-theme="dark"] :is(.demo__stage--white, .demo__stage--light-af, .demo__stage--paper) :is(.t-white, .t-light, .t-paper, .cx-light, .cx-white) { --fg: #0E1116; --muted: #4F5878; --line: rgba(14, 17, 22, 0.12); color: var(--fg); }

/* ---------- Testimonials and awards (round 39, 29 Oct 2026: quotes and awards supplied by Mi-C3) ---------- */
.voices { display: grid; gap: var(--grid-gap, clamp(1.5rem, 1rem + 1.5vw, 2.5rem)); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.voices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.voice { margin: 0; display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); border: 1px solid var(--line); background: var(--surface); }
.voice blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--fg); }
.voice blockquote::before { content: "“"; display: block; height: 1.6rem; font-family: var(--font-display); font-size: 3.25rem; line-height: 1; color: var(--accent-text); }
.voice blockquote p + p { margin-top: 0.9em; }
.voice figcaption { margin-top: auto; display: grid; gap: 0.2rem; font-size: var(--fs-small); color: var(--muted); }
.voice figcaption b { color: var(--fg); font-weight: 600; }
.voice__k { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.35rem; }
.voice--lg blockquote { font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); line-height: 1.55; }
.awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap, clamp(1.5rem, 1rem + 1.5vw, 2.5rem)); }
.awards__i { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 0.35rem 1.5rem; padding-block: 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.awards__y { grid-row: span 3; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3.25rem); line-height: 1; letter-spacing: -0.035em; color: var(--fg); }
.awards__k { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.awards__i h3 { margin: 0; }
.awards__i p { margin: 0; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 1080px) { .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) { .voices, .voices--2, .awards { grid-template-columns: minmax(0, 1fr); } .awards__i + .awards__i { border-top: 0; } }