/* ==========================================================================
   Lynk – site.css
   One shared stylesheet for EN + DE. Mobile-first.
   Breakpoints: 640 / 960 / 1280 (plus a few content-driven tweaks).
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* colour */
  --ink: #0F172A;
  --ink-2: #334155;
  --slate: #475569;
  --slate-2: #64748B;
  --border: #E2E8F0;
  --border-2: #CBD5E1;
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --accent: #2563EB;
  --accent-strong: #1D4ED8;
  --accent-hover: #1E40AF;
  --accent-bg: #EFF6FF;
  --accent-border: #BFDBFE;
  --cta: #C2410C;
  --cta-hover: #9A3412;
  --cta-bg: #FFF7ED;
  --cta-border: #FDBA74;
  --success: #15803D;
  --success-ink: #14532D;
  --success-bg: #F0FDF4;
  --success-border: #86EFAC;
  --danger: #DC2626;
  --warm-bg: #F6EFE9;
  --warm-ink: #8A4B2A;
  --stamp: #187A4B;   /* 4.7:1 on --warm-bg (was #1C8A55, 3.8:1) */
  --linkedin: #0A66C2;

  /* type */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: 'Fraunces', Georgia, serif;

  /* Type system: 7 sizes, nothing else. Ratio ≈1.2 on phones, opening to ≈1.25–1.4 on desktop.
     display  h1, price                              36 → 56   700
     h2       section titles                         30 → 44   600
     h3       sub-section titles, big numbers        22 → 28   600
     title    card titles, lead, FAQ questions       18 → 20   600 (title) / 400 (lead)
     body     running text, lists, buttons           16        400 / 600
     small    secondary text, notes, table, nav      14        400 / 600
     micro    labels + eyebrows (mono caps), meta    12        mono 500 / sans 400
     Weights: sans 400 / 600 / 700 (700 = display only), mono 500. */
  --fs-display: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .75vw, 1.75rem);
  --fs-title: clamp(1.125rem, 1.07rem + .25vw, 1.25rem);
  --fs-lead: var(--fs-title);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-display: 700;
  --fw-mono: 500;

  --lh-display: 1.05;
  --lh-h2: 1.1;
  --lh-h3: 1.2;
  --lh-title: 1.35;
  --lh-lead: 1.55;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-micro: 1.4;

  --ls-display: -.035em;
  --ls-h2: -.03em;
  --ls-h3: -.02em;
  --ls-title: -.01em;
  --ls-label: .08em;

  --measure: 65ch;

  /* space & shape */
  --gutter: clamp(20px, 5.5vw, 80px);
  --max: 1280px;
  --section-gap: clamp(64px, 5rem + 2.5vw, 112px);
  --head-gap: clamp(24px, 1.2rem + 1.5vw, 44px);   /* section head -> content */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --shadow-card: 0 18px 40px -24px rgba(15, 23, 42, .35);

  /* motion system v2 */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io: cubic-bezier(.65, 0, .35, 1);
  --e-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-strong); text-decoration: none; transition: color .2s ease, background-color .2s ease, opacity .2s ease; }
a:hover { color: var(--accent-hover); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}
::selection { background: var(--accent-border); }
input::placeholder { color: #7B8798; }
strong, b { font-weight: var(--fw-semibold); }
sup { font-size: var(--fs-micro); line-height: 0; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 12px 16px; border-radius: var(--r-sm);
  background: var(--ink); color: #fff; font-weight: var(--fw-semibold);
}
.skip-link:focus { top: 12px; color: #fff; }

.serif { font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-regular); letter-spacing: -.01em; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--slate); }
.dim { color: var(--slate-2); }

/* [bracket] placeholders – decisions for the founders. Subtle, but easy to find. */
.ph {
  background: rgba(194, 65, 12, .07);
  box-shadow: inset 0 -1px 0 rgba(194, 65, 12, .35);
  border-radius: 3px;
  padding: 0 .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.on-dark .ph { background: rgba(255, 255, 255, .1); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .35); }

/* ---------- 3. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-top: var(--section-gap); }
.section--tight { padding-top: clamp(40px, 3rem + 2vw, 80px); }
.stack { display: flex; flex-direction: column; }
.eyebrow { text-wrap: balance; }
/* ONE label style: eyebrows, kickers, group titles, form steps, small-caps tags */
.eyebrow, .vis-card__kicker, .status-card h3, .faq__group, .int-group__title, .lead-form .step,
.why-row__kicker, .why-limit > b, .why-limits h3, .offer-main .why-offer-kicker, .shortlist__draft b, .why-opt dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-mono);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-strong);
}
/* h2--lg / h2--sm are kept in the markup but no longer change the size: every section title is one step */
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-h2); text-wrap: balance; }
.h2 .soft, .soft { color: var(--slate); }
/* lead = the paragraph right under a section title */
.lead, .body-lg, .hero__sub, .why__ats { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--fw-regular); color: var(--slate); max-width: var(--measure); text-wrap: pretty; }
/* notes / footnotes: always small + muted */
.note, .why-note, .why-foot, .bar-row__sub, .int-tm, .promise-conds, .case-note, .hero__scarcity, .lead-form .privacy, .stepper__label small, .company-line {
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate-2);
}
/* numbers line up */
.stat > b, .price > b, .diff output, .bar-row__value, .stepper output, .cand__score, .case__result, .calc-next b, .why-n { font-variant-numeric: tabular-nums; }

.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--head-gap); }
.section-title { margin-bottom: var(--head-gap); }
.section-head > .lead, .section-head > p { max-width: 440px; }
@media (min-width: 960px) {
  .section-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 48px; }
  .section-head--split > .h2 { max-width: 780px; }
  /* text beside a multi-line H2 sits with its first line, not floating at the bottom */
  .section-head--split > p { align-self: flex-start; flex: 0 1 400px; padding-top: .55em; }
}
.section-head--center { align-items: center; text-align: center; }
.section-head--center > p { max-width: 640px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  border: 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.btn--lg { min-height: 56px; padding: 16px 28px; border-radius: 12px; }
.btn--cta {
  background: var(--cta); color: #fff;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .25s var(--e-out), box-shadow .25s var(--e-out), background-color .2s ease;
}
.btn--cta:hover { color: #fff; background: #B23A0A; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(194, 65, 12, .6); }
.btn--cta:active { transform: scale(.98); }
.btn--cta::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-120%) skewX(-18deg); pointer-events: none;
}
@media (hover: hover) { .btn--cta:hover::after { animation: f-shine-once .9s var(--e-out) both; } }
.btn--cta:focus-visible::after { animation: f-shine-once .9s var(--e-out) both; }
.btn--soft {
  color: var(--accent-strong); background: var(--accent-bg); border: 1px solid var(--accent-border);
  transition: background-color .2s ease, border-color .2s ease, transform .2s var(--e-out);
}
.btn--soft:hover { background: #DBEAFE; border-color: #93C5FD; color: var(--accent-hover); }
.btn--ghost { color: var(--ink); background: var(--surface); border: 1px solid var(--border-2); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-strong); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .65; cursor: progress; }
.link-arrow { font-size: var(--fs-body); line-height: var(--lh-title); color: var(--accent-strong); font-weight: var(--fw-semibold); min-height: 44px; display: inline-flex; align-items: center; }
.text-link { color: var(--slate); text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--ink); }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(248, 250, 252, .96);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); min-height: 44px; }
.brand:hover { color: var(--ink); }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand span { font-size: var(--fs-title); font-weight: var(--fw-display); letter-spacing: .08em; }
.nav { display: none; }
.nav a { color: var(--slate); font-size: var(--fs-small); padding: 10px 2px; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-mono); letter-spacing: .04em;
  color: var(--slate);
}
.lang:hover { background: var(--surface-2); color: var(--ink); }
.lang [aria-current="true"], .lang .is-current { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.lang .sep { color: var(--border-2); margin: 0 4px; }
.header-cta { padding: 0 16px; }
.header-cta .long { display: none; }
.header-cta { white-space: nowrap; }
/* very narrow phones: the header button steps down one size so logo, language switch and CTA fit */
@media (max-width: 399.98px) { .header-cta { font-size: var(--fs-small); padding: 0 12px; } }
@media (max-width: 359.98px) { .site-header .container { gap: 8px; } .header-actions { gap: 2px; } .header-cta { padding: 0 10px; } }
@media (min-width: 480px) {
  .header-cta .long { display: inline; }
  .header-cta .short { display: none; }
}
@media (min-width: 960px) {
  .site-header .container { height: 84px; }
  .brand svg { width: 28px; height: 28px; }
  .header-cta { padding: 12px 20px; }
}
/* inline nav only where it fits on one line next to the CTA */
@media (min-width: 1100px) { .nav { display: flex; gap: clamp(16px, 1.8vw, 32px); } }
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .header-cta .long { display: none; }
  .header-cta .short { display: inline; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  overflow: clip;
  padding-block: clamp(32px, 1.5rem + 3.5vw, 80px) clamp(40px, 2rem + 1.5vw, 56px);
}
.hero__grid { display: grid; gap: 40px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 20px; }
.hero h1 {
  font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.hero h1 .serif { color: var(--cta); }
.hero h1 > span { display: block; }
/* Hero headline: scale with the copy column so the three lines never wrap on desktop */
@media (min-width: 960px) { .hero__copy { container-type: inline-size; } .hero h1 { font-size: min(var(--fs-display), 8.6cqi); } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px;
  background: var(--accent-bg); border: 1px solid var(--accent-border);
  font-size: var(--fs-small); line-height: 1.3;
}
.chip svg { width: 15px; height: 15px; flex: none; }
.chip--warm { background: var(--cta-bg); border-color: var(--cta-border); color: #9A3412; }
.hero__actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.hero__actions .text-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-body); }
.hero__scarcity { text-align: center; }
@media (min-width: 640px) {
  .hero__actions { flex-direction: row; align-items: center; gap: 20px; }
  .hero__scarcity { text-align: left; }
  .hero__copy { gap: 24px; }
  .chips { gap: 10px; }
  .chip { padding: 9px 14px; }
}
@media (min-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 660fr) minmax(0, 564fr); gap: 56px; }
}

/* hero media */
.hero__media { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 24px 48px -32px rgba(15, 23, 42, .4);
}
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; background: #fff; }
.video-badge {
  position: absolute; right: 12px; top: 12px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--border);
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em; color: var(--success);
  line-height: 1.5;
}
.video-pill {
  position: absolute; left: 12px; bottom: 12px; right: 12px; max-width: max-content;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(15, 23, 42, .84); color: #fff;
  font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1.3;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .2s ease, transform .25s var(--e-out);
}
.video-pill:hover { color: #fff; background: rgba(15, 23, 42, .94); transform: translateY(-1px); }
.video-pill .play { flex: none; width: 32px; height: 32px; border-radius: 16px; background: var(--accent); display: grid; place-items: center; }
.video-pill .play svg { width: 14px; height: 14px; }
.video-pill .by { font-weight: var(--fw-regular); color: #CBD5E1; }
@media (min-width: 640px) {
  .video-pill { left: 16px; bottom: 16px; }
  .video-badge { right: 16px; top: 14px; }
}

/* draft card: the "Recruiter approves" demo (styles in section 40) */

/* ---------- 7. Founder strip ---------- */
.founder-strip {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px 20px; border-radius: 18px;
}
.founder-strip__top { display: flex; align-items: center; gap: 14px; }
.founder-strip__img { flex: none; width: 104px; height: 56px; border-radius: 28px; object-fit: cover; background: #3B2A1E; }
.founder-strip__quote { font-size: var(--fs-lead); line-height: var(--lh-lead); margin: 0; max-width: var(--measure); }
.founder-strip__quote .soft { color: var(--slate); }
.founder-strip__meta { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate-2); }
.founder-strip__meta strong { color: var(--ink); }
@media (min-width: 960px) {
  .founder-strip { flex-direction: row; align-items: center; gap: 28px; padding: 28px 32px; }
  .founder-strip__top { display: contents; }
  .founder-strip__img { width: 132px; height: 72px; border-radius: 36px; order: -1; }
  .founder-strip__body { display: flex; flex-direction: column; gap: 6px; }
}

/* ---------- 8. Cards with illustration ("vis") ---------- */
.vis-card { overflow: clip; display: flex; flex-direction: column; }
.vis {
  position: relative;
  height: 140px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.vis-card__body { padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.vis-card__kicker--ok { color: var(--success); }
/* ONE card-title style + ONE card-text style */
.vis-card__title, .pain h3, .feature h3, .side-card h3, .run-costs h3, .promise h3, .territory h3, .proof-ref__title, .why-opt h4, .int-deal__item b, .why-row__key, .why-close__main {
  font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); text-wrap: balance;
}
.vis-card__text, .pain p, .feature p, .side-card p, .promise p, .territory p, .proof-ref__text p + p, .why-row__arg, .why-score__head p, .aiact p, .faq__a, .form-success p, .case blockquote {
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--slate); max-width: var(--measure);
}
@media (min-width: 960px) {
  .vis { height: 170px; }
  .vis-card__body { padding: 28px; gap: 10px; }
}

/* card hover lift (motion v2) */
.lift { transition: transform .35s var(--e-out), box-shadow .35s var(--e-out), border-color .35s var(--e-out); }
@media (hover: hover) {
  .lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--accent-border); }
}

