/* ==========================================================================
   MOCKUP · layer-ix.com/manufacturing
   Self-contained on purpose so it is easy to iterate on and easy to throw
   away. Tokens and the .net component are lifted from site-v2/styles.css so
   this reads as the same family as layer-nine.ai (same company: layer ix).
   ========================================================================== */

:root {
  --ink: #14140f;
  --ink-soft: #2a2a24;
  --gray: #55554b;
  --muted: #6e6e63;
  --muted-2: #9c9c90;
  --cream: #f4f2ec;
  --cream-2: #eceae2;
  --sage: #d9dec8;
  --sage-bright: #b7c2a0;
  --sage-deep: #4a5238;
  /* NEW: no red exists in design-system/tokens.css, this is my proposal. */
  --signal: #b33a2b;
  --signal-soft: rgba(179, 58, 43, 0.09);
  --line: rgba(20, 20, 15, 0.13);
  --line-strong: rgba(20, 20, 15, 0.22);
  --line-dark: rgba(244, 242, 236, 0.14);
  --invert: #f4f2ec;
  --invert-soft: rgba(244, 242, 236, 0.62);
  --invert-dim: #b3b3a8;
  --font-display: "Funnel Display", "Inter", -apple-system, sans-serif;  /* brand face */
  --font-sans: "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease-swift: cubic-bezier(0.3, 0.85, 0.25, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--sage-bright); color: var(--ink); }

.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.theme-dark { background: var(--ink); color: var(--invert); }

.panel {
  position: relative;
  border-radius: 44px 44px 0 0;
  margin-top: -44px;
  box-shadow: 0 -24px 48px -32px rgba(20, 20, 15, 0.35);
}

.grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- primitives ---------- */
.sq { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--sage-bright); flex: none; }
.sq--ink { background: var(--ink); }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.eyebrow--dark { color: var(--invert-soft); }
.eyebrow--sage { color: var(--sage-deep); }

.display {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.04; font-weight: 600; letter-spacing: -0.028em;
  /* German compounds ("Lieferanten-Nachverfolgung") are long: let them break
     rather than push past .hero's overflow:hidden */
  overflow-wrap: break-word; hyphens: auto;
}
.h2 { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; font-weight: 600; letter-spacing: -0.022em; }
.lead { font-size: 19px; line-height: 1.5; color: var(--gray); }
.lead--invert { color: var(--invert-soft); }
.section__sub { font-size: 18px; color: var(--gray); max-width: 62ch; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500; border: 1px solid transparent;
  transition: transform 0.3s var(--ease-swift), background 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}
.pill:hover { transform: translateY(-2px); }
.pill--lg { padding: 14px 28px; font-size: 15px; }
.pill--cream { background: var(--cream); color: var(--ink); }
.pill--dark { background: var(--ink); color: var(--cream); }
.pill--sage { background: var(--sage); color: var(--ink); }
.pill--ghost-dark { border-color: var(--line-dark); color: var(--invert); }
.pill--ghost-dark:hover { border-color: rgba(244,242,236,0.4); }

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

.mono-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 20, 15, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--invert); }
/* brand lockup: the wordmark and glyph ship as one asset (assets/logo.svg).
   Its artwork is black, and every surface it sits on here is dark, so it is
   inverted the same way the old glyph was. */
.brand__logo { height: 40px; width: auto; display: block; }
.brand__logo--invert { filter: invert(1); }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links > a { font-size: 14px; color: var(--invert-soft); transition: color 0.25s ease; }
.nav__links > a:hover { color: var(--invert); }
.nav__links .pill { color: var(--ink); }

