/* Konventix project site. Every colour, radius, font, size, spacing and
   duration on the page is a brand token from brand/konventix.css, vendored
   from konventix-brand by scripts/sync-brand.sh (the tag is in
   brand/VERSION). This file only says which token goes where; the values,
   the dark theme and the contrast checks live in the brand repository.
   stylelint refuses hex colours, colour functions, gradients and shadows
   here, so the rule "semantic tokens only" is enforced, not remembered.

   The brand stylesheet sets light values on :root and switches to dark
   under [data-theme="dark"] or, without a choice, the OS preference. The
   theme switch in the header sets the attribute (app.js). */
:root {
  --max: 72rem; /* page width */
  --measure: 72ch; /* running text */
}

/* Language switch: the page carries both languages; the inactive one is hidden. */
html[data-lang="en"] [lang="de"],
html[data-lang="de"] [lang="en"] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--kx-space-20);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--kx-font-family-ui);
  font-size: var(--kx-font-size-md);
  line-height: var(--kx-font-line-height-normal);
  color: var(--kx-color-text);
  background: var(--kx-color-background);
}

::selection {
  background: var(--kx-color-selection);
}

a {
  color: var(--kx-color-link);
  text-decoration-thickness: var(--kx-border-width-hairline);
  text-underline-offset: 0.15em;
  transition: color var(--kx-motion-duration-fast) var(--kx-motion-easing-standard);
}

a:hover {
  color: var(--kx-color-link-hover);
}

/* Keyboard focus: the brand's 2 px Patina ring, the same on every surface. */
:focus-visible {
  outline: var(--kx-focus-ring-width) solid var(--kx-focus-ring-color);
  outline-offset: var(--kx-focus-ring-width);
}

/* The skip link's target; not a control, so no ring when it takes focus. */
main:focus {
  outline: none;
}

h1,
h2,
h3 {
  line-height: var(--kx-font-line-height-tight);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--kx-font-family-display);
  letter-spacing: var(--kx-font-letter-spacing-tight);
}

h1 {
  font-size: clamp(var(--kx-font-size-4xl), 5vw, var(--kx-font-size-6xl));
  font-weight: var(--kx-font-weight-bold);
}

h2 {
  font-size: clamp(var(--kx-font-size-2xl), 3vw, var(--kx-font-size-3xl));
  font-weight: var(--kx-font-weight-semibold);
}

h3 {
  font-size: var(--kx-font-size-xl);
  font-weight: var(--kx-font-weight-semibold);
  line-height: var(--kx-font-line-height-snug);
}

p {
  margin: 0 0 1em;
}

/* Running text may hyphenate: both languages carry lang, and German compounds
   need it at phone width. Headings, navigation and labels do not. */
main p,
main li {
  hyphens: auto;
}

code {
  font-family: var(--kx-font-family-mono);
  font-size: 0.9em;
  background: var(--kx-color-surface-sunken);
  padding: 0.1em 0.4em;
  border-radius: var(--kx-radius-sm);
}

address {
  font-style: normal;
  margin: 0 0 1em;
}

.muted {
  color: var(--kx-color-text-muted);
}

.container {
  width: min(100% - 2 * var(--kx-space-5), var(--max));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: var(--kx-space-4);
  top: -4rem;
  background: var(--kx-button-primary-background);
  color: var(--kx-button-primary-text);
  padding: var(--kx-space-2) var(--kx-space-4);
  border-radius: var(--kx-button-radius);
  z-index: 100;
}

.skip-link:focus {
  top: var(--kx-space-4);
}

/* Development banner: a status, so the semantic warning pair, not brand colour. */
.dev-banner {
  display: flex;
  align-items: center;
  gap: var(--kx-space-3);
  justify-content: center;
  padding: var(--kx-space-2) var(--kx-space-5);
  background: var(--kx-color-warning-surface);
  color: var(--kx-color-warning);
  font-size: var(--kx-font-size-sm);
  text-align: center;
}

.dev-banner p {
  margin: 0;
}

/* A status dot: the one place radius-full is meant for. */
.dev-banner__dot {
  flex: none;
  width: var(--kx-space-2);
  height: var(--kx-space-2);
  border-radius: var(--kx-radius-full);
  background: currentcolor;
  animation: pulse 2s var(--kx-motion-easing-standard) infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dev-banner__dot {
    animation: none;
  }
}