/* pillars */
.pillars { grid-template-columns: 1fr; }
@media (min-width: 640px) and (max-width: 959.98px) {
  .pillars .vis-card { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
  .pillars .vis { height: auto; min-height: 170px; border-bottom: 0; border-right: 1px solid var(--border); }
}
@media (min-width: 960px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* ---------- 10. Problem ---------- */
.split { display: grid; gap: 24px; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 480fr) minmax(0, 736fr); gap: 64px; align-items: start; }
}
.pain { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border); }
.pain li { display: flex; gap: 14px; padding: 20px 0; border-top: 1px solid var(--border); }
.pain .x { flex: 0 0 18px; font-family: var(--font-mono); color: var(--danger); line-height: var(--lh-title); }
.pain p { margin-top: 6px; }
@media (min-width: 960px) { .pain li { gap: 24px; padding: 24px 0; } .pain .x { flex-basis: 24px; } }

/* ---------- 11. How it works ---------- */
.flow { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-mono); flex-wrap: wrap; }
.flow span { padding: 10px; border-radius: var(--r-sm); border: 1px solid currentColor; animation: f-glow 3.2s var(--e-io) infinite; }
.flow i { color: var(--border-2); font-style: normal; }
@media (min-width: 640px) { .flow { gap: 12px; } .flow span { padding: 10px 12px; } }
.steps { grid-template-columns: 1fr; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .steps .vis-card__body { padding: 24px 28px 28px; gap: 8px; } }
.reach { width: 100%; height: 100%; padding: 28px 20px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.reach__row { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: .75rem; }
.toggle { flex: 0 0 50px; height: 26px; border-radius: 13px; position: relative; background: var(--success); }
.toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 10px; background: #fff; transform: translateX(24px); }
.swap { position: relative; flex: 1; height: 16px; min-width: 0; }
.swap > span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.swap .a { color: var(--success); }
.swap .b { display: none; }
.lane { position: relative; height: 20px; }
.lane::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--border); }
.lane__dots { position: absolute; inset: 0; }
.lane__dots i { position: absolute; right: 0; top: 5px; width: 10px; height: 10px; border-radius: 5px; background: var(--cta); }
.lane__dots i + i { display: none; }

/* ---------- 12. Status ---------- */
.status { grid-template-columns: 1fr; }
@media (min-width: 960px) { .status { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.status-card { container-type: inline-size; padding: 28px 22px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 14px; }
.status-card--live { background: var(--success-bg); border: 1px solid var(--success-border); }
.status-card--next { background: var(--surface); border: 1px solid var(--border-2); }
.status-card h3 { display: flex; align-items: center; gap: 10px; }
.status-card--live h3 { color: var(--success); }
.status-card--next h3 { color: var(--accent-strong); }
.pulse { width: 8px; height: 8px; border-radius: 4px; background: var(--success); animation: f-pulse 1.6s ease-out infinite; flex: none; }
.checklist { display: grid; grid-template-columns: 1fr; gap: 10px 24px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-body); line-height: var(--lh-small); }
.checklist li { display: flex; gap: 8px; }
.checklist li::before { content: "✓"; flex: none; color: var(--success); font-weight: var(--fw-semibold); }
.checklist--next { color: var(--slate); }
.checklist--next li::before { content: "◐"; color: var(--accent-strong); font-weight: var(--fw-regular); }
@container (min-width: 460px) { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; } }
@media (min-width: 960px) { .status-card { padding: 32px 36px; } }
/* one list only (everything is live): full-width card, three columns on wide screens */
@media (min-width: 960px) { .status.status--one { grid-template-columns: minmax(0, 1fr); } }
@container (min-width: 820px) { .status--one .checklist { display: block; columns: 3; column-gap: 24px; } .status--one .checklist li { break-inside: avoid; margin-bottom: 12px; } }

.status-more { margin-top: 4px; }
.status-more > summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none;
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--success-ink);
}
.status-more > summary::-webkit-details-marker { display: none; }
.status-more > summary::after {
  content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .35s var(--e-out), margin .35s var(--e-out);
}
.status-more[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.status-more > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.status-more__hide, .status-more[open] .status-more__show { display: none; }
.status-more[open] .status-more__hide { display: inline; }
.status-more > .checklist { margin-top: 10px; }

/* ---------- 13. Customise ---------- */
.custom { display: grid; gap: 28px; }
@media (min-width: 1100px) { .custom { grid-template-columns: minmax(0, 520fr) minmax(0, 696fr); gap: 64px; align-items: start; } }
.custom__copy { display: flex; flex-direction: column; gap: 20px; }
.feature-grid { grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.feature { padding: 22px 20px; border-radius: var(--r-md); }
.feature p { margin-top: 6px; }
.feature--accent { background: var(--accent-bg); border-color: var(--accent-border); }
@media (min-width: 960px) { .feature { padding: 24px; } }

/* ---------- 14. Stats (team section) ---------- */
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 960px) { .stats { gap: 14px; } }
/* declared after .stats on purpose (same specificity) */
.stats--4 { margin-top: var(--head-gap); }
@media (min-width: 960px) { .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: 20px 18px; border-radius: 18px; }
/* ONE big-number style: stats, calculator result, case results */
.stat > b, .diff output, .case__result { display: block; font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-h3); line-height: var(--lh-h3); }
.stat > span { display: block; font-size: var(--fs-small); color: var(--slate-2); line-height: var(--lh-small); margin-top: 4px; }
@media (min-width: 960px) { .stat { padding: 24px; } }

/* ---------- 15. Case studies ---------- */
.cases { grid-template-columns: 1fr; }
@media (min-width: 720px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case { padding: 24px 22px; display: flex; flex-direction: column; gap: 16px; margin: 0; }
@media (min-width: 960px) { .case { padding: 28px; } }
.case__who { display: flex; align-items: center; gap: 12px; }
.case__photo { flex: none; width: 48px; height: 48px; border-radius: 24px; background: var(--surface-2); border: 1px dashed var(--border-2); display: grid; place-items: center; font-size: var(--fs-micro); color: var(--slate-2); }
.case__name { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.case__org { font-size: var(--fs-small); color: var(--slate-2); }
.case__result { color: var(--accent-strong); }
.case__result > span { font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--slate); letter-spacing: 0; }
.case blockquote { margin: 0; color: var(--ink-2); }

/* ---------- 16. Calculator ---------- */
.calc {
  padding: 28px 20px; border-radius: var(--r-xl);
  display: grid; gap: 24px;
}
@media (min-width: 640px) { .calc { padding: 40px; } }
@media (min-width: 1100px) { .calc { grid-template-columns: minmax(0, 480fr) minmax(0, 630fr); gap: 56px; padding: 56px; align-items: center; } }
.calc__inputs { display: flex; flex-direction: column; gap: 20px; }
.stepper-list { display: flex; flex-direction: column; gap: 12px; }
.stepper {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border);
}
.stepper__label { font-size: var(--fs-body); line-height: var(--lh-title); }
.stepper__ctrl { display: flex; align-items: center; gap: 8px; flex: none; }
.stepper button {
  width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--border-2);
  background: var(--surface); color: var(--ink); font-size: var(--fs-title); line-height: 1;
  transition: border-color .2s ease, background-color .2s ease, transform .15s ease;
}
.stepper button:hover { border-color: var(--accent); background: var(--accent-bg); }
.stepper button:active { transform: scale(.95); }
.stepper output { font-family: var(--font-mono); font-size: var(--fs-title); font-weight: var(--fw-mono); min-width: 3.4ch; text-align: center; font-variant-numeric: tabular-nums; }
@media (min-width: 960px) { .stepper { padding: 14px 18px; } .stepper__ctrl { gap: 14px; } }
.calc__results { display: flex; flex-direction: column; gap: 18px; }
.bar-row { display: flex; flex-direction: column; gap: 8px; }
.bar-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-body); line-height: var(--lh-title); }
.bar-row__head > span:first-child { color: var(--slate); }
.bar-row__value { font-family: var(--font-mono); font-size: var(--fs-title); font-weight: var(--fw-mono); line-height: var(--lh-title); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { height: 16px; border-radius: 8px; background: var(--border); overflow: hidden; }
.bar--rent { background: var(--border-2); }
.bar__fill { height: 100%; border-radius: 8px; background: var(--accent); width: 59%; transition: width .5s var(--e-out); }
.diff {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: 14px; background: var(--accent-bg); border: 1px solid var(--accent-border);
}
.diff > span:first-child { font-size: var(--fs-body); }
.diff output { color: var(--success); font-variant-numeric: tabular-nums; }
.diff output.neg { color: var(--ink); }

/* ---------- 18. Offer ---------- */
.offer { display: grid; gap: 16px; }
@media (min-width: 1100px) { .offer { grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; } }
.offer-main {
  container-type: inline-size;
  padding: clamp(24px, 1rem + 2.2vw, 44px); border-radius: var(--r-xl);
  background: var(--accent-bg); border: 2px solid var(--accent);
  display: flex; flex-direction: column; gap: 22px;
}
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.price > b { font-size: var(--fs-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); line-height: var(--lh-display); }
.price > span { font-size: var(--fs-body); color: var(--slate); }
.inclusions { display: grid; grid-template-columns: 1fr; gap: 14px 28px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-body); line-height: var(--lh-small); }
.inclusions li { display: flex; gap: 10px; }
.inclusions li::before { content: "✓"; color: var(--success); font-weight: var(--fw-semibold); flex: none; }
.inclusions li > span > strong { display: block; font-weight: var(--fw-semibold); }
.inclusions li > span > span { color: var(--slate); }
@container (min-width: 560px) { .inclusions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.offer-main .btn { align-self: stretch; }
@media (min-width: 640px) { .offer-main .btn { align-self: flex-start; } }
.offer-side { display: grid; gap: 16px; }
@media (min-width: 768px) and (max-width: 1099.98px) { .offer-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.side-card { padding: 24px 22px; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 960px) { .side-card { padding: 28px; } }
.side-card .link-arrow { margin-top: auto; padding-top: 4px; }

/* beam: conic border light around the offer card */
@property --fa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.f-beam { position: relative; }
.f-beam::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--fa), transparent 0 68%, #93C5FD 80%, #C2410C 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; pointer-events: none;
}
/* one lap when the card first comes into view (main.js initBeam), then the light fades out */
.f-beam.is-lit::before { animation: f-lap 2.6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes f-lap { 0% { --fa: 0deg; opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { --fa: 360deg; opacity: 0; } }

/* ---------- 19. Running costs (inside the offer) ---------- */
.run-costs { margin-top: 16px; padding: 22px 20px; display: grid; gap: 14px; scroll-margin-top: 96px; }
.run-costs__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-body); line-height: var(--lh-small); color: var(--ink-2); }
.run-costs__list li { display: flex; gap: 10px; }
.run-costs__list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .55em; border-radius: 3px; background: var(--slate-2); }
.run-costs__note { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
@media (min-width: 960px) { .run-costs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 28px 32px; align-items: start; } .run-costs__note { padding-top: 34px; } }

/* ---------- 20. Guarantees + territory ---------- */
.promises { grid-template-columns: 1fr; }
@media (min-width: 960px) { .promises { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.promise { padding: clamp(24px, 1rem + 1.2vw, 32px); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 96px; }
.promise:target { box-shadow: 0 0 0 4px var(--success-bg), 0 0 0 6px var(--success); }
.promise p { color: var(--ink-2); }
.promise--green { border: 2px solid var(--success); background: var(--success-bg); }
.promise--plain { border: 1px solid var(--border-2); background: var(--surface); }
.promise--plain p { color: var(--slate); }
.territory { padding: 24px 22px; display: flex; flex-direction: column; gap: 16px; }
.territory__icon { flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-bg); color: var(--accent-strong); display: grid; place-items: center; }
.territory__icon svg { width: 28px; height: 28px; }
.territory p { margin-top: 8px; }
@media (min-width: 640px) { .territory { flex-direction: row; align-items: center; gap: 28px; padding: 36px 40px; } .territory__icon { width: 64px; height: 64px; } }

/* ---------- 21. Founders ---------- */
.founders { display: grid; gap: 32px; }
@media (min-width: 1100px) { .founders { grid-template-columns: minmax(0, 560fr) minmax(0, 664fr); gap: 56px; align-items: center; } }
.founders__media { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.team-photo {
  border-radius: var(--r-xl); overflow: hidden; background: #3B2A1E;
  aspect-ratio: 5 / 3;
  box-shadow: 0 24px 48px -28px rgba(15, 23, 42, .45);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.people { display: grid; grid-template-columns: 1fr; gap: 12px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 480px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.person {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.person img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.person__text { flex: 1; min-width: 0; }
/* name + role pairs (founders, calendar person, shortlist candidates) */
.person__name, .cal-person__name, .cand__who > b, .shortlist__head b { display: block; font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-title); color: var(--ink); }
.person__role, .cal-person__role { font-size: var(--fs-small); color: var(--slate-2); line-height: var(--lh-micro); }
.li-btn {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--linkedin);
  display: grid; place-items: center;
  transition: background-color .2s var(--e-out), transform .2s var(--e-out), box-shadow .2s var(--e-out);
}
.li-btn svg { width: 18px; height: 18px; }
.li-btn:hover { background: #004182; transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(10, 102, 194, .6); }
.founders__copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.company-line a { color: var(--slate); }
.docs { display: flex; flex-wrap: wrap; gap: 10px; }
.docs .btn { justify-content: flex-start; text-align: left; }
.docs .btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 639.98px) { .docs .btn { width: 100%; } }

/* ---------- 22. AI Act ---------- */
.aiact { padding: 28px 22px; border-radius: 22px; display: grid; gap: 16px; }
@media (min-width: 960px) { .aiact { grid-template-columns: minmax(0, 420fr) minmax(0, 764fr); gap: 44px; align-items: center; padding: 36px 44px; } }
.aiact h2 { margin-top: 10px; }
/* ONE sub-section title style (h3 step) */
.aiact h2, .why-row__title, .why-score__head h3, .form-success h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-h3); text-wrap: balance; }

/* ---------- 23. FAQ (questions only, answers on demand) ---------- */
.faq-h { margin-bottom: var(--head-gap); }
.faq { max-width: 780px; display: flex; flex-direction: column; gap: 36px; }
.faq__group { margin: 0 0 6px; color: var(--slate-2); }
.faq__item { border-top: 1px solid var(--border); scroll-margin-top: 96px; }
.faq__set > .faq__item:last-child { border-bottom: 1px solid var(--border); }
.faq__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 48px; padding: 16px 0; cursor: pointer; list-style: none;
  font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); color: var(--ink);
  transition: color .2s ease;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin: -5px 6px 0 0;
  border-right: 2px solid var(--slate-2); border-bottom: 2px solid var(--slate-2);
  transform: rotate(45deg); transition: transform .35s var(--e-out), margin .35s var(--e-out), border-color .2s ease;
}
.faq__item > summary:hover { color: var(--accent-strong); }
.faq__item > summary:hover::after { border-color: var(--accent-strong); }
.faq__item[open] > summary::after { transform: rotate(-135deg); margin-top: 5px; }
.faq__a { padding: 0 32px 20px 0; }
.faq__item[open] > .faq__a { animation: f-faq .4s var(--e-out); }
.faq__a a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
@keyframes f-faq { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) { .faq__item > summary { padding: 18px 0; } }
.faq__item > summary { text-wrap: pretty; }
@media (min-width: 1100px) {
  .faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 780px); gap: 64px; align-items: start; }
  .faq-layout > .faq-h { position: sticky; top: 120px; margin-bottom: 0; }
}

