/*
 * Kontrastkopf Static Surfaces · Version 0.3.0
 * Gemeinsame CI-Anwendung fuer statische Referenz-, Leistungs- und Produktseiten.
 * Die Corporate Identity bleibt die Referenz; diese Schicht uebertraegt ihre Regeln.
 */

@import url("./kontrastkopf-core.css?v=0.4.0");

:root {
  --kk-static-header-height: 110px;
  --kk-static-content: min(100%, calc(var(--kk-container-wide) + var(--kk-static-gutter) + var(--kk-static-gutter)));
  --kk-static-gutter: var(--kk-page-gutter);
  --kk-static-section: clamp(72px, 10vw, 144px);
  --kk-static-line-dark: rgba(255, 255, 255, .18);
  --kk-static-line-light: rgba(17, 17, 17, .22);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kk-static-header-height) + 24px);
}

body[data-kk-harmonized] {
  overflow-x: clip;
  background: var(--kk-color-paper);
  color: var(--kk-color-ink);
  font-family: var(--kk-font-body);
  font-size: clamp(1rem, .96rem + .16vw, 1.125rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body[data-kk-harmonized] :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) {
  margin-top: 0;
}

body[data-kk-harmonized] :where(p, li) {
  text-wrap: pretty;
}

body[data-kk-harmonized] :where(h2, h3, h4) {
  font-family: var(--kk-font-body);
  font-weight: 700;
  letter-spacing: -.035em;
  text-transform: none;
  text-wrap: balance;
}

/* Überschriften bleiben vom Folgetext optisch getrennt; Akzente werden nie automatisch unterstrichen. */
body[data-kk-harmonized] :is(.display-title, .display-heading, .closing-title, .split-copy h2, .statement h2, .steps h2, .features-title h2, .boundary h2, .audience h2, .faq > h2, .download h2) {
  margin-bottom: clamp(32px, 4vw, 48px);
}

body[data-kk-harmonized] :is(.display-title, .display-heading, .closing-title, .split-copy h2, .statement h2, .steps h2, .features-title h2, .boundary h2, .audience h2, .faq > h2, .download h2) :is(span, em) {
  text-decoration: none;
  text-underline-offset: initial;
}

body[data-kk-harmonized] :where(a, button, summary) {
  -webkit-tap-highlight-color: transparent;
}

body[data-kk-harmonized] :where(a, button, summary):focus-visible {
  outline: var(--kk-focus-width) solid var(--kk-color-pink);
  outline-offset: var(--kk-focus-offset);
}

body[data-kk-harmonized] :where(.hero, .dark, .chapter--dark, .closing, .boundary, .download, .site-header) :where(a, button, summary):focus-visible {
  outline-color: var(--kk-color-lime);
}

body[data-kk-harmonized] ::selection {
  background: var(--kk-color-lime);
  color: var(--kk-color-ink);
}

/* Flächenkontrast schlägt jede geerbte Einzelregel. */
body[data-kk-harmonized] :is(.dark, .agreement, .closing, .download, .boundary, .chapter--dark, .lab-card--dark, .system-card:not(:nth-child(3))) :where(h1, h2, h3, h4, p, li, small, strong, .body-copy, .card-note, .section-intro) {
  color: var(--kk-color-white);
  opacity: 1;
}

body[data-kk-harmonized] .skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  min-height: var(--kk-control-min);
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  background: var(--kk-color-lime);
  color: var(--kk-color-ink);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 160ms ease;
}

body[data-kk-harmonized] .skip-link:focus {
  transform: translateY(0);
}

/* Verbindliche Theme-/CI-Shell: transparent im Hero, Blur erst nach Scroll. */
body[data-kk-harmonized] .site-header {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto;
  min-height: var(--kk-static-header-height);
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--kk-static-line-dark);
  background: transparent;
  color: var(--kk-color-white);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 180ms ease, backdrop-filter 180ms ease, -webkit-backdrop-filter 180ms ease;
}

