/* ==========================================================================
   Butterfly OS — Website
   One token set, one type scale, one spacing scale. Every section and
   component below reads from these tokens only. Do not add literal colors,
   font sizes or spacings in component rules — extend the tokens instead.

   Layout concept: a calm 12-column page on a cool blue-grey ground; white
   "document" bands alternate with the ground; two ink bands carry the
   moments that matter (human in the loop, closing). The Story Map is the
   one big interactive object on the page.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Color — brand */
  --accent: #2A83B0;
  --accent-strong: #1F6E96;
  --accent-hover: #15536F;
  --accent-tint: #EEF6FA;
  --accent-tint-line: #CFE2EC;
  --on-accent: #FFFFFF;
  --on-accent-2: #E3F1F8;

  /* Color — neutrals (blue-biased, never pure grey) */
  --ink: #0F1B24;
  --ink-2: #16252F;
  --ink-3: #1D2E3A;
  --ink-line: #2B3D49;
  --text: #0F1B24;
  --text-2: #37474F;
  --text-3: #4C5C67;
  --text-4: #5B6B76;
  --on-ink: #FFFFFF;
  --on-ink-2: #C5D2DA;
  --on-ink-3: #93A6B2;
  --on-ink-accent: #8CC3DD;
  --ground: #F3F6F8;
  --surface: #FFFFFF;
  --line: #E0E6EA;
  --line-strong: #C7D4DB;

  /* Color — semantic (same meaning as in the product) */
  --fit-standard: #1E8E5A;
  --fit-config: #2A6FD6;
  --fit-ext: #6A4BD1;
  --fit-standard-on-ink: #6FD3A0;
  --fit-config-on-ink: #8DB6F2;
  --fit-ext-on-ink: #B7A5F2;
  --fit-config-tint: #EDF3FC;
  --fit-config-tint-text: #1D4F9E;
  --fit-ext-tint: #F1EDFC;
  --fit-ext-tint-text: #4B2FA8;
  --gate-open-bg: #FDF4E3;
  --gate-open-line: #F0D9A8;
  --gate-open-text: #7A4A06;
  --gate-ok-bg: #E8F5EE;
  --gate-ok-line: #BFE3CE;
  --gate-ok-text: #155C3B;
  --warn-label: #8A4B16;

  /* Type */
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(2.5rem, 1.35rem + 3.9vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.3vw, 3.25rem);
  --fs-h2-xl: clamp(2.4rem, 1.4rem + 3.2vw, 4rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-h3-lg: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  --fs-statement: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-body: 1.125rem;
  --fs-card: 0.9375rem;
  --fs-small: 0.8125rem;
  --fs-label: 0.8125rem;
  --fs-label-sm: 0.75rem;

  /* Space (8px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-7: 2rem;
  --s-8: 2.5rem;
  --s-9: 3rem;
  --s-10: 4rem;
  --s-11: 5rem;
  --section-y: clamp(4rem, 3rem + 4vw, 7rem);
  --gutter: clamp(1rem, 0.5rem + 3vw, 7.5rem);
  --content: 75rem;

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  --header-h: 5.75rem;
  --focus: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--accent);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { max-width: 100%; }

a { color: var(--accent-strong); text-decoration: none; }
a:hover { color: var(--accent-hover); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}

h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: inherit;
  text-wrap: balance;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -3rem; z-index: 100;
  padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-sm);
}
.skip-link:focus { top: var(--s-4); color: var(--on-ink); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--section-y); }
.band--surface { background: var(--surface); }
.band--ground { background: var(--ground); }
.band--ink { background: var(--ink); color: var(--on-ink); }

.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--s-2); }
.stack-3 { gap: var(--s-3); }
.stack-4 { gap: var(--s-4); }
.stack-5 { gap: var(--s-5); }
.stack-6 { gap: var(--s-6); }
.stack-8 { gap: var(--s-8); }
.stack-10 { gap: var(--s-10); }

.grid { display: grid; gap: var(--s-5); }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-10);
  align-items: end;
}
.split > * { min-width: 0; }
.split--start { align-items: start; }
.split--center { align-items: center; }

@media (max-width: 960px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Type roles
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.band--ink .eyebrow { color: var(--on-ink-accent); }

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4);
}

.h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.035em;
}
.h1 em { font-style: normal; color: var(--accent); }

/* Hero: compact headline — claim, not manifesto */
.hero .h1 {
  font-size: clamp(2rem, 1.2rem + 1.8vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  max-width: 38rem;
  font-weight: 800;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.hero .lead strong { color: var(--text); font-weight: 600; }

.h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.h2--xl { font-size: var(--fs-h2-xl); line-height: 1.02; letter-spacing: -0.035em; }

.text-accent {
  color: var(--accent);
  font-style: normal;
  font-synthesis: none;
}

/* Transformation headline accent — same blue as hero .h1 em */
#transformation .h2 .text-accent,
#pressure-title .text-accent {
  color: var(--accent) !important;
  font-style: normal !important;
  font-synthesis: none;
}

.h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.h3--lg { font-size: var(--fs-h3-lg); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 44rem;
}
.body {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-2);
  max-width: 38rem;
}
.body--strong { color: var(--text); font-weight: 600; }
.band--ink .body, .band--ink .lead { color: var(--on-ink-2); }

.muted { font-size: var(--fs-card); line-height: 1.6; color: var(--text-3); }
.band--ink .muted { color: var(--on-ink-2); }

.section-head { display: flex; flex-direction: column; gap: var(--s-5); max-width: 52rem; }

/* --------------------------------------------------------------------------
   Buttons & links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3rem;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-strong); color: var(--on-accent); }
.btn--dark { background: var(--ink); color: var(--on-ink); }
.btn--dark:hover { background: var(--ink-3); color: var(--on-ink); }
.btn--outline { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--text-4); color: var(--text); }
.btn--outline-ink { background: transparent; color: var(--on-ink); border-color: var(--ink-line); }
.btn--outline-ink:hover { border-color: var(--on-ink-3); color: var(--on-ink); }
.btn--sm { white-space: nowrap; min-height: 2.75rem; padding: var(--s-2) var(--s-5); font-size: 0.9375rem; border-radius: 10px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.btn--calc {
  align-items: center;
  gap: 0.55rem;
  text-align: left;
  padding-block: 0.45rem;
  min-height: 3.25rem;
}
.btn--calc svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.btn__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  line-height: 1.15;
}
.btn__sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-3);
}

.text-link { font-weight: 600; font-size: 1rem; }
.text-link::after { content: " →"; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  max-width: 90rem;
  padding-inline: clamp(0.75rem, 1.2vw, 2rem);
}
.site-header__inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-width: 0;
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--text); flex-shrink: 0; }
.brand:hover { color: var(--text); }
.brand__logo { display: block; width: 13.5rem; height: auto; max-width: min(13.5rem, 46vw); }
.brand__mark { width: 2.25rem; height: auto; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em; white-space: nowrap; }
.brand__name span { color: var(--accent); font-weight: 700; }

.nav { display: flex; flex-wrap: nowrap; gap: 0.7rem; min-width: 0; flex: 1 1 auto; justify-content: center; }
.nav a { color: var(--text-2); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.nav a:hover { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }
.header-actions .btn--sm {
  min-height: 2.5rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
}

.lang {
  display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden;
}
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--s-2) var(--s-3); min-height: 2.25rem; min-width: 2.75rem;
  background: var(--surface); color: var(--text-2);
  font-family: var(--font-mono); font-size: var(--fs-small);
}
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--on-ink); }

.login { color: var(--text-2); font-size: 0.9375rem; font-weight: 500; }

.menu-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface);
  color: var(--text); cursor: pointer;
  align-items: center; justify-content: center;
}

.mobile-nav {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: var(--s-4) var(--s-6);
}
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav a { display: block; padding-block: var(--s-3); color: var(--text); font-weight: 500; font-size: 1.0625rem; }
.mobile-nav .btn-row { margin-top: var(--s-4); }

/* Tablet and down: hamburger. Laptops (1280 / 1366 / 1440) keep full nav + both CTAs. */
@media (max-width: 1200px) {
  .nav,
  .header-actions .lang { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions .btn--outline,
  .header-actions .btn--primary { display: inline-flex; }
}

@media (max-width: 640px) {
  .header-actions .btn { display: none; }
}

@media (min-width: 1600px) {
  .nav { gap: var(--s-5); }
  .nav a { font-size: 0.875rem; }
  .header-actions { gap: var(--s-3); }
  .header-actions .btn--sm {
    min-height: 2.75rem;
    padding: var(--s-2) var(--s-5);
    font-size: 0.9375rem;
  }
}

/* --------------------------------------------------------------------------
   Hero — balanced two-column: copy left, toolchain visual right
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--s-11) var(--s-10);
  background: var(--surface);
  overflow: visible;
}
@media (min-width: 1025px) {
  .hero { padding-block: var(--s-8) var(--s-6); }
}
.hero__stamp {
  position: absolute;
  /* Lower-right of hero visual — below Ergebnis 5, overlapping the caption */
  left: auto;
  right: -0.25rem;
  bottom: 0;
  width: clamp(7.5rem, 11vw, 10rem); /* ~120–160px */
  height: auto;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  opacity: 0.92;
  transform: rotate(-11deg);
  transform-origin: center center;
}
@media (max-width: 1024px) {
  .hero__stamp {
    width: 6.25rem; /* ~100px */
    right: 0.25rem;
    left: auto;
    bottom: -0.1rem;
    transform: rotate(-11deg);
    opacity: 0.88;
  }
}
@media (max-width: 560px) {
  .hero__stamp { display: none; }
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "text media"
    "actions media";
  gap: var(--s-8) var(--s-8);
  align-items: start;
}
@media (min-width: 1025px) {
  .hero__inner { gap: var(--s-5) var(--s-8); }
}
.hero__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 40rem;
  min-width: 0;
}
@media (min-width: 1025px) {
  .hero__text { gap: var(--s-4); }
}
.hero__media {
  position: relative;
  grid-area: media;
  margin: 0;
  /* Room for stamp below Ergebnis 5 so it does not cover the agents row */
  padding-bottom: clamp(8.75rem, 13vw, 11rem);
  overflow: visible;
  min-width: 0;
  align-self: start;
}
.hero__media .eco,
.hero__media .lf {
  margin-inline: 0;
  max-width: none;
}
.hero__actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  min-width: 0;
  max-width: 40rem;
}
@media (min-width: 1025px) {
  .hero__actions { gap: var(--s-4); }
}
@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "text"
      "actions"
      "media";
    gap: var(--s-7);
  }
  .hero__text,
  .hero__actions {
    max-width: none;
  }
  .hero__media .eco,
  .hero__media .lf {
    max-width: 34rem;
    margin-inline: auto;
  }
}

.pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--gate-ok-line);
  background: var(--gate-ok-bg);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gate-ok-text);
  font-weight: 600;
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
}

/* Blueprint input */
.blueprint { display: flex; flex-direction: column; gap: var(--s-3); max-width: 58rem; }
.blueprint__label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-4); }
.blueprint__field {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  transition: border-color 0.15s ease;
}
.blueprint__field:focus-within { border-color: var(--accent); }
.blueprint__field input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: none; background: transparent;
  font: inherit; font-size: 1.0625rem; color: var(--text);
  min-height: 2.75rem;
}
.blueprint__field input::placeholder { color: var(--text-4); }
.blueprint__field input:focus-visible { box-shadow: none; }
.blueprint__field--area {
  align-items: flex-end;
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
}
.blueprint__field textarea {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: 0; outline: none; background: transparent; resize: vertical;
  font: inherit; font-size: 1.0625rem; color: var(--text);
  line-height: 1.45; min-height: 4.5rem; padding-block: var(--s-2);
}
.blueprint__field textarea::placeholder { color: var(--text-4); }
.blueprint__field textarea:focus-visible { box-shadow: none; }
.blueprint__hint { font-size: var(--fs-small); color: var(--text-4); }
.blueprint__error { font-size: var(--fs-small); color: var(--gate-open-text); }
.preview__confidence {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-line);
  font-size: var(--fs-card);
  line-height: 1.5;
  color: var(--text-2);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  min-height: 2.5rem;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font: inherit; font-size: 0.875rem; color: var(--text-2);
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--text); }