/* ---------- 24. Sample shortlist ---------- */
.sample { display: grid; gap: 24px; }
@media (min-width: 1100px) { .sample { grid-template-columns: 400px minmax(0, 1fr); gap: 48px; align-items: start; } }
.sample__copy { display: flex; flex-direction: column; gap: 16px; }
.shortlist { overflow: hidden; box-shadow: 0 12px 32px rgba(15, 23, 42, .06); }
.shortlist__head { padding: 16px; display: flex; flex-direction: column; gap: 4px; background: var(--bg); }
.shortlist__head > span { font-size: var(--fs-small); color: var(--slate-2); }
@media (min-width: 640px) { .shortlist__head { padding: 16px 20px; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; } .shortlist__head > span { flex: none; } }
.shortlist ol { list-style: none; margin: 0; padding: 0; }
.cand {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av who score" "fac fac fac";
  gap: 8px 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--border);
}
.cand__av { grid-area: av; width: 40px; height: 40px; border-radius: 20px; background: var(--accent-bg); color: var(--accent-strong); display: grid; place-items: center; font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.cand__who { grid-area: who; min-width: 0; }
.cand__who > span { font-size: var(--fs-small); color: var(--slate-2); }
.cand__score { grid-area: score; font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-h3); color: var(--accent-strong); }
.cand__factors { grid-area: fac; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
@media (min-width: 768px) {
  .cand { grid-template-columns: 44px minmax(0, 1.6fr) 60px minmax(0, 2fr); grid-template-areas: "av who score fac"; gap: 16px; padding: 14px 20px; }
  .cand__av { width: 36px; height: 36px; border-radius: 18px; }
}
.shortlist__draft { padding: 16px; border-top: 1px solid var(--border); background: var(--cta-bg); }
.shortlist__draft b { color: #9A3412; display: block; }
.shortlist__draft p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); margin-top: 6px; }
@media (min-width: 640px) { .shortlist__draft { padding: 18px 20px; } }

/* ---------- 25. Apply / lead form ---------- */
.apply { padding: 28px 20px; border-radius: 28px; display: grid; gap: 28px; }
@media (min-width: 640px) { .apply { padding: 40px; } }
@media (min-width: 1100px) { .apply { grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; padding: 64px; align-items: center; } }
.apply__copy { display: flex; flex-direction: column; gap: 20px; }
.apply__copy h2 .serif { color: var(--cta); }
.apply__list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-body); color: var(--slate); }
.apply__list li { display: flex; gap: 8px; }
.apply__list li::before { content: "✓"; flex: none; }


.form-card { padding: 22px 18px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--border-2); }
@media (min-width: 640px) { .form-card { padding: 28px; } }
.lead-form { display: flex; flex-direction: column; gap: 14px; }
.lead-form .step + .step, .lead-form .step--2 { margin-top: 6px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-small); color: var(--slate); }
.field label { line-height: var(--lh-micro); }
.field .opt { color: var(--slate-2); }
.field input {
  height: 48px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--border-2);
  background: var(--surface); color: var(--ink); font-size: var(--fs-body); width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:hover { border-color: #94A3B8; }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.field input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.field__error { font-size: var(--fs-small); color: #B91C1C; min-height: 0; }
.field__error:empty { display: none; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.cal-btn { width: 100%; justify-content: center; }
.cal-btn svg { width: 18px; height: 18px; flex: none; }
.lead-form .submit { width: 100%; min-height: 54px; }
.lead-form .privacy a { color: var(--slate); text-decoration: underline; text-underline-offset: 2px; }
.form-status { font-size: var(--fs-small); line-height: var(--lh-small); border-radius: 12px; }
.form-status:empty { display: none; }
.form-status.is-error { padding: 12px 14px; background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.form-status.is-error a { color: #991B1B; text-decoration: underline; }
.form-success { display: none; flex-direction: column; gap: 12px; text-align: left; }
.form-success__icon { width: 48px; height: 48px; border-radius: 24px; background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); display: grid; place-items: center; }
.form-success__icon svg { width: 22px; height: 22px; }
.form-card.is-done .lead-form { display: none; }
.form-card.is-done .form-success { display: flex; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .8s linear infinite; display: none; }
.is-loading .spinner { display: inline-block; }

/* ---------- 26. Footer ---------- */
.site-footer { padding-block: clamp(40px, 2rem + 2vw, 56px) clamp(40px, 2rem + 1vw, 48px); font-size: var(--fs-small); color: var(--slate-2); line-height: var(--lh-small); }
.site-footer .container { display: flex; flex-direction: column; gap: 14px; }
.site-footer nav { display: flex; flex-wrap: wrap; column-gap: 20px; }
.site-footer a, .site-footer button.linkish { color: var(--slate-2); min-height: 44px; display: inline-flex; align-items: center; }
.site-footer a:hover, .site-footer button.linkish:hover { color: var(--ink); }
button.linkish { background: none; border: 0; padding: 0; font-size: inherit; cursor: pointer; }
@media (min-width: 960px) { .site-footer .container { flex-direction: row; justify-content: space-between; align-items: center; } .site-footer nav { column-gap: 28px; } }

/* ---------- 27. Consent banner ---------- */
.consent {
  position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px;
  max-width: 460px; margin-left: auto;
  padding: 20px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border-2);
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .35);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate);
}
.consent[hidden] { display: none; }
/* first visit: an inline <head> script adds .cp when no choice is stored, so the banner paints with the page instead of after main.js */
.cp .consent[hidden] { display: block; }
.consent h2 { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); margin-bottom: 6px; }
.consent p a { color: var(--accent-strong); text-decoration: underline; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.consent__actions .btn { flex: 1 1 auto; padding: 10px 14px; }
.consent__primary { background: var(--ink); color: #fff; }
.consent__primary:hover { background: #1E293B; color: #fff; }
.consent__prefs { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
.consent__prefs[hidden] { display: none; }
.pref { display: flex; align-items: flex-start; gap: 12px; }
.pref input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.pref label { cursor: pointer; }
.pref b { display: block; color: var(--ink); font-weight: var(--fw-semibold); }
@media (min-width: 640px) { .consent { right: 20px; bottom: 20px; left: auto; width: 440px; } }

/* ---------- 28. Legal pages ---------- */
.draft-banner {
  background: #FEF3C7; border-bottom: 1px solid #FCD34D; color: #78350F;
  font-size: var(--fs-small); line-height: var(--lh-small); padding: 10px 0;
}
.draft-banner strong { font-weight: var(--fw-semibold); }
.legal { padding-block: clamp(40px, 2rem + 3vw, 80px); }
.legal .container { max-width: calc(820px + 2 * var(--gutter)); }
.legal h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-h2); margin-bottom: 12px; }
.legal .updated { color: var(--slate-2); font-size: var(--fs-small); margin-bottom: 32px; }
.legal h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-h3); margin: 40px 0 12px; }
.legal h3 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); margin: 24px 0 8px; }
.legal p, .legal li, .legal dd { color: var(--ink-2); line-height: var(--lh-body); max-width: var(--measure); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 1.25em; margin: 8px 0; }
.legal li + li { margin-top: 4px; }
.legal a { text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.legal dl { display: grid; grid-template-columns: 1fr; gap: 2px 24px; margin: 8px 0; }
.legal dt { font-weight: var(--fw-semibold); color: var(--ink); margin-top: 10px; }
@media (min-width: 640px) { .legal dl { grid-template-columns: 220px minmax(0, 1fr); } .legal dt { margin-top: 0; } .legal dd { margin: 0; } }
.legal .card { padding: 24px; margin-top: 16px; }

/* ---------- 29. Keyframes (motion system v2) ---------- */
@keyframes f-in { 0% { opacity: 0; transform: translateY(16px); filter: blur(8px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes f-rv { 0% { opacity: 0; transform: translateY(28px); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes f-pulse { 0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, .45); } 100% { box-shadow: 0 0 0 10px rgba(21, 128, 61, 0); } }
@keyframes f-glow { 0%, 100% { opacity: .45; transform: scale(1); } 12%, 30% { opacity: 1; transform: scale(1.08); } }
@keyframes f-aura { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(40px, -24px, 0) scale(1.12); } 100% { transform: translate3d(0, 0, 0) scale(1); } }
@keyframes f-shine-once { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes f-shine { 0%, 72% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes f-spin { to { --fa: 360deg; } }
@keyframes f-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

.f-aura { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none; animation: f-aura 18s var(--e-io) infinite; }
.f-aura--a { width: min(520px, 90vw); height: 420px; right: -80px; top: -60px; background: radial-gradient(closest-side, rgba(37, 99, 235, .18), transparent); }
.f-aura--b { width: min(420px, 80vw); height: 360px; left: -120px; bottom: -80px; background: radial-gradient(closest-side, rgba(194, 65, 12, .10), transparent); animation-delay: -9s; }

/* hero stagger blur-in */
.hero__copy > * { animation: f-in .9s var(--e-out) both; }
.hero__copy > :nth-child(2) { animation-delay: .08s; }
.hero__copy > :nth-child(3) { animation-delay: .16s; }
.hero__copy > :nth-child(4) { animation-delay: .24s; }
.hero__copy > :nth-child(5) { animation-delay: .32s; }
.hero__copy > :nth-child(6) { animation-delay: .40s; }
.hero__copy > :nth-child(7) { animation-delay: .48s; }
.hero__media { animation: f-in 1.1s var(--e-out) .3s both; }

/* scroll progress bar + scroll-driven reveals (progressive enhancement).
   .rv is only ever put on elements that have NO overflow:hidden/auto ancestor
   (view() would bind to that inner box and the element would stay invisible). */
.f-progress { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 50; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #2563EB, #C2410C); display: none; pointer-events: none; }
@supports (animation-timeline: view()) {
  .rv { animation: f-rv linear both; animation-timeline: view(); animation-range: entry 0% entry 260px; }
  .rv-group > * { animation: f-rv linear both; animation-timeline: view(); animation-range: entry 0% entry 260px; }
  .rv-group > :nth-child(2) { animation-range: entry 40px entry 300px; }
  .rv-group > :nth-child(3) { animation-range: entry 80px entry 340px; }
  .rv-group > :nth-child(4) { animation-range: entry 120px entry 380px; }
  .f-progress { display: block; animation: f-progress linear both; animation-timeline: scroll(root); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .f-aura, .f-progress, .btn--cta::after, .f-beam::before { display: none; }
}

@media print {
  .site-header, .consent, .f-progress, .video-frame, .f-aura { display: none !important; }
  body { background: #fff; }
}

/* founder strip: meta line sits next to the photo on mobile, under the quote on desktop */
.founder-strip__meta--d { display: none; }
@media (min-width: 960px) {
  .founder-strip__meta--m { display: none; }
  .founder-strip__meta--d { display: block; }
}
.foot-phone { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- 30. Five reasons (#gruende / #why-own) ---------- */
/* reason number badge – used in the section, hero chips, tags and the pricing card */
.why-n {
  display: inline-grid; place-items: center; flex: none;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-mono); font-style: normal; line-height: 1; letter-spacing: 0;
  vertical-align: .12em;
}
.why-n--tag { margin-right: .35em; }
a.chip { color: var(--ink); transition: border-color .2s ease, background-color .2s ease, transform .25s var(--e-out); }
a.chip:hover { color: var(--ink); background: #DBEAFE; border-color: #93C5FD; transform: translateY(-1px); }
.chip .why-n { width: 1.7em; height: 1.7em; }

/* hero: the five reasons as a quiet numbered list (no filled pills competing with the CTA).
   Phones: one column. From 640px: two columns filled top-to-bottom (3 + 2), so no lone pill. */
.hero .chips { display: grid; gap: 0 28px; }
@media (min-width: 640px) { .hero .chips { grid-template-columns: repeat(2, auto); grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: start; } }
.hero a.chip {
  min-height: 44px; padding: 0; gap: 10px; border: 0; border-radius: 6px; background: none;
  font-size: var(--fs-small); line-height: var(--lh-title); color: var(--ink-2);
}
.hero a.chip:hover { background: none; color: var(--ink); transform: none; text-decoration: underline; text-decoration-color: var(--accent-border); text-underline-offset: 4px; }
.hero .chip .why-n { width: 1.75em; height: 1.75em; }

.why__head { display: grid; gap: 18px; margin-bottom: var(--head-gap); }
.why__head .h2 { max-width: 800px; }
.why__star { color: inherit; display: inline-block; min-width: 24px; text-align: center; }
.why__star:hover { color: var(--accent-strong); }
.why__ats { max-width: 560px; }
@media (min-width: 1100px) { .why__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: start; } .why__ats { padding-top: .75em; } }

/* one reason = one row: head left, argument right; a plain list with dividers */
.why__rows { border-bottom: 1px solid var(--border); }
.why-row { scroll-margin-top: 96px; display: grid; gap: 14px; padding: 28px 0; border-top: 1px solid var(--border); }
.why-row__head { display: flex; flex-direction: column; gap: 10px; }
.why-row__body { display: flex; flex-direction: column; gap: 14px; }
.why-row__kicker { display: flex; align-items: center; gap: 10px; }
.why-row__kicker .why-n { width: 2.2em; height: 2.2em; }
.why-row__key { position: relative; padding-left: 17px; }
.why-row__key::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--accent); transform-origin: 50% 0; }
@media (min-width: 960px) {
  .why-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; column-gap: 56px; row-gap: 16px; padding: 40px 0; }
  .why-row__head { grid-row: 1 / span 2; }
  .why-row__body, .why-row__foot { grid-column: 2; }
}

.why-mark {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: 0; line-height: 1;
}
.why-mark--no { color: #94A3B8; border: 1.5px solid var(--border-2); background: var(--surface); }
.why-mark--part { color: var(--slate); border: 1.5px solid var(--border-2); background: var(--surface); }
.why-mark--yes { color: var(--success); border: 1.5px solid var(--success-border); background: var(--success-bg); }
.why-mark--lynk { color: #fff; background: var(--accent); border: 1.5px solid var(--accent); }

/* honest limits (one block after the rows; the territory card keeps its own) and small print */
.why-limit { padding-left: 14px; border-left: 2px solid var(--border-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); max-width: var(--measure); }
.why-limit > b { display: block; color: var(--slate-2); margin-bottom: 4px; }
.why-limit a, .why-note a, .why-limits a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.why-limits { margin-top: 28px; padding: 22px 20px; border-radius: var(--r-lg); background: var(--surface-2); }
.why-limits h3 { color: var(--slate); }
.why-limits ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.why-limits li { position: relative; padding-left: 18px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.why-limits li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 3px; background: var(--slate-2); }
@media (min-width: 960px) { .why-limits { padding: 28px 32px; } .why-limits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; } }

.why-row__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.why-proof {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border-2);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-mono); line-height: var(--lh-micro); color: var(--ink-2);
}
.why-proof::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 3px; background: var(--success); }
.why-row__foot .why-note { max-width: 560px; }

/* scoreboard: table on wide screens, three option cards on phones */
.why-score { margin-top: clamp(40px, 2rem + 2.5vw, 72px); }
.why-score__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; max-width: 760px; }
.why-table-wrap { display: none; }
.why-opts { display: grid; gap: 12px; }
@media (min-width: 800px) {
  .why-table-wrap { display: block; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
  .why-opts { display: none; }
}
.why-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); line-height: var(--lh-small); table-layout: fixed; }
.why-table col.why-col-crit { width: 26%; }
.why-table col.why-col-lynk { width: 27%; }
.why-table th, .why-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.why-table thead td { border-top: 0; background: var(--bg); }
.why-table thead th { border-top: 0; padding-block: 16px; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); background: var(--bg); vertical-align: bottom; }
.why-table thead th small { display: block; font-size: var(--fs-micro); font-weight: var(--fw-regular); color: var(--slate-2); }
.why-table thead th.why-t-lynk { background: var(--accent); color: #fff; }
.why-table thead th.why-t-lynk small { color: #fff; }
.why-table tbody th { font-weight: var(--fw-semibold); color: var(--ink); }
.why-table tbody th .why-n { margin-right: 6px; }
.why-table td { color: var(--slate); }
.why-table td.why-t-lynk { background: var(--accent-bg); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); border-top-color: var(--accent-border); }
.why-table tbody tr:last-child td.why-t-lynk { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 -2px 0 var(--accent); }
.why-table tr.why-t-sep > * { border-top: 2px solid var(--border-2); }
.why-table tr.why-t-sep > td.why-t-lynk { border-top-color: var(--accent-border); }
.why-table td strong, .why-table td b { color: var(--ink); font-weight: var(--fw-semibold); }
.why-table .why-cell { display: flex; gap: 10px; align-items: flex-start; }
.why-table .why-cell .why-mark { width: 22px; height: 22px; }
.why-table .why-cell > span:last-child { padding-top: 1px; }
.why-t-win { color: var(--ink) !important; }

.why-opt { padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.why-opt h4 small { display: block; font-size: var(--fs-small); font-weight: var(--fw-regular); letter-spacing: 0; color: var(--slate-2); }
.why-opt ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.why-opt li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.why-opt li .why-mark { width: 22px; height: 22px; }
.why-opt li small { display: block; font-size: var(--fs-small); color: var(--slate-2); }
.why-opt dl { margin: 0; display: grid; grid-template-columns: minmax(0, 11ch) minmax(0, 1fr); gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--fs-small); line-height: var(--lh-small); }
.why-opt dt { color: var(--slate-2); padding-top: 2px; }
.why-opt dd { margin: 0; color: var(--ink-2); }
.why-opt--lynk { background: var(--accent-bg); border: 2px solid var(--accent); }
.why-opt--lynk h4 { color: var(--accent-strong); }
/* AA on the tinted cards: --slate-2 drops to 4.4:1 on --accent-bg / --surface-2 */
.why-opt--lynk h4 small, .why-opt--lynk dt, .why-opt--lynk li small, .offer-main .note, .why-foot .ph { color: var(--slate); }

.why-foot { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; max-width: 900px; }
.why-foot a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }

/* bridge + close */
.why-close { margin-top: clamp(24px, 1rem + 1.5vw, 40px); padding: 26px 20px; border-radius: var(--r-xl); display: grid; gap: 22px; }
.why-close__text { display: flex; flex-direction: column; gap: 14px; }
.why-close__main { line-height: var(--lh-lead); text-wrap: pretty; }
.why-close__main a { white-space: nowrap; }
@media (max-width: 399.98px) { .why-close__main a { white-space: normal; } }
.why-close__stack { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-mono); line-height: var(--lh-body); color: var(--slate-2); }
.why-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.why-actions .link-arrow { justify-content: center; text-align: center; }
.why-actions .text-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-body); }
@media (min-width: 640px) { .why-close { padding: 36px 40px; } }
@media (min-width: 1100px) {
  .why-close { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: center; padding: 44px 48px; }
  .why-actions { align-items: stretch; }
}