/* language switcher: same component as layer-nine.ai (site-v2/styles.css:223) */
.lang {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
}
.nav__links .lang__opt { font-size: 12px; color: var(--invert-soft); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav__links .lang__opt:hover { color: var(--invert); }
.nav__links .lang__opt.is-active { color: var(--invert); border-bottom-color: var(--sage-bright); }
.lang__sep { color: rgba(244, 242, 236, 0.3); font-size: 11px; }

/* ==========================================================================
   1 · HERO : one-liner + typewriter
   ========================================================================== */
.hero { position: relative; overflow: hidden; padding: 96px 0 120px; }
.hero > .container { position: relative; z-index: 1; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-orb { position: absolute; border-radius: 50%; will-change: transform; }
.hero-orb--1 {
  width: 56vw; height: 56vw; max-width: 860px; max-height: 860px; top: -30%; right: -14%;
  background: radial-gradient(circle at 42% 42%, rgba(183,194,160,0.17) 0%, rgba(183,194,160,0.06) 38%, transparent 68%);
  animation: heroDrift1 44s ease-in-out infinite alternate;
}
.hero-orb--2 {
  width: 64vw; height: 64vw; max-width: 980px; max-height: 980px; bottom: -50%; left: -18%;
  background: radial-gradient(circle at 55% 45%, rgba(74,82,56,0.32) 0%, rgba(74,82,56,0.1) 42%, transparent 70%);
  animation: heroDrift2 56s ease-in-out infinite alternate;
}
@keyframes heroDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(-9vw,7vw) scale(1.18); } }
@keyframes heroDrift2 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(7vw,-6vw) scale(0.94); } }
.hero-bg__grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(244,242,236,0.055) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(110% 100% at 50% 20%, #000 30%, transparent 78%);
  mask-image: radial-gradient(110% 100% at 50% 20%, #000 30%, transparent 78%);
}
.hero-bg__fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,20,15,0.55) 0%, transparent 26%, transparent 70%, #14140f 100%);
}

.hero__stack {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 26px;
}
.hero__stack .display { max-width: 24ch; }
.hero__stack .lead { max-width: 60ch; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* --- typewriter headline ---
   The rotating phrase sits on its own line and reserves its box from a hidden
   copy of the LONGEST item, so the reserved width/height is font-metric exact
   rather than a guessed ch value, and the layout never shifts. */
.type { display: block; }
/* The German headline reads "... die Ihre [phrase] übernehmen", so the typed
   phrase sits mid-sentence there. It cannot reserve the width of the longest
   phrase the way the English one does, because a 770px box mid-sentence takes
   a line of its own and strands "übernehmen" below it. So in German the slot
   shrinks to the phrase being typed and the line reflows as it types. */
[lang="de-CH"] .type,
[lang="de-CH"] .type__slot { display: inline; }
[lang="de-CH"] .type__ghost { display: none; }
[lang="de-CH"] .type__slot > .type__out { position: static; display: inline; }
/* Text is centred INSIDE the reserved box: the box stays fixed (no layout
   shift) while short phrases still read as centred under a centred headline.
   Left-aligning here makes "quoting" hug the left of a 318px box. */
.type__slot { position: relative; display: inline-grid; vertical-align: top; text-align: center; }
.type__slot > * { grid-area: 1 / 1; white-space: nowrap; }
/* The ghosts alone size the cell. The live text + cursor are taken out of flow
   so a long phrase plus the caret cannot widen the box by the caret's 4px. */
.type__slot > .type__out { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.type__ghost { padding-right: 6px; }        /* room for the caret inside the box */
/* Every phrase is present as a hidden ghost, so the grid cell sizes itself to
   the real widest one. nowrap matters: without it the ghost wraps and the
   reservation collapses. Add or reword phrases freely, this stays correct. */
.type__ghost { visibility: hidden; pointer-events: none; }
.type__live { color: var(--sage-bright); white-space: pre; }
.type__cursor {
  display: inline-block; width: 2px; height: 0.82em;
  margin-left: 2px; vertical-align: baseline;
  background: var(--sage-bright);
  animation: caret 1.06s steps(1, end) infinite;
}
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* trust strip */
.trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px;
  margin-top: 40px;
}
.trust span { color: rgba(244,242,236,0.42); display: flex; align-items: center; gap: 9px; }

/* ==========================================================================
   2 · THE SIX WORKFLOWS : index left, detail panel right (hover-selected)
   ========================================================================== */
.section { padding: 104px 0; }
.section--cream { background: var(--cream); }
.section__head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 52px; max-width: 70ch; }