/* Header: a marketing surface, so the page ground with the Ink lockup (the
   Travertine one in the dark theme), opaque, one hairline below. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kx-color-background);
  border-bottom: var(--kx-border-width-hairline) solid var(--kx-color-border);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kx-space-2) var(--kx-space-6);
  min-height: var(--kx-space-16);
}

.brand {
  display: inline-flex;
  align-items: center;
}

/* The horizontal lockup from the brand files, 32 px high in a 64 px header:
   more than the 1x clear space the brand asks for. One file per theme; the
   other is display: none, so assistive technology hears the name once. */
.brand__lockup {
  display: block;
  height: var(--kx-space-8);
  width: auto;
}

.brand__lockup--dark {
  display: none;
}

:root[data-theme="dark"] .brand__lockup--light {
  display: none;
}

:root[data-theme="dark"] .brand__lockup--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__lockup--light {
    display: none;
  }

  :root:not([data-theme="light"]) .brand__lockup--dark {
    display: block;
  }
}

.site-nav {
  display: flex;
  gap: var(--kx-space-5);
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav a {
  color: var(--kx-color-text-muted);
  text-decoration: none;
  font-weight: var(--kx-font-weight-medium);
  white-space: nowrap;
  padding: var(--kx-space-1) 0;
  border-bottom: var(--kx-border-width-thick) solid transparent;
  transition: color var(--kx-motion-duration-fast) var(--kx-motion-easing-standard), border-color var(--kx-motion-duration-fast) var(--kx-motion-easing-standard);
}

.site-nav a:hover,
.site-nav a[aria-current="true"] {
  color: var(--kx-color-text);
  border-bottom-color: var(--kx-navigation-active-indicator);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--kx-space-3);
  margin-left: auto;
}

/* Language switch: a segmented control at control height. The pressed segment
   is Ink on Travertine (text on text-inverse), not Cinnabar: one primary
   action per view, and in the header that is the GitHub link. */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  height: var(--kx-size-control-md);
  border: var(--kx-border-width-hairline) solid var(--kx-color-border-strong);
  border-radius: var(--kx-radius-md);
  padding: 2px;
  background: var(--kx-color-surface);
}

.lang-switch__btn {
  border: 0;
  background: transparent;
  color: var(--kx-color-text-muted);
  font: inherit;
  font-size: var(--kx-font-size-sm);
  font-weight: var(--kx-font-weight-semibold);
  letter-spacing: var(--kx-font-letter-spacing-caps);
  padding: 0 var(--kx-space-3);
  border-radius: var(--kx-radius-sm);
  cursor: pointer;
  transition: background-color var(--kx-motion-duration-fast) var(--kx-motion-easing-standard), color var(--kx-motion-duration-fast) var(--kx-motion-easing-standard);
}

.lang-switch__btn:hover {
  color: var(--kx-color-text);
}

.lang-switch__btn[aria-pressed="true"] {
  background: var(--kx-color-text);
  color: var(--kx-color-text-inverse);
}

.theme-switch {
  display: inline-grid;
  place-items: center;
  width: var(--kx-size-control-md);
  height: var(--kx-size-control-md);
  border: var(--kx-border-width-hairline) solid var(--kx-color-border-strong);
  border-radius: var(--kx-radius-md);
  background: var(--kx-color-surface);
  color: var(--kx-color-text-muted);
  cursor: pointer;
  transition: color var(--kx-motion-duration-fast) var(--kx-motion-easing-standard), border-color var(--kx-motion-duration-fast) var(--kx-motion-easing-standard);
}

.theme-switch:hover {
  color: var(--kx-color-text);
  border-color: var(--kx-color-text);
}

.theme-switch__moon {
  display: none;
}

:root[data-theme="dark"] .theme-switch__sun {
  display: none;
}

:root[data-theme="dark"] .theme-switch__moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-switch__sun {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-switch__moon {
    display: block;
  }
}

/* Narrow screens: no sticky bar, no section links — the header scrolls away
   with the language switch, and the page is one column anyway. */
