/* ── SESI app parity — global design tokens ─────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Surfaces — bound to the neutral SESI desktop chrome (#459). */
  --bg:          #ffffff;
  --bg-elevated: #ffffff;
  --surface:     #f4f4f5;
  --surface-2:   #fafafa;
  --surface-solid: #e8e8ea;
  --glass:       #f4f4f5;
  --glass-strong: #f4f4f5;

  /* Ink */
  --ink:         #27272a;
  --ink-2:       #3f3f46;
  --muted:       #71717a;
  --muted-2:     #a1a1aa;

  /* Borders & glass edges */
  --border:      rgba(39, 39, 42, 0.12);
  --border-2:    rgba(39, 39, 42, 0.18);
  --border-glow: rgba(39, 39, 42, 0.28);
  --edge-hi:     rgba(255, 255, 255, 0.92);

  /* Accents — cyan-teal + iridescent */
  --teal:        #3f3f46;
  --teal-soft:   #d4d4d8;
  --teal-glow:   rgba(39, 39, 42, 0.08);
  --teal-deep:   #3f3f46;
  --iris-purple: transparent;
  --iris-magenta: transparent;
  --iris-gold:   transparent;

  /* Shadows — soft contemporary */
  --shadow-sm:   0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-md:   0 2px 8px rgba(24, 24, 27, 0.06);
  --shadow-lg:   0 8px 24px rgba(24, 24, 27, 0.08);
  --shadow-glow: none;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 16px;

  /* Shared app spacing rhythm. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --max-w: 1160px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--bg);
}
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  transform: translateY(calc(-100% - 1rem));
  transition: none;
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0) !important; outline: 2px solid var(--ink); outline-offset: 2px; }
img  { display: block; max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button, input { font-family: inherit; }

/* ── Typography ─────────────────────────────────────────── */
h1 { font-size: clamp(2.6rem, 6vw, 4.75rem); font-weight: 700; line-height: 1.07; letter-spacing: -0.035em; color: var(--ink); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.025em; color: var(--ink); }
h3 { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
p  { color: var(--muted); line-height: 1.7; }

.eyebrow {
  font-size: 0.685rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 0.75rem;
}

/* ── Glass utilities ────────────────────────────────────── */
.glass-panel {
  background: var(--glass);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--edge-hi);
  border-radius: var(--r-lg);
}

/* ── Nav ────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  height: 80px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  /* Glass header sits above scrolled content. Empty chrome must not steal
     pointer hits from media underneath (e.g. native <video controls> that
     remain visible through the translucent bar — #204 residual). */
  pointer-events: none;
}
.site-header > * {
  pointer-events: auto;
}

/* Product brand chrome: SESI wordmark only (owner lock 2026-07-19).
   No raven/crow/bird mark in header, footer, or favicon — not the product logo.
   Face portraits are persona only — never the product logo.
   Header uses an explicit black SVG <img> (sesi-title-letters.svg). Do not
   rely on currentColor — it does not theme an external SVG image. */
.brand { display: flex; align-items: center; }
.brand-wordmark {
  display: block;
  /* Owner correction (#459 r3): letters-only mark (no tagline) at 26px —
     the sub-line is redundant in chrome and the lockup still read too large. */
  height: 26px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}
/* Persona face chips only (not product chrome) */
.brand-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 1.5px rgba(39, 39, 42, 0.45),
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 2px 8px rgba(39, 39, 42, 0.2);
  flex-shrink: 0;
}
.brand-avatar--sm {
  width: 22px;
  height: 22px;
  box-shadow:
    0 0 0 1px rgba(39, 39, 42, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.95);
}
.brand-mark {
  width: 26px; height: 26px;
  background: linear-gradient(145deg, var(--ink) 0%, #1e293b 100%);
  color: #fff;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset, 0 2px 8px rgba(39, 39, 42, 0.25);
}
nav { display: flex; align-items: center; gap: 2px; }
.site-header nav { margin-left: auto; }
nav a {
  font-size: 0.875rem;
  color: var(--muted);
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-sm);
  transition: color 0.12s, background 0.12s;
}
nav a:hover { color: var(--ink); background: rgba(255,255,255,0.7); }
nav a:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* Active page / active in-page section: the strip must always say where you are. */
nav a[aria-current="page"],
nav a[aria-current="true"] {
  color: var(--ink);
  font-weight: 650;
  background: rgba(39, 39, 42, 0.06);
}
nav a[aria-current="page"].nav-cta,
nav a[aria-current="true"].nav-cta { background: var(--ink) !important; }
.nav-cta {
  margin-left: 6px;
  background: var(--ink) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 0.4rem 0.875rem !important;
  border-radius: var(--r-sm) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px rgba(39, 39, 42, 0.15) !important;
}
.nav-cta:hover { opacity: 0.9 !important; background: var(--ink-2) !important; }

/* ── Hero — abstract field is the stage; copy floats clean ─ */
.hero {
  position: relative;
  color: var(--ink);
  padding: clamp(4.5rem, 10vw, 8rem) var(--gutter) clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
  min-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-ambient {
  position: absolute;
  /* Full-bleed: edge-to-edge, slight vertical bleed for mask soft-edge */
  inset: -6% 0 0;
  width: 100%;
  pointer-events: none;
  z-index: 0 !important;
  overflow: hidden;
}
.hero-ambient img {
  width: 100%;
  height: 100%;
  min-width: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.72;
  transform: scale(1.06);
  animation: ambient-drift 32s ease-in-out infinite;
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.75) 48%,
    rgba(0,0,0,0.35) 78%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.75) 48%,
    rgba(0,0,0,0.35) 78%,
    transparent 100%
  );
}
@keyframes ambient-drift {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0); }
  50% { transform: scale(1.1) translate3d(-1.2%, 0.8%, 0); }
}
/* Live neural traffic over the ambient field */
.hero-neural {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.neural-path {
  stroke-dasharray: 8 14;
  animation: neural-flow 9s linear infinite;
}
.neural-path--slow {
  stroke-dasharray: 4 18;
  animation-duration: 14s;
  animation-direction: reverse;
}
.neural-node {
  animation: neural-pulse 3.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.neural-node:nth-child(odd) { animation-delay: 0.6s; }
.neural-node:nth-child(3n) { animation-delay: 1.4s; }
@keyframes neural-flow {
  to { stroke-dashoffset: -160; }
}
@keyframes neural-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.4); }
}
.hero-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hero-rings::before,
.hero-rings::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(39, 39, 42, 0.18);
  box-shadow:
    0 0 40px rgba(39, 39, 42, 0.08),
    inset 0 0 40px rgba(255, 255, 255, 0.4);
}
.hero-rings::before {
  width: min(720px, 90vw);
  height: min(720px, 90vw);
  top: -18%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(39, 39, 42, 0.12) 0%, transparent 65%);
}
.hero-rings::after {
  width: min(480px, 70vw);
  height: min(480px, 70vw);
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  border-color: rgba(39, 39, 42, 0.12);
  box-shadow: 0 0 30px rgba(39, 39, 42, 0.06), inset 0 0 24px rgba(255,255,255,0.5);
}
.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hero-inner h1 { margin-bottom: 1.25rem; }
.hero-lede {
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.175rem);
  max-width: 580px;
  margin: 0 auto 2.25rem;
}
.market-persona-chip {
  margin: 0 0 1.25rem;
}

.blog-hero .hero-persona-chip img {
  border-radius: 50%;
  object-fit: contain;
}

/* ── Waitlist form ──────────────────────────────────────── */
.waitlist-form {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.waitlist-form input[type="email"] {
  flex: 1;
  padding: 0.7rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  background: var(--glass-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink);
  font-size: 0.9rem;
  outline: none;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-hi);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.waitlist-form input::placeholder { color: var(--muted-2); }
.waitlist-form input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-glow), var(--shadow-sm);
}