.uc { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; align-items: start; }

/* -- left: the index -- */
.uc__index { display: flex; flex-direction: column; gap: 24px; }
/* A sticky element that does not fit strands its last group off-screen, so
   this column only sticks where there is room for all of it. Without the hook
   questions it is 529px in both languages, plus the 96px offset. */
@media (min-height: 660px) {
  .uc__index { position: sticky; top: 96px; }
}
.uc__group { display: flex; flex-direction: column; gap: 2px; }
.uc__desk {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2);
  padding: 0 0 4px 14px;
}
/* what the category buys you, one line under its name */
.uc__desk-out {
  font-size: 13px; line-height: 1.45; color: var(--muted);
  padding: 0 8px 12px 14px; max-width: 44ch; text-wrap: pretty;
}
.uc__item {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: nowrap;
  width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 500; letter-spacing: -0.014em;
  color: var(--ink); background: none; border: 0;
  padding: 11px 14px; border-left: 2px solid transparent;
  transition: color var(--t, 0.12s) ease, border-color var(--t, 0.12s) ease, background var(--t, 0.12s) ease;
}
.uc__item[aria-selected="true"] {
  color: var(--signal); border-left-color: var(--signal); background: var(--signal-soft);
}
.uc__item:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.uc__item-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 0; }


/* -- right: the detail panel -- */
.uc__panels { display: grid; }          /* all panels share one cell => no height jump */
.uc__panel {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 22px; padding: 40px;
  transition: opacity 0.1s ease;        /* ~100ms: hover-scanning must not feel laggy */
}
.uc__panel[data-active="false"] { visibility: hidden; opacity: 0; pointer-events: none; }
.uc__name { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.uc__body { color: var(--gray); max-width: 62ch; }
.uc__outcome {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: 2px; padding-top: 18px; border-top: 1px solid var(--line);
  width: 100%; font-size: 15px;
}
.uc__outcome b { font-weight: 600; }
.uc__panel-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* autonomy tag: how much of this runs without a person */
.uc__tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 4px 11px; white-space: nowrap;
}
.uc__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.uc__tag--auto    { color: var(--sage-deep); }
.uc__tag--human   { color: var(--signal); }
.uc__tag--support { color: var(--muted); }

/* ---- flow diagram: vertical timeline ----
   Read top-to-bottom, one step per row. The previous version wrapped a
   horizontal chip row, which broke the sequence across 3-4 lines and made
   the arrows ambiguous. Actor lives in its own aligned column so the eye
   can scan "who does what" straight down. */
.flow {
  width: 100%; margin: 0; padding: 6px 0; list-style: none;
  position: relative;
}
.flow__row {
  display: grid; grid-template-columns: 18px 54px 1fr;
  align-items: baseline; gap: 0 10px;
  padding: 7px 0; position: relative;
  font-size: 13.5px; line-height: 1.4;
}
/* the rail: a line through the dot column, joined between consecutive rows */
.flow__row::before {
  content: ""; position: absolute; left: 8px; top: 0; bottom: 0;
  width: 1px; background: var(--line-strong);
}
.flow > .flow__row:first-child::before { top: 50%; }
.flow > .flow__row:last-child::before  { bottom: 50%; }
.flow__row::after {
  content: ""; position: absolute; left: 4.5px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cream-2); border: 2px solid var(--muted-2);
  box-sizing: border-box;
}
.flow__row--agent::after  { border-color: var(--sage-bright); background: var(--sage-bright); }
.flow__row--human::after  { border-color: var(--signal);      background: var(--signal); }
.flow__row--system::after { border-color: var(--muted-2);     background: var(--cream-2); }

.flow__who {
  grid-column: 2;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2);
}
.flow__row--agent .flow__who { color: var(--sage-deep); }
.flow__row--human .flow__who { color: var(--signal); }
.flow__what { grid-column: 3; color: var(--ink); }

/* the one branching step (goods receipt) */
.flow__fork { position: relative; padding: 4px 0 4px 28px; list-style: none; }
/* the rail has to run the whole height of the fork, or it stops mid-branch and
   never reaches the step below: every other row draws top:0/bottom:0 and the
   segments join, but this one used bottom:50% and left a gap. */