@media (max-width: 56rem) {
  .site-header {
    position: static;
  }

  .site-nav {
    display: none;
  }

  /* Icon only; the link keeps its accessible name (aria-label). */
  .btn--icon span {
    display: none;
  }

  .dev-banner {
    padding: var(--kx-space-2) var(--kx-space-4);
  }
}

/* Buttons: the brand's button tokens. No shadow, nothing moves; hover changes
   the fill or the border. Never pill-shaped. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--kx-space-2);
  min-height: var(--kx-size-control-md);
  padding: 0 var(--kx-space-4);
  border-radius: var(--kx-button-radius);
  font-weight: var(--kx-font-weight-semibold);
  text-decoration: none;
  border: var(--kx-border-width-hairline) solid transparent;
  transition: background-color var(--kx-motion-duration-fast) var(--kx-motion-easing-standard), border-color var(--kx-motion-duration-fast) var(--kx-motion-easing-standard), color var(--kx-motion-duration-fast) var(--kx-motion-easing-standard);
}

.btn--primary {
  background: var(--kx-button-primary-background);
  color: var(--kx-button-primary-text);
}

.btn--primary:hover {
  background: var(--kx-button-primary-background-hover);
  color: var(--kx-button-primary-text);
}

.btn--primary:active {
  background: var(--kx-button-primary-background-active);
}

.btn--secondary {
  background: var(--kx-button-secondary-background);
  border-color: var(--kx-button-secondary-border);
  color: var(--kx-button-secondary-text);
}

.btn--secondary:hover {
  border-color: var(--kx-color-text);
  color: var(--kx-button-secondary-text);
}

.btn--lg {
  min-height: var(--kx-size-control-lg);
  padding: 0 var(--kx-space-6);
}

.btn--icon {
  padding: 0 var(--kx-space-3);
  font-size: var(--kx-font-size-sm);
}

/* Hero: the page ground, like every marketing surface. Its one decoration is
   the notch-and-chevron geometry of the mark, cropped at the right edge, in
   the text colour at 6 % (the brand allows at most 8 %). Cinnabar appears
   where the brand puts it: the primary button and the accent chip. */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--kx-space-16), 10vw, var(--kx-space-24)) 0 clamp(var(--kx-space-12), 7vw, var(--kx-space-20));
  border-bottom: var(--kx-border-width-hairline) solid var(--kx-color-border);
}

.hero__device {
  position: absolute;
  right: -6%;
  top: -12%;
  height: 130%;
  width: auto;
  color: var(--kx-color-text);
  opacity: 0.06;
  pointer-events: none;
}

/* The desktop animation (hero-bg.js) draws to the right of the text column;
   the mask fades it out over the text. A gradient as an alpha mask, not a
   colour, so the brand's no-gradient rule is not what it is about. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  /* stylelint-disable-next-line function-disallowed-list -- alpha mask, not a colour */
  mask-image: linear-gradient(90deg, transparent 0 var(--hero-keepout, 55%), rgb(0 0 0 / 55%) calc(var(--hero-keepout, 55%) + 6rem), rgb(0 0 0) calc(var(--hero-keepout, 55%) + 12rem));
}

.hero__bg[hidden] {
  display: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 52rem;
}

.hero .lead {
  font-size: var(--kx-font-size-lg);
  line-height: var(--kx-font-line-height-relaxed);
  color: var(--kx-color-text-muted);
  max-width: var(--measure);
}

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kx-space-2);
  margin-bottom: var(--kx-space-6);
}

/* Chips: uppercase labels on the caps tokens, hairline border, 2 px radius. */
.chip {
  display: inline-block;
  font-size: var(--kx-font-size-xs);
  font-weight: var(--kx-font-weight-semibold);
  letter-spacing: var(--kx-font-letter-spacing-caps);
  text-transform: uppercase;
  line-height: var(--kx-font-line-height-snug);
  padding: var(--kx-space-1) var(--kx-space-2);
  border-radius: var(--kx-radius-sm);
  border: var(--kx-border-width-hairline) solid var(--kx-color-border-strong);
  color: var(--kx-color-text);
}

.chip--accent {
  border-color: var(--kx-color-border-brand);
  color: var(--kx-color-brand-text);
}