.button {
  padding: 0.7rem 1.15rem;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.12s, transform 0.1s, box-shadow 0.12s;
  white-space: nowrap;
}
.button:hover  { opacity: 0.92; }
.button:active { transform: scale(0.98); }
.button.primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.button.primary:hover {
  box-shadow: var(--shadow-md);
}
.button.primary-dark { background: var(--ink); color: #fff; }

.form-hint { font-size: 0.72rem; color: var(--muted-2); margin-top: 0.75rem; }
.form-message { font-size: 0.85rem; margin-top: 0.5rem; display: none; }
.form-message.success { color: #27272a; display: block; }
.form-message.error   { color: #dc2626; display: block; }

/* Legacy frame (unused in hero; kept for any remaining concept art) */
.concept-frame {
  margin: 0 0 0.5rem;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-2);
  overflow: hidden;
  background: var(--glass-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    var(--shadow-lg),
    var(--shadow-glow),
    inset 0 1px 0 var(--edge-hi);
}
.concept-frame img { width: 100%; display: block; }

/* Literal Sessi-at-work thumbs — cinematic, not diagrams */
.scene-panel img {
  border-radius: var(--r-xl);
  border: 1px solid var(--border-2);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(39, 39, 42, 0.06),
    0 24px 48px rgba(15, 23, 42, 0.08);
  background: var(--bg-elevated);
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.scene-panel-wide {
  max-width: 920px;
  margin: 0 auto 2.5rem;
}

/* ── Proof band — Sessi voice, not brochure grid ────────── */
.proof-band {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.35rem var(--gutter) 1.75rem;
  position: relative;
  z-index: 2;
}
.proof-intro {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem 0.1rem;
}
.proof-intro-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(39, 39, 42, 0.35);
  box-shadow: 0 0 0 3px rgba(39, 39, 42, 0.12), var(--shadow-sm);
  flex: none;
}
.proof-intro-text {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}
.proof-item {
  position: relative;
  padding: 1.05rem 1.05rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.7)),
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--teal-glow), transparent 55%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-hi);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}
.proof-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(180deg, var(--teal), var(--teal-soft) 55%, rgba(39, 39, 42, 0.45));
  opacity: 0.85;
}
.proof-item:nth-child(2) {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.7)),
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(39, 39, 42, 0.1), transparent 55%);
}
.proof-item:nth-child(3) {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.7)),
    radial-gradient(ellipse 90% 70% at 0% 100%, rgba(39, 39, 42, 0.14), transparent 55%);
}
.proof-item:nth-child(4) {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.7)),
    radial-gradient(ellipse 90% 70% at 100% 100%, rgba(39, 39, 42, 0.08), transparent 55%);
}
.proof-item:hover {
  border-color: var(--border-glow);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(39, 39, 42, 0.08);
  transform: translateY(-2px);
}
.proof-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: 0.35rem;
  border-radius: 8px;
  color: var(--teal-deep);
  background: rgba(39, 39, 42, 0.14);
  border: 1px solid rgba(39, 39, 42, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.proof-icon svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}
.proof-item:nth-child(2) .proof-icon {
  color: #3f3f46;
  background: rgba(39, 39, 42, 0.1);
  border-color: rgba(39, 39, 42, 0.18);
}
.proof-item:nth-child(4) .proof-icon {
  color: #be185d;
  background: rgba(39, 39, 42, 0.08);
  border-color: rgba(39, 39, 42, 0.16);
}
.proof-band strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.proof-item > span:not(.proof-icon) {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ── Section generic ────────────────────────────────────── */
.section {
  padding: clamp(4rem, 8vw, 6rem) var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
}
.section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}
.section-heading h2 { margin-top: 0.5rem; }
.section-heading p  { margin-top: 0.75rem; }

/* ── Split ──────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.split > *,
.section-copy { min-width: 0; }
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.section-copy h2 { margin-top: 0.5rem; margin-bottom: 1rem; }
.section-copy p  { margin-bottom: 1.25rem; }

.feature-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }
.feature-pills li {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--glass-strong);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  box-shadow: var(--shadow-sm);
}
.feature-pills li:first-child {
  border-color: rgba(39, 39, 42, 0.35);
  background: rgba(39, 39, 42, 0.12);
  color: var(--teal-deep);
}

.image-panel {
  padding-bottom: 0.75rem;
}
.image-panel img,
.wide-visual img {
  border-radius: var(--r-xl);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--edge-hi);
  background: var(--bg-elevated);
  display: block;
  width: 100%;
}

/* ── Dual-layer ───────────────────────────────────────────
   Abstract schematics / neural fields = atmosphere (BG).
   Literal Sessi scenes live in .scene-panel thumbs (FG).
   Backgrounds are always full viewport width (edge-to-edge). */
.dual-layer {
  position: relative;
  isolation: isolate;
  /* Do not clip full-bleed ::before; hero keeps its own overflow */
}
/* Sections with dual-layer: break out of max-width so BGs span full width.
   Horizontal padding keeps content aligned with the rest of the page. */
.section.dual-layer {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding-left: max(var(--gutter), calc((100% - var(--max-w)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - var(--max-w)) / 2 + var(--gutter)));
}
.dual-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  background-image: var(--dual-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}
/* Content sits above atmosphere; keep decorative layers out of flow */
.dual-layer > * {
  position: relative;
  z-index: 1;
}
.dual-layer > .hero-ambient,
.dual-layer > .hero-neural,
.dual-layer > .hero-rings {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
}
.dual-layer-workspace {
  --dual-bg: url('public/assets/bg-workspace.jpg?v=107');
}
.dual-layer-control {
  --dual-bg: url('public/assets/bg-control.jpg?v=107');
}
.dual-layer-loop {
  --dual-bg: url('public/assets/bg-loop.jpg?v=107');
}
/* Hero uses .hero-ambient as the main field; dual-layer is a soft underlayer */
.hero.dual-layer::before {
  opacity: 0.14;
  top: 0;
  bottom: 0;
  width: 100%;
}

/* ── How it works ───────────────────────────────────────── */
.workflow-section { text-align: center; }
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.workflow-grid article {
  background: var(--glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 1.75rem 1.25rem;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-hi);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.workflow-grid article:hover {
  border-color: rgba(39, 39, 42, 0.3);
  box-shadow: var(--shadow-md), 0 0 24px rgba(39, 39, 42, 0.08);
}
.step-num {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-bottom: 0.6rem;
}
.workflow-grid h3 { margin-bottom: 0.4rem; }
.workflow-grid p  { font-size: 0.84rem; }
.wide-visual { margin-top: 1.5rem; }

/* ── Capabilities — glass bento ─────────────────────────── */
.capability-section {
  padding: clamp(4rem, 8vw, 6rem) var(--gutter);
  position: relative;
}
.capability-section::before {
  content: '';
  position: absolute;
  inset: 8% 5%;
  background: radial-gradient(ellipse at 30% 40%, rgba(39, 39, 42, 0.1), transparent 50%),
              radial-gradient(ellipse at 80% 60%, var(--iris-purple), transparent 45%);
  pointer-events: none;
  z-index: 0;
}
.capability-section-inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 1; }
.capability-section .section-heading { margin-bottom: 2.5rem; }

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.capability-grid article {
  background: var(--glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 1.75rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-hi);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.capability-grid article:hover {
  border-color: rgba(39, 39, 42, 0.28);
  box-shadow: var(--shadow-md), 0 0 28px rgba(39, 39, 42, 0.1);
  transform: translateY(-1px);
}
.cap-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 8px;
  margin-bottom: 1rem;
  border: 1px solid rgba(39, 39, 42, 0.2);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(39, 39, 42, 0.12));
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-hi);
}
.capability-grid h3 { margin-bottom: 0.3rem; }
.capability-grid p  { font-size: 0.84rem; }

/* ── Plugins ────────────────────────────────────────────── */
.plugins-section {
  padding: clamp(4rem, 8vw, 6rem) var(--gutter);
}
.plugins-inner { max-width: var(--max-w); margin: 0 auto; }
.plugins-section .section-heading { margin-bottom: 2.5rem; }