body[data-kk-harmonized] .site-header.is-scrolled,
body[data-kk-harmonized] .site-header[data-menu-open="true"] {
  border-bottom-color: var(--kk-shell-glass-border);
  background: var(--kk-shell-glass-background);
  -webkit-backdrop-filter: var(--kk-shell-glass-filter);
  backdrop-filter: var(--kk-shell-glass-filter);
}

body[data-kk-harmonized] .site-header .header-inner {
  width: var(--kk-static-content);
  min-height: var(--kk-static-header-height);
  margin-inline: auto;
  padding-inline: var(--kk-static-gutter);
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}

body[data-kk-harmonized] .site-header .brand-link {
  width: 250px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

body[data-kk-harmonized] .site-header .brand-link img {
  width: 250px;
  max-width: 100%;
  height: auto;
  display: block;
  filter: none;
}

body[data-kk-harmonized] .site-header :is(.nav, .main-nav) {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 2.2vw, 36px);
  overflow: visible;
}

body[data-kk-harmonized] .site-header :is(.nav, .main-nav) a {
  position: relative;
  min-height: var(--kk-control-min);
  padding: 12px 0;
  display: inline-flex;
  align-items: center;
  color: var(--kk-color-white);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 0;
}

body[data-kk-harmonized] .site-header :is(.back-link, .header-cta) {
  min-width: 0;
  min-height: var(--kk-control-min);
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--kk-color-white);
  border-radius: 999px;
  background: transparent;
  color: var(--kk-color-white);
  box-shadow: none;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

body[data-kk-harmonized] .site-header :is(.back-link, .header-cta):is(:hover, :focus-visible) {
  border-color: var(--kk-color-white);
  background: var(--kk-color-white);
  color: var(--kk-color-ink);
}

body[data-kk-harmonized] .menu-toggle {
  width: 48px;
  height: 48px;
  padding: 0;
  display: none;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--kk-color-white);
  cursor: pointer;
}

body[data-kk-harmonized] .menu-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body[data-kk-harmonized] .menu-toggle :is(> span[aria-hidden="true"], .menu-toggle-icon) {
  position: relative;
  width: 28px;
  height: 18px;
  display: block;
}

body[data-kk-harmonized] .menu-toggle :is(> span[aria-hidden="true"], .menu-toggle-icon)::before,
body[data-kk-harmonized] .menu-toggle :is(> span[aria-hidden="true"], .menu-toggle-icon)::after {
  position: absolute;
  left: 0;
  width: 28px;
  height: 2px;
  background: currentColor;
  content: "";
  transition: top 160ms ease, transform 160ms ease;
}

body[data-kk-harmonized] .menu-toggle :is(> span[aria-hidden="true"], .menu-toggle-icon)::before { top: 3px; }
body[data-kk-harmonized] .menu-toggle :is(> span[aria-hidden="true"], .menu-toggle-icon)::after { top: 13px; }
body[data-kk-harmonized] .site-header[data-menu-open="true"] .menu-toggle :is(> span[aria-hidden="true"], .menu-toggle-icon)::before { top: 8px; transform: rotate(45deg); }
body[data-kk-harmonized] .site-header[data-menu-open="true"] .menu-toggle :is(> span[aria-hidden="true"], .menu-toggle-icon)::after { top: 8px; transform: rotate(-45deg); }