.chip--warn {
  background: var(--kx-color-warning-surface);
  border-color: transparent;
  color: var(--kx-color-warning);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kx-space-3);
  margin: var(--kx-space-6) 0 var(--kx-space-10);
}

.fact-strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--kx-space-3);
}

.fact-strip li {
  display: flex;
  flex-direction: column;
  gap: var(--kx-space-1);
  padding: var(--kx-space-3) var(--kx-space-4);
  border-radius: var(--kx-card-radius);
  background: var(--kx-card-background);
  border: var(--kx-border-width-hairline) solid var(--kx-card-border);
  font-size: var(--kx-font-size-sm);
  color: var(--kx-color-text-muted);
}

.fact-strip strong {
  color: var(--kx-color-text);
}

/* Sections */
.section {
  padding: clamp(var(--kx-space-12), 8vw, var(--kx-space-24)) 0;
}

.section--alt {
  background: var(--kx-color-surface);
  border-top: var(--kx-border-width-hairline) solid var(--kx-color-border);
  border-bottom: var(--kx-border-width-hairline) solid var(--kx-color-border);
}

/* The kicker is the one inscription-style device: uppercase, tracked. Its bar
   is Patina, the secondary accent. */
.section__kicker {
  display: flex;
  align-items: center;
  gap: var(--kx-space-3);
  color: var(--kx-color-brand-text);
  font-weight: var(--kx-font-weight-semibold);
  font-size: var(--kx-font-size-xs);
  letter-spacing: var(--kx-font-letter-spacing-caps);
  text-transform: uppercase;
  margin-bottom: var(--kx-space-3);
}

.section__kicker::before {
  content: "";
  width: var(--kx-space-6);
  height: var(--kx-border-width-thick);
  background: var(--kx-color-secondary);
}

.section__intro {
  font-size: var(--kx-font-size-lg);
  line-height: var(--kx-font-line-height-relaxed);
  color: var(--kx-color-text-muted);
  max-width: var(--measure);
  margin-bottom: var(--kx-space-10);
}

.footnote {
  color: var(--kx-color-text-muted);
  font-size: var(--kx-font-size-sm);
  margin-top: var(--kx-space-8);
  max-width: var(--measure);
}

/* Timeline: markers are status dots (radius-full is for dots), ringed with a
   border instead of a shadow halo. */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--kx-space-2) + 1px);
  top: var(--kx-space-3);
  bottom: var(--kx-space-3);
  width: var(--kx-border-width-hairline);
  background: var(--kx-color-border-strong);
}

.timeline__item {
  position: relative;
  padding-left: var(--kx-space-10);
  padding-bottom: var(--kx-space-8);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__marker {
  position: absolute;
  left: 0;
  top: var(--kx-space-1);
  width: var(--kx-space-5);
  height: var(--kx-space-5);
  border-radius: var(--kx-radius-full);
  background: var(--kx-color-surface);
  border: var(--kx-border-width-thick) solid var(--kx-color-border-strong);
}

.timeline__item--current .timeline__marker {
  border-color: var(--kx-color-brand);
  background: var(--kx-color-brand);
}

.timeline__body p:last-child {
  margin-bottom: 0;
}

.timeline__body {
  max-width: var(--measure);
}

/* Cards of every kind: surface, hairline border, 8 px radius, no shadow. Hover
   strengthens the border; nothing moves. */
.tier,
.card,
.faq__item,
.callout {
  background: var(--kx-card-background);
  border: var(--kx-border-width-hairline) solid var(--kx-card-border);
  border-radius: var(--kx-card-radius);
  padding: var(--kx-space-5) var(--kx-space-6);
}

.card {
  transition: border-color var(--kx-motion-duration-fast) var(--kx-motion-easing-standard);
}

.card:hover {
  border-color: var(--kx-color-border-strong);
}

/* Tiers */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--kx-space-4);
  margin-bottom: var(--kx-space-8);
}

.tier--wide {
  grid-column: 1 / -1;
}

@media (min-width: 60rem) {
  .tiers {
    grid-template-columns: 1fr 1fr 2fr;
  }

  .tier--wide {
    grid-column: auto;
  }
}

.tier h3 {
  margin-bottom: var(--kx-space-1);
}