/* reinforcing touches elsewhere on the page */
.inclusions li[data-glyph]::before {
  content: attr(data-glyph); display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-mono);
}
.offer-main .why-offer-kicker { margin-bottom: -10px; }
.offer-main .note a, .promise-conds a, .territory a:not(.link-arrow) { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.promise-conds { margin-top: 14px; }
.territory__more { display: flex; flex-direction: column; gap: 0; }
.territory .why-limit { margin-top: 12px; font-size: var(--fs-small); line-height: var(--lh-small); }
.territory .link-arrow { margin-top: 4px; }
.territory--inline { margin-top: 20px; }
@media (min-width: 640px) { .territory--inline { align-items: flex-start; padding: 28px 32px; } .territory--inline .territory__icon { width: 52px; height: 52px; } }
.stats--3 > li:last-child { grid-column: 1 / -1; }
.bar--build { position: relative; }
.bar--build .bar__fill { background: #94A3B8; }
.bar__range { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, #CBD5E1 0 4px, #E2E8F0 4px 8px); border-radius: 0 8px 8px 0; transition: left .5s var(--e-out), width .5s var(--e-out); }
.calc-next { font-size: var(--fs-body); line-height: var(--lh-small); color: var(--ink-2); padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.why-offer-b2b { margin-top: -16px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.why-offer-actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.why-offer-actions .link-arrow { justify-content: center; text-align: center; }
@media (min-width: 640px) { .why-offer-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 24px; } .why-offer-actions .link-arrow { text-align: left; } }
.why-offer-notes { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--accent-border); }
.stepper__label small { display: block; margin-top: 2px; }
.bar-row__head--wrap { flex-wrap: wrap; row-gap: 2px; }
.hero__terr { font-weight: var(--fw-semibold); white-space: nowrap; }
.inclusions:has(li[data-glyph]) li::before { width: 20px; text-align: center; }
@media (max-width: 639.98px) { .stepper__label small { display: none; } }

/* ---------- Trust levers: reference call, developer block, named founder call ---------- */
.proof-ref { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; background: var(--accent-bg); border-color: var(--accent-border); }
.proof-ref__icon { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--surface); border: 1px solid var(--accent-border); color: var(--accent-strong); display: grid; place-items: center; }
.proof-ref__icon svg { width: 24px; height: 24px; }
.proof-ref__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 768px) { .proof-ref { flex-direction: row; align-items: center; gap: 20px; padding: 24px 28px; } .proof-ref .link-arrow { flex: none; } }

.dev { padding: clamp(24px, 1rem + 1.6vw, 40px); display: grid; gap: 24px; }
@media (min-width: 960px) { .dev { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: center; } }
.dev__copy { display: flex; flex-direction: column; gap: 14px; }
.dev__stack { padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.dev__actions { display: flex; flex-direction: column; gap: 10px; }
.dev__actions .btn { width: 100%; justify-content: flex-start; text-align: left; }
.dev__actions .btn svg { width: 18px; height: 18px; flex: none; }
.dev__actions .note { margin-top: 2px; }

.cal-person { display: flex; align-items: center; gap: 12px; }
.cal-person img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.cal-person__text { min-width: 0; }

/* ---------- Integrations (Anbindungen) ---------- */
.int-deal { display: grid; gap: 12px; margin: 0 0 40px; }
@media (min-width: 760px) { .int-deal { grid-template-columns: 1.15fr 1fr 1fr; } }
.int-deal__item { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.int-deal__item span { font-size: var(--fs-small); color: var(--slate); }
.int-deal__item--incl { background: var(--success-bg); border-color: var(--success-border); }
.int-deal__item--incl b { color: var(--success-ink); }
.int-groups { display: grid; gap: 32px; }
@media (min-width: 1100px) { .int-groups { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.int-group__title { margin: 0 0 12px; color: var(--slate-2); }
.int-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.int-tile { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); transition: transform .35s var(--e-out), border-color .25s, box-shadow .35s var(--e-out); }
.int-tile:hover { transform: translateY(-2px); border-color: var(--border-2); box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .45); }
.int-tile__logo { flex: none; width: 32px; height: 32px; border-radius: 8px; }
.int-tile__mono { display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-mono); letter-spacing: -.02em; }
.int-tile__name { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1.25; color: var(--ink); }
.int-tile__name small { font-size: var(--fs-micro); font-weight: var(--fw-regular); color: var(--slate-2); }
@media (max-width: 479.98px) { .int-tile { gap: 8px; padding: 10px 8px 10px 10px; } .int-tile__logo { width: 28px; height: 28px; } }
.int-foot { margin-top: 32px; display: grid; gap: 10px; max-width: 860px; }
.int-bullhorn { margin: 0; padding: 14px 18px; border: 1px dashed var(--border-2); border-radius: var(--r-sm); font-size: var(--fs-small); color: var(--slate); }
.int-bullhorn b { color: var(--ink); margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .int-tile, .int-tile:hover { transition: none; transform: none; } }

/* ==========================================================================
   Life: workflow bar, living how-cards, count-ups, reasons wake-up,
   coloured bands, accent words, integration hub, handwritten names.
   Default = final state (no JS, reduced motion). html.lv (set by main.js when
   motion is allowed) arms the start states; .in (IntersectionObserver) plays once.
   ========================================================================== */

/* accent word in section headlines, like the hero */
.h2 .serif { color: var(--cta); }

/* hero workflow bar */
.wf { display: flex; align-items: center; max-width: 520px; font-family: var(--font-mono); font-size: .625rem; font-weight: 500; letter-spacing: .03em; line-height: 1.2; }
.wf__s { flex: none; padding: 6px 8px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); color: var(--slate); transition: color .4s ease, background-color .4s ease, border-color .4s ease; }
.wf__c { flex: 1 1 0; min-width: 12px; height: 1.5px; margin: 0 5px 0 4px; position: relative; background: var(--border-2); }
.wf__c::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--e-out); }
.wf__c::after { content: ""; position: absolute; right: -1px; top: 50%; width: 5px; height: 5px; margin-top: -3px; border-top: 1.5px solid var(--border-2); border-right: 1.5px solid var(--border-2); transform: rotate(45deg); transition: border-color .3s ease; }
.wf.is-live .wf__c.is-fill::before { transform: scaleX(1); transition: transform .6s var(--e-io); }
.wf.is-live .wf__c.is-fill::after { border-color: var(--accent); transition-delay: .45s; }
.wf.is-live .wf__s.is-done { color: var(--accent-strong); border-color: var(--accent-border); }
.wf.is-live .wf__s.is-on { color: #fff; background: var(--accent); border-color: var(--accent); transition-delay: .4s; }
@media (min-width: 400px) { .wf { font-size: .6875rem; } .wf__s { padding: 6px 10px; } .wf__c { margin: 0 7px 0 6px; } }
@media (min-width: 640px) { .wf { letter-spacing: .06em; } .wf__s { padding: 7px 12px; } }
@media (max-width: 359.98px) { .wf { flex-wrap: wrap; row-gap: 8px; } }

/* how-card 03 (sending limit): plays on .in, which the demo loop (main.js) re-arms every cycle */
.lv .vis-card:not(.in) .lane__dots { opacity: 0; }
.lv .vis-card:not(.in) .toggle { background: var(--border-2); }
.lv .vis-card:not(.in) .toggle::after { transform: none; }
.lv .vis-card:not(.in) .swap .a { clip-path: inset(0 100% 0 0); }
.lv .vis-card.in .toggle { animation: l-toggle .45s ease .2s both; }
.lv .vis-card.in .toggle::after { animation: l-knob .55s var(--e-back) .2s both; }
.lv .vis-card.in .swap .a { animation: l-type 1s steps(20, end) .75s both; }
.lv .vis-card.in .lane__dots { animation: l-send 1.3s var(--e-io) 1.8s both; }
@keyframes l-toggle { from { background: var(--border-2); } to { background: var(--success); } }
@keyframes l-knob { from { transform: none; } to { transform: translateX(24px); } }
@keyframes l-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes l-send { 0% { opacity: 0; transform: translateX(-100%); } 15% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* count-ups keep their width steady */

/* five reasons wake up: number fills with a small pop, key bar grows */
.lv .why-row:not(.in) .why-row__kicker .why-n { background: transparent; color: var(--accent-strong); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lv .why-row:not(.in) .why-row__key::before { transform: scaleY(0); }
.lv .why-row.in .why-row__kicker .why-n { animation: l-npop .6s var(--e-back) .1s both; }
.lv .why-row.in .why-row__key::before { animation: l-grow-y .9s var(--e-out) .3s both; }
@keyframes l-npop {
  0% { background: transparent; color: var(--accent-strong); box-shadow: inset 0 0 0 1.5px var(--accent); transform: scale(1); }
  55% { transform: scale(1.18); }
  100% { background: var(--accent); color: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); transform: none; }
}
@keyframes l-grow-y { from { transform: scaleY(0); } to { transform: none; } }

/* coloured bands (full-bleed sections); scroll-padding-top on html keeps anchors clear of the header */
.band { position: relative; isolation: isolate; margin-top: var(--section-gap); padding-bottom: var(--section-gap); }
.band--accent { background: var(--accent-bg); }
.band--accent::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(37, 99, 235, .16) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.band--warm { background: var(--warm-bg); }
.band--warm .company-line { color: var(--slate); }
.band--warm .company-line a { color: var(--ink-2); }

/* dark band: pricing */
.band--dark { --d-1: #F8FAFC; --d-2: #CBD5E1; --d-3: #A5B4C8; --d-link: #93C5FD; --d-line: rgba(255, 255, 255, .12); background: var(--ink); color: var(--d-1); }
.band--dark .eyebrow, .band--dark .why-offer-kicker { color: var(--d-link); }
.band--dark .offer-main { background: linear-gradient(180deg, rgba(37, 99, 235, .18), rgba(37, 99, 235, .07)); border-color: #3B82F6; }
.band--dark .price > span, .band--dark .why-offer-b2b, .band--dark .inclusions li > span > span,
.band--dark .side-card p, .band--dark .run-costs__note, .band--dark .run-costs__list { color: var(--d-2); }
.band--dark .offer-main .note { color: var(--d-3); }
.band--dark .inclusions li::before { color: #4ADE80; }
.band--dark .inclusions li[data-glyph]::before { color: #fff; background: var(--accent); }
.band--dark .why-offer-notes { border-top-color: var(--d-line); }
.band--dark a:not(.btn) { color: var(--d-link); }
.band--dark a:not(.btn):hover { color: #fff; }
.band--dark .card { background: rgba(255, 255, 255, .04); border-color: var(--d-line); }
.band--dark .lift:hover { border-color: rgba(147, 197, 253, .45); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .7); }
.band--dark .run-costs__list li::before { background: var(--d-3); }
.band--dark :where(a, button):focus-visible { outline-color: var(--d-link); }

/* integrations: copy column + Lynk hub */
.int-head { align-items: center; }
.int-head__copy { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.int-head__copy > p { max-width: 520px; }
.hub { width: 100%; max-width: 400px; margin-inline: auto; }
.hub svg { width: 100%; height: auto; overflow: visible; }
.hub__lines path { fill: none; stroke: var(--accent-border); stroke-width: 1.5; }
.hub__halo { fill: var(--accent-bg); }
.hub__core { fill: var(--surface); stroke: var(--accent-border); stroke-width: 1.5; }
.hub__node rect { fill: var(--surface); stroke: var(--border-2); stroke-width: 1; }
.hub__node text { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; fill: var(--ink-2); }
.hub__dots circle { fill: var(--accent); opacity: 0; animation: l-hub-out 7.5s var(--e-io) infinite; }
.hub__dots circle:nth-child(2) { animation-delay: 1.5s; animation-name: l-hub-in; }
.hub__dots circle:nth-child(3) { animation-delay: 3s; }
.hub__dots circle:nth-child(4) { animation-delay: 4.5s; animation-name: l-hub-in; }
.hub__dots circle:nth-child(5) { animation-delay: 6s; }
.hub.is-paused .hub__dots circle { animation-play-state: paused; }
@keyframes l-hub-out { 0% { opacity: 0; transform: none; } 3%, 17% { opacity: 1; } 20%, 100% { opacity: 0; transform: translate(var(--x), var(--y)); } }
@keyframes l-hub-in { 0% { opacity: 0; transform: translate(var(--x), var(--y)); } 3%, 17% { opacity: 1; } 20%, 100% { opacity: 0; transform: none; } }
@media (min-width: 960px) { .int-head .hub { flex: 0 0 min(400px, 36%); margin: 0; } }

/* handwritten first names (a script font, not a signature) */
.sig { font-family: 'Caveat', 'Segoe Print', cursive; font-size: clamp(1.75rem, 1.5rem + .8vw, 2.125rem); line-height: 1; height: 1.1em; white-space: nowrap; color: var(--accent-strong); transform: rotate(-2deg); transform-origin: 0 50%; margin-top: 4px; }
.lv .sig:not(.in) { clip-path: inset(-25% 100% -25% -5%); }
.lv .sig.in { animation: l-write 1.6s cubic-bezier(.45, .05, .35, 1) .2s both; }
@keyframes l-write { from { clip-path: inset(-25% 100% -25% -5%); } to { clip-path: inset(-25% -5% -25% -5%); } }

@media (prefers-reduced-motion: reduce) { .hub__dots { display: none; } }

/* ---------- Five reasons: sticky progress rail (restored) ---------- */
.why__body { position: relative; }
.why-rail { position: sticky; top: 76px; z-index: 30; display: flex; justify-content: center; margin-bottom: 16px; pointer-events: none; }
.why-rail ol {
  list-style: none; margin: 0;
  pointer-events: auto; display: flex; gap: 2px; padding: 4px; border-radius: 999px; max-width: 100%;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--border);
  box-shadow: 0 12px 28px -18px rgba(15, 23, 42, .4);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.why-rail a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 10px; border-radius: 999px;
  font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--slate); white-space: nowrap; text-decoration: none;
  transition: background-color .25s var(--e-out), color .25s var(--e-out);
}
.why-rail a:hover { color: var(--ink); background: var(--surface-2); }
.why-rail .why-n { background: var(--surface-2); color: var(--slate); border: 1px solid var(--border-2); transition: background-color .25s ease, color .25s ease; }
.why-rail a.is-active { background: var(--accent-bg); color: var(--accent-strong); }
.why-rail a.is-active .why-n { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 719.98px) {
  .why-rail a { padding: 0 9px; }
  .why-rail a:not(.is-active) .why-rail__label { display: none; }
}
@media (min-width: 960px) { .why-rail { top: 96px; } .why-rail a { padding: 0 14px; } }

.nowrap { white-space: nowrap; }

/* Hero order: the DOM puts the CTA right under the sub-line (phone order, also the keyboard order there).
   From 640px the workflow bar and reason chips sit above the CTA again, as before. */
@media (min-width: 640px) {
  .hero__copy > .wf, .hero__copy > .chips { order: 1; }
  .hero__copy > .hero__actions, .hero__copy > .hero__scarcity { order: 2; }
}
@media (max-width: 639.98px) { .hero__copy > .hero__scarcity { margin-top: -8px; } }

/* Founder strip photo: the <picture> wrapper shrank as a flex item, so the photo collapsed to a dark sliver */
.founder-strip picture { flex: none; display: block; }
.founder-strip__img { object-position: 50% 30%; box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 8px 18px -10px rgba(15, 23, 42, .45); }
@media (min-width: 960px) { .founder-strip__img { width: 144px; height: 80px; border-radius: 16px; } }
@media (max-width: 959.98px) { .founder-strip__img { width: 96px; height: 54px; border-radius: 12px; } }

/* ==========================================================================
   40. Product demos: six fictional, anonymised product moments
   (hero draft card, how-cards 01/02/03/04, example day in the problem section).
   Default markup = final state (no JS, reduced motion). main.js adds .dm-live
   to arm the start states, plays a demo while it is on screen and replays it
   10 s after it ends. Prefix dm- avoids clashes with .chip, .steps, .stamp.
   ========================================================================== */
.dm {
  --dm-line: rgba(15, 23, 42, .08); --dm-line-2: rgba(15, 23, 42, .14); --dm-sunk: #F7F9FC;
  --dm-glow: rgba(37, 99, 235, .35); --dm-amber: #9A5807; --dm-amber-bg: #FFF7EA; --dm-amber-line: #F5DDB2;
  --dm-sh-win: 0 0 0 1px var(--dm-line), 0 1px 1px rgba(15, 23, 42, .03), 0 4px 8px -4px rgba(15, 23, 42, .05), 0 18px 36px -18px rgba(15, 23, 42, .18);
  --dm-sh-chip: 0 0 0 1px var(--dm-line-2), 0 1px 2px rgba(15, 23, 42, .04);
  font-variant-numeric: tabular-nums;
}
.dm p { margin: 0; }
.dm-win { background: var(--surface); border-radius: 12px; box-shadow: var(--dm-sh-win); min-width: 0; container-type: inline-size; text-align: left; }
.dm-ck { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dm-badge { font-family: var(--font-mono); font-size: .625rem; font-weight: 500; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.dm-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: .71875rem; font-weight: 500; line-height: 1.5; color: var(--slate); background: var(--surface); box-shadow: var(--dm-sh-chip);
}
.dm-chip--ok { color: var(--success); background: var(--success-bg); box-shadow: inset 0 0 0 1px var(--success-border); }
.dm-tl { min-width: 0; }
.dm-ghost { visibility: hidden; }
.dm-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; border-radius: 1px; background: var(--accent); animation: dm-blink 1.1s var(--e-out) infinite; }

/* status line ("thinking line"): shimmer while busy, calm green dot when done */
.dm-status { display: flex; align-items: center; gap: 8px; min-height: 1.4em; font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; line-height: 1.4; letter-spacing: .03em; color: var(--slate); }
.dm-status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.dm-status > span { display: block; min-width: 0; }
.dm-status.is-busy::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); animation: dm-pulse 1.4s var(--e-io) infinite; }
.dm-status.is-busy > span {
  background: linear-gradient(90deg, var(--slate) 0%, var(--slate) 38%, var(--ink) 50%, var(--slate) 62%, var(--slate) 100%); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: dm-shim 1.8s cubic-bezier(.45, .05, .55, .95) infinite;
}

/* motion states (only with .dm-live): blur-in entrances, check draw-in, fade before a replay */
.dm-live .dm-i { transition: opacity .6s var(--e-out), transform .7s var(--e-out), filter .6s var(--e-out); }
.dm-live .dm-i:not(.on) { opacity: 0; transform: translateY(6px); filter: blur(4px); }
.dm-live .dm-ck path { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset .5s var(--e-out) .18s; }
.dm-live .on .dm-ck path, .dm-live .dm-ck.on path { stroke-dashoffset: 0; }
.dm-live .dm-fade { transition: opacity .4s var(--e-out); }
.dm.is-out .dm-fade, .dm.is-out .dm-i, .is-out .dm-status { opacity: 0; }
.dm-snap, .dm-snap * { transition: none !important; }
.dm-off, .dm-off * { animation-play-state: paused !important; }

/* hero: the recruiter approves the AI draft */
.draft-card { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: var(--r-md); background: var(--warm-bg); color: #1E1B18; box-shadow: inset 0 0 0 1px rgba(138, 75, 42, .10); }
.dm-approve__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 26px; }
.dm-approve__label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .02em; color: var(--warm-ink); }
.dm-approve__label::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 3px rgba(194, 65, 12, .14); }
.dm-approve__text {
  display: grid; padding: 12px 14px; border-radius: 10px; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(138, 75, 42, .12), 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -18px rgba(15, 23, 42, .25);
  font-size: .875rem; line-height: 1.55; letter-spacing: -.003em; color: var(--ink); text-wrap: pretty;
}
.dm-approve__text > * { grid-area: 1 / 1; }
.dm-live .dm-approve__text { transition: color .8s var(--e-out), opacity .4s var(--e-out); }
.dm-live .dm-approve__text:not(.on) { color: var(--slate-2); }
.dm-approve__text del { text-decoration: none; }
.dm-approve__text del.x { color: var(--slate-2); text-decoration: line-through; text-decoration-color: var(--cta); text-decoration-thickness: 1.5px; }
.dm-approve__text ins { white-space: nowrap; text-decoration: none; color: var(--cta-hover); background: var(--cta-bg); box-shadow: inset 0 -1.5px 0 var(--cta-border); border-radius: 3px; padding: 0 2px; }
.dm-approve__text del:empty, .dm-approve__text ins:empty { display: none; }
.dm-stamp {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; transform: rotate(-3deg);
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .05em; color: var(--stamp);
  background: var(--warm-bg); box-shadow: inset 0 0 0 1.5px var(--stamp), 0 2px 6px -3px rgba(24, 122, 75, .35);
}
.dm-live .dm-stamp.dm-i { transition: transform .55s var(--e-back), opacity .25s var(--e-out), filter .3s var(--e-out); }
.dm-live .dm-stamp.dm-i:not(.on) { transform: rotate(-1deg) scale(1.18); filter: blur(2px); }
.dm-approve__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.dm-sent { display: flex; flex-wrap: wrap; gap: 6px; }
.draft-card .dm-badge { color: var(--warm-ink); }
@media (min-width: 640px) { .draft-card { padding: 18px 20px; } .dm-approve__text { padding: 14px 16px; font-size: .9375rem; } }

/* how-cards: equal visual heights per row (subgrid), dotted canvas, floating window */
.steps .vis { height: auto; min-height: 150px; }
.steps .vis-card { display: grid; grid-template-rows: auto 1fr; }
@supports (grid-template-rows: subgrid) {
  .steps .vis-card { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}
.vis--dm {
  flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; padding: 12px 14px 16px;
  background-image: radial-gradient(rgba(15, 23, 42, .07) 1px, transparent 1.2px); background-size: 14px 14px; background-position: -3px -3px;
}
.vis--dm > .dm-badge { align-self: flex-end; }
@media (min-width: 960px) { .vis--dm { padding: 14px 22px 22px; } }
.reach { max-width: 400px; margin-inline: auto; gap: 18px; }

/* 01 a sentence becomes a search */
.dm-search { display: grid; gap: 10px; padding: 14px; }
.dm-sbox { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; background: var(--dm-sunk); box-shadow: inset 0 0 0 1px var(--dm-line); transition: box-shadow .3s var(--e-out); }
.dm-sbox.is-typing { box-shadow: inset 0 0 0 1px var(--accent-border), 0 0 0 3px var(--accent-bg); }
.dm-sbox svg { width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--slate-2); stroke-width: 1.5; stroke-linecap: round; }
.dm-brief { display: grid; font-size: .8125rem; line-height: 1.5; color: var(--ink); }
.dm-brief > * { grid-area: 1 / 1; }
.dm-crit { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-crit .dm-chip { color: var(--accent-strong); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-border); }
.dm-live .dm-crit .dm-i { transition: opacity .4s var(--e-out), transform .5s var(--e-back), filter .4s var(--e-out); }
.dm-live .dm-crit .dm-i:not(.on) { transform: scale(.9); }
.dm-res { list-style: none; margin: 0; padding: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--dm-line); }
.dm-res li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; font-size: .8125rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.dm-res li + li { border-top: 1px solid var(--dm-line); }
.dm-res small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .75rem; font-weight: 400; color: var(--slate); }
.dm-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .625rem; font-weight: 700; letter-spacing: .02em; background: #E8EEFC; color: #2A4FB5; }
.dm-res li:nth-child(2) .dm-av { background: #ECEFF4; color: #3B4A63; }
.dm-res li:nth-child(3) .dm-av { background: #E6F3F6; color: #1D6577; }
.dm-sc { min-width: 34px; padding: 2px 7px; border-radius: 6px; text-align: center; font-size: .8125rem; font-weight: 600; color: var(--accent-strong); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-border); }

/* 02 score with reasons */
.dm-score { display: grid; gap: 12px; padding: 14px; }
.dm-score__top { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.dm-ring { position: relative; width: 72px; height: 72px; }
.dm-ring svg { display: block; width: 72px; height: 72px; overflow: visible; transform: rotate(-90deg); }
.dm-ring circle { fill: none; stroke-width: 7; }
.dm-ring__trk { stroke: rgba(15, 23, 42, .09); }
.dm-ring__val { stroke: url(#dm-grad); stroke-linecap: round; stroke-dasharray: 251.33; stroke-dashoffset: 32.67; filter: drop-shadow(0 0 3px var(--dm-glow)); }
.dm-live .dm-ring__val { transition: stroke-dashoffset 1.6s var(--e-out); }
.dm-live .dm-ring:not(.on) .dm-ring__val { stroke-dashoffset: 251.33; }
.dm-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.375rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.dm-score__who { display: grid; gap: 1px; min-width: 0; font-size: .75rem; line-height: 1.4; color: var(--slate); }
.dm-score__who b { font-size: .875rem; font-weight: 600; color: var(--ink); }
.dm-score__who .dm-status { margin-top: 6px; }
.dm-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.dm-reasons li { display: flex; gap: 10px; align-items: flex-start; }
.dm-reasons i { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; font-family: var(--font-mono); font-size: .6875rem; font-style: normal; font-weight: 600; }
.dm-ok i { color: var(--success); background: var(--success-bg); box-shadow: inset 0 0 0 1px var(--success-border); }
.dm-part i { color: var(--dm-amber); background: var(--dm-amber-bg); box-shadow: inset 0 0 0 1px var(--dm-amber-line); }
.dm-why { margin-top: 3px; padding-top: 9px; border-top: 1px solid var(--dm-line); color: var(--slate); }
.dm-why i { color: var(--accent-strong); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-border); }

/* 03 status line under the sending-limit toggle */
.reach .dm-status { margin-top: -4px; }
.dm-live .reach .dm-status { transition: opacity .4s var(--e-out); }

/* 04 self-booking: a tap on the phone, an entry in the recruiter's calendar */
.dm-book { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 16px 16px 18px; }
@container (max-width: 359.98px) { .dm-book { grid-template-columns: minmax(0, 1fr); gap: 16px; } .dm-phone { width: 168px; justify-self: center; } }
.dm-phone {
  position: relative; display: grid; gap: 8px; padding: 20px 10px 12px; border-radius: 22px; background: var(--dm-sunk);
  box-shadow: 0 0 0 1px var(--dm-line-2), 0 0 0 5px var(--surface), 0 0 0 6px var(--dm-line-2), 0 18px 30px -18px rgba(15, 23, 42, .35);
}
.dm-phone::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 9px; background: var(--dm-line-2); }
.dm .dm-phone p { text-align: center; font-size: .6875rem; font-weight: 600; line-height: 1.3; color: var(--slate); }
.dm-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dm-slots span { padding: 6px 0; border-radius: 8px; text-align: center; font-size: .6875rem; font-weight: 500; color: var(--ink-2); background: var(--surface); box-shadow: 0 0 0 1px var(--dm-line-2); }
.dm-slots .dm-pick { color: #fff; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.dm-live .dm-slots .dm-pick { transition: background-color .35s var(--e-out), color .35s var(--e-out), transform .35s var(--e-back), box-shadow .35s var(--e-out); }
.dm-live .dm-slots .dm-pick:not(.on) { color: var(--ink-2); background: var(--surface); box-shadow: 0 0 0 1px var(--dm-line-2); }
.dm-live .dm-slots .dm-pick.is-tap { transform: scale(.92); }
.dm .dm-cal__h { margin-bottom: 6px; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.dm-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: center; height: 34px; border-top: 1px solid var(--dm-line); font-family: var(--font-mono); font-size: .6875rem; color: var(--slate); }
.dm-ev { display: flex; align-items: center; gap: 6px; min-width: 0; height: 26px; padding: 0 9px; border-radius: 7px; font-family: var(--font-sans); font-size: .75rem; font-weight: 500; color: var(--slate); background: var(--dm-sunk); box-shadow: inset 0 0 0 1px var(--dm-line); }
.dm-ev > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dm-ev--new { color: var(--success); font-weight: 600; background: var(--success-bg); box-shadow: inset 0 0 0 1px var(--success-border), inset 3px 0 0 var(--success); }
.dm-live .dm-ev--new { transition: clip-path .7s var(--e-out), opacity .3s var(--e-out); }
.dm-live .dm-ev--new:not(.on) { opacity: 0; clip-path: inset(0 100% 0 0 round 7px); }

/* problem section: the pains on the left, an example day with Lynk on the right */
.problem-copy { display: flex; flex-direction: column; gap: 24px; }
.dm-feedwrap { min-width: 0; }
@media (min-width: 960px) {
  .split--answer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .problem-copy { gap: 32px; }
}
.dm-bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--dm-line); border-radius: 12px 12px 0 0; background: linear-gradient(var(--surface), var(--dm-sunk)); }
.dm-mk { flex: none; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(160deg, #7FA6F8, var(--accent)); }
.dm-crumb { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-mono); font-size: .6875rem; color: var(--slate); }
.dm-crumb i { padding: 0 6px; font-style: normal; color: var(--slate-2); }
.dm-crumb em { font-style: normal; color: var(--ink-2); }
.dm-tag { flex: none; padding: 3px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: .625rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); background: var(--dm-sunk); box-shadow: 0 0 0 1px var(--dm-line); }
@container (max-width: 379.98px) { .dm-crumb { visibility: hidden; } }
.dm-feed__body { padding: 16px 16px 12px; }
@container (min-width: 480px) { .dm-feed__body { padding: 20px 24px 16px; } }
.dm-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-bottom: 12px; padding: 3px; border-radius: 10px; background: var(--dm-sunk); box-shadow: inset 0 0 0 1px var(--dm-line); }
.dm-stages span { padding: 6px 2px; border-radius: 7px; text-align: center; font-family: var(--font-mono); font-size: .5625rem; font-weight: 500; letter-spacing: .02em; color: var(--slate); }
@container (min-width: 400px) { .dm-stages span { font-size: .625rem; letter-spacing: .04em; } }
.dm-stages span.on { color: var(--accent-strong); background: var(--surface); box-shadow: 0 0 0 1px var(--dm-line-2), 0 1px 3px rgba(15, 23, 42, .08); }
.dm-live .dm-stages span { transition: background-color .5s var(--e-out), color .5s var(--e-out), box-shadow .5s var(--e-out); }
.dm-flist { position: relative; display: grid; list-style: none; margin: 0; padding: 0; }
.dm-flist::before { content: ""; position: absolute; left: 59.5px; top: 16px; bottom: 16px; width: 1px; background: var(--dm-line-2); }
.dm-flist li { position: relative; display: grid; grid-template-columns: 44px 14px minmax(0, 1fr); gap: 9px; align-items: start; padding: 7px 0; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
.dm-flist time { padding-top: 1px; text-align: right; font-family: var(--font-mono); font-size: .75rem; color: var(--slate); }
.dm-dot { width: 9px; height: 9px; margin: 6px auto 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--accent-border); }
.dm-dot--h { background: var(--cta); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--cta-border); }
.dm-dot--c { background: var(--success); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--success-border); }
.dm-who { display: block; margin-bottom: 1px; font-family: var(--font-mono); font-size: .625rem; font-weight: 500; letter-spacing: .06em; color: var(--slate); }
.dm-who--h { color: var(--cta); }
.dm-flist b { font-weight: 600; color: var(--ink); }