/* Buttons und Links: Lime aktiviert, Pink hebt hervor. */
body[data-kk-harmonized] :is(.button, .demo-link) {
  min-width: var(--kk-control-min);
  min-height: var(--kk-control-min);
  padding: var(--kk-control-padding-block) var(--kk-control-padding-inline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kk-control-gap);
  border: 2px solid currentColor;
  border-radius: 0;
  background: var(--kk-color-lime);
  color: var(--kk-color-ink);
  box-shadow: none;
  font-family: var(--kk-font-body);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

body[data-kk-harmonized] :is(.button, .demo-link):not([aria-disabled="true"]):hover {
  background: var(--kk-color-white);
  color: var(--kk-color-ink);
  transform: translateY(-1px);
}

body[data-kk-harmonized] :is(.button.secondary, .button--line, .button-secondary) {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

body[data-kk-harmonized] :is(.button, .demo-link)[aria-disabled="true"] {
  border-color: var(--kk-static-line-dark);
  background: transparent;
  color: var(--kk-color-white);
  cursor: not-allowed;
}

body[data-kk-harmonized] :where(.button, .demo-link) svg {
  flex: 0 0 auto;
  align-self: center;
}

/* Ruhiger CI-Hero für Referenz-, Leistungs- und Produktseiten. */
body[data-kk-page="styleguide"] .hero,
body[data-kk-page="service"] .hero,
body[data-kk-page="plugin"] .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(920px, 100svh);
  padding-top: var(--kk-static-header-height);
  background: var(--kk-color-night);
  color: var(--kk-color-white);
}

body[data-kk-page="styleguide"] .hero > :not(.kk-motion-current, .hero-grid),
body[data-kk-page="service"] .hero > :not(.kk-motion-current, .hero-grid),
body[data-kk-page="plugin"] .hero > :not(.kk-motion-current, .hero-grid) {
  position: relative;
  z-index: 1;
}

body[data-kk-page="styleguide"] .hero > .kk-motion-current,
body[data-kk-page="service"] .hero > .kk-motion-current,
body[data-kk-page="plugin"] .hero > .kk-motion-current,
body[data-kk-page="service"] .hero > .hero-grid {
  position: absolute;
  z-index: 0;
}

body[data-kk-page="styleguide"] .hero-inner {
  width: var(--kk-static-content);
  min-height: calc(min(920px, 100svh) - var(--kk-static-header-height));
  margin-inline: auto;
  padding: clamp(72px, 9vw, 128px) var(--kk-static-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

body[data-kk-page="styleguide"] .hero h1 {
  max-width: 12ch;
  margin: 24px 0 32px;
  font-family: var(--kk-font-display);
  font-size: clamp(4rem, 8vw, 7.5rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.12;
  text-transform: uppercase;
  text-wrap: balance;
}

body[data-kk-page="styleguide"] .hero-title-line { display: inline; }
body[data-kk-page="styleguide"] .hero-title-line:first-child { display: block; }
body[data-kk-page="styleguide"] .hero-title-line:nth-child(2)::after { content: " "; }
body[data-kk-page="styleguide"] .hero-title-accent { color: var(--kk-color-pink); font-style: normal; }
body[data-kk-page="styleguide"] :is(.hero, .closing) .eyebrow { color: var(--kk-color-white); }

body[data-kk-page="styleguide"] :is(.display-title, .closing-title) {
  max-width: var(--kk-content-heading);
  margin-bottom: clamp(32px, 5vw, 64px);
  font-family: var(--kk-font-body);
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.02;
  text-transform: none;
  text-wrap: balance;
}

body[data-kk-page="styleguide"] .display-title span {
  color: var(--kk-color-ink);
  text-decoration: none;
}
body[data-kk-page="styleguide"] .chapter--dark .display-title span,
body[data-kk-page="styleguide"] .closing-title span { color: var(--kk-color-pink); text-decoration: none; }
body[data-kk-page="styleguide"] .chapter { padding-block: var(--kk-static-section); }
body[data-kk-page="styleguide"] .chapter-inner { width: var(--kk-static-content); padding-inline: var(--kk-static-gutter); }
body[data-kk-page="styleguide"] .button--pink { background: var(--kk-color-lime); border-color: var(--kk-color-lime); }
body[data-kk-page="styleguide"] .button--pink:hover { background: var(--kk-color-white); border-color: var(--kk-color-white); }
body[data-kk-page="styleguide"] .swatch--pink .swatch-role { color: var(--kk-color-ink); }
body[data-kk-page="styleguide"] .chapter--dark :is(.body-copy, .card-note) { color: var(--kk-color-white); }
body[data-kk-page="styleguide"] .closing-copy { color: var(--kk-color-white); }
body[data-kk-page="styleguide"] :is(.body-copy, .result-item p, .a11y-item p) { color: var(--kk-color-ink); }
body[data-kk-page="styleguide"] .chapter--dark :is(h2, h3, p, .card-note, .body-copy) { color: var(--kk-color-white); }
body[data-kk-page="styleguide"] .chapter--dark .display-title span,
body[data-kk-page="styleguide"] .closing .closing-title span { color: var(--kk-color-pink); }

body[data-kk-page="styleguide"] .chapter--dark .identity-card--light :is(h3, .card-note) {
  color: var(--kk-color-ink);
}

/* Drei Leistungsseiten */
body[data-kk-page="service"] .hero {
  min-height: min(920px, 100svh);
}

body[data-kk-page="service"] .hero-grid {
  z-index: 0;
  opacity: .28;
}

body[data-kk-page="service"] .hero-ring { display: none; }

body[data-kk-page="service"] .hero > div:last-child {
  width: var(--kk-static-content);
  margin-inline: auto;
  padding-inline: var(--kk-static-gutter);
}

body[data-kk-page="service"] .hero-inner {
  min-height: calc(min(920px, 100svh) - var(--kk-static-header-height));
  padding: clamp(72px, 9vw, 128px) 0;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr);
  align-items: center;
  gap: clamp(48px, 7vw, 96px);
}

body[data-kk-page="service"] .hero h1 {
  max-width: 14ch;
  margin: 24px 0 32px;
  font-family: var(--kk-font-display);
  font-size: clamp(4rem, 7.2vw, 7.25rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
}

body[data-kk-page="service"] .hero h1 span { color: var(--kk-color-pink); }
body[data-kk-page="service"] .hero-visual { width: 100%; max-width: 520px; justify-self: end; opacity: .9; }
body[data-kk-page="service"] .hero-lead { max-width: 62ch; color: var(--kk-color-white); }
body[data-kk-page="service"] .micro-proof { color: var(--kk-color-white); }
body[data-kk-page="service"] .micro-proof :where(span) { opacity: 1; }
body[data-kk-page="service"] .section { padding-block: var(--kk-static-section); }
body[data-kk-page="service"] .section-head > * { min-width: 0; }

body[data-kk-page="service"] .display-heading,
body[data-kk-page="service"] .split-copy h2,
body[data-kk-page="service"] .closing h2 {
  max-width: var(--kk-content-heading);
  font-family: var(--kk-font-body);
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.03;
  text-transform: none;
  text-wrap: balance;
}

body[data-kk-page="service"] :is(.display-heading, .split-copy h2) span {
  color: var(--kk-color-ink);
  text-decoration: none;
}
body[data-kk-page="service"] :is(.dark .display-heading, .agreement .display-heading, .closing h2) span { color: var(--kk-color-pink); text-decoration: none; }
body[data-kk-page="service"] .section-intro { max-width: 62ch; color: var(--kk-color-ink); opacity: 1; }
body[data-kk-page="service"] .dark :is(.section-intro, p) { color: var(--kk-color-white); opacity: 1; }
body[data-kk-page="service"] .agreement :is(h2, h3, p, li) { color: var(--kk-color-white); opacity: 1; }
body[data-kk-page="service"] .agreement .display-heading span { color: var(--kk-color-pink); }
body[data-kk-page="service"] :is(.problem-grid, .service-grid, .value-grid) { align-items: stretch; }
body[data-kk-page="service"] .info-card { grid-row: span 3; grid-template-rows: subgrid; gap: 16px; }
@supports not (grid-template-rows: subgrid) {
  body[data-kk-page="service"] .info-card { grid-template-rows: auto minmax(6em, auto) 1fr; }
}
body[data-kk-page="service"] .info-card p { margin-bottom: 0; color: var(--kk-color-ink); opacity: 1; }
body[data-kk-page="service"] .info-card.accent { border-color: var(--kk-color-pink); box-shadow: inset 0 6px 0 var(--kk-color-pink); }
body[data-kk-page="service"] .info-card.accent .card-index { color: var(--kk-color-pink); }
body[data-kk-page="service"] .info-card.accent p { color: var(--kk-color-paper); opacity: 1; }
body[data-kk-page="service"] .process-step p { color: var(--kk-color-white); opacity: 1; }
body[data-kk-page="service"] .side-note { border: 0; border-top: 6px solid var(--kk-color-pink); }
body[data-kk-page="service"] .proof-note blockquote span { color: var(--kk-color-pink); }
body[data-kk-page="service"] .closing { background: var(--kk-color-night); color: var(--kk-color-white); }
body[data-kk-page="service"] .closing p { color: var(--kk-color-white); opacity: 1; }
body[data-kk-page="service"] .faq details p { color: var(--kk-color-ink); opacity: 1; }

/* Plugin-Landingpage */
body[data-kk-page="plugin"] .hero {
  min-height: clamp(760px, 100svh, 980px);
  padding: clamp(160px, 17vw, 224px) var(--kk-static-gutter) clamp(80px, 10vw, 128px);
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .8fr);
  gap: clamp(48px, 7vw, 96px);
}

body[data-kk-page="plugin"] .hero h1 {
  max-width: 18ch;
  font-family: var(--kk-font-display);
  font-size: clamp(4rem, 7.5vw, 7.5rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
}

body[data-kk-page="styleguide"] .hero h1,
body[data-kk-page="service"] .hero h1,
body[data-kk-page="plugin"] .hero h1 {
  font-kerning: normal;
  letter-spacing: normal;
}

body[data-kk-page="service"] .hero h1.hero-title--long {
  max-width: 14ch;
  font-size: clamp(3.5rem, 5.6vw, 6rem);
  line-height: 1.16;
}

body[data-kk-page="plugin"] .hero h1 em { color: var(--kk-color-pink); font-style: normal; }
body[data-kk-page="plugin"] .hero-visual { width: 100%; max-width: 450px; justify-self: end; opacity: .9; }
body[data-kk-page="plugin"] .browser-card {
  transform: none;
  border-color: rgba(255, 255, 255, .32);
  box-shadow: 0 28px 72px rgba(0, 0, 0, .38);
}
body[data-kk-page="plugin"] .browser-bar { color: #4f4d49; }
body[data-kk-page="plugin"] .hero-intro,
body[data-kk-page="plugin"] .submission-status { color: var(--kk-color-white); opacity: 1; }
body[data-kk-page="plugin"] .hero .hero-intro { margin: clamp(40px, 5vw, 72px) 0 0; }
body[data-kk-page="plugin"] .hero .submission-status {
  margin: clamp(36px, 4.5vw, 64px) 0 0;
  padding-top: 0;
  border-top: 0;
}
body[data-kk-page="plugin"] .content-preview h2 { font-family: var(--kk-font-body); font-weight: 700; }
body[data-kk-page="plugin"] .section-pad { padding-block: var(--kk-static-section); padding-inline: var(--kk-static-gutter); }

body[data-kk-page="plugin"] :is(.statement h2, .steps h2, .features-title h2, .boundary h2, .audience h2, .faq > h2, .download h2) {
  max-width: var(--kk-content-heading);
  font-family: var(--kk-font-body);
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.03;
  text-transform: none;
  text-wrap: balance;
}

body[data-kk-page="plugin"] :is(.statement h2, .steps h2, .features-title h2, .boundary h2, .audience h2, .download h2) :is(span, em) {
  color: var(--kk-color-ink);
  font-style: normal;
  text-decoration: none;
}

body[data-kk-page="plugin"] .steps {
  background: var(--kk-color-paper);
  color: var(--kk-color-ink);
}

body[data-kk-page="plugin"] .steps-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
  border: 0;
}

body[data-kk-page="plugin"] .steps article {
  min-width: 0;
  min-height: 0;
  padding: clamp(28px, 3vw, 48px);
  border: 0;
  background: var(--kk-color-white);
}

body[data-kk-page="plugin"] .steps article + article { padding-left: clamp(28px, 3vw, 48px); }

body[data-kk-page="plugin"] .steps .section-label {
  padding-top: 0;
  border-top: 0;
}

body[data-kk-page="plugin"] .steps h2 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(1.75rem, 2.2vw, 2.4rem);
  letter-spacing: -.03em;
  line-height: 1.12;
}

body[data-kk-page="plugin"] .download {
  background: var(--kk-color-night);
  color: var(--kk-color-white);
}

body[data-kk-page="plugin"] .steps :is(.section-label, p, h2) { color: var(--kk-color-ink); opacity: 1; }
body[data-kk-page="plugin"] .steps .step-no { color: var(--kk-color-pink); opacity: 1; }
body[data-kk-page="plugin"] .download :is(p, h2, small) { color: var(--kk-color-white); opacity: 1; }
body[data-kk-page="plugin"] .steps h2 :is(span, em) { color: var(--kk-color-ink); text-decoration: none; }
body[data-kk-page="plugin"] .download h2 :is(span, em) { color: var(--kk-color-pink); text-decoration: none; }

/* Gemeinsamer Abschlussstrom direkt vor dem Footer. */
body[data-kk-harmonized] .kk-final-motion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 0;
  background: var(--kk-color-night);
  color: var(--kk-color-white);
}

body[data-kk-harmonized] .kk-final-motion::after {
  content: none;
  display: none;
}

body[data-kk-harmonized] .kk-final-motion > :not(.kk-motion-current) {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

body[data-kk-harmonized] .kk-final-motion > .kk-motion-current {
  position: absolute;
  z-index: -1;
  inset: 0;
}

body[data-kk-harmonized] .kk-final-motion .kk-motion-current__field {
  mix-blend-mode: normal;
}
body[data-kk-page="plugin"] .boundary h2 :is(span, em) { color: var(--kk-color-white); text-decoration: none; }
body[data-kk-page="plugin"] .features-title { min-width: 0; }
body[data-kk-page="plugin"] .features-title h2 { max-width: 16ch; }
body[data-kk-page="plugin"] .feature-list article { gap: 24px; }
body[data-kk-page="plugin"] .feature-list article > span { border: 0; background: transparent; color: var(--kk-color-pink); }
body[data-kk-page="plugin"] .benefit-strip article { display: grid; grid-template-rows: auto minmax(3.2em, auto) 1fr; gap: 12px; }
body[data-kk-page="plugin"] .benefit-strip article > span { color: var(--kk-color-ink); }
body[data-kk-page="plugin"] .boundary :is(p, h2),
body[data-kk-page="plugin"] .boundary .legal-note { color: var(--kk-color-white); opacity: 1; }
body[data-kk-page="plugin"] :is(.statement-grid > div, .feature-list p, .faq details p) { color: var(--kk-color-ink); opacity: 1; }
body[data-kk-page="plugin"] .faq > h2 {
  color: var(--kk-color-ink);
  text-decoration: none;
}

@media (max-width: 1100px) {
  :root { --kk-static-header-height: 85px; }

  body[data-kk-harmonized] .site-header .header-inner {
    min-height: var(--kk-static-header-height);
    grid-template-columns: 175px 1fr 48px;
  }

  body[data-kk-harmonized] .site-header .brand-link,
  body[data-kk-harmonized] .site-header .brand-link img { width: 175px; }

  body[data-kk-harmonized] .menu-toggle {
    grid-column: 3;
    display: grid;
    justify-self: end;
  }

  body[data-kk-harmonized] .site-header :is(.nav, .main-nav),
  body[data-kk-harmonized] .site-header :is(.back-link, .header-cta) {
    display: none;
  }

  body[data-kk-harmonized] .site-header[data-menu-open="true"] .header-inner {
    grid-template-rows: var(--kk-static-header-height) auto auto;
    align-items: start;
    padding-bottom: 32px;
  }

  body[data-kk-harmonized] .site-header[data-menu-open="true"] :is(.nav, .main-nav) {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 2px solid var(--kk-color-pink);
  }

  body[data-kk-harmonized] .site-header[data-menu-open="true"] :is(.nav, .main-nav) a {
    width: 100%;
    padding: 14px 0;
  }

  body[data-kk-harmonized] .site-header[data-menu-open="true"] :is(.back-link, .header-cta) {
    grid-column: 1 / -1;
    grid-row: 3;
    width: max-content;
    margin-top: 20px;
    display: inline-flex;
    justify-self: start;
  }

  body[data-kk-page="service"] .hero-inner { grid-template-columns: 1fr; }
  body[data-kk-page="service"] .hero-visual { max-width: 620px; justify-self: start; }
  body[data-kk-page="plugin"] .hero { grid-template-columns: 1fr; }
  body[data-kk-page="plugin"] .hero-visual { max-width: 450px; justify-self: start; }
  body[data-kk-page="plugin"] .steps-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-kk-page="plugin"] .steps article,
  body[data-kk-page="plugin"] .steps article + article {
    min-height: 0;
    padding: clamp(28px, 5vw, 48px);
    border: 0;
  }
}

@media (max-width: 720px) {
  body[data-kk-page="styleguide"] .hero h1,
  body[data-kk-page="plugin"] .hero h1 { font-size: clamp(3rem, 14vw, 5.25rem); }
  body[data-kk-page="service"] .hero h1 { max-width: 14ch; font-size: clamp(3rem, 14vw, 5.25rem); line-height: 1.14; }
  body[data-kk-page="service"] .hero h1.hero-title--long { font-size: clamp(2.75rem, 12vw, 4.5rem); line-height: 1.16; }
  body[data-kk-page="styleguide"] :is(.display-title, .closing-title),
  body[data-kk-page="service"] :is(.display-heading, .split-copy h2, .closing h2),
  body[data-kk-page="plugin"] :is(.statement h2, .steps h2, .features-title h2, .boundary h2, .audience h2, .faq > h2, .download h2) {
    max-width: 100%;
    font-size: clamp(2rem, 8.5vw, 3.2rem);
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.08;
  }
  body[data-kk-page="plugin"] .steps h2 { max-width: 15ch; font-size: clamp(1.75rem, 8vw, 2.35rem); line-height: 1.12; }
  body[data-kk-page="service"] .info-card { grid-row: auto; grid-template-rows: auto auto 1fr; }
}

@media (max-width: 380px) {
  body[data-kk-harmonized] .site-header .header-inner { grid-template-columns: 160px 1fr 48px; }
  body[data-kk-harmonized] .site-header .brand-link,
  body[data-kk-harmonized] .site-header .brand-link img { width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-kk-harmonized] *,
  body[data-kk-harmonized] *::before,
  body[data-kk-harmonized] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  body[data-kk-harmonized] .site-header,
  body[data-kk-harmonized] .site-header.is-scrolled,
  body[data-kk-harmonized] .site-header[data-menu-open="true"] {
    border-bottom: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body[data-kk-harmonized] .site-header :is(.nav, .main-nav) a,
  body[data-kk-harmonized] .site-header :is(.back-link, .header-cta),
  body[data-kk-harmonized] .menu-toggle { color: CanvasText; }
}

@media print {
  body[data-kk-harmonized] .site-header,
  body[data-kk-harmonized] .contact-dock,
  body[data-kk-harmonized] .kk-touch-pointer { display: none !important; }
  body[data-kk-harmonized] :where(.hero, .chapter, .section, .closing) { break-inside: avoid; }
}