.flow__fork::before {
  content: ""; position: absolute; left: 8px; top: 0; bottom: 0;
  width: 1px; background: var(--line-strong);
}
.flow__forklbl {
  position: absolute; left: 26px; top: -3px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2);
}
.flow__branches {
  margin: 12px 0 0; padding: 0; list-style: none;
  border-left: 1px dashed var(--line-strong); padding-left: 14px;
}
.flow__row--branch { padding: 5px 0; }
.flow__row--branch::before { display: none; }
.flow__row--branch::after { left: -19px; }
.flow__what b { font-weight: 600; }
.uc__caret { display: none; }

/* ==========================================================================
   3 · SYSTEM VISUALISATION  (ported from site-v2 hero)
   ========================================================================== */
.viz { position: relative; overflow: hidden; padding: 110px 0 120px; }
.viz > .container { position: relative; z-index: 1; }
.viz__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-bottom: 8px; }
.viz__head .section__sub { color: var(--invert-soft); }

.net { position: relative; aspect-ratio: 560 / 620; max-width: 620px; margin: 0 auto; }
.net__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net__lines path {
  stroke: rgba(244,242,236,0.3); stroke-width: 1.2; stroke-linecap: round;
  stroke-dasharray: 2 7; vector-effect: non-scaling-stroke;
  animation: netDash 9s linear infinite, netFadeIn 0.7s ease backwards;
  animation-delay: 0s, var(--d, 0s);
}
@keyframes netPop {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(0.92); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes netFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes netDash { to { stroke-dashoffset: -63; } }

.net-lbl {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%);
  animation: netFadeIn 0.7s ease backwards; animation-delay: var(--d, 0s);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(244,242,236,0.38); white-space: nowrap;
}
.net-node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%);
  animation: netPop 0.6s var(--ease-swift) backwards; animation-delay: var(--d, 0s);
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px; border-radius: 999px;
  background: rgba(29,29,21,0.85); border: 1px solid rgba(244,242,236,0.16);
  color: var(--invert); font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: transform 0.35s var(--ease-swift), border-color 0.35s ease;
}
/* Opt-in for a node whose label is too long to sit on one line inside the
   diagram, which happens in German ("Qualitätsdokumente & Zeichnungen").
   It cannot be the default: a node near an edge shrinks to the space left of
   that edge, so wrapping would break short labels like "PLM / CAD" too. */
.net-node--wrap { white-space: normal; max-width: 200px; text-wrap: pretty; }
.net-node:hover { transform: translate(-50%, calc(-50% - 3px)); border-color: rgba(244,242,236,0.34); }
.net-node__ic {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
  background: rgba(244,242,236,0.08); flex: none; transition: background 0.35s ease;
}
.net-node:hover .net-node__ic { background: rgba(183,194,160,0.22); }
.net-node__ic svg { width: 16px; height: 16px; display: block; }
.net-node__ic img { width: 15px; height: 15px; object-fit: contain; display: block; }
.net-node__ic--cream { background: var(--cream); }
.net-node--light { background: var(--cream); border-color: var(--cream); color: var(--ink); box-shadow: 0 16px 34px -20px rgba(0,0,0,0.6); }
.net-node--sage { background: var(--sage); border-color: var(--sage); color: var(--ink); }
.net-node--hub {
  padding: 9px 20px 9px 9px; font-size: 14px; font-weight: 600;
  box-shadow: 0 0 70px 6px rgba(183,194,160,0.16), 0 20px 40px -22px rgba(0,0,0,0.6);
  animation: netPop 0.7s var(--ease-swift) backwards, hubPulse 4.5s ease-out infinite;
  animation-delay: var(--d, 0s), 2s;
}
@keyframes hubPulse {
  0%   { box-shadow: 0 0 70px 6px rgba(183,194,160,0.16), 0 20px 40px -22px rgba(0,0,0,0.6), 0 0 0 0 rgba(183,194,160,0.35); }
  55%  { box-shadow: 0 0 70px 6px rgba(183,194,160,0.16), 0 20px 40px -22px rgba(0,0,0,0.6), 0 0 0 14px rgba(183,194,160,0); }
  100% { box-shadow: 0 0 70px 6px rgba(183,194,160,0.16), 0 20px 40px -22px rgba(0,0,0,0.6), 0 0 0 0 rgba(183,194,160,0); }
}