@media (max-width: 640px) {
  .blueprint__field { flex-direction: column; align-items: stretch; padding: var(--s-3); }
  .blueprint__field .btn { width: 100%; }
}

/* Preview result */
.preview {
  max-width: 58rem;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--ground);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.preview__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.preview__tag {
  font-family: var(--font-mono); font-size: var(--fs-label-sm); letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--s-1) var(--s-2); border-radius: 6px; background: var(--gate-open-bg); color: var(--gate-open-text);
}
.preview__acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.preview__act { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.preview__act strong { font-size: 0.9375rem; }
.preview__act span { font-size: var(--fs-small); color: var(--text-3); }
.preview__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.preview__meta > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.preview__meta li { font-size: 0.9375rem; display: flex; gap: var(--s-2); align-items: baseline; }
.fitbar { display: flex; height: 0.625rem; border-radius: var(--r-pill); overflow: hidden; }
.fitbar span { display: block; }
.fitbar__legend { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-small); color: var(--text-3); }

.gate-form { display: flex; flex-direction: column; gap: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-5); }
.gate-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: var(--s-3); align-items: end; }
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field label { font-size: var(--fs-small); font-weight: 500; color: var(--text-2); }
.field input {
  min-height: 3rem; padding: var(--s-2) var(--s-4);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); font: inherit; color: var(--text);
}
.field input:focus-visible { border-color: var(--accent); }
.gate-form__done { padding: var(--s-4); border-radius: var(--r-md); background: var(--gate-ok-bg); border: 1px solid var(--gate-ok-line); color: var(--gate-ok-text); font-weight: 500; }

@media (max-width: 820px) {
  .preview__acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview__meta, .gate-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* Trust strip — 2×2; hidden items (pilot kennzahl) must not occupy a cell */
.trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.03em; color: var(--text-3);
}
.trust > [hidden] { display: none !important; }
.trust li { display: inline-flex; align-items: flex-start; gap: var(--s-2); min-width: 0; line-height: 1.35; }
.trust li::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--accent); flex: none; margin-top: 0.35em; }

/* Partner / supplier marquee (hero) */
.partner-flow {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: 0;
  min-width: 0;
}
.partner-flow__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
}
.partner-flow__viewport {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partner-flow__track {
  display: flex;
  width: max-content;
  animation: partner-flow 38s linear infinite;
  will-change: transform;
}
.partner-flow__track:hover { animation-play-state: paused; }
.partner-flow__row {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.partner-flow__row li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 var(--s-5);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-3);
  white-space: nowrap;
}
.partner-flow__row li + li {
  border-left: 1px solid var(--line);
}
.partner-flow__role {
  font-family: var(--font-mono) !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--text-4) !important;
  padding-inline: var(--s-5) var(--s-3) !important;
}
@keyframes partner-flow {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partner-flow__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .partner-flow__track .partner-flow__row[aria-hidden="true"] { display: none; }
  .partner-flow__row {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
  }
  .partner-flow__viewport {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

@media (min-width: 1025px) and (max-height: 820px) {
  .hero { padding-block: var(--s-4) var(--s-3); }
  .hero__inner { gap: var(--s-3) var(--s-8); }
  .hero__text { gap: var(--s-3); }
  .hero__actions { gap: var(--s-2); }
  .hero .btn { min-height: 2.5rem; padding-block: 0.4rem; }
  .hero .btn--calc { min-height: 3rem; padding-block: 0.4rem; }
  .hero .lead { line-height: 1.4; }
  .trust { gap: 0.25rem var(--s-3); padding-top: var(--s-2); font-size: var(--fs-label-sm); }
  .partner-flow { gap: 0.25rem; }
  .partner-flow__row li { height: 1.875rem; }
}

/* --------------------------------------------------------------------------
   Cards (one family, three weights)
   -------------------------------------------------------------------------- */

.card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.card--flat { background: var(--ground); border-color: transparent; }
.band--ground .card--flat { background: var(--surface); border-color: var(--line); }
.card--ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.card--ink .muted { color: var(--on-ink-2); }
.card--ink .label { color: var(--on-ink-accent); }
.card--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.card--accent .label { color: var(--on-accent-2); }
.card--accent .muted { color: var(--on-accent-2); }
.card--lg { padding: var(--s-9); border-radius: var(--r-xl); gap: var(--s-4); }
.card .h3 { font-size: var(--fs-h3); }

.badge {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--s-1) var(--s-2); border-radius: 6px;
}
.badge--accent { background: var(--accent); color: var(--on-accent); }
.badge--ext { background: var(--fit-ext-tint); color: var(--fit-ext-tint-text); }
.badge--config { background: var(--fit-config-tint); color: var(--fit-config-tint-text); }

.card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }

.card--ink .text-link, .card--ink .eyebrow { color: var(--on-ink-accent); }
.card--ink .text-link:hover { color: var(--on-ink); }

/* Pillars: three equal columns, link pinned to the bottom so they align */
.pillar { gap: var(--s-4); }
.pillar .text-link { margin-top: auto; padding-top: var(--s-2); }

.ticks { display: flex; flex-direction: column; gap: var(--s-2); }
.ticks li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: var(--s-2); font-size: var(--fs-card); line-height: 1.5; color: var(--text-2); }
.ticks li::before { content: "✓"; color: var(--accent-strong); font-weight: 600; }
.card--ink .ticks li { color: var(--on-ink-2); }
.card--ink .ticks li::before { color: var(--on-ink-accent); }

/* Partner logos (placeholder until approvals exist) */
.logo-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-8);
  padding: var(--s-6) var(--s-7);
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
}

/* --------------------------------------------------------------------------
   Story Map (the one big interactive object)
   -------------------------------------------------------------------------- */

.storymap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-6); align-items: stretch; }

.storymap__board {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-5);
  min-width: 0;
}
.storymap__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-3); }
.storymap__title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; }

.legend { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-small); color: var(--text-3); }
.dot { display: inline-block; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; margin-right: var(--s-1); vertical-align: 0.05em; }
.dot--Standard { background: var(--fit-standard); }
.dot--Configuration { background: var(--fit-config); }
.dot--Extensibility { background: var(--fit-ext); }

.storymap__scroll { overflow-x: auto; margin-inline: calc(-1 * var(--s-2)); padding: var(--s-2); }
.storymap__cols { display: grid; grid-template-columns: repeat(4, minmax(10.5rem, 1fr)); gap: var(--s-3); }
.storymap__col { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }

.act {
  background: var(--ink); color: var(--on-ink);
  border-radius: 10px; padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 2px;
}
.act__code { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--on-ink-accent); letter-spacing: 0.04em; }
.act__name { font-weight: 600; font-size: 0.9375rem; }

.step {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3);
  min-height: 6rem;
  text-align: left;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit; font-size: 0.9375rem; line-height: 1.4; color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.step:hover { border-color: var(--line-strong); }
.step[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.step__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-4); }
.step__reqs { display: inline-flex; align-items: center; white-space: nowrap; }

.storymap__note { font-size: var(--fs-small); color: var(--text-4); }

.detail {
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-5);
  min-width: 0;
}
.detail__kicker { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-accent); }
.detail__title { font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; line-height: 1.2; }
.detail__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.detail dt { font-size: var(--fs-label-sm); color: var(--on-ink-3); margin-bottom: var(--s-1); }
.detail dd { margin: 0; font-size: 0.9375rem; }
.detail__scope { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.5; }
.fit-Standard { color: var(--fit-standard-on-ink); font-weight: 600; }
.fit-Configuration { color: var(--fit-config-on-ink); font-weight: 600; }
.fit-Extensibility { color: var(--fit-ext-on-ink); font-weight: 600; }
.req-list { display: flex; flex-direction: column; gap: var(--s-2); }
.req-list li {
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  background: var(--ink-3); border: 1px solid var(--ink-line);
  font-size: 0.9375rem; line-height: 1.45;
}
.req-list li.is-empty { color: var(--on-ink-2); }
.gate {
  margin-top: auto;
  padding: var(--s-3) var(--s-4);
  border-radius: 10px;
  font-size: 0.9375rem; font-weight: 600;
  border: 1px solid transparent;
}
.gate--open { background: var(--gate-open-bg); border-color: var(--gate-open-line); color: var(--gate-open-text); }
.gate--ok { background: var(--gate-ok-bg); border-color: var(--gate-ok-line); color: var(--gate-ok-text); }

@media (max-width: 1024px) {
  .storymap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .storymap__board, .detail { padding: var(--s-5); }
}

.compare { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.compare li {
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  padding-block: var(--s-3); border-bottom: 1px solid var(--line); font-size: 0.9375rem; color: var(--text-3);
}
.compare li span:last-child { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-2); }
.compare li.is-ours { color: var(--text); font-weight: 600; }
.compare li.is-ours span:last-child { color: var(--accent-strong); }

/* --------------------------------------------------------------------------
   Chain (strategy → license)
   -------------------------------------------------------------------------- */

.chain { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); counter-reset: none; }
.chain li {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5) var(--s-4);
  border-radius: 14px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-line);
  min-width: 0;
}
.chain li:last-child { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chain__step { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-strong); }
.chain li:last-child .chain__step { color: var(--on-accent-2); }
.chain__name { font-weight: 600; font-size: 1rem; }
.chain__example { font-size: var(--fs-small); line-height: 1.45; color: var(--text-3); }
.chain li:last-child .chain__example { color: var(--on-accent-2); }
.chain li:not(:last-child)::after {
  content: "→"; position: absolute; right: -0.8rem; top: 50%; transform: translateY(-50%);
  color: var(--text-4); font-size: 0.875rem; z-index: 1;
}