.plugin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.plugin-card {
  background: var(--glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 1.75rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-hi);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.plugin-card:hover {
  border-color: rgba(39, 39, 42, 0.28);
  box-shadow: var(--shadow-md), 0 0 24px rgba(39, 39, 42, 0.08);
}
.plugin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.plugin-head h3 { margin: 0; }
.plugin-card p { font-size: 0.84rem; }
.plugin-meta {
  margin-top: 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.pill {
  flex: none;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(39, 39, 42, 0.3);
  border-radius: 999px;
  color: var(--teal-deep);
  background: rgba(39, 39, 42, 0.12);
}
.pill-soon {
  color: var(--teal-deep);
  background: linear-gradient(135deg, rgba(39, 39, 42, 0.22), rgba(39, 39, 42, 0.12));
  border-color: rgba(39, 39, 42, 0.35);
  box-shadow: 0 0 12px rgba(39, 39, 42, 0.15);
}
.plugins-foot {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.plugins-foot a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plugins-foot strong { color: var(--ink); font-weight: 600; }

/* ── Detail (observable) ────────────────────────────────── */
.detail-section {
  padding-top:    clamp(4rem, 8vw, 6rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}


/* ── Mission ─────────────────────────────────────────────── */
.mission-section {
  position: relative;
  overflow: hidden;
}
.mission-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(39, 39, 42, 0.14), transparent 60%),
    radial-gradient(ellipse 45% 40% at 100% 80%, var(--iris-purple), transparent 55%);
  pointer-events: none;
}
.mission-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6rem) var(--gutter);
  position: relative;
  z-index: 1;
}
.mission-section .section-heading {
  text-align: left;
  max-width: none;
  margin-bottom: 2.5rem;
}
.mission-section .eyebrow { color: var(--teal-deep); }
.mission-statement {
  margin: 0.75rem 0 0;
  max-width: 46rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
}
.mission-slogan {
  margin: 0.9rem 0 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.mission-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 0 0 2.5rem;
}
.mission-pillar {
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-hi);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mission-pillar:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
}
.mission-pillar h3 {
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.mission-pillar p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Why SESI — glass (no dark) ─────────────────────────── */
.diff-section {
  position: relative;
  overflow: hidden;
}
.diff-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(39, 39, 42, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 40%, var(--iris-purple), transparent 50%);
  pointer-events: none;
}
.diff-section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6rem) var(--gutter);
  position: relative;
  z-index: 1;
}
.diff-section .section-heading {
  text-align: left;
  max-width: none;
  margin-bottom: 2.5rem;
}
.diff-section .section-heading h2 { color: var(--ink); }
.diff-section .eyebrow { color: var(--teal-deep); }
.diff-section .section-heading > p { color: var(--muted); }

.diff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.diff-grid article {
  background: var(--glass-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-hi);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.diff-grid article:hover {
  border-color: rgba(39, 39, 42, 0.3);
  box-shadow: var(--shadow-md), 0 0 28px rgba(39, 39, 42, 0.1);
}
.diff-grid h3 { color: var(--ink); margin-bottom: 0.4rem; }
.diff-grid p  { font-size: 0.875rem; color: var(--muted); }

/* ── CTA ────────────────────────────────────────────────── */
.cta-section {
  padding: clamp(5rem, 10vw, 8rem) var(--gutter);
  text-align: center;
  position: relative;
}
.cta-inner {
  max-width: 540px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  background: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg), var(--shadow-glow), inset 0 1px 0 var(--edge-hi);
}
.cta-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  box-shadow:
    0 0 0 2px rgba(39, 39, 42, 0.4),
    0 0 0 5px rgba(255, 255, 255, 0.95),
    0 8px 24px rgba(39, 39, 42, 0.2);
}
.cta-inner h2 { margin-top: 0.5rem; margin-bottom: 0.875rem; }
.cta-inner p  { margin-bottom: 2rem; }

.waitlist-form--large {
  max-width: 460px;
  margin: 0 auto;
}
.waitlist-form--large input[type="email"] {
  border: 1px solid var(--border-2);
  background: #fff;
  color: var(--ink);
  padding: 0.7rem 1rem;
  font-size: 0.925rem;
}
.waitlist-form--large input:focus {
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 3px var(--teal-glow);
}
.waitlist-form--large .button.primary {
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.2rem;
}
.cta-section .form-hint { color: var(--muted); }
.cta-section .form-message.success { color: #27272a; }
.cta-section .form-message.error   { color: #dc2626; }

/* ── Footer ─────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 1.375rem var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.65rem; }
.footer-tagline { max-width: 36rem; }
.brand-mark-sm {
  width: 20px; height: 20px;
  background: linear-gradient(145deg, var(--ink), #1e293b);
  color: #fff;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 800;
}
.footer-name    { font-size: 0.84rem; font-weight: 700; }
.footer-tagline { font-size: 0.76rem; color: var(--muted); }
.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.footer-copy,
.footer-powered {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}
.footer-powered-name {
  font-weight: 600;
  color: var(--teal-deep);
}

/* ── Meet Sessi persona ───────────────────────────────────
   Same SESI White light world as hero ambient / dual-layer —
   not a dark island floating in a bright page. */
.meet-section {
  padding-top: clamp(4rem, 8vw, 6rem);
  position: relative;
  isolation: isolate;
}
.meet-section::before {
  content: '';
  position: absolute;
  inset: 8% 0 12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 28% 45%, rgba(39, 39, 42, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 50% at 72% 40%, rgba(39, 39, 42, 0.06), transparent 65%);
}
.meet-section > * {
  position: relative;
  z-index: 1;
}
.persona-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.persona-frame {
  width: min(100%, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border-2);
  box-shadow:
    var(--shadow-lg),
    0 0 0 6px rgba(255, 255, 255, 0.9),
    0 0 0 7px rgba(39, 39, 42, 0.22),
    0 0 56px rgba(39, 39, 42, 0.12),
    0 0 80px rgba(39, 39, 42, 0.05);
  background:
    radial-gradient(circle at 40% 30%, rgba(39, 39, 42, 0.08), transparent 55%),
    var(--surface-solid);
}
.persona-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.persona-caption {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.footer-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.footer-nav a {
  font-size: 0.875rem;
  color: var(--ink-2);
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-sm);
  transition: color 0.12s, background 0.12s;
}
.footer-nav a:hover { color: var(--ink); background: rgba(255,255,255,0.7); }

/* ── SESI Organization roster ─────────────────────────── */
.team-main {
  width: min(100%, 1180px);
  margin-inline: auto;
  padding: clamp(4rem, 8vw, 6.5rem) var(--gutter) clamp(4.5rem, 9vw, 7rem);
}
.team-main,
.team-member-body { min-width: 0; }
.team-intro h1,
.team-member dd { overflow-wrap: anywhere; }
.team-intro {
  max-width: 760px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.team-intro h1 { max-width: 720px; margin-bottom: 1rem; }
.team-intro > p:not(.eyebrow, .org-disclosure) { max-width: 680px; font-size: clamp(1rem, 1.7vw, 1.15rem); }
.team-intro > .org-disclosure { margin-bottom: 1rem; }
.team-roster-note {
  margin-top: 1rem;
  color: var(--muted-2);
  font-size: 0.78rem !important;
}
.team-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: clamp(1.75rem, 3.4vw, 2.75rem) clamp(1.25rem, 2.6vw, 2rem);
  border-top: 1px solid var(--border);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.team-member { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.team-member--lead { grid-column: 1 / -1; max-width: 34rem; }
.team-avatar {
  width: 76px;
  height: 76px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--border-2);
  background: #fff;
  margin-bottom: 0.9rem;
}
.team-member--lead .team-avatar { width: 104px; height: 104px; }
.team-member h2 { margin: 0; font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; }
.team-member--lead h2 { font-size: 1.35rem; }
.team-role { margin: 0.15rem 0 0.7rem; color: var(--muted); font-size: 0.8rem; line-height: 1.4; }
.team-resp,
.team-style,
.team-reports { margin: 0; overflow-wrap: anywhere; }
.team-resp { color: var(--ink-2); font-size: 0.84rem; line-height: 1.55; }
.team-style { margin-top: 0.5rem; color: var(--muted); font-size: 0.8rem; line-height: 1.55; }
.team-reports {
  margin-top: 0.75rem;
  color: var(--muted-2);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Homepage organization band ────────────────────────── */
.org-band {
  border-top: 1px solid var(--border);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.org-band-inner {
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.org-band h2 { margin: 0.4rem 0 0.75rem; max-width: 22ch; }
.org-lede {
  max-width: 56ch;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--ink-2);
}
.org-disclosure {
  max-width: 58ch;
  margin: 0 0 0.85rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--accent);
  color: var(--ink-2);
  font-size: 0.86rem;
  line-height: 1.55;
}
.org-disclosure strong { color: var(--ink); }
.org-faces {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem) clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.org-faces li { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.org-faces img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--border-2);
  background: #fff;
  margin-bottom: 0.55rem;
}
.org-name { font-size: 0.82rem; font-weight: 600; line-height: 1.3; }
.org-role { margin-top: 0.15rem; color: var(--muted-2); font-size: 0.72rem; line-height: 1.35; }
.org-link {
  display: inline-block;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  font-size: 0.88rem;
  font-weight: 600;
}

@media (max-width: 1040px) {
  .org-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .team-main { padding-top: 3.25rem; }
  .team-member--lead { max-width: none; }
}

@media (max-width: 480px) {
  .team-roster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .team-avatar { width: 64px; height: 64px; }
  .team-member--lead .team-avatar { width: 84px; height: 84px; }
  .org-faces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Marketplace ────────────────────────────────────────── */
.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;
}
.market-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.market-hero::before {
  content: '';
  position: absolute;
  width: min(560px, 80vw);
  height: min(560px, 80vw);
  border-radius: 50%;
  border: 1px solid rgba(39, 39, 42, 0.15);
  top: -30%;
  right: -5%;
  background: radial-gradient(circle, rgba(39, 39, 42, 0.1), transparent 70%);
  pointer-events: none;
}
.market-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter) clamp(2.5rem, 5vw, 3.5rem);
  position: relative;
  z-index: 1;
}
.market-hero h1 {
  color: var(--ink);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
}
.market-hero .eyebrow { color: var(--teal-deep); }
.market-lede {
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}
.market-toolbar { display: grid; gap: 1rem; max-width: 42rem; }
.market-toolbar input[type="search"] {
  width: 100%;
  border: 1px solid var(--border-2);
  background: var(--glass-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink);
  border-radius: var(--r-md);
  padding: 0.7rem 1rem;
  font-size: 0.925rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-hi);
}
.market-toolbar input[type="search"]::placeholder { color: var(--muted-2); }
.market-toolbar input[type="search"]:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-glow);
}
.market-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-chip {
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.filter-chip:hover {
  color: var(--ink);
  border-color: rgba(39, 39, 42, 0.35);
}
.filter-chip.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 0 12px rgba(39, 39, 42, 0.2);
}
.market-catalog-section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.market-catalog-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.market-catalog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.market-catalog-head h2 { font-size: 1.15rem; }
.market-count { font-size: 0.8rem; color: var(--muted); }
.market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
.market-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 1.15rem 1.15rem 1rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-hi);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.market-card:hover {
  border-color: rgba(39, 39, 42, 0.3);
  box-shadow: var(--shadow-md), 0 0 24px rgba(39, 39, 42, 0.08);
}
.market-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.market-card h3 { margin-bottom: 0.4rem; }
.market-card > p { font-size: 0.84rem; flex: 1; }
.market-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.market-author { font-size: 0.72rem; color: var(--muted); font-weight: 500; }
.market-cta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--teal-deep);
}
.market-cta--muted { color: var(--muted); font-weight: 500; }
.market-cta--link {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.market-loading, .market-error, .market-empty {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 2rem 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.market-empty[hidden],
.market-loading[hidden] {
  display: none !important;
}
.spinner {
  width: 14px; height: 14px;
  border: 1.5px solid var(--border-2);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--border-2); opacity: 0.6; }
  .capability-grid article:hover,
  .plugin-card:hover,
  .workflow-grid article:hover { transform: none; }
  .hero-ambient img,
  .neural-path,
  .neural-path--slow,
  .neural-node {
    animation: none !important;
  }
  .hero-ambient img { transform: scale(1.04); }
}
.market-note-section {
  border-top: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.market-note-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.market-note-inner h3 { margin-bottom: 0.35rem; }
.market-note-inner p { font-size: 0.86rem; }
.market-note-inner code {
  font-size: 0.78em;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05em 0.35em;
  color: var(--teal-deep);
}

/* ── Blog — Sessi daily updates ─────────────────────────── */
/* Keep every blog surface on the same centered reading axis. */
.blog-hero-inner,
.blog-section-inner,
.blog-home-inner {
  /*
   * Hold the two-thirds reading measure on wide screens, then broaden it
   * continuously below 900px until the padded container becomes the limit.
   */
  width: min(100%, max(66.666vw, calc(900px - 33.334vw)));
  max-width: none;
  margin-inline: auto;
}

.blog-hero {
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter) 1.5rem;
}
.blog-hero h1 { margin-top: 0.35rem; max-width: none; }
/* Dated article hero: kicker on line 1, date on line 2.
   nowrap is only the date token — suffix words (de "landete.") wrap. */