/* ==========================================================================
   4 · HOW WE WORK
   ========================================================================== */
/* Two across, not four: the "You get:" line has to fit on one line, and the
   German values need ~371px of it. Four columns only ever gave 214px. */
.steps { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.step {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 24px 30px; border-radius: 16px;
  background: var(--cream-2); border: 1px solid var(--line);
}
.step__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--sage-deep); }
.step__title { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.step__body { font-size: 15px; color: var(--gray); }
.step__out {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink); display: flex; gap: 8px; align-items: flex-start;
}
/* flex would otherwise let the label shrink and break "You get:" across
   two lines; it stays on one and the value wraps in the column beside it. */
.step__out b { font-weight: 600; white-space: nowrap; flex: none; }

/* ==========================================================================
   5 · BOOK A MEETING
   ========================================================================== */
.section--sage { background: var(--sage); }
.cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.cta__sub { color: var(--sage-deep); }
.form { width: 100%; max-width: 620px; margin-top: 22px; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__field { display: flex; flex-direction: column; gap: 7px; }
.form__label { font-size: 13px; font-weight: 500; }
.form__label em { font-style: normal; color: var(--sage-deep); }
.form__label span { color: rgba(74,82,56,0.6); font-weight: 400; }
.form__input {
  font-family: inherit; font-size: 15px; padding: 12px 14px;
  border-radius: 10px; border: 1px solid rgba(20,20,15,0.18);
  background: rgba(244,242,236,0.7); color: var(--ink);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.form__input:focus { outline: none; border-color: var(--sage-deep); background: var(--cream); }
.form__input--area { resize: vertical; }
.form__hp { position: absolute; left: -9999px; }
.form__status { min-height: 19px; margin: 10px auto 0; text-align: center; font-size: 13.5px; color: var(--sage-deep); }
.form__status.is-error { color: var(--signal); }
.form__input.is-invalid { border-color: var(--signal); }
.cta__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.cta__mail { font-size: 14px; color: var(--sage-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   5 · PROOF
   ========================================================================== */
.proof__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 56px; align-items: start; }
.proof__body { color: var(--invert-soft); max-width: 62ch; margin-top: 6px; }
.proof__stat {
  display: flex; flex-direction: column; gap: 10px;
  padding: 32px; border-radius: 20px;
  background: rgba(244,242,236,0.05); border: 1px solid var(--line-dark);
}
.proof__figure { font-family: var(--font-display); font-size: clamp(44px, 5vw, 64px); line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--sage-bright); }
.proof__figure-sub { font-size: 15px; color: var(--invert-soft); }
.case__blocks { display: grid; gap: 26px; margin-top: 28px; }
.case__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-bright); margin: 0 0 8px; }
.case__body { color: var(--invert-soft); max-width: 62ch; margin: 0; }
.case__side { display: grid; gap: 20px; align-content: start; }
.case__viz { padding: 26px 28px 22px; border-radius: 20px; background: rgba(244,242,236,0.05); border: 1px solid var(--line-dark); }
.case__viz .flow { padding-top: 10px; }
.theme-dark .flow__row::before { background: var(--line-dark); }
.theme-dark .flow__what { color: var(--invert); }
.theme-dark .flow__who { color: var(--invert-dim); }
.theme-dark .flow__row--agent .flow__who { color: var(--sage-bright); }
.theme-dark .flow__row--system::after { background: var(--ink); border-color: var(--invert-dim); }

/* ==========================================================================
   6 · OBJECTIONS
   ========================================================================== */
/* "How we work" sits directly above this, also on cream, also a head over a
   two-up grid of bordered cards. Two of those in a row read as the same
   section twice, so this one is built differently: the heading sits beside
   the content, and the denials are hairline rows instead of cards. */