@media (max-width: 1100px) {
  .chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chain li:nth-child(3)::after { content: none; }
}
@media (max-width: 640px) {
  .chain { grid-template-columns: minmax(0, 1fr); }
  .chain li::after { content: none !important; }
}

/* --------------------------------------------------------------------------
   Toolchain flow
   -------------------------------------------------------------------------- */

.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.6fr) auto minmax(0, 1fr) auto minmax(0, 0.8fr); align-items: stretch; gap: var(--s-2); }
.flow__arrow { display: flex; align-items: center; justify-content: center; color: var(--text-4); font-size: 1.5rem; padding-inline: var(--s-2); }
.flow .card { padding: var(--s-6); }

@media (max-width: 1100px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow__arrow { transform: rotate(90deg); padding-block: var(--s-1); }
}

/* --------------------------------------------------------------------------
   Paths (Lift & Shift etc.)
   -------------------------------------------------------------------------- */

.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.paths .card { padding: var(--s-6); }
.paths .card .text-link { margin-top: var(--s-1); align-self: flex-start; }
.paths__example {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-3);
}
.paths__example-label {
  display: block;
  margin-bottom: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4);
}
.card--ink .paths__example { color: var(--on-ink-2); }
.card--ink .paths__example-label { color: var(--on-ink-accent); }
@media (max-width: 480px) { .paths { grid-template-columns: minmax(0, 1fr); } }

#transformation,
#phases {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* --------------------------------------------------------------------------
   Human in the loop panels
   -------------------------------------------------------------------------- */

.panel {
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: 18px;
  padding: var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.panel__label { font-family: var(--font-mono); font-size: var(--fs-label-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ink-accent); }
.panel__caption { font-size: var(--fs-card); line-height: 1.55; color: var(--on-ink-2); }

.mock {
  background: var(--surface); color: var(--text);
  border-radius: var(--r-md);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.mock__title { font-weight: 600; font-size: 1rem; }
.mock__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.mock__kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); font-size: var(--fs-small); }
.mock__kv dt { color: var(--text-4); }
.mock__kv dd { margin: 0; font-family: var(--font-mono); font-weight: 500; }
.mock__banner { padding: var(--s-3) var(--s-4); border-radius: 10px; font-size: 0.875rem; border: 1px solid transparent; }
.mock__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.mock__btn {
  min-height: 2.75rem; border-radius: 10px; font: inherit; font-size: 0.875rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
}
.mock__btn--primary { background: #3B3FD9; border-color: #3B3FD9; color: var(--on-accent); }
.status-standard { color: var(--fit-standard); font-weight: 600; font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   Proof
   -------------------------------------------------------------------------- */

.proof { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); }
.quote {
  background: var(--ground);
  border-radius: var(--r-xl);
  padding: var(--s-9);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7);
}
.quote blockquote { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.25; letter-spacing: -0.01em; }
.quote figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 0.9375rem; }
.quote__who { color: var(--gate-open-text); }
.quote__org { color: var(--text-3); }
.quote figcaption .placeholder { background: transparent; padding: 0; color: inherit; }
.card--ink .ticks { margin-top: var(--s-5); }
.metric { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }

.placeholder { background: var(--gate-open-bg); color: var(--gate-open-text); padding: 0 0.2em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.card--ink .placeholder, .band--ink .placeholder { background: rgba(253, 244, 227, 0.14); color: #F5D9A3; }

@media (max-width: 960px) { .proof { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Method steps (a real sequence → numbered)
   -------------------------------------------------------------------------- */

.steps { display: flex; flex-direction: column; gap: var(--s-3); counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.875rem; color: var(--accent-strong); padding-top: 0.15em; }
.steps strong { display: block; font-size: 1.0625rem; font-weight: 600; margin-bottom: 2px; }
.steps span { font-size: var(--fs-card); color: var(--text-3); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.price { font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.02em; }
.plan { gap: var(--s-4); padding: var(--s-8); }
.plan--featured { border: 2px solid var(--accent); }
.plan .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   Closing & footer
   -------------------------------------------------------------------------- */

.closing { text-align: center; align-items: center; }
.closing .statement {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-statement);
  line-height: 1.2; letter-spacing: -0.02em; color: var(--on-ink-3); max-width: 60rem; text-wrap: balance;
}
.closing .statement strong { color: var(--on-ink); font-weight: 700; }
.closing .btn-row { justify-content: center; }

.site-footer { background: #0A1319; color: var(--on-ink-3); padding-block: var(--s-8); font-size: 0.875rem; }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.site-footer a { color: var(--on-ink-2); }
.site-footer a:hover { color: var(--on-ink); }
.site-footer small { font-family: var(--font-mono); font-size: var(--fs-label-sm); }

/* Legal pages (Impressum / Datenschutz) */
.legal { padding-block: var(--s-12) var(--s-16); }
.legal__inner { max-width: 42rem; }
.legal h1 { margin: 0 0 var(--s-8); }
.legal h2 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; margin: var(--s-8) 0 var(--s-3); color: var(--text); }
.legal p, .legal li { font-size: var(--fs-card); line-height: 1.65; color: var(--text-2); }
.legal ul { margin: var(--s-3) 0; padding-left: 1.25rem; }
.legal li { margin-block: 0.25rem; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
.legal a:hover { color: var(--text); }
.legal__note { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); font-size: var(--fs-label-sm); color: var(--text-3); }
.site-header--legal .nav { display: none; }
@media (min-width: 1201px) {
  .site-header--legal .nav { display: flex; gap: 0.7rem; }
  .site-header--legal .nav a { font-size: 0.8125rem; }
}

/* --------------------------------------------------------------------------
   Modal (demo video)
   -------------------------------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--s-4); background: rgba(10, 19, 25, 0.72); }
.modal__box {
  width: min(52rem, 100%);
  background: var(--surface); color: var(--text);
  border-radius: var(--r-xl); padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.modal__frame {
  aspect-ratio: 16 / 9; max-width: 100%;
  border-radius: var(--r-md); background: var(--ink); color: var(--on-ink-2);
  display: grid; place-items: center; text-align: center; padding: var(--s-6);
}
.modal__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.modal--form .modal__box { width: min(28rem, 100%); }
.trial-form { display: flex; flex-direction: column; gap: var(--s-4); }
.trial-form label {
  display: flex; flex-direction: column; gap: var(--s-2);
  font-size: var(--fs-label); font-weight: 600; color: var(--text);
}
.trial-form input {
  width: 100%; min-height: 2.75rem; padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--surface);
}
.trial-form input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.trial-form__opt { font-weight: 400; color: var(--text-4); }
.trial-form__note { margin: 0; font-size: var(--fs-label-sm); color: var(--text-3); }
.trial-form__error { margin: 0; color: #8A4B16; font-size: var(--fs-label); }
.trial-form__thanks { display: flex; flex-direction: column; gap: var(--s-3); }
.trial-form__thanks[hidden], .trial-form[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Motion (one moment: hero entrance). Content is visible at rest.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__text > * { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero__text > *:nth-child(2) { animation-delay: 0.06s; }
  .hero__text > *:nth-child(3) { animation-delay: 0.12s; }
  @keyframes rise { from { transform: translateY(10px); opacity: 0.001; } to { transform: none; opacity: 1; } }
}

/* --------------------------------------------------------------------------
   Phases (SAP Activate — a real sequence, so numbered)
   -------------------------------------------------------------------------- */

.band--tight { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }

/* Five phases as one process chain. The blue deepens phase by phase:
   knowledge accumulates, nothing starts from zero. */
.phases {
  --p1: #A9D3E7; --p2: #6DB1D3; --p3: #23769F; --p4: #185E82; --p5: #0F3B52;
  --p1-tint: #F1F8FC; --p2-tint: #E8F3F9; --p3-tint: #DEEEF6; --p4-tint: #D5E7F1; --p5-tint: #CCDFEA;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2);
}
.phase { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.phase--1 { --c: var(--p1); --c-ink: var(--ink); --tint: var(--p1-tint); }
.phase--2 { --c: var(--p2); --c-ink: var(--ink); --tint: var(--p2-tint); }
.phase--3 { --c: var(--p3); --c-ink: #FFFFFF; --tint: var(--p3-tint); }
.phase--4 { --c: var(--p4); --c-ink: #FFFFFF; --tint: var(--p4-tint); }
.phase--5 { --c: var(--p5); --c-ink: #FFFFFF; --tint: var(--p5-tint); }

.phase__bar {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-4) calc(var(--s-5) + 14px) var(--s-4) var(--s-5);
  background: var(--c); color: var(--c-ink);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.phase__num { font-family: var(--font-mono); font-size: var(--fs-label-sm); letter-spacing: 0.06em; opacity: 0.85; }
.phase__name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.phase__desc { padding: var(--s-4) var(--s-5) var(--s-4); font-size: var(--fs-card); line-height: 1.5; color: var(--text-2); }
.phase__out {
  margin-top: auto;
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: var(--tint);
  flex-grow: 1;
}
.phase__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-hover); font-weight: 500; }
.phase__out ul { display: flex; flex-direction: column; gap: var(--s-2); }
.phase__out li { display: grid; grid-template-columns: 0.875rem minmax(0, 1fr); gap: var(--s-2); font-size: 0.875rem; line-height: 1.45; color: var(--text); }
.phase__out li::before { content: ""; width: 0.5rem; height: 0.5rem; margin-top: 0.4em; border-radius: 2px; background: var(--c); }
.phase--1 .phase__out li::before { background: var(--p2); }

.tag-roadmap {
  display: inline-block; margin-left: var(--s-1);
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; vertical-align: 0.1em;
  background: var(--gate-open-bg); color: var(--gate-open-text); border: 1px solid var(--gate-open-line);
}

.thread {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6);
  padding: var(--s-5) var(--s-6);
  background: var(--ink); color: var(--on-ink); border-radius: var(--r-md);
}
.thread__label { font-family: var(--font-mono); font-size: var(--fs-label-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-accent); }
.thread__chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.thread__chain li { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: 0.9375rem; }
.thread__chain li:not(:last-child)::after { content: "→"; color: var(--on-ink-3); font-weight: 400; }

@media (max-width: 1100px) {
  .phases { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .phase { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .phase__bar { grid-column: 1; grid-row: 1; clip-path: none; }
  .phase__desc { grid-column: 1; grid-row: 2; }
  .phase__out { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 640px) {
  .phase { display: flex; }
  .phase__bar { clip-path: none; }
}

/* --------------------------------------------------------------------------
   Transformation Studio (intro + app-like Studio Lite on the right)
   -------------------------------------------------------------------------- */

.studio {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9);
  padding: var(--s-9);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.studio__intro { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.studio__intro .label { margin-top: var(--s-2); }
.studio__work { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.studio__work .blueprint, .studio__work .preview, .studio__work .lite-bp { max-width: none; }
.studio__work .preview, .studio__work .lite-bp { background: var(--surface); }

.studio__engine-label {
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.04em;
  color: var(--text-4);
}

/* App shell echoing the real Transformation Studio */
.studio-app {
  --studio-accent: #9D94F1;
  --studio-accent-hover: #8A80E8;
  --studio-accent-soft: #EEEDFC;
  --studio-accent-line: #D5D1F8;
  --studio-page: #F4F6FC;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-7) var(--s-6);
  background:
    radial-gradient(ellipse 70% 50% at 90% 0%, rgba(157, 148, 241, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 65% 45% at 0% 100%, rgba(42, 131, 176, 0.12) 0%, transparent 55%),
    var(--studio-page);
  border: 1px solid var(--studio-accent-line);
  border-radius: var(--r-xl);
  box-shadow: 0 12px 40px rgba(79, 70, 140, 0.06);
  min-width: 0;
}
.studio-app__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  max-width: 36rem;
  margin-inline: auto;
}
.studio-app__badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4B45A0;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--studio-accent-line);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.studio-app__ask {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
}
.studio-app__sub {
  margin: 0;
  font-size: var(--fs-card);
  line-height: 1.55;
  color: var(--text-3);
  text-wrap: pretty;
}

.studio-app__question { gap: var(--s-4); }
.studio-app .chips {
  justify-content: center;
  gap: var(--s-2);
}
.studio-app .chip {
  background: #fff;
  border-color: var(--line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 27, 36, 0.04);
}
.studio-app .chip:hover {
  border-color: var(--studio-accent);
  color: #4B45A0;
}

.studio-app__composer {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  box-shadow: 0 14px 36px rgba(79, 70, 140, 0.08);
}
.studio-app__composer:focus-within {
  border-color: var(--studio-accent);
  box-shadow: 0 0 0 4px rgba(157, 148, 241, 0.18), 0 14px 36px rgba(79, 70, 140, 0.08);
}
.studio-app__composer textarea {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  resize: vertical;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
  min-height: 6.5rem;
  padding: var(--s-1) 0;
}
.studio-app__composer textarea::placeholder { color: var(--text-4); font-weight: 500; }
.studio-app__composer textarea:focus-visible { box-shadow: none; }
.studio-app__composer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.studio-app__tip {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-4);
}
.studio-app__tip kbd {
  font-family: var(--font-mono);
  font-size: 0.75em;
  padding: 0.05em 0.35em;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ground);
}
.studio-app__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.25rem;
  border: 0;
  border-radius: 0.85rem;
  background: var(--studio-accent);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.studio-app__submit:hover { background: var(--studio-accent-hover); }
.studio-app__submit:disabled { opacity: 0.65; cursor: wait; }
.studio-app__submit-icon { font-size: 1.05em; line-height: 1; }
.studio-app .blueprint__hint { text-align: center; margin-top: var(--s-1); }

.studio-app__answer {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--studio-accent-line);
  min-width: 0;
}
.studio-app__answer-empty {
  margin: 0;
  text-align: center;
  font-size: var(--fs-card);
  color: var(--text-4);
  line-height: 1.5;
}
.studio-app__answer:has(#studio-exchange:not([hidden])) .studio-app__answer-empty,
.studio-app__answer:has(#blueprint-preview:not([hidden])) .studio-app__answer-empty {
  display: none;
}

.studio-app .exchange {
  gap: var(--s-3);
  padding: var(--s-4);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.studio-app .exchange__user {
  align-self: stretch;
  max-width: none;
  border-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
  background: var(--studio-accent);
  color: #fff;
}
.studio-app .lite-bp {
  border-color: var(--studio-accent-line);
  background: #fff;
}

@media (max-width: 720px) {
  .studio-app { padding: var(--s-5) var(--s-4); }
  .studio-app__composer { padding: var(--s-4); border-radius: 1.25rem; }
  .studio-app__composer-foot { flex-direction: column; align-items: stretch; }
  .studio-app__submit { width: 100%; }
}

/* Intent Exchange */
.exchange {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
}
.exchange__user {
  align-self: flex-end;
  max-width: min(36rem, 92%);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-lg);
  border-top-right-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-card);
  font-weight: 600;
  line-height: 1.45;
}
.exchange__think {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  max-width: min(28rem, 92%);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--ground);
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.exchange__spinner {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 2px solid var(--accent-tint-line);
  border-top-color: var(--accent);
  animation: exchange-spin 0.7s linear infinite;
  flex: 0 0 auto;
}
@keyframes exchange-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .exchange__spinner { animation: none; border-top-color: var(--accent-tint-line); background: var(--accent); }
}

/* Governed lite blueprint */
.lite-bp {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.lite-bp__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.lite-bp__head .h3 { margin: var(--s-1) 0; }
.lite-bp__foot {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-4);
  line-height: 1.45;
}
.lite-bp__badge {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  font-weight: 700;
}
.lite-bp__report {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.lite-bp__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
}
.lite-bp__meta-item {
  padding: var(--s-3) var(--s-4);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.lite-bp__meta-item dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-4);
}
.lite-bp__meta-item dd {
  margin: 0;
  font-size: var(--fs-card);
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.lite-bp__block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.lite-bp__block > p {
  margin: 0;
  padding: var(--s-4);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-card);
  line-height: 1.55;
  color: var(--text-2);
}
.lite-bp__block ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.lite-bp__block ul > li:not(.lite-bp__hit) {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--fs-card);
  line-height: 1.45;
  color: var(--text-2);
}
.lite-bp__block ul > li:not(.lite-bp__hit)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
}
.lite-bp__memory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.lite-bp__hit {
  padding: var(--s-4);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.lite-bp__hit p {
  margin: 0;
  font-size: var(--fs-card);
  line-height: 1.5;
  color: var(--text-2);
}
.lite-bp__hit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.lite-bp__hit-meta span {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  color: var(--text-4);
  padding: var(--s-1) var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.lite-bp__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.lite-bp .gate-form { margin-top: var(--s-2); }

@media (max-width: 820px) {
  .lite-bp__meta,
  .lite-bp__memory,
  .lite-bp__cols { grid-template-columns: minmax(0, 1fr); }
}

.sources { display: flex; flex-direction: column; gap: var(--s-3); }
.sources li {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s-4); align-items: start;
  padding: var(--s-4) var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.sources__key {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
}
.sources strong { display: block; font-size: 1rem; font-weight: 600; margin-bottom: 2px; }
.sources span:not(.sources__key) { font-size: var(--fs-card); line-height: 1.5; color: var(--text-3); }

.studio__out {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5) var(--s-6);
  background: var(--ink); color: var(--on-ink-2); border-radius: var(--r-md);
}
.studio__out .label { color: var(--on-ink-accent); }
.studio__out p { font-size: var(--fs-card); line-height: 1.55; }

@media (max-width: 1024px) {
  .studio { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); padding: var(--s-7); }
}
@media (max-width: 640px) {
  .studio { padding: var(--s-5); }
}

/* --------------------------------------------------------------------------
   Manifest band (follows the Human-in-the-loop strip under the hero)
   -------------------------------------------------------------------------- */

.statement-band { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.statement-band .manifest__intro { text-align: center; align-items: center; }
.statement-band .h2 { color: var(--on-ink); }
.manifest__sub {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--on-ink-2);
  max-width: 36rem;
}

.manifest-points {
  display: grid;
  gap: var(--s-6);
  max-width: 48rem;
  margin-inline: auto;
  padding: 0;
  list-style: none;
  counter-reset: manifest;
}
.manifest-points > li {
  counter-increment: manifest;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  align-items: start;
}
.manifest-points > li::before {
  content: counter(manifest, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--on-ink-accent);
  padding-top: 0.35em;
}
.manifest-points__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--on-ink);
}
.manifest-points__cue {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-accent);
}
.manifest-points__body {
  margin: 0;
  grid-column: 2;
  font-size: var(--fs-card);
  line-height: 1.6;
  color: var(--on-ink-2);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Human-in-the-loop strip — bridge under hero, into Manifest #1
   -------------------------------------------------------------------------- */

.hitl-strip {
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}
.hitl-strip__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
  max-width: 40rem;
  margin-inline: auto;
}
.hitl-strip__lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--on-ink);
  text-wrap: balance;
}
.hitl-strip__lead strong { font-weight: 800; color: var(--on-ink); }
.hitl-strip__body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--on-ink-2);
  text-wrap: balance;
}
.hitl-strip__tag {
  margin: var(--s-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-accent);
}