.blog-hero h1.blog-hero-dated {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.02em;
  max-width: 100%;
  font-size: clamp(1.55rem, 5vw, 3.55rem);
}
.blog-hero-dated .blog-hero-kicker,
.blog-hero-dated .blog-hero-suffix {
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}
.blog-hero-dated .blog-hero-dateline {
  display: block;
  max-width: 100%;
}
.blog-hero-dated .blog-hero-date {
  display: inline-block;
  white-space: nowrap;
}
/* Long es/pt-BR dates wrap on "de" before the year; each atom stays nowrap. */
.blog-hero-dated .blog-hero-date.blog-hero-date-wrap {
  display: inline;
  white-space: normal;
  max-width: 100%;
}
.blog-hero-dated .blog-hero-date-atom {
  display: inline-block;
  white-space: nowrap;
}
.blog-hero-lede {
  margin-top: 1rem;
  max-width: min(52rem, 100%);
  font-size: 1.05rem;
}
.blog-hero-lede strong { color: var(--ink); font-weight: 600; }

.blog-section {
  padding: 1.5rem var(--gutter) clamp(4rem, 8vw, 6rem);
}
.blog-home {
  padding: clamp(4rem, 8vw, 6rem) var(--gutter);
  position: relative;
}
.blog-home::before {
  content: '';
  position: absolute;
  inset: 10% 8%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(39, 39, 42, 0.1), transparent 50%),
    radial-gradient(ellipse at 90% 70%, var(--iris-purple), transparent 45%);
  pointer-events: none;
  z-index: 0;
}
.blog-home-inner {
  position: relative;
  z-index: 1;
}
.blog-home .section-heading { margin-bottom: 2rem; }
.blog-home-foot {
  margin-top: 1.5rem;
  font-size: 0.875rem;
}
.blog-home-foot a {
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-list,
.blog-teaser-grid {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}
.blog-list {
  max-width: none;
}

.blog-teaser-grid {
  grid-template-columns: 1fr;
}

.blog-card {
  background: var(--glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-hi);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.blog-card:hover {
  border-color: var(--border-strong, var(--ink-3, #d4d4d8));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.blog-card-link {
  display: grid;
  grid-template-columns: clamp(10rem, 25vw, 17rem) minmax(0, 1fr);
  align-items: start;
}
.blog-card-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -3px;
  border-radius: inherit;
}
.blog-card-image {
  overflow: hidden;
  margin: 0;
  /* Centered in the row, on the card's own surface: the space left by a
     short thumbnail reads as deliberate inset, not a dead band under the
     art (#459 visual review). #427's no-crop contract is untouched. */
  align-self: center;
  background: transparent;
  padding: 0.85rem 0 0.85rem 0.85rem;
}
.blog-card-image img {
  display: block;
  width: 100%;
  height: auto;
  /* Reserve 16:9 before decode. Intrinsic dimensions still win once loaded,
     so canonical persona art is never cropped or stretched. */
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--r-md) - 6px);
  border: 1px solid var(--border);
}
.blog-card-image figcaption { display: none; }
.blog-card--no-image .blog-card-content { grid-column: 1 / -1; }
.blog-card-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 1.15rem 1.25rem;
}
.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 0.55rem;
}
.blog-card-meta time {
  color: var(--teal-deep);
  font-weight: 600;
  white-space: nowrap;
}
.blog-author { color: var(--muted); }
.blog-card h3 {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
  color: var(--ink);
  line-height: 1.3;
}
.blog-card p {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.55;
}
.blog-card-read {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-top: 0.85rem;
  color: var(--teal-deep);
  font-size: 0.8rem;
  font-weight: 650;
}
.blog-card:hover .blog-card-read,
.blog-card-link:focus-visible .blog-card-read { text-decoration: underline; text-underline-offset: 3px; }

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.85rem;
}
.blog-tags .pill {
  font-size: 0.58rem;
  padding: 0.15rem 0.45rem;
}