.tier__note {
  color: var(--kx-color-text-muted);
  font-size: var(--kx-font-size-sm);
  margin-bottom: var(--kx-space-3);
}

.tier ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kx-space-2);
}

/* Module names: Patina, the secondary accent, on its surface. */
.tier li {
  font-size: var(--kx-font-size-sm);
  font-weight: var(--kx-font-weight-medium);
  padding: var(--kx-space-1) var(--kx-space-2);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-color-secondary-surface);
  color: var(--kx-color-secondary);
}

/* Callout: the brand surface with a hairline brand border, no accent bar
   (2 px is reserved for focus rings and the navigation indicator). */
.callout {
  background: var(--kx-color-brand-surface);
  border-color: var(--kx-color-border-brand);
  max-width: 52rem;
}

.callout p:last-child {
  margin-bottom: 0;
}

/* Flow diagram: an ordered list; the arrows are decoration drawn by CSS */
.flow {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--kx-space-2) var(--kx-space-8);
  margin: 0 0 var(--kx-space-10);
}

.flow__step {
  position: relative;
  flex: 1 1 10rem;
  display: flex;
  flex-direction: column;
  gap: var(--kx-space-1);
  padding: var(--kx-space-3) var(--kx-space-4);
  border-radius: var(--kx-radius-md);
  border: var(--kx-border-width-hairline) solid var(--kx-color-border);
  background: var(--kx-color-surface);
  font-size: var(--kx-font-size-sm);
  color: var(--kx-color-text-muted);
}

.flow__step + .flow__step::before {
  content: "→";
  position: absolute;
  left: calc(-1 * var(--kx-space-6));
  top: 50%;
  transform: translateY(-50%);
  color: var(--kx-color-text-subtle);
  font-size: var(--kx-font-size-xl);
}

.flow__label {
  font-family: var(--kx-font-family-mono);
  font-weight: var(--kx-font-weight-semibold);
  color: var(--kx-color-text);
}

@media (max-width: 50rem) {
  .flow {
    gap: var(--kx-space-2);
  }

  .flow__step + .flow__step::before {
    content: none;
  }
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--kx-space-4);
}

.card p:last-child {
  margin-bottom: 0;
  color: var(--kx-color-text-muted);
}

/* Stack */
.stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--kx-space-6);
}

.stack__group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stack__group li {
  padding: var(--kx-space-3) 0;
  border-top: var(--kx-border-width-hairline) solid var(--kx-color-border);
  color: var(--kx-color-text-muted);
}

.stack__group li strong {
  color: var(--kx-color-text);
  display: block;
}

/* Split + links */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--kx-space-8);
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--kx-space-2);
}

.link-list a {
  display: flex;
  flex-direction: column;
  padding: var(--kx-space-3) var(--kx-space-4);
  border-radius: var(--kx-radius-md);
  border: var(--kx-border-width-hairline) solid var(--kx-color-border);
  background: var(--kx-color-surface);
  text-decoration: none;
  color: var(--kx-color-text-muted);
  font-size: var(--kx-font-size-sm);
  transition: border-color var(--kx-motion-duration-fast) var(--kx-motion-easing-standard);
}

.link-list a:hover {
  border-color: var(--kx-color-border-strong);
  color: var(--kx-color-text-muted);
}

.link-list strong {
  color: var(--kx-color-text);
  font-family: var(--kx-font-family-mono);
}

.section--legal {
  font-size: var(--kx-font-size-sm);
}

.section--legal h2 {
  font-size: var(--kx-font-size-2xl);
}

/* FAQ */
.faq {
  display: grid;
  gap: var(--kx-space-3);
  max-width: 52rem;
}

.faq__item h3 {
  font-size: var(--kx-font-size-lg);
  margin-bottom: var(--kx-space-2);
}

.faq__item p:last-child {
  margin-bottom: 0;
  color: var(--kx-color-text-muted);
}

/* Footer */
.site-footer {
  padding: var(--kx-space-8) 0 var(--kx-space-10);
  border-top: var(--kx-border-width-hairline) solid var(--kx-color-border);
  font-size: var(--kx-font-size-sm);
  color: var(--kx-color-text-muted);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kx-space-2) var(--kx-space-8);
  justify-content: space-between;
}

.site-footer p {
  margin: 0;
}