.obj-split { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; align-items: start; }
.obj-split__head { display: flex; flex-direction: column; gap: 16px; }
.obj-split__title { font-size: clamp(26px, 2.6vw, 34px); }

.objections { display: flex; flex-direction: column; }
.obj {
  display: flex; flex-direction: row; align-items: baseline; gap: 28px;
  padding: 22px 0; background: none; border: 0; border-radius: 0;
  border-top: 1px solid var(--line);
}
.obj:first-child { border-top: 0; padding-top: 4px; }
.obj__title { font-family: var(--font-display); display: flex; align-items: baseline; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.016em; flex: 0 0 44%; }
.obj__x { color: var(--signal); font-size: 15px; flex: none; }
.obj__body { font-size: 15px; color: var(--gray); flex: 1 1 0; }

/* ==========================================================================
   7 · ENGAGEMENT + FINAL CTA
   ========================================================================== */
.engage { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.engage__body { font-size: 18px; color: var(--sage-deep); max-width: 60ch; }
.engage__note { font-size: 14px; color: var(--sage-deep); max-width: 46ch; }

/* ---------- footer ---------- */
.footer { padding: 72px 0 56px; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__tag { color: var(--invert-soft); font-size: 14px; }
.footer__meta { display: flex; align-items: center; gap: 9px; color: rgba(244,242,236,0.4); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* below this the two columns get too narrow for a one-line "You get:" */
@media (max-width: 940px) {
  .steps { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 1024px) {
  .nav__links > a { display: none; }
  .nav__links .pill { display: inline-flex; }

  /* no hover on touch: the index becomes an accordion. JS moves each panel
     node inside its own list item, so there is still one copy of the content. */
  .uc { grid-template-columns: minmax(0,1fr); gap: 0; }
  .uc__index { position: static; }
  .uc__panels:empty { display: none; }
  .uc__item { justify-content: space-between; font-size: 16px; }
  .uc__item-text { flex: 1 1 0; }
  .uc__caret { display: block; flex: none; margin-top: 4px; color: var(--muted); transition: transform 0.2s ease; }
  .uc__item[aria-expanded="true"] .uc__caret { transform: rotate(180deg); color: var(--signal); }
  .uc__panel {
    padding: 22px 16px 26px; border-radius: 0; border: 0;
    border-bottom: 1px solid var(--line); background: transparent;
    gap: 14px;
  }
  .uc__panel[data-active="false"] { display: none; }
  .uc__name { display: none; }             /* the list item already names it */
  .uc__panel-top { gap: 0; }               /* tag still shows, name does not */
  /* narrow: actor label moves above the step text so it never squeezes */
  .flow__row { grid-template-columns: 18px 1fr; row-gap: 1px; padding: 8px 0; font-size: 13px; }
  .flow__who { grid-column: 2; }
  .flow__what { grid-column: 2; }
  .proof__grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .obj-split { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .obj { flex-direction: column; gap: 8px; }
  .obj__title, .obj__body { flex: none; }
}
@media (max-width: 720px) {
  .section { padding: 72px 0; }
  .container { padding: 0 20px; }
  /* brand + switcher + CTA share one row here: tighten it and never wrap */
  .nav__inner { gap: 14px; }
  .nav__links { gap: 12px; }
  .nav__links .pill { white-space: nowrap; }
  .lang { gap: 5px; font-size: 11px; }
  .nav__links .lang__opt { font-size: 11px; }
  .nav__links .pill { font-size: 13px; padding: 8px 13px; }
  .form__row { grid-template-columns: minmax(0,1fr); }
  .net { max-width: 100%; }
  .net-node { font-size: 11px; gap: 7px; padding: 5px 11px 5px 5px; }
  .net-node__ic { width: 22px; height: 22px; }
  .net-node__ic svg, .net-node__ic img { width: 13px; height: 13px; }
  /* the widest ghost is wider than a phone, so stop reserving the box here:
     the phrase wraps and the line shifts while typing, which beats clipping */
  .type__slot { display: block; }
  .type__ghost { display: none; }
  .type__slot > .type__out { position: static; display: block; }
  .type__live { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}