.blog-post {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  background: var(--glass-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--edge-hi);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3.5vw, 3rem);
}
.blog-post-header h1 {
  font-size: clamp(1.65rem, 3.5vw, 2.25rem);
  margin: 0.35rem 0 0.75rem;
  max-width: none;
}
.blog-post-image {
  overflow: hidden;
  margin-top: 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.55);
}

.blog-post-image img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-post-video {
  margin: 0 0 28px;
}

.blog-post-video-frame {
  /* Round + clip the frame, not the media element. Border-radius on <video>
     makes Chromium report corner hits outside the media (FIGURE instead of
     VIDEO), which feels like native controls "die" on the right/bottom edge
     near volume/fullscreen. Keep controls fully native — no custom bar. */
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(25, 78, 97, 0.18);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(26, 71, 86, 0.12);
  overflow: hidden;
  line-height: 0;
}

.blog-post-video video {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  /* Use the video's intrinsic ratio once metadata loads (no letterboxing);
     16/9 is only the pre-load fallback to avoid layout shift. */
  aspect-ratio: auto 16 / 9;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Explicit hit target: native control chrome must receive pointer events
     (no ancestor/sibling glass layer interception — #204). */
  pointer-events: auto;
  transform: none;
  filter: none;
}

.blog-post-video figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}
.blog-post-image figcaption {
  padding: 0.65rem 0.8rem 0.75rem;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}
.blog-post-body {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: none;
}
.blog-post-body p,
.blog-post-body h2 {
  max-width: none;
}
.blog-post-body p {
  font-size: clamp(1rem, 0.35vw + 0.95rem, 1.12rem);
  line-height: 1.75;
  color: var(--ink-2);
}
.blog-post-footer {
  margin-top: 1.75rem;
}
.blog-back {
  margin: 0;
  font-size: 0.875rem;
}
.blog-back a {
  color: var(--teal-deep);
  font-weight: 600;
}
.blog-back a:hover { text-decoration: underline; text-underline-offset: 2px; }

.blog-article-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1rem;
}
.blog-article-nav-link {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  line-height: 1.35;
}
.blog-article-nav-link--next {
  grid-column: 2;
  text-align: right;
}
.blog-article-nav-label {
  color: var(--teal-deep);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.blog-article-nav-title {
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  font-weight: 650;
}
.blog-article-nav-link:hover {
  border-color: var(--teal);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
}
.blog-article-nav-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.blog-share {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.blog-share-label {
  margin: 0 0 0.65rem;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 650;
}
.blog-share-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.blog-share-button {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.42rem 0.68rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.blog-share-button:hover { border-color: var(--teal-deep); color: var(--teal-deep); }
.blog-share-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.blog-share-button[hidden] { display: none; }
.blog-share-button--primary { background: var(--ink); border-color: var(--ink); color: white; }
.blog-share-button--primary:hover { background: var(--teal-deep); color: white; }
.blog-share-more { position: relative; }
.blog-share-more summary { list-style: none; }
.blog-share-more summary::-webkit-details-marker { display: none; }
.blog-share-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 9rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: white;
  box-shadow: 0 12px 28px rgba(24, 46, 48, 0.14);
}
.blog-share-menu a { display: block; padding: 0.5rem 0.6rem; border-radius: 0.4rem; font-size: 0.8rem; }
.blog-share-menu a:hover { background: var(--teal-wash); color: var(--teal-deep); }
.blog-share-status { color: var(--teal-deep); font-size: 0.76rem; }
.blog-share-hint { max-width: 58ch; margin: 0.65rem 0 0; color: var(--muted); font-size: 0.74rem; line-height: 1.45; }

/* SESI share composer — familiar share-sheet behavior with SESI visual language. */
.blog-share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.45rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(39, 39, 42, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}
.blog-share-trigger:hover { border-color: var(--teal); color: var(--teal-deep); }
.blog-share-trigger:focus-visible,
.blog-share-dialog button:focus-visible,
.blog-share-dialog a:focus-visible,
.blog-share-dialog textarea:focus-visible,
.blog-share-dialog input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.blog-share-trigger-icon { font-size: 1.05rem; }
.blog-share-dialog {
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(42rem, calc(100dvh - 2rem));
  padding: 1.15rem;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 1.35rem;
  background: rgba(249, 253, 252, 0.92);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(18, 40, 43, 0.26), inset 0 1px 0 white;
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
}
.blog-share-dialog::backdrop { background: rgba(13, 29, 31, 0.48); backdrop-filter: blur(5px); }
.blog-share-dialog[open] { animation: blog-share-in .18s ease-out; }
@keyframes blog-share-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.blog-share-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.blog-share-dialog-head .eyebrow { margin-bottom: .15rem; }
.blog-share-dialog-head h2 { font-size: 1.25rem; letter-spacing: -.02em; }
.blog-share-close {
  width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(24,46,48,.06);
  color: var(--ink); font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.blog-share-composer { margin-top: 1rem; padding: .9rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255,255,255,.6); }
.blog-share-composer label { display: block; font-size: .72rem; font-weight: 700; color: var(--muted); }
.blog-share-composer textarea { width: 100%; resize: vertical; min-height: 4.6rem; margin-top: .35rem; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .9rem; line-height: 1.5; }
.blog-share-create { display: inline-flex; align-items: center; gap: .38rem; min-height: 2.2rem; padding: .48rem .78rem; border: 0; border-radius: 999px; background: var(--ink); color: white; font: inherit; font-size: .78rem; font-weight: 650; cursor: pointer; }
.blog-share-create:hover { background: var(--teal-deep); }
.blog-share-destinations { display: flex; gap: .7rem; margin: 1.1rem -.15rem .9rem; padding: .15rem .15rem .55rem; overflow-x: auto; scrollbar-width: thin; }
.blog-share-destination { flex: 0 0 4.4rem; display: grid; justify-items: center; gap: .4rem; border: 0; background: none; color: var(--ink); font: inherit; font-size: .68rem; text-align: center; cursor: pointer; }
.blog-share-mark { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 1px solid rgba(255,255,255,.75); border-radius: 1rem; background: rgba(255,255,255,.64); box-shadow: 0 7px 20px rgba(24,46,48,.09), inset 0 1px 0 white; font-size: 1.2rem; font-weight: 750; }
.blog-share-destination:hover .blog-share-mark { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(39, 39, 42,.14), inset 0 1px 0 white; }
.blog-share-mark--whatsapp { color: #128c4a; }.blog-share-mark--facebook { color: #1877f2; }.blog-share-mark--x { color: #111; }.blog-share-mark--linkedin { color: #0a66c2; }.blog-share-mark--bluesky { color: #1185fe; }.blog-share-mark--reddit { color: #ff4500; }
.blog-share-link-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .45rem; padding: .42rem; border: 1px solid var(--line); border-radius: .85rem; background: rgba(255,255,255,.72); }
.blog-share-link { min-width: 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .78rem; padding: 0 .45rem; }
.blog-share-copy { min-height: 2.15rem; padding: .4rem .75rem; border: 1px solid var(--line); border-radius: .65rem; background: white; color: var(--ink); font: inherit; font-size: .76rem; font-weight: 650; cursor: pointer; }
.blog-share-status { min-height: 1.15rem; margin: .55rem 0 0; }
.blog-share-dialog .blog-share-hint { margin-top: .25rem; }
@media (max-width: 600px) {
  .blog-share-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); padding: 1rem; border-radius: 1.15rem; }
  .blog-share-mark { width: 3rem; height: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-share-dialog[open] { animation: none; }
  .blog-share-destination:hover .blog-share-mark { transform: none; }
}

/* ── Contact dialog + honeypot ──────────────────────────── */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.contact-dialog {
  /* Bottom-right, padded off the corner (not top-left / not centered) */
  position: fixed;
  inset: auto 1.25rem 1.25rem auto;
  margin: 0;
  width: min(28rem, calc(100vw - 2.5rem));
  max-height: min(42rem, calc(100dvh - 2.5rem));
  padding: 1.2rem 1.25rem 1.25rem;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 1.25rem;
  background: rgba(249, 253, 252, 0.94);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12), 0 4px 14px rgba(15, 23, 42, 0.06), inset 0 1px 0 white;
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
}
/* Delicate frosted veil: light page undertone + soft blur — not a dark muddy scrim */
.contact-dialog::backdrop {
  background:
    linear-gradient(
      165deg,
      rgba(247, 249, 252, 0.38) 0%,
      rgba(236, 244, 246, 0.34) 45%,
      rgba(242, 246, 250, 0.36) 100%
    );
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
}
.contact-dialog[open] { animation: contact-dialog-in .2s ease-out; }
@keyframes contact-dialog-in {
  from { opacity: 0; transform: translate(10px, 12px) scale(.985); }
}
.contact-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.contact-dialog-head .eyebrow { margin-bottom: .15rem; }
.contact-dialog-head h2 { font-size: 1.3rem; letter-spacing: -.02em; }
.contact-dialog-close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(24,46,48,.06);
  color: var(--ink);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.contact-dialog-close:hover { background: rgba(24,46,48,.1); }