@keyframes dm-blink { 0%, 45% { opacity: 1; } 55%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes dm-shim { from { background-position: 100% 0; } to { background-position: -60% 0; } }
@keyframes dm-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dm-caret { display: none; } }

/* Integration tiles: wordmark-only logos (no square symbol available) */
.int-tile__logo--wide { width: 56px; height: 32px; object-fit: contain; object-position: left center; border-radius: 0; }
.int-tile__logo { object-fit: contain; }

/* =====================================================================
   21. "Weniger ist mehr" (Nov 2026): hero guarantee, reason tabs, offer + promises,
   integration finder, folded FAQ, demo request. Long texts live in <details>.
   ===================================================================== */
.btn--dark { color: #fff; background: var(--ink); border: 1px solid var(--ink); }
.btn--dark:hover { color: #fff; background: #1E293B; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__tour { gap: 10px; }
.hero__guarantee { margin: 0; max-width: 56ch; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.hero__guarantee > span[aria-hidden] { color: var(--cta); font-weight: var(--fw-semibold); }
.hero__guarantee b { color: var(--ink-2); font-weight: var(--fw-semibold); }
.hero__guarantee a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.hero__guarantee:target { outline: 2px solid var(--cta-border); outline-offset: 6px; border-radius: 6px; }

/* shared fold (details) */
.rs-fold, .rs-more, .o2-fold, .int-all, .faq-all { border-top: 1px solid var(--border); }
.rs-fold > summary, .rs-more > summary, .o2-fold > summary, .int-all > summary, .faq-all > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 0;
  cursor: pointer; list-style: none; font-weight: var(--fw-semibold); font-size: var(--fs-body); color: var(--ink);
}
:is(.rs-fold, .rs-more, .o2-fold, .int-all, .faq-all) > summary::-webkit-details-marker { display: none; }
:is(.rs-fold, .rs-more, .o2-fold, .int-all, .faq-all) > summary::after { content: "+"; flex: none; font-weight: var(--fw-regular); font-size: 1.25rem; line-height: 1; color: var(--slate-2); }
:is(.rs-fold, .rs-more, .o2-fold, .int-all, .faq-all)[open] > summary::after { content: "–"; }
:is(.rs-fold, .rs-more, .o2-fold, .int-all, .faq-all) > summary:hover { color: var(--accent-strong); }

/* five reasons as tabs */
.rs { display: grid; gap: 16px; margin-top: var(--head-gap); }
.rs-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); color: var(--slate); font: var(--fw-semibold) var(--fs-small)/1 var(--font-sans); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.rs-tabs [role="tab"]:hover { border-color: var(--accent); color: var(--ink); }
.rs-tabs [role="tab"][aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rs-tabs [role="tab"][aria-selected="true"] .why-n { background: var(--accent); color: #fff; }
.rs-panel { display: grid; gap: 20px; padding: clamp(20px, 1rem + 1.5vw, 36px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); scroll-margin-top: 96px; }
.rs-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 900px) { .rs-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 40px; } .rs-panel > .rs-more { grid-column: 1 / -1; } }
.rs-copy { display: grid; gap: 12px; justify-items: start; }
.rs-kicker { margin: 0; font: var(--fw-mono) var(--fs-micro)/var(--lh-micro) var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-strong); }
.rs-quote { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-semibold); text-wrap: balance; color: var(--ink); }
.rs-ans { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); max-width: 52ch; }
.rs-ans a { text-decoration: underline; text-underline-offset: .15em; }
.rs-vis { display: grid; gap: 12px; align-content: center; min-height: 200px; padding: 20px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--border); font-size: var(--fs-small); color: var(--slate); }
.rs-vis small { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--slate-2); }
.rs-cap { margin: 0; font: var(--fw-mono) var(--fs-micro)/var(--lh-micro) var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--slate-2); }
.rs-tl { display: grid; gap: 14px; }
.rs-tl > div { display: grid; gap: 6px; }
.rs-tl b { color: var(--ink); font-weight: var(--fw-semibold); }
.rs-line { display: block; height: 10px; border-radius: 99px; background: var(--accent); }
.rs-line--cut { background: linear-gradient(90deg, var(--border-2) 0 58%, transparent 58%); outline: 1px dashed var(--border-2); outline-offset: -1px; }
.rs-srv { display: grid; gap: 8px; padding: 14px; border-radius: 12px; border: 2px solid var(--accent); background: var(--surface); }
.rs-srv b { color: var(--ink); font-weight: var(--fw-semibold); }
.rs-items, .rs-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-items span { padding: 4px 9px; border-radius: 6px; background: var(--accent-bg); color: var(--accent-strong); font-weight: var(--fw-semibold); font-size: var(--fs-micro); }
.rs-bars { display: grid; gap: 10px; }
.rs-bars > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--ink); font-weight: var(--fw-semibold); }
.rs-bar { display: flex; align-items: center; min-width: 96px; height: 34px; padding: 0 10px; border-radius: 8px; background: var(--accent); color: #fff; font: var(--fw-semibold) var(--fs-small) var(--font-mono); font-style: normal; white-space: nowrap; }
.rs-bar--rent { background: #64748B; }
.rs-wts { display: grid; gap: 8px; }
.rs-wts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.rs-wts i { display: block; height: 9px; border-radius: 99px; background: var(--border); overflow: hidden; }
.rs-wts i b { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.rs-wts em { font: var(--fw-mono) var(--fs-micro) var(--font-mono); font-style: normal; text-align: right; color: var(--slate); }
.rs-tools s { padding: 4px 9px; border-radius: 6px; border: 1px dashed var(--border-2); background: var(--surface); color: var(--slate-2); font-size: var(--fs-micro); }
.rs-one { margin: 0; padding: 12px; border-radius: 10px; background: var(--ink); color: #fff; font: var(--fw-mono) var(--fs-micro)/1.5 var(--font-mono); letter-spacing: .02em; }
.rs-more__body { display: grid; gap: 10px; padding-bottom: 8px; max-width: 72ch; }
.rs-more__body .why-row__arg, .rs-more__body p { margin: 0; }
.rs-more__body .why-proof { justify-self: start; }
.rs-folds { margin-top: 16px; }
.rs-folds .rs-fold:last-child { border-bottom: 1px solid var(--border); }
.rs-fold .why-score, .rs-fold .why-limits { margin: 0 0 20px; }
.rs-fold .why-limits ul { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { .rs-panel.is-in { animation: rs-in .35s var(--e-out) both; } }
@keyframes rs-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* offer + promises */
.o2 { display: grid; gap: 16px; }
@media (min-width: 1100px) { .o2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.o2-inc { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 22px; grid-template-columns: 1fr; }
@container (min-width: 520px) { .o2-inc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.o2-inc li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.o2-inc li b { display: block; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); }
.o2-inc svg { width: 32px; height: 32px; padding: 7px; border-radius: 8px; background: var(--accent-bg); color: var(--accent-strong); }
.o2-run { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.o2-run b { color: var(--ink); }
.o2-side { display: grid; gap: 12px; }
.o2-h { margin: 0 0 4px; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-semibold); }
.o2-prom { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.o2-prom li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.o2-prom li b { display: block; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); }
.o2-prom svg { width: 36px; height: 36px; color: var(--success); }
.o2-fold__body { display: grid; gap: 14px; padding-bottom: 16px; }
.o2-fold__body .promises { margin: 0; }
.o2-fold__body.run-costs { margin: 0; padding: 0 0 16px; }
.o2-fold__body.territory { padding: 0 0 16px; flex-direction: row; }
.o2-terr { margin-top: 24px; }
.o2-terr > p { margin: 0 0 6px; font-size: var(--fs-body); line-height: var(--lh-body); }
.o2-alt { margin-top: 16px; }
@media (min-width: 768px) { .o2-alt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.band--dark .o2-inc li, .band--dark .o2-run, .band--dark .o2-prom li, .band--dark .o2-terr > p { color: var(--d-2); }
.band--dark .o2-inc li b, .band--dark .o2-run b, .band--dark .o2-prom li b, .band--dark .o2-terr b, .band--dark .o2-h { color: #fff; }
.band--dark .o2-inc svg { background: rgba(37, 99, 235, .25); color: var(--d-link); }
.band--dark .o2-prom li { background: rgba(255, 255, 255, .04); border-color: var(--d-line); }
.band--dark .o2-prom svg { color: #4ADE80; }
.band--dark .o2-h .serif { color: #FDBA74; }
.band--dark :is(.o2-fold, .rs-fold) { border-color: var(--d-line); }
.band--dark .o2-fold > summary { color: #fff; }
.band--dark .o2-fold > summary::after { color: var(--d-3); }
.band--dark .o2-fold > summary:hover { color: var(--d-link); }
.band--dark .o2-fold__body .promise { background: rgba(255, 255, 255, .04); border-color: var(--d-line); }
.band--dark .o2-fold__body .promise--green { border-color: rgba(74, 222, 128, .5); }
.band--dark .o2-fold__body :is(.promise h3, .territory h3, .run-costs h3) { color: #fff; }
.band--dark .o2-fold__body :is(.promise p, .territory p, .promise-conds, .why-limit) { color: var(--d-2); }
.band--dark .o2-fold__body .why-limit > b { color: var(--d-3); }
.band--dark .o2-fold__body .territory__icon { color: var(--d-link); }

/* integration finder */
.int-find { display: grid; gap: 12px; margin: 24px 0 8px; padding: clamp(18px, 1rem + 1vw, 28px); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
.int-find__label { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-semibold); color: var(--ink); }
.int-find__input { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--bg); font: var(--fs-body) var(--font-sans); color: var(--ink); }
.int-find__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); background: var(--surface); }
.int-find__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.int-find__chip { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); color: var(--ink-2); font: var(--fw-semibold) var(--fs-small) var(--font-sans); cursor: pointer; }
.int-find__chip:hover, .int-find__chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-bg); }
.int-find__res:empty { display: none; }
.int-find__res { display: grid; gap: 8px; }
.int-hit { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 12px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); background: var(--success-bg); border: 1px solid var(--success-border); }
.int-hit--req { background: var(--cta-bg); border-color: var(--cta-border); }
.int-hit--none { background: var(--surface-2); border-color: var(--border); }
.int-hit b { color: var(--ink); }
.int-hit__mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-semibold); color: #fff; background: var(--success); }
.int-hit--req .int-hit__mark { background: var(--cta); }
.int-hit--none .int-hit__mark { background: var(--slate-2); }
.int-all { margin-top: 8px; border-bottom: 1px solid var(--border); }
.int-all .int-groups { padding-bottom: 20px; }

/* FAQ: top questions visible, the rest folded */
.faq__set--top > .faq__item:last-child { border-bottom: 0; }
.faq-all { border-bottom: 1px solid var(--border); }
.faq-all > summary { color: var(--accent-strong); }
.faq-all__body { display: grid; gap: 24px; padding-bottom: 16px; }

/* demo request */
.apply-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: ap; }
.apply-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; counter-increment: ap; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.apply-steps li::before { content: counter(ap); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: var(--fw-semibold) var(--fs-small) var(--font-mono); }
.apply-steps li:last-child::before { background: var(--surface-2); color: var(--slate); }
.apply-steps b { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); }
.apply__copy { display: grid; gap: 22px; align-content: start; }
.field__hint { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--slate-2); }
.lead-form .cal-btn { width: 100%; }
@media (min-width: 640px) { .hero__copy > .hero__guarantee { order: 2; } }
.o2-fold__body .promises { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
[hidden] { display: none !important; }
.checklist a, .why-close__main a, .faq__a a, .why-note a, .company-line a { text-decoration: underline; text-underline-offset: 2px; }

/* =====================================================================
   22. Hero option A (Nov 2026): one typeface, two-tone headline, pill buttons,
   real product list in a double bezel + a live scoring moment, video in a dialog.
   ===================================================================== */
.btn { border-radius: 999px; }
.btn--lg { border-radius: 999px; }
.hero h1 .h1-soft { color: #7B8AA0; }
.hero__sub { max-width: 40ch; }
.btn--arrow { gap: 14px; padding-block: 8px; padding-right: 8px; min-height: 56px; }
.btn__ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-size: 17px; line-height: 1; transition: transform .5s cubic-bezier(.32, .72, 0, 1); }
.btn--arrow:hover .btn__ic { transform: translate(3px, -1px) scale(1.06); }
.hero__play { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; font-weight: var(--fw-semibold); color: var(--ink); text-decoration: none; }
.hero__play-ic { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface); display: grid; place-items: center; transition: border-color .3s ease, transform .5s cubic-bezier(.32, .72, 0, 1); }
.hero__play:hover .hero__play-ic { border-color: var(--accent); transform: scale(1.06); }
.hero__play:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 999px; }