.statement-band .thread { justify-content: center; }

.manifest__close {
  text-align: center;
  align-items: center;
  max-width: 40rem;
  margin-inline: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-line);
}
.manifest__close-lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--on-ink);
  text-wrap: balance;
}
.manifest__close-body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--on-ink-2);
}
.manifest__close-tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-accent);
}

/* Five outcomes stack (lower-page) */
.deliver {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}
.deliver__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.deliver__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.deliver__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
}
.deliver__n {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-strong);
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-line);
  border-radius: 999px;
  min-width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}
.deliver__list strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.deliver__list p {
  margin: 0.15rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-3);
}
.deliver mark {
  background: var(--accent-tint);
  color: var(--accent-hover);
  font-weight: 600;
  padding: 0 0.15em;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Journey Compare (Platform) — compact flowchart + Signavio table
   -------------------------------------------------------------------------- */

.hero__note {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-3);
  max-width: 38rem;
}

.jc {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  max-width: 52rem;
}
.jc__quote {
  margin: 0;
  padding: var(--s-4) 0 var(--s-4) var(--s-5);
  border-left: 3px solid var(--line-strong);
}
.jc__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: pretty;
}
.jc__aside {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-card);
  color: var(--text-3);
  line-height: 1.5;
}
.jc__sales {
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  text-wrap: pretty;
}
.jc-flow {
  margin: 0;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.jc-flow__cap {
  align-self: flex-start;
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.jc-flow__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  width: 100%;
  max-width: 40rem;
}
.jc-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.jc-node {
  width: 100%;
  max-width: 20rem;
  padding: var(--s-4) var(--s-5);
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-line);
  border-radius: 18px;
  color: var(--accent-hover);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-wrap: pretty;
}
.jc-node--mid { max-width: 24rem; }
.jc-node--wide { max-width: 28rem; }
.jc-arrow {
  color: var(--text-4);
  font-size: 1rem;
  line-height: 1;
}
.jc-table-wrap { overflow-x: auto; }
.jc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-card);
  line-height: 1.45;
}
.jc-table th,
.jc-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.jc-table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4);
  font-weight: 500;
}
.jc-table tbody th {
  font-weight: 600;
  color: var(--text-3);
  width: 22%;
}
.jc-table td:last-child { font-weight: 600; color: var(--text); }
.jc-table tbody tr:last-child th,
.jc-table tbody tr:last-child td { border-bottom: 0; }
.door {
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 52rem;
}
.door .ticks { margin: 0; }

@media (max-width: 640px) {
  .jc-flow__pair { grid-template-columns: minmax(0, 1fr); }
  .jc-node { max-width: none; }
}