.contact-dialog-lead {
  margin: .65rem 0 1rem;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.55;
}
.contact-form { display: grid; gap: .75rem; }
.contact-field label {
  display: block;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--muted);
  margin-bottom: .3rem;
}
.contact-field .optional { font-weight: 500; opacity: .8; }
.contact-field input,
.contact-field textarea {
  width: 100%;
  min-height: 2.45rem;
  padding: .55rem .7rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.88);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.contact-field textarea {
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.5;
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: transparent;
}
.contact-actions { display: flex; justify-content: flex-end; margin-top: .15rem; }
.contact-form-status {
  min-height: 1.2rem;
  font-size: .85rem;
  color: var(--teal-deep);
}
.contact-form--sent .contact-form-status { font-weight: 600; }
@media (max-width: 600px) {
  .contact-dialog {
    inset: auto 0.75rem 0.75rem auto;
    width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    padding: 1rem;
    border-radius: 1.1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-dialog[open] { animation: none; }
}

/* ── Contacts admin page ────────────────────────────────── */
.contacts-page .contacts-main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 5.5rem var(--gutter) 3rem;
}
.contacts-inner h1 { margin-bottom: .4rem; }
.contacts-lead { margin-bottom: 1.25rem; }
.contacts-auth {
  display: grid;
  gap: .45rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}