.hm { position: relative; padding-bottom: 56px; }
.hm-bezel { padding: 7px; border-radius: 28px; background: rgba(15, 23, 42, .045); box-shadow: 0 0 0 1px rgba(15, 23, 42, .06); }
.hm-core { border-radius: 21px; overflow: hidden; background: var(--surface); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), 0 40px 80px -40px rgba(30, 58, 138, .45); }
.hm-core img { display: block; width: 100%; height: auto; }
.hm-moment { position: absolute; left: -7%; bottom: 0; width: min(380px, 74%); }
.hm-moment .hm-bezel { background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(15, 23, 42, .07), 0 30px 60px -28px rgba(15, 23, 42, .45); }
.hm-card { padding: 18px 18px 16px; display: grid; gap: 12px; }
.hm-head { display: flex; align-items: center; gap: 12px; }
.hm-av { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #334155; color: #fff; display: grid; place-items: center; font-weight: var(--fw-semibold); font-size: .875rem; }
.hm-who { display: grid; min-width: 0; }
.hm-who b { font-size: .95rem; font-weight: var(--fw-semibold); color: var(--ink); }
.hm-who span { font-size: var(--fs-micro); color: var(--slate-2); }
.hm-score { margin-left: auto; font: var(--fw-semibold) 1.375rem var(--font-mono); letter-spacing: -.02em; color: var(--success); white-space: nowrap; }
.hm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-small); line-height: 1.4; color: var(--slate); }
.hm-r { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.hm-r i { font-style: normal; font-weight: 700; color: var(--success); }
.hm-r--p i { color: #B45309; }
.hm-foot { margin: 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--slate-2); }
@media (max-width: 767.98px) { .hm { padding-bottom: 0; } .hm-moment { position: relative; left: 0; width: 100%; margin-top: -28px; } }
@media (prefers-reduced-motion: no-preference) {
  .hm-moment { animation: hm-pop 1s cubic-bezier(.32, .72, 0, 1) .9s both; }
  .hm-r { animation: hm-up .6s cubic-bezier(.32, .72, 0, 1) both; }
  .hm-r:nth-child(1) { animation-delay: 1.5s; } .hm-r:nth-child(2) { animation-delay: 1.75s; }
  .hm-r:nth-child(3) { animation-delay: 2s; } .hm-r:nth-child(4) { animation-delay: 2.25s; }
  .hm-foot { animation: hm-up .6s cubic-bezier(.32, .72, 0, 1) 2.6s both; }
}
@keyframes hm-pop { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hm-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* video dialog */
.vdlg { width: min(1100px, 94vw); max-width: none; padding: 0; border: 0; border-radius: 20px; background: #0B1222; color: #fff; box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .6); }
.vdlg::backdrop { background: rgba(8, 12, 23, .72); backdrop-filter: blur(6px); }
.vdlg__in { position: relative; }
.vdlg video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0B1222; }
.vdlg__x { position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: var(--ink); font-size: 16px; cursor: pointer; }
.vdlg__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* =====================================================================
   23. Remaining sections (Nov 2026): example day inside "how it works",
   folded feature list and calculator notes, developer card inside integrations.
   ===================================================================== */
.how__sub { margin: 12px 0 0; max-width: 52ch; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--slate); }
.how__day { margin: 0 0 24px; }
.how__day .dm-feedwrap { max-width: 760px; margin-inline: auto; }
.how-all, .calc-how { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 24px; }
.calc-how { margin-top: 8px; border-bottom: 0; }
.how-all > summary, .calc-how > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 0; cursor: pointer; list-style: none; font-weight: var(--fw-semibold); color: var(--ink); }
:is(.how-all, .calc-how) > summary::-webkit-details-marker { display: none; }
:is(.how-all, .calc-how) > summary::after { content: "+"; font-weight: var(--fw-regular); font-size: 1.25rem; color: var(--slate-2); }
:is(.how-all, .calc-how)[open] > summary::after { content: "–"; }
:is(.how-all, .calc-how) > summary:hover { color: var(--accent-strong); }
.how-all { scroll-margin-top: 96px; }
.how-all__body { display: grid; gap: 8px 32px; padding-bottom: 20px; }
@media (min-width: 768px) { .how-all__body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.how-all__body .checklist { margin: 0; }
.calc-how__body { display: grid; gap: 10px; padding-bottom: 12px; }
.calc-how__p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
#anbindungen .dev, #integrations .dev { margin-top: 32px; scroll-margin-top: 96px; }
#how .section-head { display: block; }

/* =====================================================================
   24. Spacing pass (Nov 2026, redesign-skill + soft-skill): one rhythm for the whole page.
   Section rhythm ~144px desktop / ~76px phone, head-to-content ~52px, one card padding,
   one gap between blocks inside a section, stacked section heads, hero top capped at 96px.
   ===================================================================== */
:root {
  --section-gap: clamp(72px, 3rem + 7vw, 160px);
  --head-gap: clamp(28px, 1rem + 2.6vw, 64px);
  --card-pad: clamp(24px, 1rem + 2.4vw, 56px);
  --block-gap: clamp(32px, 1.5rem + 2vw, 56px);
}
.hero { padding-block: clamp(40px, 1.5rem + 4vw, 96px) clamp(48px, 2rem + 4vw, 112px); }
.hero__copy { gap: 28px; }
@media (min-width: 640px) { .hero__copy { gap: 32px; } }
.founder-strip { padding: var(--card-pad); }
@media (min-width: 960px) { .founder-strip { padding: clamp(24px, 1rem + 1.6vw, 40px) var(--card-pad); gap: 40px; } }
.calc, .apply, .dev, .rs-panel, .int-find, .why-close { padding: var(--card-pad); }
@media (min-width: 640px) { .calc, .apply, .why-close { padding: var(--card-pad); } }
@media (min-width: 1100px) { .calc, .apply, .why-close { padding: var(--card-pad); gap: 64px; } }
.section-head > .lead, .section-head > p { max-width: 52ch; }
.why__head { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; }
.why__ats { padding-top: 0 !important; max-width: 58ch; }
.how__day { margin-bottom: var(--block-gap); }
.how-all { margin-top: var(--block-gap); }
.rs { margin-top: 0; gap: 20px; }
.rs-folds { margin-top: var(--block-gap); }
.why-close { margin-top: var(--block-gap); }
.int-find { margin: var(--block-gap) 0 16px; }
#anbindungen .dev, #integrations .dev { margin-top: var(--block-gap); }
.int-foot { margin-top: var(--block-gap); }
.o2-terr { margin-top: var(--block-gap); }
.o2-alt { margin-top: 20px; }
.o2 { gap: 20px; }
.team .stats { margin-top: var(--block-gap); }
.proof-ref { margin-top: 20px; }
main > section:last-child { padding-bottom: var(--section-gap); }

/* ---------- 25. Visual pass Nov 2026 ---------- */
/* how-card 03: the draft demo needs its natural height */
.vis.vis--draft { height: auto; min-height: 0; }
/* hero moment card replays like the product demos: hidden until .hm-go, keyframes restart on each run */
@media (prefers-reduced-motion: no-preference) {
  .hm-moment.dm-live:not(.hm-go), .hm-moment.dm-live:not(.hm-go) .hm-r, .hm-moment.dm-live:not(.hm-go) .hm-foot { animation: none; opacity: 0; }
  .hm-moment.dm-live.hm-go { animation-delay: .2s; }
  .hm-moment.dm-live.hm-go .hm-r:nth-child(1) { animation-delay: .8s; } .hm-moment.dm-live.hm-go .hm-r:nth-child(2) { animation-delay: 1.05s; }
  .hm-moment.dm-live.hm-go .hm-r:nth-child(3) { animation-delay: 1.3s; } .hm-moment.dm-live.hm-go .hm-r:nth-child(4) { animation-delay: 1.55s; }
  .hm-moment.dm-live.hm-go .hm-foot { animation-delay: 1.9s; }
  .hm-moment > .hm-bezel { transition: opacity .45s ease; }
  .hm-moment.is-out > .hm-bezel { opacity: 0; }
}

/* ---------- 26. Five reasons: the rent test (one stage, two windows; markup = state after the test) ---------- */
.mt { --mt-e: cubic-bezier(.16, 1, .3, 1); display: grid; gap: 14px; min-width: 0; }
.mt-q { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.mt-q p { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); }
.mt-go { display: inline-flex; align-items: center; gap: 8px; font: var(--fw-semibold) var(--fs-small)/1 var(--font-sans); min-height: 40px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, transform .2s var(--mt-e); }
.mt-go span { font-size: 10px; color: var(--cta); }
.mt-go:hover { border-color: var(--ink-2); }
.mt-go:active { transform: scale(.97); }
.mt-go:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }
.mt-stage { display: grid; gap: 12px; }
@media (min-width: 560px) { .mt-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mt-lab { margin: 0 0 7px; font-size: var(--fs-small); line-height: 1.3; font-weight: var(--fw-semibold); color: var(--slate); }
.mt-own .mt-lab { color: var(--accent-strong); }
.mt-win { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.mt-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.mt-dots { display: flex; gap: 5px; flex: none; }
.mt-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); }
.mt-url { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: var(--fw-mono) 11px/1 var(--font-mono); color: var(--slate-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .4s ease, border-color .4s ease, background-color .4s ease; }
.mt-body { position: relative; padding: 12px; min-height: 196px; }
.mt-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: opacity .5s var(--mt-e), filter .5s var(--mt-e), transform .7s var(--mt-e); }
.mt-row + .mt-row { margin-top: 6px; }
.mt-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: var(--fw-semibold) 10px/1 var(--font-mono); background: var(--accent-bg); color: var(--accent-strong); }
.mt-row b { display: block; font-size: var(--fs-small); line-height: 1.2; font-weight: var(--fw-semibold); color: var(--ink); }
.mt-row small { display: block; font-size: var(--fs-micro); line-height: 1.25; color: var(--slate-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-sc { font: var(--fw-semibold) var(--fs-small)/1 var(--font-mono); color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.mt-tag { font: var(--fw-mono) 10.5px/1 var(--font-mono); letter-spacing: .04em; padding: 5px 7px; border-radius: 999px; background: var(--surface-2); color: var(--slate-2); white-space: nowrap; }
.mt-tag--ok { background: var(--success-bg); color: var(--success); }
.mt-note { margin: 0; font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--slate-2); }
/* 1 · cancel */
.mt-lock { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 16px; text-align: center; background: rgba(255, 255, 255, .86); backdrop-filter: blur(2px); transition: opacity .6s var(--mt-e) .5s, transform .6s var(--mt-e) .5s; }
.mt-lock i { justify-self: center; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: var(--ink); color: #fff; }
.mt-lock b { font-size: var(--fs-body); color: var(--ink); }
.mt-lock small { font-size: var(--fs-micro); line-height: 1.45; color: var(--slate); }
.mt-rent .mt-t1 .mt-row { opacity: .35; filter: grayscale(1); }
.mt-rent .mt-t1 .mt-row:nth-child(2) { transition-delay: .12s; } .mt-rent .mt-t1 .mt-row:nth-child(3) { transition-delay: .24s; }
.mt.is-armed .mt-rent .mt-t1 .mt-row { opacity: 1; filter: none; }
.mt.is-armed .mt-lock { opacity: 0; transform: scale(.98); }
/* 2 · where the data lives */
.mt-where { display: grid; gap: 3px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-2); font-size: var(--fs-micro); line-height: 1.45; color: var(--slate); transition: opacity .5s var(--mt-e) .6s, border-color .5s ease .6s, background-color .5s ease .6s; }
.mt-where b { font-size: var(--fs-small); color: var(--ink); }
.mt-own .mt-where { border-color: var(--accent); background: var(--accent-bg); }
.mt-own .mt-t2-url { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-bg); }
.mt.is-armed .mt-where { opacity: .3; border-style: dashed; border-color: var(--border-2); background: transparent; }
.mt.is-armed .mt-t2-url { color: var(--slate-2); border-color: var(--border); background: var(--surface); }
/* 3 · recruiter no. 11 */
.mt-inv { font-size: var(--fs-micro); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.mt-inv-h { display: flex; justify-content: space-between; padding: 8px 10px; background: var(--surface-2); font: var(--fw-mono) 10.5px/1.2 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--slate); }
.mt-inv-l { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-top: 1px solid var(--border); color: var(--ink-2); }
.mt-inv-l span:last-child, .mt-inv-t output { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-inv-new { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--mt-e) .5s; }
.mt-inv-new > div { overflow: hidden; }
.mt-inv-new .mt-inv-l { background: var(--cta-bg); color: var(--cta); font-weight: var(--fw-semibold); }
.mt-own .mt-inv-new .mt-inv-l { background: var(--success-bg); color: var(--success); }
.mt-inv-t { display: flex; justify-content: space-between; padding: 9px 10px; border-top: 1px solid var(--border-2); font-weight: var(--fw-semibold); color: var(--ink); }
.mt.is-armed .mt-inv-new { grid-template-rows: 0fr; }
.mt-hire { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-micro); color: var(--slate-2); }
.mt-hire .mt-av { background: var(--cta-bg); color: var(--cta); transition: transform .6s var(--mt-e), opacity .4s ease; }
.mt.is-armed .mt-hire .mt-av { transform: translateX(-14px); opacity: 0; }
/* 4 · the agency next door */
.mt-stack { position: relative; height: 154px; }
.mt-stack .mt-row { position: absolute; left: 0; right: 0; margin: 0; }
.mt-stack .mt-row[data-p="0"] { transform: translateY(0); } .mt-stack .mt-row[data-p="1"] { transform: translateY(52px); } .mt-stack .mt-row[data-p="2"] { transform: translateY(104px); }
.mt-ghost { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: var(--fs-micro); line-height: 1.45; color: var(--slate); transition: opacity .5s var(--mt-e) .4s, transform .5s var(--mt-e) .4s; }
.mt-ghost b { color: var(--ink); }
.mt-own .mt-ghost { background: var(--accent-bg); color: var(--accent-strong); }
.mt.is-armed .mt-ghost { opacity: 0; transform: translateY(6px); }
/* 5 · tabs */
.mt-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.mt-tab { max-width: 160px; overflow: hidden; padding: 6px 9px; border-radius: 8px 8px 3px 3px; border: 1px solid var(--border); background: var(--surface-2); font-size: 11.5px; line-height: 1.2; color: var(--ink-2); white-space: nowrap; transition: opacity .35s ease, transform .45s var(--mt-e), max-width .45s var(--mt-e), padding .45s var(--mt-e), margin .45s var(--mt-e); }
.mt-tab--lynk { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-strong); font-weight: var(--fw-semibold); }
.mt-own .mt-tab--x { opacity: 0; transform: translateY(-6px); max-width: 0; padding-left: 0; padding-right: 0; border-width: 0; margin-right: -4px; }
.mt.is-armed .mt-own .mt-tab--x { opacity: 1; transform: none; max-width: 160px; padding: 6px 9px; border-width: 1px; margin-right: 0; }
.mt-own .mt-t5 .mt-note { transition: opacity .5s ease 1.4s; }
.mt.is-armed .mt-own .mt-t5 .mt-note { opacity: 0; transition: none; }
.mt-t5 .mt-note { margin-top: 12px; } .mt-t5 .mt-note b { color: var(--ink); }
.mt-snap, .mt-snap * { transition: none !important; }
.rs-vis.mt { padding: 18px; background: var(--bg); }
@media (max-width: 559.98px) { .mt-body { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .mt *, .mt { transition: none !important; } }

/* ---------- 27. How-it-works cards: one clear unit per step ----------
   The visual sits as an inset stage inside its card (same height, same frame, badge always top right),
   wider gaps between cards, so each text clearly belongs to the picture above it. */
.steps { gap: clamp(16px, 1rem + 1vw, 28px); }
.steps .vis-card { padding: 8px; }
.steps .vis-card.lift:hover { border-color: var(--border-2); }
.steps .vis, .steps .vis.vis--draft {
  height: auto; min-height: 0; margin: 0; padding: 40px 16px 18px;
  border: 1px solid var(--border); border-radius: calc(var(--r-lg) - 6px);
  background-color: var(--surface-2);
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
}
.steps .vis > .dm-badge { position: absolute; top: 14px; right: 16px; }
.steps .vis > .dm-win, .steps .vis > .draft-card { width: 100%; max-width: 460px; margin-inline: auto; }
.steps .vis .draft-card .dm-badge { display: none; }
.steps .vis-card__body { padding: 20px 16px 16px; }
.steps .vis-card__kicker--ok { color: var(--accent-strong); }
@media (min-width: 760px) {
  .steps .vis, .steps .vis.vis--draft { height: 344px; padding: 44px 24px 24px; }
  .steps .vis-card__body { padding: 24px 20px 18px; }
}