.contacts-auth label {
  font-size: .72rem;
  font-weight: 650;
  color: var(--muted);
}
.contacts-auth-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
}
.contacts-auth input {
  min-height: 2.45rem;
  padding: .5rem .7rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  font: inherit;
}
.contacts-status {
  min-height: 1.25rem;
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: .75rem;
}
.contacts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
  font-size: .85rem;
  color: var(--muted);
}
.contacts-list { display: grid; gap: .75rem; }
.contact-card {
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}
.contact-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .35rem;
}
.contact-card-head h2 {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.01em;
}
.contact-card-head time {
  font-size: .75rem;
  color: var(--muted-2);
  white-space: nowrap;
}
.contact-card-meta {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: .55rem;
}
.contact-card-meta a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }
.contact-card-source {
  display: inline-block;
  margin-left: .35rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: var(--surface-solid);
  font-size: .7rem;
  color: var(--muted);
}
.contact-card-message {
  font-size: .92rem;
  color: var(--ink-2);
  white-space: pre-wrap;
  line-height: 1.55;
}
.contacts-empty { color: var(--muted); font-size: .9rem; }
.button.ghost {
  min-height: 2.1rem;
  padding: .35rem .7rem;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.button.ghost:hover { border-color: var(--teal); color: var(--teal-deep); }
@media (max-width: 600px) {
  .contacts-auth-row { grid-template-columns: 1fr; }
  .contact-card-head { flex-direction: column; align-items: flex-start; gap: .2rem; }
}

.blog-loading,
.blog-empty {
  font-size: 0.9rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.blog-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(39, 39, 42, 0.25);
  border-top-color: var(--teal-deep);
  border-radius: 50%;
  animation: blog-spin 0.7s linear infinite;
  flex: none;
}
@keyframes blog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .blog-spinner { animation: none; border-top-color: var(--teal-deep); opacity: 0.6; }
  .blog-card { transition: none; }
  .blog-card:hover { transform: none; }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split.reverse { direction: ltr; }
  .workflow-grid { grid-template-columns: repeat(2, 1fr); }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .plugin-grid { grid-template-columns: repeat(2, 1fr); }
  .market-grid { grid-template-columns: repeat(2, 1fr); }
  .market-note-inner { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .diff-section .section-heading { text-align: center; }
  .mission-section .section-heading { text-align: center; }
  .mission-statement,
  .mission-slogan { margin-left: auto; margin-right: auto; }
  .mission-pillars { grid-template-columns: 1fr; }
  .blog-teaser-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .site-header nav a:not(.nav-cta) { display: none; }
  .proof-grid { grid-template-columns: 1fr; }
  .mission-pillars { grid-template-columns: 1fr; }
  .workflow-grid { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; }
  .plugin-grid { grid-template-columns: 1fr; }
  .market-grid { grid-template-columns: 1fr; }
  .waitlist-form { flex-direction: column; }
  .waitlist-form--large { flex-direction: column; }
  .cta-inner { padding: 1.75rem 1.25rem; }
  .blog-card-link { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .blog-card-content { padding: 0.9rem; }
  .blog-card h3 { font-size: 0.95rem; }
  .blog-card p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .blog-card .blog-tags { display: none; }
  .blog-article-nav { grid-template-columns: minmax(0, 1fr); }
  .blog-article-nav-link--next { grid-column: 1; }
}
/* Email preferences */
.preferences-page { min-height: 100vh; background: #f5faf9; color: #17312d; }
.preferences-shell { width: min(680px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 72px; }
.preferences-brand { display: inline-block; margin-bottom: 28px; color: inherit; font-weight: 750; letter-spacing: .14em; text-decoration: none; }
.preferences-panel { background: rgba(255,255,255,.88); border: 1px solid #d9e8e4; border-radius: 24px; padding: clamp(24px, 5vw, 42px); box-shadow: 0 18px 60px rgba(32,75,67,.08); }
.preferences-panel h1 { margin: 8px 0 10px; font-size: clamp(2rem, 7vw, 3rem); line-height: 1.05; }
.preferences-intro { max-width: 52ch; color: #58726c; line-height: 1.65; }
.preferences-panel fieldset { margin: 30px 0 0; padding: 0; border: 0; }
.preferences-panel legend { margin-bottom: 12px; font-weight: 700; }
.preferences-panel fieldset > label { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; border-top: 1px solid #e3eeeb; }
.preferences-panel label span { display: grid; gap: 3px; }
.preferences-panel small { color: #6b837d; font-size: .86rem; line-height: 1.4; }
.preferences-panel input[type="checkbox"] { width: 42px; height: 22px; accent-color: #176f60; }
.preferences-radio { justify-content: flex-start !important; }
.preferences-radio input { accent-color: #176f60; }
.preferences-unsubscribe strong { color: #8b3d3d; }
.preferences-pause { display: flex; align-items: center; gap: 12px; padding: 10px 0 16px 32px; }
.preferences-pause input { border: 1px solid #cfe0dc; border-radius: 10px; padding: 8px 10px; background: #fff; color: inherit; }
.preferences-panel button { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; border: 0; border-radius: 999px; padding: 12px 18px; background: #176f60; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.preferences-panel button:disabled { opacity: .7; cursor: wait; }
.preferences-spinner { display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; }
.preferences-loading { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: #58726c; }
.preferences-loading-spinner { width: 16px; height: 16px; border: 2px solid #c7dcd7; border-top-color: #176f60; border-radius: 50%; animation: preferences-spin .8s linear infinite; }
.preferences-retry { margin: 0 0 0 8px !important; padding: 7px 12px !important; background: transparent !important; color: #176f60 !important; border: 1px solid #b9d2cc !important; }
.preferences-panel form.is-busy .preferences-spinner { display: inline-block; animation: preferences-spin .8s linear infinite; }
#preferences-status { min-height: 1.5em; margin-top: 18px; color: #71717a; }
@keyframes preferences-spin { to { transform: rotate(360deg); } }
@media (max-width: 540px) { .preferences-shell { padding-top: 28px; } .preferences-panel fieldset > label { align-items: flex-start; padding: 14px 0; } }
@media (prefers-reduced-motion: reduce) { .preferences-panel form.is-busy .preferences-spinner, .preferences-loading-spinner { animation-duration: 1.6s; } }

/* ── Billing portal ─────────────────────────────────────── */
.billing-page { min-height: 100vh; background: #f5faf9; color: #17312d; }
.billing-shell { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 72px; }
.billing-brand { display: inline-block; margin-bottom: 28px; color: inherit; font-weight: 750; letter-spacing: .14em; text-decoration: none; }
.billing-panel { background: rgba(255,255,255,.88); border: 1px solid #d9e8e4; border-radius: 24px; padding: clamp(24px, 5vw, 42px); box-shadow: 0 18px 60px rgba(32,75,67,.08); }
.billing-panel h1 { margin: 8px 0 10px; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.08; }
.billing-intro, .billing-section-intro { max-width: 56ch; color: #58726c; line-height: 1.65; }
.billing-link { color: #176f60; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.billing-field { display: grid; gap: 6px; margin-top: 18px; font-weight: 600; }
.billing-field input {
  border: 1px solid #cfe0dc; border-radius: 12px; padding: 12px 14px;
  font: inherit; background: #fff; color: inherit;
}
.billing-panel button, .billing-sku button {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  border: 0; border-radius: 999px; padding: 12px 18px;
  background: #176f60; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.billing-panel button:disabled, .billing-sku button:disabled { opacity: .65; cursor: not-allowed; }
.billing-ghost {
  margin-top: 0 !important; background: transparent !important; color: #176f60 !important;
  border: 1px solid #b9d2cc !important; padding: 8px 14px !important;
}
.billing-spinner { display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; }
.billing-panel form.is-busy .billing-spinner { display: inline-block; animation: billing-spin .8s linear infinite; }
#billing-login-status, #billing-buy-status { min-height: 1.4em; margin-top: 14px; color: #71717a; }
.billing-dash-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.billing-email-line { color: #58726c; font-size: .95rem; }
.billing-banner {
  margin: 18px 0 0; padding: 12px 14px; border-radius: 12px;
  background: #e8f6f2; border: 1px solid #c5e4dc; color: #1d4f47;
}
.billing-banner[data-kind="warn"] { background: #fff7e8; border-color: #f0d9a8; color: #6a4b12; }
.billing-banner[data-kind="success"] { background: #e8f6f2; border-color: #e4e4e7; }
.billing-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px;
}
.billing-stat {
  background: #f7fbfa; border: 1px solid #e0eeea; border-radius: 16px; padding: 14px 16px;
}
.billing-stat h2 { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #71717a; margin: 0 0 6px; }
.billing-stat-value { font-size: 1.65rem; font-weight: 750; color: #18181b; margin: 0; line-height: 1.1; }
.billing-stat-hint { margin: 6px 0 0; font-size: .82rem; color: #6b837d; }
.billing-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid #e3eeeb; }
.billing-section h2 { font-size: 1rem; margin: 0 0 8px; }
.billing-plan { color: #3f3f46; margin: 0; }
.billing-sku-list { display: grid; gap: 10px; margin-top: 14px; }
.billing-sku {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; border: 1px solid #e0eeea; border-radius: 14px; background: #fff;
}
.billing-sku strong { display: block; }
.billing-sku small { color: #6b837d; }
.billing-sku button { margin-top: 0; padding: 8px 14px; }
.billing-jobs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.billing-jobs li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid #e8f0ed; font-size: .92rem;
}
.billing-muted { color: #6b837d; }
@keyframes billing-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .billing-stats { grid-template-columns: 1fr; }
  .billing-jobs li { grid-template-columns: 1fr auto; }
  .billing-jobs li span:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .billing-panel form.is-busy .billing-spinner { animation-duration: 1.6s; }
}

/* Account link (device pairing) — reuses billing shell */
.account-pair-result {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px dashed #e4e4e7;
  background: #fafafa;
  text-align: center;
}
.account-pair-label {
  margin: 0 0 8px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #71717a;
}
.account-pair-code {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 750;
  letter-spacing: .18em;
  color: #18181b;
  font-variant-numeric: tabular-nums;
}
.account-steps {
  margin: 12px 0 0;
  padding-left: 1.2em;
  color: #3f3f46;
  line-height: 1.7;
}
.account-steps li { margin: 4px 0; }
#account-pair-status, #account-login-status { min-height: 1.4em; margin-top: 14px; color: #71717a; }
#account-pair-start.is-busy .billing-spinner,
.billing-panel button.is-busy .billing-spinner { display: inline-block; animation: billing-spin .8s linear infinite; }
.billing-jobs li .billing-ghost { padding: 6px 10px; font-size: .82rem; }
/* Compact locale control: discoverable without competing with the primary CTA. */
.lang-picker { display: inline-flex; align-items: center; margin-left: 12px; }
.lang-picker-select { min-height: 30px; max-width: 150px; padding: 3px 24px 3px 8px; color: inherit; background: transparent; border: 1px solid rgba(148, 163, 184, .35); border-radius: 6px; font: inherit; font-size: .8rem; }
.lang-picker-select:focus-visible { outline: 2px solid #27272a; outline-offset: 2px; }
@media (max-width: 1100px) {
  .site-header nav a:nth-of-type(n+3):nth-of-type(-n+8) { display: none; }
}
@media (max-width: 560px) {
  .site-header { height: 72px; }
  .brand-wordmark { height: 22px; }
}

/* ── SESI desktop visual parity (#459) ────────────────────
   Style-only overrides: neutral solid panes, thin separators and restrained
   depth. Structure and responsive layout intentionally remain unchanged. */
.proof-item,
.workflow-grid article,
.capability-grid article,
.plugin-card,
.mission-pillar,
.diff-grid article,
.cta-inner,
.market-card,
.market-note-inner,
.blog-card,
.blog-post,
.blog-share-dialog,
.contact-card,
.preferences-panel,
.billing-panel {
  background: var(--surface);
  background-image: none;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.proof-item:nth-child(2),
.proof-item:nth-child(3),
.proof-item:nth-child(4) {
  background: var(--surface);
}

.proof-item::before {
  background: var(--ink);
  opacity: 0.7;
}

.capability-section::before,
.mission-section::before,
.diff-section::before,
.meet-section::before,
.market-hero::before,
.blog-home::before {
  background: none;
}

.proof-icon,
.proof-item:nth-child(2) .proof-icon,
.proof-item:nth-child(4) .proof-icon,
.cap-icon,
.pill,
.feature-pills li {
  color: var(--ink-2);
  background: var(--surface-solid);
  border-color: var(--border);
  box-shadow: none;
}

.blog-card:hover,
.workflow-grid article:hover,
.capability-grid article:hover,
.plugin-card:hover,
.diff-grid article:hover,
.market-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
}


/* ── #459 style cleanup: hero sits on the flat SESI field ──
   The prismatic full-bleed artwork and its animated overlays are the last
   piece of the old marketing wash. Style-only: the markup stays, the
   decoration does not. */
.hero-ambient,
.hero-neural,
.hero-rings,
.hero.dual-layer::before {
  display: none !important;
}
.hero {
  background: var(--bg, #f6f6f7);
  min-height: auto;
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

/* #459 visual review (non-blocking): the proof cards carried a 2px accent
   spine on the left, so one edge read heavier than the other three. The
   SESI app frames these panels with an even hairline. */
.proof-item::before { display: none; }

/* ── #459 review round 2 — owner corrections ──────────────
   (1) smaller wordmark, (2) mobile hamburger nav, (3) inverted neutral
   theme: white page, light-grey tiles, no decorative photography, no
   green/violet accent tint anywhere. Style-only apart from the nav
   disclosure control, which the owner requested explicitly. */

/* (3a) White page field. Cards and tiles carry the grey. */
html, body { background: #ffffff; }
.hero { background: #ffffff; }
main, section, footer.site-footer { background-color: transparent; }
.site-header { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* (3b) No decorative background photography on any band. */
.dual-layer::before,
.hero.dual-layer::before,
.market-hero::before,
.blog-home::before { display: none !important; }
.dual-layer { background-image: none; }

/* (3c) Inverted surfaces: tiles/cards read light grey on white. */
.glass-panel,
.proof-item,
.workflow-grid article,
.capability-grid article,
.plugin-card,
.mission-pillar,
.diff-grid article,
.cta-inner,
.market-card,
.market-note-inner,
.blog-card,
.blog-post,
.blog-share-dialog,
.contact-card,
.preferences-panel,
.billing-panel {
  background: #f4f4f5 !important;
  background-image: none !important;
  border: 1px solid var(--border);
  box-shadow: none;
}

/* Icon tiles and pills sit one step deeper so they stay legible on grey. */
.proof-icon,
.cap-icon,
.pill,
.feature-pills li,
.feature-pills li:first-child,
.blog-tags .pill {
  color: var(--ink-2) !important;
  background: #e8e8ea !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Persona portraits: neutral ring, never a green halo. */
.brand-avatar,
.brand-avatar--sm,
.meet-portrait,
.persona-portrait {
  box-shadow: 0 0 0 1px var(--border-2) !important;
}

/* (1) Wordmark sized to the header, not competing with it. */
.brand-wordmark { height: 26px; }

/* (2) Hamburger disclosure. */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover { background: #f4f4f5; }
.nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.16s ease, opacity 0.16s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded='true'] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-header nav#primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-4);
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .site-header nav#primary-nav.is-open { display: flex; }
  /* Reinstate the links the old breakpoints hid outright. */
  .site-header nav#primary-nav a { display: block; padding: 0.7rem 0; font-size: 1rem; }
  .site-header nav#primary-nav a:not(.nav-cta) { display: block; }
  .site-header nav#primary-nav .nav-cta { margin: var(--space-3) 0 0; text-align: center; padding: 0.7rem 1rem; }
  .site-header nav#primary-nav .lang-picker { margin: var(--space-3) 0 0; }
  body.nav-open { overflow: hidden; }
}

/* ── #466 narrative and organization redesign ─────────── */
[hidden] { display: none !important; }

/* Header chrome must match the SESI app bar: one compact 58px rail, quiet
   nav type, and a CTA that reads as a control — not a banner. */
@media (min-width: 901px) {
  .site-header { height: 58px; gap: clamp(1rem, 3vw, 2.5rem); }
  .site-header nav#primary-nav { flex-wrap: nowrap; white-space: nowrap; gap: 1px; }
  .site-header nav#primary-nav a {
    font-size: 0.8125rem;
    padding-block: 0.3rem;
    padding-inline: clamp(0.38rem, 0.6vw, 0.6rem);
  }
  .site-header nav#primary-nav .nav-cta {
    font-size: 0.8125rem;
    padding: 0.34rem 0.75rem !important;
  }
  .brand-wordmark { height: 21px; }
  .lang-picker { margin-left: 10px; }
  .lang-picker-select { min-height: 27px; font-size: 0.76rem; }
}

/* Anchored sections must clear the sticky rail instead of sliding under it. */
html { scroll-padding-top: 76px; }
@media (max-width: 900px) { html { scroll-padding-top: 88px; } }

.mission-statement,
.workflow-grid article,
.diff-grid article { box-shadow: none; }

/* Mission pillars — restored as proper SESI cards. The previous pass
   stripped the frame and the inline padding, which left three flat grey
   squares with text jammed against the edge. They are tiles again: shared
   card radius, even breathing room, equal heights, quiet hairline. */
.mission-pillars {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 2.25rem;
}
.mission-pillars .mission-pillar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.4rem 1.35rem 1.45rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2, #fafafa);
  box-shadow: none;
}
.mission-pillars .mission-pillar h3 {
  margin: 0;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.mission-pillars .mission-pillar p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.62;
  color: var(--muted);
}

/* Three narrow columns shred these headings on a phone — stack them.
   This rule sits after the base breakpoints, so it has to restate them. */
@media (max-width: 860px) {
  .mission-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mission-pillars { grid-template-columns: 1fr; gap: 0.75rem; }
  .mission-pillars .mission-pillar { padding: 1.15rem 1.15rem 1.2rem; }
}

/* The split hero headline was inheriting the full-bleed h1 scale inside a
   half-width column, so the copy overflowed the first screen. Size it to
   the column it actually lives in. */
.meet-section .section-copy h1 {
  font-size: clamp(2.1rem, 3.4vw, 3.05rem);
  line-height: 1.1;
  margin-bottom: 1.1rem;
}
.meet-section .section-copy p { font-size: 0.95rem; }
.meet-section { padding-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Portrait was eating half the first screen on a 1440x900 laptop. Give the
   copy the majority of the grid and shrink the frame ~35%. */
@media (min-width: 901px) {
  .meet-section.split {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: clamp(1.5rem, 3.5vw, 3rem);
  }
  .meet-section .persona-frame { width: min(100%, 210px); }
}

.org-band--story {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.org-band--story .org-band-inner {
  display: grid;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.55fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.org-band--story .org-lede { margin-bottom: 0; }
.org-band--story .org-link {
  margin-top: 1.4rem;
  border-bottom: 1px solid currentColor;
}
.org-band--story .org-faces {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.7rem 1rem;
}
.org-band--story .org-faces img { width: 68px; height: 68px; }
.org-band--story .org-role { color: var(--muted); }

.team-main { max-width: 1180px; }
.team-intro { max-width: 850px; margin-bottom: clamp(2.75rem, 6vw, 5rem); }
.team-intro h1 { max-width: 830px; }
.team-principles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.team-principles span { color: var(--muted); font-size: 0.84rem; }
.team-principles strong { color: var(--ink); font-size: 1rem; }
.team-roster {
  display: block;
  border-top: 0;
  padding-top: 0;
}
.team-member--lead {
  display: grid;
  grid-template-columns: 124px minmax(0, 34rem);
  grid-template-rows: auto auto auto;
  column-gap: 1.5rem;
  max-width: none;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border);
}
.team-member--lead .team-avatar {
  grid-row: 1 / -1;
  width: 124px;
  height: 124px;
  margin: 0;
}
.team-member--lead > :not(.team-avatar) { grid-column: 2; }
.team-member--lead h2 { align-self: end; font-size: 1.5rem; }
.team-member--lead .team-role { margin-bottom: 0.7rem; }
.team-group {
  display: grid;
  grid-template-columns: minmax(12rem, 0.65fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  border-bottom: 1px solid var(--border);
}
.team-group:last-child { border-bottom: 0; }
.team-group-heading h2 { max-width: 13ch; font-size: clamp(1.35rem, 2.4vw, 2rem); }
.team-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.75rem);
}
.team-group .team-member {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: repeat(5, auto);
  align-content: start;
  column-gap: 1rem;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--border);
}
.team-group .team-avatar {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 72px;
  height: 72px;
  margin: 0;
}
.team-group .team-member > :not(.team-avatar) { grid-column: 2; }
.team-group .team-role { margin: 0.1rem 0 0.45rem; }
.team-group .team-resp { max-width: 32ch; }
.team-group .team-style,
.team-group .team-reports { display: none; }

@media (max-width: 900px) {
  .org-band--story .org-band-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .org-band--story .org-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .team-group { grid-template-columns: 1fr; gap: 1.75rem; }
  .team-group-heading h2 { max-width: 20ch; }
}

@media (max-width: 600px) {
  .org-band--story .org-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.35rem 0.5rem; }
  .org-band--story .org-faces img { width: 56px; height: 56px; }
  .org-band--story .org-name { font-size: 0.72rem; }
  .org-band--story .org-role { font-size: 0.64rem; }
  .team-main { padding-top: 2.75rem; }
  .team-member--lead { grid-template-columns: 88px minmax(0, 1fr); column-gap: 1rem; }
  .team-member--lead .team-avatar { width: 88px; height: 88px; }
  .team-member--lead h2 { font-size: 1.2rem; }
  .team-group-grid { grid-template-columns: 1fr; gap: 0; }
  .team-group .team-member { grid-template-columns: 64px minmax(0, 1fr); column-gap: 0.9rem; }
  .team-group .team-avatar { width: 64px; height: 64px; }
  .team-group .team-resp { font-size: 0.8rem; }
}