/* ==========================================================================
   Lingobit design system (D2), the site's stylesheet since T5.

   Color comes from ../brand/brand-tokens.css, linked before this file.
   It is not copied here: this file only maps brand tokens to roles.
   Spec: doc/website-relaunch/design-system-spec.md. Accepted sample: _design/ (variant A).

   Rules referenced as П1–П14 and §-numbers are in
   doc/website-relaunch/11-information-presentation-map.md (D1).
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* Neutrals (D2). Text pairs pass WCAG AA; see design-system-spec.md. */
  --ds-ink: #191C1F;            /* 17.1:1 on #FFF */
  --ds-ink-2: #535B63;          /* secondary text: 6.9:1 on #FFF, 6.4:1 on surface and tint */
  --ds-ink-3: #687079;          /* meta, separators; only on #FFF (5.0:1) or surface (4.6:1) */
  --ds-bg: #FFFFFF;
  --ds-surface: #F5F6F6;        /* quiet band, code, callout */
  --ds-placeholder: #ECEEF0;    /* screenshot or video slot before the real frame exists */
  --ds-line: #E2E5E8;           /* hairline separators (decorative) */
  --ds-line-strong: #C9CED4;    /* card, table, chip borders (decorative) */
  --ds-control: #7D858E;        /* form control borders: 3.7:1 on #FFF (WCAG 1.4.11) */
  --ds-danger: #B42318;         /* form errors (spec §3.10), always with the word "Error:": 6.6:1 on #FFF */
  --ds-danger-soft: #FEF3F2;    /* background of an error summary; danger text on it 6.1:1 */
  --ds-dark: #14181A;           /* footer; B1 checked on-dark pairs against it */
  --ds-dark-line: #2C3236;
  --ds-on-dark: var(--brand-graphite-on-dark);  /* 12.5:1 on dark */
  --ds-on-dark-2: #A7AFB7;      /* 8.1:1 on dark */

  /* Roles mapped to brand tokens: one accent per page (brand-guide.md §6) */
  --ds-action: var(--brand-accent);              /* filled button */
  --ds-action-hover: var(--brand-accent-hover);
  --ds-on-action: var(--brand-on-accent);
  --ds-link: var(--brand-accent-strong);         /* links, kicker, outline button */
  --ds-focus: var(--brand-accent-strong);
  --ds-tint: var(--brand-accent-soft);           /* migration band, hover of route cards */
  --ds-nav: var(--brand-graphite);               /* top menu and logo word */
  --ds-link-on-dark: var(--brand-accent-on-dark);

  /* Shape: radii never exceed 12px; one shadow, only for a full-window screenshot */
  --ds-radius-s: 4px;
  --ds-radius-m: 6px;
  --ds-radius-l: 8px;            /* Windows 11 window corner */
  --ds-radius-xl: 12px;
  --ds-shadow-window: 0 1px 2px rgb(20 24 26 / 0.06), 0 12px 32px -10px rgb(20 24 26 / 0.18);
  --ds-shadow-menu: 0 10px 28px -12px rgb(20 24 26 / 0.22);

  /* Widths */
  --ds-wrap: 1280px;
  --ds-gutter: clamp(20px, 12.57px + 1.905vw, 40px);
  --ds-measure: 66ch;            /* paragraphs */
  --ds-measure-lead: 34em;       /* hero and section leads */
  --ds-header-h: 56px;

  /* Fonts */
  --ds-font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ds-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ds-font-label: var(--ds-font-text);
  --ds-font-mono: "Cascadia Mono", Consolas, ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type (variant A; sizes are fluid between 390 and 1440 px) */
  --ds-display-weight: 600;
  --ds-display-stretch: 100%;
  --ds-fs-h1: clamp(36px, 28.57px + 1.905vw, 56px);      /* homepage display H1, up to ~40 characters */
  --ds-lh-h1: 1.07;
  --ds-fs-h1-page: clamp(30px, 25.54px + 1.143vw, 42px); /* other pages: 60 characters fit two lines in 34rem */
  --ds-lh-h1-page: 1.12;
  --ds-ls-h1: -0.022em;
  --ds-fs-h2-1: clamp(28px, 23.54px + 1.143vw, 40px);
  --ds-lh-h2-1: 1.12;
  --ds-fs-h2-2: clamp(24px, 21.77px + 0.571vw, 30px);
  --ds-lh-h2-2: 1.2;
  --ds-fs-h2-3: clamp(19px, 18.63px + 0.095vw, 20px);
  --ds-lh-h2-3: 1.3;
  --ds-ls-h2: -0.015em;
  --ds-fs-h3: clamp(18px, 17.63px + 0.095vw, 19px);
  --ds-lh-h3: 1.35;
  --ds-fs-lead: clamp(17px, 16.26px + 0.19vw, 19px);
  --ds-lh-lead: 1.55;
  --ds-fs-body: 16px;
  --ds-lh-body: 1.6;
  --ds-fs-small: 14px;
  --ds-lh-small: 1.5;
  --ds-fs-kicker: clamp(12px, 11.63px + 0.095vw, 13px);
  --ds-ls-kicker: 0.06em;

  /* Density (variant A) */
  --ds-section-y: clamp(36px, 19.66px + 4.19vw, 80px);
  --ds-hero-top: clamp(24px, 12.11px + 3.048vw, 56px);
  --ds-hero-bottom: clamp(32px, 23.09px + 2.286vw, 56px);
  --ds-space-head: clamp(22px, 16.8px + 1.333vw, 36px);   /* heading block to content */
  --ds-space-m: clamp(16px, 13.03px + 0.762vw, 24px);
  --ds-space-s: clamp(12px, 10.51px + 0.381vw, 16px);
  --ds-space-xl: clamp(32px, 26.06px + 1.524vw, 48px);    /* between sub-blocks of one section, tab panels on a phone (T6a) */
  --ds-gap: clamp(20px, 15.54px + 1.143vw, 32px);         /* grid gaps */
  --ds-hero-gap: clamp(32px, 20.11px + 3.048vw, 64px);    /* copy to media */
}

@media (min-width: 960px) {
  :root { --ds-header-h: 64px; }
}

/* 2. Base ------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--ds-header-h) + 56px);
}

body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-family: var(--ds-font-text);
  font-size: var(--ds-fs-body);
  line-height: var(--ds-lh-body);
  overflow-wrap: break-word;
}

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

img,
video {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

a {
  color: var(--ds-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

code,
kbd,
samp,
pre {
  font-family: var(--ds-font-mono);
}

code {
  font-size: 0.92em;
}

strong,
b {
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

button {
  font: inherit;
}

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

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A short token that must not split at its hyphen, such as a command-line switch: <code class="nowrap">-duplicate</code> */
.nowrap {
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: 8px;
  transform: translateY(-200%);
  z-index: 100;
  padding: 10px 16px;
  background: var(--ds-bg);
  border: 2px solid var(--ds-focus);
  border-radius: var(--ds-radius-m);
  font-weight: 600;
}

.skip-link:focus {
  transform: none;
}

/* Prose: running text inside sections (weight 2 and 3 copy) */
.prose > * + * {
  margin-top: 0.85em;
}

.prose p,
.prose li {
  max-width: var(--ds-measure);
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 0.35em;
}

/* 3. Type ------------------------------------------------------------------ */

.display,
h1,
.h1,
h2,
h3 {
  font-family: var(--ds-font-display);
  font-weight: var(--ds-display-weight);
  font-stretch: var(--ds-display-stretch);
  color: var(--ds-ink);
  text-wrap: balance;
}

h1,
.h1 {
  font-size: var(--ds-fs-h1-page);
  line-height: var(--ds-lh-h1-page);
  letter-spacing: var(--ds-ls-h1);
}

.hero--home h1 {
  font-size: var(--ds-fs-h1);
  line-height: var(--ds-lh-h1);
}

h2 {
  font-size: var(--ds-fs-h2-2);
  line-height: var(--ds-lh-h2-2);
  letter-spacing: var(--ds-ls-h2);
}

h3 {
  font-size: var(--ds-fs-h3);
  line-height: var(--ds-lh-h3);
  font-stretch: 100%;
}

/* An h2 that looks like h3: small labelled blocks on a utility page (Download, Contact, T6a); wins over the weight sizes */
h2.h3,
.sec h2.h3 {
  font-size: var(--ds-fs-h3);
  line-height: var(--ds-lh-h3);
  letter-spacing: 0;
  font-stretch: 100%;
}

h2.h1 {
  font-size: var(--ds-fs-h1-page);
  line-height: var(--ds-lh-h1-page);
  letter-spacing: var(--ds-ls-h1);
}

.kicker {
  display: block;
  font-family: var(--ds-font-label);
  font-size: var(--ds-fs-kicker);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--ds-ls-kicker);
  text-transform: uppercase;
  color: var(--ds-link);
}

.lead {
  font-size: var(--ds-fs-lead);
  line-height: var(--ds-lh-lead);
  color: var(--ds-ink-2);
  max-width: var(--ds-measure-lead);
  text-wrap: pretty;
}

.small,
.caption {
  font-size: var(--ds-fs-small);
  line-height: var(--ds-lh-small);
  color: var(--ds-ink-2);
}

/* Edition label (D1 §4.1): quiet secondary text under a section heading.
   No background, border, icon, accent color, or link. Not an accent (П5). */
.edition {
  margin-top: 6px;
  font-size: var(--ds-fs-small);
  line-height: 1.4;
  font-weight: 400;
  color: var(--ds-ink-2);
}

/* At the end of a description line (Guides overview, D1 §4.1 p. 6): after a middle dot, never on its own line start */
.edition--inline {
  margin-top: 0;
  white-space: nowrap;
}

.edition--inline::before {
  content: "\00B7" / "";
  margin: 0 8px;
  color: var(--ds-ink-3);
}

/* 4. Buttons and links ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-m);
  font-family: var(--ds-font-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--lg {
  min-height: 48px;
  padding: 0 24px;
}

/* One filled button per screen (П12) */
.btn--primary {
  background: var(--ds-action);
  color: var(--ds-on-action);
}

.btn--primary:hover {
  background: var(--ds-action-hover);
}

.btn--primary:focus-visible {
  outline-offset: 3px;
}

.btn--secondary {
  background: var(--ds-bg);
  color: var(--ds-link);
  border-color: var(--ds-link);
}

.btn--secondary:hover {
  background: var(--ds-tint);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Text link inside a section: names the object and the place (П13) */
.link-arrow {
  font-weight: 600;
  text-decoration: none;
}

.link-arrow:hover {
  text-decoration: underline;
}

.link-arrow .arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}

.link-arrow:hover .arrow {
  transform: translateX(2px);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* Quiet link: hero third action, weight 3 lists. Not an accent. */
.link-quiet {
  color: var(--ds-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--ds-line-strong);
}

.link-quiet:hover {
  color: var(--ds-ink);
  text-decoration-color: currentColor;
}

/* 5. Header and navigation -------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ds-bg);
  border-bottom: 1px solid var(--ds-line);
}

.header-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--ds-header-h);
}

.site-logo {
  display: inline-flex;
  flex: none;
  padding: 6px 0;
  border-radius: var(--ds-radius-s);
}

.site-logo img {
  width: auto;
  height: 20px;         /* cap height 14 px (brand-guide.md §3) */
}

@media (min-width: 960px) {
  .site-logo img {
    height: 23px;       /* cap height 16.5 px */
  }
}

.site-nav {
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link,
.nav-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--ds-radius-m);
  color: var(--ds-nav);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.nav-link:hover,
.nav-disclosure > summary:hover {
  color: var(--ds-ink);
  background: var(--ds-surface);
}

.nav-link[aria-current="page"] {
  color: var(--ds-ink);
  box-shadow: inset 0 -2px 0 var(--ds-link);
  border-radius: 0;
}

.nav-disclosure > summary {
  list-style: none;
}

.nav-disclosure > summary::-webkit-details-marker {
  display: none;
}

.chevron {
  width: 10px;
  height: 10px;
  flex: none;
  transition: transform 0.15s ease;
}

.nav-disclosure[open] > summary .chevron {
  transform: rotate(180deg);
}

/* Panels open under their item and align to its right edge: the menu sits on the
   right of the header, so a wide panel never runs past the viewport. */
.nav-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 248px;
  padding: 8px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-l);
  box-shadow: var(--ds-shadow-menu);
}

.nav-panel--wide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 8px;
  min-width: 470px;
}

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

.nav-panel__full {
  grid-column: 1 / -1;
}

.nav-panel a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--ds-radius-m);
  color: var(--ds-ink);
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}

.nav-panel a:hover {
  background: var(--ds-surface);
}

.nav-panel .nav-overview {
  font-weight: 600;
}

.nav-group-label {
  display: block;
  padding: 8px 10px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-ink-2);
}

.nav-sep {
  height: 1px;
  margin: 6px 10px;
  background: var(--ds-line);
}

/* Download in the header: an accent text link, not a button,
   so the first screen keeps two prominent buttons (П12). */
.header-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--ds-radius-m);
  color: var(--ds-link);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.header-download:hover {
  background: var(--ds-tint);
}

.header-download svg {
  width: 16px;
  height: 16px;
}

.nav-item--download {
  margin-left: 8px;
}

.header-download--bar,
.menu-toggle {
  display: none;
}

/* Mobile navigation: below 960 px the menu collapses behind a button */
@media (max-width: 959px) {
  .header-download--bar {
    display: inline-flex;
    margin-left: auto;
    padding: 0 8px;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    margin-right: -8px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--ds-radius-m);
    background: none;
    color: var(--ds-nav);
    font-size: 15px;
    cursor: pointer;
  }

  .menu-toggle svg {
    width: 22px;
    height: 22px;
  }

  .menu-toggle .icon-close,
  .site-header[data-menu-open] .menu-toggle .icon-menu {
    display: none;
  }

  .site-header[data-menu-open] .menu-toggle .icon-close {
    display: block;
  }

  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--ds-header-h));
    max-height: calc(100dvh - var(--ds-header-h));
    overflow-y: auto;
    background: var(--ds-bg);
    border-top: 1px solid var(--ds-line);
    border-bottom: 1px solid var(--ds-line-strong);
    box-shadow: var(--ds-shadow-menu);
  }

  .js .site-header[data-menu-open] .site-nav {
    display: block;
  }

  .site-nav .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--ds-gutter) 16px;
  }

  .site-nav .nav-link,
  .site-nav .nav-disclosure > summary {
    justify-content: space-between;
    height: 52px;
    padding: 0 4px;
    border-bottom: 1px solid var(--ds-line);
    border-radius: 0;
    font-size: 17px;
    color: var(--ds-ink);
  }

  .site-nav .nav-panel,
  .site-nav .nav-panel--wide {
    position: static;
    display: block;
    min-width: 0;
    padding: 4px 0 12px 12px;
    border: 0;
    box-shadow: none;
  }

  .site-nav .nav-panel a {
    padding: 10px 8px;
    font-size: 16px;
  }

  .nav-item--download {
    display: none;
  }

  /* Without JS the menu stays visible, wrapped under the logo */
  .no-js .header-bar {
    flex-wrap: wrap;
    height: auto;
    padding-block: 8px;
  }

  .no-js .menu-toggle {
    display: none;
  }
}

/* 6. Sections and weights (D1 §1.3) ---------------------------------------- */

.sec {
  padding-block: var(--ds-section-y);
}

/* Weight 1: main proof. Large heading, large media, more air. */
.sec--w1 {
  padding-block: calc(var(--ds-section-y) * 1.15);
}

.sec--w1 h2 {
  font-size: var(--ds-fs-h2-1);
  line-height: var(--ds-lh-h2-1);
}

/* Weight 2: support. Medium heading, thin lines, no shadows. */
.sec--w2 h2 {
  font-size: var(--ds-fs-h2-2);
  line-height: var(--ds-lh-h2-2);
}

/* Weight 3: reference. Small heading and text, one hairline, no containers. */
.sec--w3 {
  padding-block: calc(var(--ds-section-y) * 0.7);
  font-size: var(--ds-fs-small);
  line-height: var(--ds-lh-small);
}

.sec--w3 > .wrap {
  padding-top: 0;
}

.sec--w3 .sec__rule {
  border-top: 1px solid var(--ds-line);
  padding-top: calc(var(--ds-section-y) * 0.55);
}

.sec--w3 h2 {
  font-size: var(--ds-fs-h2-3);
  line-height: var(--ds-lh-h2-3);
}

.sec--w3 + .sec--w3 {
  padding-top: 0;
}

.sec__head {
  max-width: 46rem;
  margin-bottom: var(--ds-space-head);
}

.sec__head .lead,
.sec__head > p {
  margin-top: var(--ds-space-s);
}

.sec--w3 .sec__head {
  margin-bottom: var(--ds-space-m);
}

/* 7. Hero ------------------------------------------------------------------- */

.hero {
  padding-top: var(--ds-hero-top);
  padding-bottom: var(--ds-hero-bottom);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-hero-gap);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* From 1200 px the text column is fixed: every M1 H1 (up to 60 characters)
   fits two lines, and the media keeps at least half of the content width. */
@media (min-width: 1200px) {
  .hero__grid {
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  }
}

.hero h1,
.hero .h1 {
  margin-top: var(--ds-space-s);
}

.hero .lead {
  margin-top: var(--ds-space-m);
}

.hero .btn-row {
  margin-top: calc(var(--ds-space-m) + 4px);
}

.hero__quiet {
  margin-top: var(--ds-space-s);
  font-size: 15px;
}

@media (max-width: 559px) {
  .hero .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero .btn {
    width: 100%;
  }
}

/* The first section after a compact hero and its navigation starts closer (Pricing: the price table head is in the first screen) */
.sec--first {
  padding-top: var(--ds-space-head);
}

/* Compact hero (Pricing, T6a, D1 §3.7): the H1 and lead on the left, actions and facts on the right,
   so the head of the price table is in the first screen on 1440 */
.hero--compact {
  padding-bottom: var(--ds-space-m);
}

.hero__aside > :first-child {
  margin-top: 0;
}

.hero__aside > * + * {
  margin-top: var(--ds-space-s);
}

@media (min-width: 960px) {
  .hero--compact .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

/* Entry for existing customers: two links in one line (Pricing) */
.entry-line {
  font-size: 15px;
  color: var(--ds-ink-2);
}

.entry-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.entry-line a {
  font-weight: 600;
  white-space: nowrap;
}

/* Fact line: three product attributes, A · B · C (D1 §1.4) */
.factline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-top: var(--ds-space-m);
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ds-ink);
}

.factline li:not(:last-child)::after {
  content: "\00B7" / "";
  margin: 0 10px;
  color: var(--ds-ink-3);
  font-weight: 400;
}

/* 8. Media: screenshot frame and video block --------------------------------- */

.shot,
.video {
  min-width: 0;
}

.shot__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--ds-radius-l);
  background: var(--ds-placeholder);
  box-shadow: 0 0 0 1px var(--ds-line-strong);
  cursor: zoom-in;
  text-align: inherit;
  color: inherit;
}

/* Type A: the whole window with its title bar. The window shadow is the only
   shadow on the site; it says "a Windows application", not decoration. */
.shot--window .shot__media {
  box-shadow: 0 0 0 1px rgb(20 24 26 / 0.14), var(--ds-shadow-window);
}

.shot__media img {
  width: 100%;
}

.shot__media:focus-visible {
  outline-offset: 4px;
}

.zoom-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ds-radius-m);
  background: rgb(20 24 26 / 0.72);
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.zoom-badge svg {
  width: 16px;
  height: 16px;
}

.shot__media:hover .zoom-badge,
.shot__media:focus-visible .zoom-badge {
  opacity: 1;
}

.shot__caption,
.video__caption {
  margin-top: 12px;
  font-size: var(--ds-fs-small);
  line-height: var(--ds-lh-small);
  color: var(--ds-ink-2);
  max-width: 60ch;
}

/* Placeholder of the exact frame proportions (D1 §7; 16:10 = window 1600 x 1000) */
.ph {
  display: grid;
  place-content: center;
  gap: 4px;
  width: 100%;
  aspect-ratio: var(--ph-ratio, 16 / 10);
  padding: 16px;
  background: var(--ds-placeholder);
  color: var(--ds-ink-2);
  text-align: center;
}

.ph__slot {
  font-family: var(--ds-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-ink);
}

.ph__meta {
  font-size: 13px;
  line-height: 1.4;
  max-width: 30em;
}

.video__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--ds-radius-l);
  background: var(--ds-placeholder);
  box-shadow: 0 0 0 1px var(--ds-line-strong);
}

.video__frame video {
  width: 100%;
}

/* In a video slot the placeholder label sits in the corner, clear of the play button */
.video__frame .ph {
  place-content: start;
  text-align: left;
}

.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.video__play-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgb(20 24 26 / 0.74);
  color: #FFFFFF;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.video__play-icon svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.video__play:hover .video__play-icon {
  background: var(--ds-action);
}

.video__play:focus-visible {
  outline: none;
}

.video__play:focus-visible .video__play-icon {
  outline: 3px solid var(--ds-focus);
  outline-offset: 3px;
}

.video__meta {
  font-weight: 600;
  color: var(--ds-ink);
}

.video__note {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ds-ink-2);
}

.lightbox {
  width: min(96vw, 1600px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-l);
  background: var(--ds-bg);
  overflow: auto;
}

.lightbox::backdrop {
  background: rgb(20 24 26 / 0.82);
}

.lightbox__body {
  padding: 48px 16px 16px;
}

.lightbox__body .ph {
  font-size: 16px;
}

.lightbox__body .art {
  width: 100%;
  height: auto;
}

/* A diagram in the lightbox: both compositions, picked by the lightbox width; larger than on the page */
.lightbox__body .art-switch {
  max-width: 1120px;
  margin-inline: auto;
}

.lightbox__body .art-switch .art {
  max-width: none;
}

/* Diagram zoom (T5): the container gets data-zoom-art; ds.js adds this button in its corner */
.has-art-zoom {
  position: relative;
}

.has-art-zoom .art-switch {
  cursor: zoom-in;
}

.art-zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-m);
  background: rgb(20 24 26 / 0.72);
  color: #FFFFFF;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.art-zoom svg {
  width: 16px;
  height: 16px;
}

.has-art-zoom:hover .art-zoom,
.art-zoom:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .art-zoom { opacity: 1; }
}

.lightbox__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--ds-radius-m);
  background: var(--ds-surface);
  color: var(--ds-ink);
  cursor: pointer;
}

/* 9. Content components ------------------------------------------------------ */

/* Split: claim and proof. Sides alternate; on 390: head, media, body (D1 §1.8). */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "media" "body";
  row-gap: var(--ds-space-m);
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head media" "body media";
    column-gap: var(--ds-hero-gap);
    row-gap: var(--ds-space-m);
  }

  .split--media-left {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "media head" "media body";
  }

  .split__head {
    align-self: end;
  }

  .split__media {
    align-self: center;
  }
}

/* T6a: on 960-1199 px the two sides are equal, so a diagram in the media column takes its narrow composition
   (container under 520 px) instead of shrinking the wide one below 12 px text (illustration-system §4b) */
@media (min-width: 960px) and (max-width: 1199px) {
  .split,
  .split--media-left {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.split__head {
  grid-area: head;
}

.split__media {
  grid-area: media;
}

.split__body {
  grid-area: body;
}

.split__body > * + * {
  margin-top: var(--ds-space-m);
}

/* T6a: the lead under the split heading, and h3 blocks in the body (feature pages) */
.split__head > * + * {
  margin-top: var(--ds-space-s);
}

.split__body h3 + p,
.split__body p + .links,
.col p + .links {
  margin-top: 8px;
}

/* Steps: 3-6 steps, number, verb first, no cards (D1 §1.4) */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ds-line);
}

.steps > li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ds-line);
}

.steps__n {
  font-family: var(--ds-font-label);
  font-size: 15px;
  font-weight: 600;
  line-height: inherit;
  color: var(--ds-ink-3);
  font-variant-numeric: tabular-nums;
}

.steps__t {
  display: block;
  font-weight: 600;
  color: var(--ds-ink);
}

.steps__d {
  display: block;
  color: var(--ds-ink-2);
}

@media (max-width: 559px) {
  .steps > li {
    padding: 12px 0;
  }

  .steps__t,
  .steps__d {
    display: inline;
  }

  .steps__t::after {
    content: "\2002" / "";
  }
}

.workflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-head) var(--ds-hero-gap);
  align-items: start;
}

@media (min-width: 960px) {
  .workflow {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  .workflow--no-media {
    grid-template-columns: minmax(0, 1fr);
  }

  .workflow--no-media .steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 24px;
    border-top: 0;
  }

  .workflow--no-media .steps > li {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    row-gap: 6px;
    border-top: 2px solid var(--ds-ink);
    border-bottom: 0;
  }
}

/* Chips: short lists of 3 words or less, 8 per row at most (D1 §1.4) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips > li {
  padding: 2px 10px;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-s);
  background: var(--ds-bg);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ds-ink);
  white-space: nowrap;
}

.chips--mono > li {
  font-family: var(--ds-font-mono);
  font-size: 13px;
  font-weight: 400;
}

/* Routes: the whole card is one link (D1 §1.4; one of two roles left for cards) */
.routes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .routes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-space-s);
  }
}

.route-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 18px 20px 20px;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-l);
  background: var(--ds-bg);
  color: var(--ds-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.route-card:hover {
  border-color: var(--ds-link);
  background: var(--ds-tint);
}

@media (max-width: 559px) {
  .route-card {
    gap: 2px;
    padding: 14px 16px;
  }
}

.route-card__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-h3);
  font-weight: var(--ds-display-weight);
  line-height: var(--ds-lh-h3);
}

.route-card__title .arrow {
  color: var(--ds-link);
  font-family: var(--ds-font-text);
}

.route-card__text {
  font-size: var(--ds-fs-small);
  line-height: var(--ds-lh-small);
  color: var(--ds-ink-2);
}

/* Two routes in a row: four main guides in the Guides hero (T6a, D1 §3.3) */
@media (min-width: 720px) {
  .routes--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Hero whose media is a list of routes (Guides overview, D1 §3.3): on a phone the routes are the main action,
   so they come right after the lead and the buttons follow them. */
@media (max-width: 959px) {
  .hero--routes .hero__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }

  .hero--routes .hero__copy {
    display: contents;
  }

  .hero--routes .hero__media {
    order: 1;
    margin-top: var(--ds-space-m);
  }

  .hero--routes .btn-row {
    order: 2;
  }
}

.final-cta__rows {
  margin-top: var(--ds-space-m);
  max-width: 62rem;
}

/* Group label in a route card: the page the card leads to; the title above it is the claim (D1 §3.2, T6a) */
.route-card__label {
  font-size: var(--ds-fs-kicker);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-link);
}

/* Step map (T6a, Features): route cards under the workflow step they belong to. The step labels
   replace a separate workflow section (D1 §3.2, decision 8). Four columns from 1100 px, two from 720 px. */
.step-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-m) var(--ds-space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .step-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--ds-space-head);
  }
}

@media (min-width: 1100px) {
  .step-map {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.step-map__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 10px;
  border-top: 2px solid var(--ds-ink);
  font-weight: 600;
  color: var(--ds-ink);
}

.step-map__n {
  font-size: 15px;
  color: var(--ds-ink-3);
  font-variant-numeric: tabular-nums;
}

.step-map__routes {
  display: grid;
  gap: var(--ds-space-s);
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.also {
  margin-top: var(--ds-space-m);
  font-size: var(--ds-fs-small);
  line-height: 1.9;
  color: var(--ds-ink-2);
}

.also__label {
  margin-right: 8px;
  font-weight: 600;
  color: var(--ds-ink);
}

.also ul {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.also li {
  display: inline;
  white-space: nowrap;
}

.also li:not(:last-child)::after {
  content: "\00B7" / "";
  margin: 0 8px;
  color: var(--ds-ink-3);
}

.chips + .routes {
  margin-top: var(--ds-space-m);
}

.sec__more {
  margin-top: var(--ds-space-m);
}

.stack > * + * {
  margin-top: var(--ds-space-m);
}

/* Two equal paths without cards (D1 §1.4) */
.cols-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-head) var(--ds-hero-gap);
}

@media (min-width: 760px) {
  .cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.col {
  padding-top: var(--ds-space-s);
  border-top: 1px solid var(--ds-line-strong);
}

.col > * + * {
  margin-top: var(--ds-space-s);
}

.col h3 + p {
  margin-top: 8px;
}

.note {
  margin-top: var(--ds-space-head);
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-2);
}

/* T6a: notes that follow each other, or sit in a row with an action */
.note + .note {
  margin-top: 8px;
}

.note--inline {
  margin-top: 0;
}

/* A short list inside a note (Pricing: VAT information), spaced like .cell-more */
.note ul {
  margin: 4px 0 6px;
  padding-left: 1.1em;
}

/* Scenario band: full width, one button, once per page (D1 §1.4) */
.band {
  background: var(--ds-tint);
}

.band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-m) var(--ds-gap);
  align-items: center;
}

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

.band h2 {
  max-width: 30ch;
}

.band p {
  margin-top: var(--ds-space-s);
  max-width: 62ch;
  color: var(--ds-ink-2);
}

/* Three equal points without cards: the concept of a feature page, the .NET guides on Guides (T6a, D1 §3.3, §4.2) */
.cols-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-m) var(--ds-gap);
}

@media (min-width: 960px) {
  .cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cols-3 .col p,
.cols-2 .col p {
  color: var(--ds-ink-2);
}

/* A sub-block of a section: an h3 head and its content after the main content of the section */
.sec__sub {
  margin-top: var(--ds-space-xl);
}

/* Fact strip right under a hero (guide and feature pages; was in the sample's sample.css) */
.fact-strip-row {
  padding-bottom: var(--ds-space-m);
}

/* Short list in columns (weight 3) */
.short-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px var(--ds-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .short-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.short-list > li {
  position: relative;
  padding-left: 16px;
  color: var(--ds-ink);
}

.short-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ds-ink-3);
}

/* Link list: related pages, one line per item (weight 3) */
.link-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--ds-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .link-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.link-list > li {
  padding: 10px 0;
  border-bottom: 1px solid var(--ds-line);
}

@media (max-width: 559px) {
  .link-list > li {
    padding: 8px 0;
  }
}

.link-list a {
  font-weight: 600;
  color: var(--ds-ink);
  text-decoration: underline;
  text-decoration-color: var(--ds-line-strong);
}

.link-list a:hover {
  color: var(--ds-link);
  text-decoration-color: currentColor;
}

.link-list span {
  color: var(--ds-ink-2);
}

/* Final CTA (weight 1) */
.final-cta {
  background: var(--ds-surface);
}

.final-cta p {
  margin-top: var(--ds-space-s);
  max-width: 58ch;
  font-size: var(--ds-fs-lead);
  line-height: var(--ds-lh-lead);
  color: var(--ds-ink-2);
}

.final-cta .btn-row {
  margin-top: var(--ds-space-head);
}

@media (max-width: 559px) {
  .final-cta .btn {
    width: 100%;
  }
}

/* Fact strip: 3-5 label/value facts under a hero (D1 §1.4, §1.8) */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--ds-line-strong);
  border-bottom: 1px solid var(--ds-line-strong);
}

@media (min-width: 960px) {
  .facts {
    grid-template-columns: repeat(var(--facts, 4), minmax(0, 1fr));
  }
}

.facts > div {
  padding: 14px 20px 16px 0;
}

@media (min-width: 960px) {
  .facts > div + div {
    padding-left: 20px;
    border-left: 1px solid var(--ds-line);
  }
}

@media (max-width: 959px) {
  .facts > div:nth-child(even) {
    padding-left: 16px;
    border-left: 1px solid var(--ds-line);
  }

  .facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--ds-line);
  }
}

.facts dt,
.fact-panel dt {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ds-ink-2);
}

.facts dd,
.fact-panel dd {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ds-ink);
}

/* Fact panel: the same facts in the hero when there is no frame (D1 §3.4) */
.fact-panel {
  margin: 0;
  padding: 6px 24px;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-l);
}

.fact-panel > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 16px;
  padding: 14px 0;
}

@media (min-width: 560px) {
  .fact-panel > div {
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }

  .fact-panel dd {
    margin-top: 0;
  }

  .fact-panel dt {
    padding-top: 2px;
  }
}

.fact-panel > div + div {
  border-top: 1px solid var(--ds-line);
}

/* Anchor navigation: "On this page" (D1 §1.4, §1.8) */
.toc {
  position: sticky;
  top: var(--ds-header-h);
  z-index: 20;
  background: var(--ds-bg);
  border-bottom: 1px solid var(--ds-line);
}

.toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.toc > summary::-webkit-details-marker {
  display: none;
}

.toc[open] > summary .chevron {
  transform: rotate(180deg);
}

.toc__list {
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
}

.toc__list a {
  display: block;
  padding: 8px 0;
  color: var(--ds-ink);
  text-decoration: none;
}

.toc__list a:hover {
  color: var(--ds-link);
}

@media (max-width: 959px) {
  .toc {
    position: static;
    border-top: 1px solid var(--ds-line);
  }
}

@media (min-width: 960px) {
  .toc > summary {
    display: none;
  }

  .toc__list {
    display: flex;
    align-items: center;
    gap: 4px 22px;
    min-height: 48px;
    padding: 0;
    overflow-x: auto;
    font-size: 14px;
    white-space: nowrap;
  }

  .toc__list::before {
    content: "On this page";
    margin-right: 4px;
    font-weight: 600;
    color: var(--ds-ink);
  }

  .toc__list a {
    padding: 13px 0 11px;
    color: var(--ds-ink-2);
    border-bottom: 2px solid transparent;
  }

  .toc__list a:hover,
  .toc__list a[aria-current="true"] {
    color: var(--ds-ink);
    border-bottom-color: var(--ds-link);
  }
}

/* T6a: on 960-1199 px a list of 8 sections does not fit one line; it wraps instead of hiding the last items */
@media (min-width: 960px) and (max-width: 1199px) {
  .toc__list {
    flex-wrap: wrap;
    column-gap: 18px;
    row-gap: 0;
  }

  .toc__list a {
    padding: 8px 0 6px;
  }
}

/* Comparison table: options side by side; on 390 rows become label: value */
.table-wrap {
  overflow-x: auto;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.compare caption {
  text-align: left;
}

.compare th,
.compare td {
  padding: 14px 20px 14px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ds-line);
}

.compare thead th {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ds-ink);
  font-family: var(--ds-font-display);
  font-stretch: 100%;
  font-size: var(--ds-fs-h3);
  font-weight: var(--ds-display-weight);
  line-height: 1.3;
}

.compare thead th .small {
  display: block;
  font-family: var(--ds-font-text);
  font-weight: 400;
}

.compare tbody th {
  width: 9rem;
  font-weight: 600;
  color: var(--ds-ink-2);
}

@media (max-width: 639px) {
  .compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .compare tr,
  .compare tbody th,
  .compare td {
    display: block;
    width: auto;
  }

  .compare tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--ds-line);
  }

  .compare tbody th,
  .compare td {
    padding: 2px 0;
    border: 0;
  }

  .compare tbody th {
    margin-bottom: 4px;
    color: var(--ds-ink);
  }

  .compare td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
  }
}

/* Two-column path table (Migration, T6a): the first column is the deciding label, wide enough for one line */
@media (min-width: 640px) {
  .compare--paths tbody th,
  .compare--paths thead th:first-child {
    width: 18rem;
    color: var(--ds-ink);
  }
}

/* Reference table (Supported formats, T6a, D1 §4.3 and §1.8 p. 4): it does not turn into stacked rows on a phone.
   Below 720 px it scrolls inside its block, the first column stays in place, and a hint says so. */
.ref-wrap {
  overflow-x: auto;
}

.ref-wrap:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

.ref-hint {
  display: none;
  margin-bottom: 8px;
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-2);
}

.ref {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.5;
}

.ref th,
.ref td {
  padding: 12px 20px 12px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ds-line);
}

.ref thead th {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ds-ink);
  font-weight: 600;
  color: var(--ds-ink);
}

.ref tbody th {
  width: 13rem;
  font-weight: 600;
  color: var(--ds-ink);
}

.ref td:last-child {
  color: var(--ds-ink-2);
}

@media (max-width: 719px) {
  .ref-hint {
    display: block;
  }

  .ref {
    min-width: 660px;
    font-size: 14px;
  }

  .ref tbody th,
  .ref thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 8.5rem;
    min-width: 8.5rem;
    padding-right: 12px;
    background: var(--ds-bg);
    box-shadow: 1px 0 0 var(--ds-line);
  }

  .ref tbody th + td,
  .ref thead th:first-child + th {
    padding-left: 12px;
  }
}

/* Chips that are links: the format groups in the Supported formats hero (anchor navigation, D1 §4.3) */
.chips--links > li {
  padding: 0;
}

.chips--links a {
  display: block;
  padding: 6px 12px;
  color: var(--ds-ink);
  text-decoration: none;
}

.chips--links > li:hover {
  border-color: var(--ds-link);
  background: var(--ds-tint);
}

.chips--links a:hover {
  color: var(--ds-link);
}

.format-nav__title {
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--ds-ink);
}

/* Format matrix (Supported formats, F1 2026-10-19, owner: "a compact matrix to find a format on one screen"). Rows are the format
   groups, columns the edition that first reads a format (higher editions read it too). With JS a search field marks the matching
   formats and dims the rest; without JS the whole matrix shows. Below 720 px every group is a block with labelled lines. */
/* The matrix section has less air than a weight-2 section, so the whole matrix fits on a 1440 x 900 screen */
.sec.fmx-sec {
  padding-block: calc(var(--ds-section-y) * 0.6);
}

.fmx > h2 {
  margin-bottom: 16px;
}

@media (min-width: 960px) {
  .fmx {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 40px;
  }

  .fmx > h2,
  .fmx > .fmx__find {
    margin-bottom: 0;
  }

  .fmx > .fmx__table,
  .fmx > .note {
    grid-column: 1 / -1;
  }
}

.fmx__find {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.js .fmx__find {
  display: flex;
}

.fmx__find label {
  font-weight: 600;
  color: var(--ds-ink);
}

.fmx__find input {
  flex: 1 1 260px;
  max-width: 420px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-m);
  background: var(--ds-bg);
  color: var(--ds-ink);
  font: inherit;
}

.fmx__status {
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-2);
}

.fmx__table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  table-layout: fixed;
}

.fmx__table th,
.fmx__table td {
  padding: 7px 16px 7px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ds-line-strong);
}

.fmx__table thead th {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ds-ink);
  font-weight: 600;
  color: var(--ds-ink);
}

.fmx__table col.fmx__c-group { width: 18%; }
.fmx__table col.fmx__c-std { width: 27%; }
.fmx__table col.fmx__c-pro { width: 42%; }
.fmx__table col.fmx__c-ent { width: 13%; }

.fmx__table tbody th {
  font-weight: 600;
}

.fmx__table tbody th a {
  color: var(--ds-ink);
}

.fmx__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fmx__chips > li {
  padding: 2px 8px;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-s);
  background: var(--ds-bg);
  font-family: var(--ds-font-mono);
  font-size: 13px;
  line-height: 18px;
  color: var(--ds-ink);
  white-space: nowrap;
}

.fmx__chips > li.fmx__word {
  font-family: inherit;
}

.fmx.is-filtering tbody tr:not(.is-hit) {
  opacity: 0.35;
}

.fmx.is-filtering .fmx__chips > li:not(.is-hit) {
  opacity: 0.45;
}

.fmx .fmx__chips > li.is-hit {
  border-color: var(--ds-link);
  box-shadow: inset 0 0 0 1px var(--ds-link);
  color: var(--ds-link);
}

@media (max-width: 719px) {
  .fmx__table,
  .fmx__table tbody,
  .fmx__table tr,
  .fmx__table th,
  .fmx__table td {
    display: block;
    width: auto;
  }

  .fmx__table thead,
  .fmx__table colgroup {
    display: none;
  }

  .fmx__table tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--ds-line-strong);
  }

  .fmx__table th,
  .fmx__table td {
    padding: 4px 0;
    border: 0;
  }

  .fmx__table td:empty {
    display: none;
  }

  .fmx__table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: var(--ds-fs-small);
    color: var(--ds-ink-2);
  }
}

/* Checklist: 3-7 visible points (D1 §1.4) */
.checklist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px var(--ds-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .checklist--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.checklist > li {
  position: relative;
  padding-left: 26px;
}

.checklist > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.32em;
  width: 6px;
  height: 11px;
  border: solid var(--ds-ink-2);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* A comparison whose second option is secondary (WPF guide, owner 2026-10-16): its column is greyed out */
.compare--second-muted thead th:last-child,
.compare--second-muted tbody td:last-child {
  color: var(--ds-ink-3);
}

.compare--second-muted tbody td:last-child code {
  color: inherit;
}

/* Don't list (WPF guide, I1 pilot v2): a cross instead of the tick */
.checklist--no > li::before {
  content: "×";
  top: -0.05em;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  color: var(--ds-ink-2);
  font-weight: 600;
}

/* Callout: one per section; a boundary the buyer needs stays visible */
.callout {
  max-width: var(--ds-measure);
  padding: 14px 18px;
  border-left: 3px solid var(--ds-ink-3);
  border-radius: 0 var(--ds-radius-m) var(--ds-radius-m) 0;
  background: var(--ds-surface);
  color: var(--ds-ink);
}

.callout > * + * {
  margin-top: 6px;
}

/* Details: only reference content may hide (П10) */
.more {
  max-width: 60rem;
  border-top: 1px solid var(--ds-line);
  border-bottom: 1px solid var(--ds-line);
}

.more > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--ds-link);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.more > summary::-webkit-details-marker {
  display: none;
}

.more > summary .chevron {
  transform: rotate(-90deg);
}

.more[open] > summary .chevron {
  transform: rotate(0deg);
}

.more__body {
  display: grid;
  gap: var(--ds-space-s);
  padding-bottom: var(--ds-space-m);
}

.more__body h4 {
  font-size: 15px;
  font-weight: 600;
}

/* Code: scrolls inside the block, never the page (D1 §1.8) */
.code {
  margin: 0;
  padding: 12px 16px;
  overflow-x: auto;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-m);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre;
}

.code-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-s) var(--ds-gap);
}

@media (min-width: 760px) {
  .code-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Chain A -> B -> C: replaces linear Mermaid diagrams (D1 §1.4, §8 item 4) */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chain > li {
  display: flex;
  align-items: center;
}

.chain > li + li::before {
  content: "\2192" / "";
  margin: 0 10px;
  color: var(--ds-ink-3);
}

.chain__node {
  padding: 5px 12px;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-s);
  background: var(--ds-bg);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ds-ink);
}

@media (max-width: 559px) {
  .chain {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .chain > li {
    flex-direction: column;
    align-items: flex-start;
  }

  .chain > li + li::before {
    content: "\2193" / "";
    margin: 4px 0 4px 14px;
  }
}

/* Forms (for Contact and Pricing request; full spec in design-system-spec.md) */
.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 15px;
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ds-control);
  border-radius: var(--ds-radius-m);
  background: var(--ds-bg);
  color: var(--ds-ink);
  font: inherit;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 0;
  border-color: var(--ds-focus);
}

/* Form layout (T6a: Contact and the Pricing request, §3.10). One column, related short fields in two from 720 px */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px var(--ds-space-m);
}

@media (min-width: 720px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--full {
    grid-column: 1 / -1;
  }
}

.field textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.field__req {
  font-weight: 400;
  color: var(--ds-ink-2);
}

.field__hint {
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-2);
}

.field[hidden] {
  display: none;
}

/* Checkbox with its full text beside it; never ticked in advance */
.check-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.check-row input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 2px 0 0;
  accent-color: var(--ds-action);
}

.form-note {
  margin-top: var(--ds-space-m);
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-2);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: var(--ds-space-m);
}

/* Spam trap: present for bots, out of sight and out of the tab order for people */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Summary of what the request will ask for (Pricing) */
.form-summary {
  padding: 12px 16px;
  border-left: 2px solid var(--ds-link);
  background: var(--ds-surface);
  font-size: 15px;
}

.form-summary strong {
  display: block;
}

/* Price tables (Pricing, T6a, D1 §3.7): product, what the edition adds, license, price, action.
   Below 720 px a row becomes a small block: the product on its own line, then price and action. */
.prices {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.prices th,
.prices td {
  padding: 16px 20px 16px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ds-line);
}

.prices thead th {
  padding-top: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ds-ink);
  font-size: var(--ds-fs-small);
  font-weight: 600;
  color: var(--ds-ink-2);
}

.prices tbody th {
  font-weight: 400;
}

.prices__name {
  display: block;
  font-weight: 600;
  color: var(--ds-ink);
}

.prices__adds {
  display: block;
  max-width: 52ch;
  color: var(--ds-ink-2);
}

.prices__term {
  display: block;
  margin-top: 2px;
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-3);
}

.prices__price {
  font-weight: 600;
  color: var(--ds-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* EUR is the main price; USD follows it, smaller and quieter */
.price-alt {
  margin-left: 6px;
  font-size: var(--ds-fs-small);
  font-weight: 400;
  color: var(--ds-ink-3);
}

.prices__action {
  width: 1%;
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
}

/* Compact details inside a price cell: the full feature list or license terms (П10) */
.cell-more {
  margin-top: 4px;
  font-size: var(--ds-fs-small);
}

.cell-more summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  color: var(--ds-link);
  cursor: pointer;
  list-style: none;
}

.cell-more summary::-webkit-details-marker {
  display: none;
}

.cell-more .chevron {
  width: 10px;
  height: 10px;
  transition: transform 0.15s ease;
}

.cell-more[open] .chevron {
  transform: rotate(180deg);
}

.cell-more > div {
  margin-top: 6px;
  color: var(--ds-ink-2);
}

.cell-more ul {
  margin: 4px 0 6px;
  padding-left: 1.1em;
}

@media (max-width: 719px) {
  .prices thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .prices tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ds-line);
  }

  .prices th,
  .prices td {
    display: block;
    padding: 0;
    border: 0;
  }

  .prices tbody th {
    flex: 1 1 100%;
  }

  .prices__action {
    width: auto;
    margin-left: auto;
  }

}

/* Edition matrix (Compare editions, T6a; owner 2026-10-23): capabilities in rows, editions in columns. The head names the
   editions only; prices and Buy come after the matrix (.ed-cards). A row shows the capability name only; the name opens its
   description and link (details.mx-more). The capabilities of every edition are the first group (.mx-common): with JS it is
   one tinted row with their list and a button that opens them in place; without JS all rows show. The head stays under the
   site header while the rows scroll. Below 720 px a row is the name over its three marks, so nothing scrolls sideways. */
.mx {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.5;
}

.mx th,
.mx td {
  padding: 7px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ds-line);
}

.mx td {
  width: 16%;
  text-align: center;
}

.mx thead th {
  position: sticky;
  top: var(--ds-header-h);
  z-index: 1;
  vertical-align: bottom;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ds-ink);
  background: var(--ds-bg);
  text-align: center;
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-h3);
  font-weight: var(--ds-display-weight);
  color: var(--ds-ink);
}

.mx thead th:first-child {
  padding-left: 0;
  text-align: left;
  font-family: var(--ds-font-text);
  font-size: var(--ds-fs-small);
  font-weight: 600;
  color: var(--ds-ink-2);
}

.mx-hint {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ds-ink-3);
}

/* The name is the whole cell high, so the target is the row's height; the chevron says it opens */
.mx tbody th {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  font-weight: 400;
}

.mx-more > summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  font-weight: 600;
  color: var(--ds-ink);
  list-style: none;
  cursor: pointer;
}

.mx-more > summary::-webkit-details-marker {
  display: none;
}

.mx-more > summary:hover {
  color: var(--ds-link);
}

.mx-more > summary:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.mx-more > summary .chevron {
  margin-top: 7px;
  color: var(--ds-ink-2);
  transform: rotate(-90deg);
}

.mx-more[open] > summary .chevron {
  transform: none;
}

.mx-desc {
  max-width: 62ch;
  margin: 0;
  padding: 0 0 10px 18px;
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-2);
}

.mx-desc a {
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mx-desc a:hover {
  text-decoration: underline;
}

.mx tbody .mx-group th {
  padding-top: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ds-line-strong);
  font-size: var(--ds-fs-kicker);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-2);
}

/* "In every edition": a tinted row right under the head, so the button is in the reading path */
.mx tbody .mx-group--common th {
  padding: 8px 16px;
  border-bottom-color: var(--ds-line);
  background: var(--ds-tint);
  font-size: var(--ds-fs-small);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.mx-common__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.mx-common__name {
  font-size: var(--ds-fs-kicker);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink);
}

.mx-common__list {
  display: none;
  flex: 1 1 28rem;
}

.js .mx-common.is-collapsed .mx-common__list {
  display: block;
}

.mx-common__toggle {
  display: none;
  margin-left: auto;
  min-height: 36px;
  padding: 0 14px;
  font-size: 15px;
}

.js .mx-common__toggle {
  display: inline-flex;
}

.mx-common__toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.js .mx-common.is-collapsed > tr:not(.mx-group) {
  display: none;
}

.mx-yes {
  font-weight: 600;
  color: var(--ds-ink);
}

.mx-no {
  color: var(--ds-ink-3);
}

.mx-soon {
  display: inline-block;
  padding: 0 6px;
  border: 1px dashed var(--ds-line-strong);
  border-radius: var(--ds-radius-s);
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-2);
  white-space: nowrap;
}

.mx-ref {
  margin-left: 2px;
  font-size: 11px;
}

.mx-notes {
  margin-top: var(--ds-space-m);
  max-width: 72ch;
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-2);
}

.mx-notes > * + * {
  margin-top: 8px;
}

/* Less air between the head and the matrix, so the head and the differences fit on a 1440 x 900 screen */
.mx-sec .sec__head {
  margin-bottom: var(--ds-space-m);
}

@media (max-width: 719px) {
  .mx,
  .mx tbody {
    display: block;
  }

  .mx tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--ds-line);
  }

  .mx th,
  .mx td {
    width: auto;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 0;
  }

  /* The head is one line of edition names; the capability label is for screen readers */
  .mx thead {
    display: block;
    position: sticky;
    top: var(--ds-header-h);
    z-index: 1;
    background: var(--ds-bg);
  }

  .mx thead tr {
    border-bottom: 2px solid var(--ds-ink);
  }

  .mx thead th {
    position: static;
    padding: 8px 0;
    border-bottom: 0;
    font-size: 15px;
  }

  .mx thead th:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .mx tbody th {
    grid-column: 1 / -1;
  }

  .mx-more > summary {
    padding: 8px 0 2px;
  }

  .mx tbody td {
    padding: 0 0 8px;
  }

  .mx tbody .mx-group th {
    padding-top: 16px;
    border-bottom: 0;
  }

  .mx tbody tr.mx-group {
    border-bottom-color: var(--ds-line-strong);
  }

  .mx tbody .mx-group--common th {
    padding: 10px 12px;
  }

  .mx-desc {
    padding-left: 18px;
  }

  .js .mx-common.is-collapsed .mx-common__list {
    display: none;
  }

  .mx-common__toggle {
    margin-left: auto;
  }
}

/* Included with your license (Compare editions, owner 2026-10-23: "stress that Translator and the command line come
   with the license; it sets us apart"). A tinted band: Translator Edition and the Command Line License side by side, each
   with its approved diagram on a white stage. Wording: "included", "nothing extra to buy", never "free". */
.incl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-xl) var(--ds-hero-gap);
}

/* Side by side, the two stages share one row height, so both texts start on one line */
@media (min-width: 960px) {
  .incl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .incl {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .incl > .art-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.incl__text {
  margin-top: var(--ds-space-m);
}

.incl__text > * + * {
  margin-top: var(--ds-space-s);
}

.incl__text > h3 {
  margin-top: 4px;
  font-size: var(--ds-fs-h2-3);
}

.incl__text > p:not(.kicker):not(.links) {
  color: var(--ds-ink-2);
}

.incl strong {
  color: var(--ds-ink);
}

.incl-sec .art-stage {
  background: var(--ds-bg);
}

/* Choose your edition (owner 2026-10-23): the only prices and Buy on the page, after the matrix and the included tools.
   Four cards: the three editions and Enterprise Multi-User. On a phone the price stands next to the name. */
.ed-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .ed-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .ed-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ed {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-l);
  background: var(--ds-bg);
}

.ed__name {
  font-size: var(--ds-fs-h3);
}

.ed__price {
  margin-top: 6px;
  font-family: var(--ds-font-display);
  font-size: 28px;
  font-weight: var(--ds-display-weight);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink);
  white-space: nowrap;
}

.ed__price .price-alt {
  font-family: var(--ds-font-text);
}

.ed__adds {
  margin-top: 10px;
  font-size: 15px;
  color: var(--ds-ink-2);
}

.ed__incl {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--ds-line);
  list-style: none;
  font-size: var(--ds-fs-small);
  color: var(--ds-ink);
}

.ed__incl > li {
  position: relative;
  padding-left: 22px;
}

.ed__incl > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.3em;
  width: 5px;
  height: 10px;
  border: solid var(--ds-link);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ed__incl > li.is-no {
  color: var(--ds-ink-3);
}

.ed__incl > li.is-no::before {
  content: "—";
  top: 0;
  left: 1px;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
}

.ed__term {
  margin: 10px 0 18px;
  font-size: 13px;
  color: var(--ds-ink-3);
}

.ed__buy {
  margin-top: auto;
  width: 100%;
}

@media (max-width: 719px) {
  .ed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: baseline;
    padding: 16px;
  }

  .ed > * {
    grid-column: 1 / -1;
  }

  .ed > .ed__name {
    grid-column: 1;
  }

  .ed > .ed__price {
    grid-column: 2;
    margin-top: 0;
    font-size: 22px;
    text-align: right;
  }

  /* The license terms and Buy share the last line */
  .ed > .ed__term {
    grid-column: 1;
    align-self: center;
    margin: 14px 0 0;
  }

  .ed > .ed__buy {
    grid-column: 2;
    width: auto;
    min-width: 96px;
    margin-top: 14px;
  }
}

.sec__sub--s {
  margin-top: var(--ds-space-s);
}

/* Downloads (T6a, D1 §3.8): Localizer 10 is the only main block with the only filled button; Extractor is a row with an
   outlined button; Localizer 9 is a quiet row. Nothing scrolls sideways on a phone (P0). */
.dl-main {
  padding: var(--ds-space-m);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-l);
  background: var(--ds-bg);
}

.dl-main__label {
  font-size: var(--ds-fs-kicker);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-link);
}

.dl-main__name {
  margin: 6px 0 var(--ds-space-s);
  font-size: var(--ds-fs-h2-2);
  line-height: var(--ds-lh-h2-2, 1.2);
}

.dl-version {
  font-family: var(--ds-font-text);
  font-size: var(--ds-fs-small);
  font-weight: 400;
  color: var(--ds-ink-2);
  white-space: nowrap;
}

.dl-main .cell-more {
  margin-top: var(--ds-space-s);
}

.dl-main__more {
  margin-top: var(--ds-space-s);
}

@media (max-width: 559px) {
  .dl-main .btn {
    width: 100%;
  }
}

.dl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px var(--ds-gap);
  align-items: start;
  padding: var(--ds-space-s) 0;
  border-bottom: 1px solid var(--ds-line);
}

.dl-row:first-child {
  border-top: 1px solid var(--ds-line-strong);
}

@media (min-width: 720px) {
  .dl-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.dl-row__name {
  font-size: var(--ds-fs-h3);
}

.dl-row__copy p {
  margin-top: 4px;
  max-width: 66ch;
  color: var(--ds-ink-2);
}

.dl-row--quiet .dl-row__name {
  font-size: 16px;
}

.dl-row--quiet .dl-row__copy p {
  font-size: var(--ds-fs-small);
}

.dl-row .btn {
  justify-self: start;
}

/* Contact (T6a): the form up to 40rem on the left, the context and the e-mail address on the right */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-head) var(--ds-hero-gap);
  align-items: start;
}

@media (min-width: 960px) {
  .contact {
    grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
  }
}

.contact__form > h2 {
  margin-bottom: var(--ds-space-s);
}

.contact__captcha {
  margin-top: var(--ds-space-m);
}

.contact__aside {
  padding-top: var(--ds-space-s);
  border-top: 1px solid var(--ds-line-strong);
}

.contact__aside > * + * {
  margin-top: var(--ds-space-s);
}

.contact__aside h2 {
  margin-top: 6px;
}

.contact__mail {
  padding-top: var(--ds-space-s);
  border-top: 1px solid var(--ds-line);
}

.contact__mail a {
  font-weight: 600;
}

/* Legal pages (T6a): EULA, Terms, Privacy, Impressum. One reading column; the texts are the owner's and are not edited
   here. The installer EULA text keeps its line breaks but wraps on a phone. */
.legal-wrap {
  padding-block: var(--ds-hero-top) calc(var(--ds-section-y) * 1.15);
}

.legal {
  max-width: 72ch;
}

.legal h1 {
  margin-top: var(--ds-space-s);
  font-size: var(--ds-fs-h1-page);
  line-height: var(--ds-lh-h1-page);
}

.legal h2 {
  margin-top: var(--ds-space-head);
  font-size: var(--ds-fs-h2-3);
  line-height: var(--ds-lh-h2-3);
}

.legal h3 {
  margin-top: var(--ds-space-m);
}

.legal p,
.legal ul,
.legal ol {
  margin-top: 0.85em;
}

.legal ul,
.legal ol {
  padding-left: 1.25em;
}

.legal li + li {
  margin-top: 0.35em;
}

.legal__meta {
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-2);
}

.legal__pre {
  margin-top: var(--ds-space-m);
  padding: var(--ds-space-m);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-m);
  background: var(--ds-surface);
  font-family: var(--ds-font-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A quiet action in a table or a row: a button that looks like a text link with an arrow (D1 §1.6 p. 3) */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ds-link);
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
}

.link-button:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.link-button:disabled {
  color: var(--ds-ink-3);
  cursor: not-allowed;
  text-decoration: none;
}

/* Maintenance calculator (Pricing): the first thing a customer with a license uses */
.calc {
  padding: var(--ds-space-m);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-l);
  background: var(--ds-surface);
}

.calc h3 + p {
  margin-top: 6px;
  max-width: 66ch;
  color: var(--ds-ink-2);
}

.calc__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px var(--ds-space-s);
  align-items: end;
  margin-top: var(--ds-space-m);
}

@media (min-width: 720px) {
  .calc__fields {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto;
  }
}

.calc__result {
  display: block;
  margin-top: var(--ds-space-s);
  font-size: 15px;
  color: var(--ds-ink);
}

.calc__action {
  margin-top: var(--ds-space-s);
}

/* The request form opens on Buy or Request a quote; its heading and text are always visible (D1 §3.7) */
.order > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  color: var(--ds-link);
  cursor: pointer;
  list-style: none;
}

.order > summary::-webkit-details-marker {
  display: none;
}

.order[open] > summary .chevron {
  transform: rotate(180deg);
}

.order > summary .chevron {
  width: 10px;
  height: 10px;
  transition: transform 0.15s ease;
}

.order__form {
  max-width: 48rem;
  margin-top: var(--ds-space-s);
}

/* 9a. Structure 3 components: bleeding hero shot, tour, platform rows, aside layout -- */
/* Interaction rule: every option and its one-line claim stay visible without a click
   (the 10-second layer); a click opens only proof and detail (the minute).
   At most two switchers on a page, no switchers inside switchers. */

/* Bleed: distance from the content edge to the viewport edge */
:root {
  --ds-bleed: calc(max(0px, (100vw - var(--ds-wrap) - 2 * var(--ds-gutter)) / 2) + var(--ds-gutter));
}

/* Hero screenshot that runs past the right edge: a large window, cropped where it is empty */
.hero--bleed {
  overflow-x: clip;
}

/* The shot runs past the content edge by at most 160 px. Up to 1600 px that reaches the window
   edge; on wider screens the whole window is shown, with all four corners, so the hero does not
   grow with the screen (owner, 2026-10-05: at 2752 px the shot filled the first screen). */
.hero__media--bleed .shot__media {
  width: calc(100% + min(var(--ds-bleed), 160px));
  border-radius: var(--ds-radius-l) 0 0 var(--ds-radius-l);
}

.hero__media--bleed .shot__media img {
  width: var(--bleed-image, 118%);
  max-width: none;
}

@media (max-width: 959px) {
  .hero__media--bleed {
    --bleed-image: 150%;
  }
}

@media (min-width: 1600px) {
  .hero__media--bleed {
    --bleed-image: 100%;
  }

  .hero__media--bleed .shot__media {
    border-radius: var(--ds-radius-l);
  }
}

/* Stage: quiet surface band behind the product tour */
.sec--stage {
  background: var(--ds-surface);
}

.sec__head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: none;
}

/* Tour. Desktop: a bar of five equal steps; under it the open step with its
   living screenshot (left) and its text and frame list (right).
   Phone: an accordion; the open step shows the screenshot, then the text. */
.tour {
  border-top: 1px solid var(--ds-line-strong);
}

.tour__title {
  margin: 0;
  font: inherit;
}

.tour__head {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0 10px;
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--ds-line-strong);
  background: transparent;
  color: var(--ds-ink-2);
  text-align: left;
  cursor: pointer;
}

.tour__head:hover,
.tour__head[aria-expanded="true"] {
  color: var(--ds-ink);
}

.tour__head:focus-visible {
  outline-offset: 2px;
}

.tour__n {
  grid-row: span 2;
  font-family: var(--ds-font-label);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--ds-ink-3);
  font-variant-numeric: tabular-nums;
}

.tour__head[aria-expanded="true"] .tour__n,
.tour__head[aria-expanded="true"] .tour__verb {
  color: var(--ds-link);
}

.tour__verb {
  font-family: var(--ds-font-label);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-2);
}

.tour__claim {
  font-family: var(--ds-font-display);
  font-stretch: 100%;
  font-size: 17px;
  font-weight: var(--ds-display-weight);
  line-height: 1.35;
  color: inherit;
}

.tour__progress {
  display: none;
}

.tour__panel {
  padding: 4px 0 24px;
  border-bottom: 1px solid var(--ds-line-strong);
}

.tour__panel[hidden] {
  display: none;
}

.tour__text > * + * {
  margin-top: 14px;
}

/* Key facts of the open step: the claim the customer needs; the frame beside it is the proof */
.tour__facts {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ds-line);
}

.tour__fact {
  display: block;
  width: 100%;
  padding: 12px 0 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--ds-line);
  background: none;
  color: var(--ds-ink-2);
  text-align: left;
  cursor: pointer;
}

.tour__fact strong {
  display: block;
  font-family: var(--ds-font-display);
  font-stretch: 100%;
  font-size: 17px;
  font-weight: var(--ds-display-weight);
  line-height: 1.35;
  color: var(--ds-ink-2);
}

.tour__fact span {
  display: block;
  margin-top: 2px;
  font-size: var(--ds-fs-small);
  line-height: var(--ds-lh-small);
}

.tour__fact:hover strong,
.tour__fact[aria-current="true"] strong {
  color: var(--ds-ink);
}

.tour__fact[aria-current="true"] {
  color: var(--ds-ink);
  box-shadow: inset 2px 0 0 var(--ds-link);
}

.tour__aside {
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-2);
}

.tour__toggle {
  display: none;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-m);
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-size: 14px;
  cursor: pointer;
}

.tour-has-auto .tour__toggle {
  display: inline-flex;
}

@media (min-width: 960px) {
  .js .tour {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 28px;
    border-top: 0;
  }

  /* Six steps (WPF, Win32, WinForms, Delphi tours): six columns. With five, the sixth head went into an implicit
     column that the panel's 1 / -1 does not span, so the scene and the facts shrank and the scene clipped its art. */
  .js .tour:has(> .tour__step:nth-child(6)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* Four steps (Migration, F1): four columns, so no empty fifth one; three steps (Translation workflow, F1): three */
  .js .tour:has(> .tour__step:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .js .tour:has(> .tour__step:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .js .tour__step {
    display: contents;
  }

  .js .tour__title {
    grid-row: 1;
  }

  .js .tour__head {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    padding: 14px 0 0;
    border-top: 2px solid var(--ds-line-strong);
    border-bottom: 0;
  }

  .js .tour__head[aria-expanded="true"] {
    border-top-color: var(--ds-link);
  }

  /* While the tour runs by itself, the rule of the open step fills up */
  .js .tour.is-auto .tour__head[aria-expanded="true"] {
    border-top-color: var(--ds-line-strong);
  }

  .js .tour.is-auto .tour__head[aria-expanded="true"] .tour__progress {
    display: block;
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--ds-link);
    transform: scaleX(var(--p, 0));
    transform-origin: left;
    transition: transform 0.1s linear;
  }

  .js .tour__n {
    display: none;
  }

  .js .tour__verb::before {
    content: attr(data-n) "\2002";
    font-variant-numeric: tabular-nums;
  }

  .js .tour__claim {
    display: block;
    margin-top: 4px;
  }

  .js .tour__panel {
    grid-row: 2;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: var(--ds-hero-gap);
    align-items: start;   /* owner 2026-10-17: the scene aligns with the top of the facts, not their middle */
    align-content: start;
    min-height: var(--panel-h, 0);
    margin-top: var(--ds-space-head);
    padding: 0;
    border-bottom: 0;
  }

  .js .tour__panel[hidden] {
    display: none;
  }
}

/* A tour of one step (F1, Visual localization: owner 2026-10-18, "tabs like the facts of a home tour step").
   No step bar: the open panel is the whole block, its facts are the tabs and the scene beside them shows the
   current one. The same script runs it: the frames advance by themselves until a fact is pressed; on a narrow
   screen every fact stands with its own picture, as in the home tour. */
.tour--solo {
  border-top: 0;
}

.tour--solo .tour__title {
  display: none;
}

.tour--solo .tour__panel {
  padding-top: 0;
  border-bottom: 0;
}

@media (min-width: 960px) {
  .js .tour--solo {
    display: block;
  }

  .js .tour--solo .tour__panel {
    margin-top: 0;
  }
}

/* Tinted band section: a visual break between sections on the quiet background (F1, Visual localization platforms) */
.sec--tint {
  background: var(--ds-tint);
}

/* Platform cards (F1, owner 2026-10-18: the platforms block must inform and work as a visual break; round 4: text only).
   Each card: the platform as a link to its guide, visual editor or preview, one line. Three columns from 560 px:
   the editors in the first row, the previews in the second. */
.platforms {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: var(--ds-space-head) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .platforms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.platform {
  padding: 16px 18px 18px;
  border-radius: var(--ds-radius-l);
  background: var(--ds-bg);
  box-shadow: 0 0 0 1px rgb(20 24 26 / 0.08);
}

.platform__name {
  margin: 0;
  font-family: var(--ds-font-display);
  font-stretch: 100%;
  font-size: 17px;
  font-weight: var(--ds-display-weight);
  line-height: 1.3;
}

.platform__name a {
  color: var(--ds-ink);
  text-decoration: none;
}

.platform__name a:hover {
  color: var(--ds-link);
  text-decoration: underline;
}

.platform__kind {
  margin: 4px 0 0;
  font-family: var(--ds-font-label);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-2);
}

.platform__kind--editor {
  color: var(--ds-link);
}

.platform__desc {
  margin: 6px 0 0;
  font-size: var(--ds-fs-small);
  line-height: var(--ds-lh-small);
  color: var(--ds-ink-2);
}

.platforms__note {
  margin-top: var(--ds-space-m);
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-2);
}

/* Scene: a living screenshot. Frames are real images (or crops of one image)
   that cross-fade; the frame list beside it is caption and navigation at once. */
.scene {
  margin: 0;
}

.scene__stage {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--scene-ratio, 9 / 5);
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-l);
  background: var(--ds-placeholder);
  box-shadow: 0 0 0 1px rgb(20 24 26 / 0.14), var(--ds-shadow-window);
  cursor: zoom-in;
}

.scene__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.scene__frame.is-current {
  opacity: 1;
}

.scene__frame > .ph {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* A crop of the source image: --x0 and --y0 are the top-left corner of the
   visible region, --s is 1 / its width (all as fractions of the image) */
.scene__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform-origin: 0 0;
  transform: scale(var(--s, 1)) translate(calc(-1 * var(--x0, 0%)), calc(-1 * var(--y0, 0%)));
}

@media (max-width: 959px) {
  .tour__panel .scene {
    margin-bottom: 16px;
  }
}

/* Lanes: two parallel flows in one step, both visible at once
   (Translate: translators and proofreaders | machine translation) */
.lanes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}

@media (min-width: 960px) {
  .js .tour__panel--lanes {
    display: block;
  }

  .lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ds-hero-gap);
  }
}

.lane__label {
  font-family: var(--ds-font-label);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-2);
}

.lane__title {
  margin: 2px 0 0;
  font-family: var(--ds-font-display);
  font-stretch: 100%;
  font-size: 20px;
  font-weight: var(--ds-display-weight);
  line-height: 1.3;
  color: var(--ds-ink);
}

.lane__shot {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--ds-radius-l);
  background: var(--ds-placeholder);
  box-shadow: 0 0 0 1px var(--ds-line-strong);
  cursor: zoom-in;
}

/* Lane frames are wide strips: a panel crop (type B), e.g. Translation Hints */
.lane__shot .ph {
  aspect-ratio: 16 / 5;
}

.lane .links {
  margin-top: 4px;
}

/* Flowline: a vertical chain of steps joined by a line */
.flowline {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.flowline > li {
  position: relative;
  padding: 0 0 12px 28px;
}

.flowline > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.45em;
  width: 11px;
  height: 11px;
  border: 2px solid var(--ds-ink-3);
  border-radius: 50%;
  background: var(--ds-bg);
}

.flowline > li::after {
  content: "";
  position: absolute;
  left: 9px;
  top: calc(0.45em + 13px);
  bottom: 2px;
  width: 1px;
  background: var(--ds-line-strong);
}

.flowline > li:last-child {
  padding-bottom: 8px;
}

.flowline > li:last-child::after {
  display: none;
}

.flowline strong {
  display: block;
  font-weight: 600;
  color: var(--ds-ink);
}

.flowline span {
  display: block;
  font-size: var(--ds-fs-small);
  line-height: var(--ds-lh-small);
  color: var(--ds-ink-2);
}

.flowline b {
  font-weight: 600;
  color: var(--ds-ink);
}

/* Art: schematic line drawings in brand colors (files, windows, arrows).
   Used where there is no screenshot to show an action, e.g. "files go into Lingobit". */
.art {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--ds-font-text);
}

.art .art-bg { fill: var(--ds-surface); }
.art .art-paper { fill: var(--ds-bg); stroke: var(--ds-line-strong); stroke-width: 1.5; }
.art .art-line { fill: none; stroke: var(--ds-line-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.art .art-divider { fill: none; stroke: var(--ds-line); stroke-width: 1.5; }
.art .art-tint { fill: var(--ds-tint); }
.art .art-tint-strong { fill: var(--ds-tint); stroke: var(--brand-mark); stroke-width: 1; }
.art .art-label { fill: var(--ds-link); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; }
.art .art-mono { fill: var(--ds-ink); font-family: var(--ds-font-mono); font-size: 14px; }
.art .art-arrow { fill: none; stroke: var(--ds-link); stroke-width: 2; stroke-dasharray: 6 6; stroke-linecap: round; }
.art .art-arrow-head { fill: none; stroke: var(--ds-link); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art .art-window { fill: var(--ds-bg); stroke: var(--ds-line-strong); stroke-width: 1.5; }
.art .art-titlebar { fill: var(--ds-surface); }
.art .art-mark { fill: var(--brand-mark); }
.art .art-title { fill: var(--ds-ink-2); font-size: 12px; }
.art .art-tree { fill: var(--ds-ink); font-size: 13px; font-weight: 600; }
.art .art-tree-sub { fill: var(--ds-ink-2); font-size: 12px; }
.art .art-skel { fill: var(--ds-line); }
.art .art-skel-dark { fill: var(--ds-line-strong); }
.art .art-accent-fill { fill: var(--ds-action); }
.art .art-chip { fill: var(--ds-bg); stroke: var(--ds-line-strong); stroke-width: 1; }
.art .art-chip-text { fill: var(--ds-ink); font-size: 11px; font-weight: 600; }
.art .art-cursor { fill: var(--ds-ink); stroke: var(--ds-bg); stroke-width: 1.5; stroke-linejoin: round; }
.art .art-check-bg { fill: var(--ds-tint); }
.art .art-check { fill: none; stroke: var(--ds-link); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.scene__frame > .art {
  width: 100%;
  height: 100%;
}

/* Formats by category (owner, 2026-10-04: the size-by-importance cloud did not work).
   The compiled-application category leads: it is what the H2 promises, so it sits in a
   tinted panel with large names. The other categories are plain reference lists. */
.formats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px var(--ds-gap);
}

@media (min-width: 720px) {
  .formats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .formats__main {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .formats {
    grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .formats__main {
    grid-column: auto;
  }
}

.formats__label {
  margin: 0 0 10px;
  font-family: var(--ds-font-label);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-2);
}

.formats__main {
  padding: 20px 24px 8px;
  border-radius: var(--ds-radius-l);
  background: var(--ds-tint);
}

.formats__main .formats__label {
  color: var(--ds-link);
}

/* One column with hairlines on a phone and on a wide screen; four in a row in between */
.formats__core {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--ds-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.formats__core > li + li {
  border-top: 1px solid var(--ds-line-strong);
}

@media (min-width: 720px) and (max-width: 1099px) {
  .formats__core {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .formats__core > li + li {
    border-top: 0;
  }
}

/* Phone: the extensions sit on the name's line */
@media (max-width: 719px) {
  .formats__main .formats__core a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    padding: 9px 0 10px;
  }

  .formats__main .formats__core .formats__ext {
    margin-top: 0;
    font-size: 12px;
  }
}

.formats__core a {
  display: block;
  padding: 10px 0 14px;
  color: var(--ds-ink);
  text-decoration: none;
}

.formats__name {
  display: block;
  font-family: var(--ds-font-display);
  font-stretch: var(--ds-display-stretch);
  font-size: clamp(19px, 15.29px + 0.952vw, 29px);
  font-weight: var(--ds-display-weight);
  line-height: 1.2;
  letter-spacing: var(--ds-ls-h2);
}

.formats__core .formats__ext {
  display: block;
  margin-top: 4px;
}

.formats__ext {
  font-family: var(--ds-font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--ds-ink-2);
}

.formats__core a:hover .formats__name {
  color: var(--ds-link);
}

.formats__group {
  padding-top: 18px;
  border-top: 1px solid var(--ds-line-strong);
}

@media (min-width: 1100px) {
  .formats__group {
    padding-top: 20px;
  }
}

.formats__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ds-ink);
}

.formats__list > li + li {
  margin-top: 6px;
}

.formats__list a {
  color: var(--ds-ink);
  text-decoration: underline;
  text-decoration-color: var(--ds-line-strong);
  text-underline-offset: 3px;
}

.formats__list a:hover {
  color: var(--ds-link);
  text-decoration-color: currentColor;
}

.formats__list .formats__ext {
  margin-left: 4px;
  font-size: 12px;
}

/* Phone: the reference categories become wrapped lines to keep the page short */
@media (max-width: 719px) {
  .formats__list > li {
    display: inline;
    white-space: nowrap;
  }

  .formats__list > li + li {
    margin-top: 0;
  }

  .formats__list > li:not(:last-child)::after {
    content: "\00B7" / "";
    margin: 0 8px;
    color: var(--ds-ink-3);
  }

  .formats__list .formats__ext {
    display: none;
  }
}

.formats__all {
  margin-top: var(--ds-space-m);
}

/* Numbered flowline: the numbers match the markers in the lane schematic */
.flowline--num {
  counter-reset: flow;
}

.flowline--num > li {
  counter-increment: flow;
}

.flowline--num > li::before {
  content: counter(flow);
  left: 0;
  top: 0.1em;
  width: 20px;
  height: 20px;
  border: 0;
  background: var(--ds-link);
  color: var(--ds-bg);
  font-family: var(--ds-font-label);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.flowline--num > li::after {
  left: 9.5px;
  top: calc(0.1em + 24px);
}

/* Lane schematic: same frame as a lane screenshot, drawn instead of a placeholder */
.lane__shot > .art {
  width: 100%;
  height: auto;
}

/* Chain art (Translate step): Lingobit mark at both ends, who translates in the middle node,
   what travels on the arrows; labels in one row under the chain */
.art .art-person-front { fill: var(--ds-link); stroke: var(--ds-bg); stroke-width: 2; }
.art .art-person-back { fill: var(--ds-tint); stroke: var(--brand-mark); stroke-width: 1; }
.art .art-badge { fill: var(--ds-bg); stroke: var(--ds-link); stroke-width: 1.5; }
.art .art-bar-fill { fill: var(--ds-link); }
.art .art-node-label { fill: var(--ds-ink); font-size: 13px; font-weight: 600; }
.art .art-sub { fill: var(--ds-ink-2); font-size: 12px; }
.art .art-note { fill: var(--ds-link); font-size: 12px; font-weight: 600; }

/* Options: capabilities you combine, not steps (Translate step, machine translation lane).
   A small-caps label, chips with the names, one line of text; no numbers, no connecting line. */
.options {
  margin-top: 14px;
}

.options__group + .options__group {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-line);
}

.options__label {
  margin-bottom: 8px;
  font-family: var(--ds-font-label);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-2);
}

.options__text {
  margin-top: 8px;
  font-size: var(--ds-fs-small);
  line-height: var(--ds-lh-small);
  color: var(--ds-ink-2);
}

/* Large chips are names, not controls: no border, so they never read as buttons */
.chips--lg > li {
  padding: 5px 12px;
  border-color: transparent;
  border-radius: var(--ds-radius-m);
  font-family: var(--ds-font-display);
  font-stretch: 100%;
  font-size: 16px;
  font-weight: var(--ds-display-weight);
}

/* A planned option (Coming soon): dashed, secondary text, not an accent */
.chips > li.chip--soon {
  border-style: dashed;
  border-color: var(--ds-line-strong);
  background: transparent;
  color: var(--ds-ink-2);
}

/* What's new: release groups, a title and three short lines each */
.news {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--ds-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .news {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .news {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.news > li {
  padding: 16px 0 22px;
  border-top: 1px solid var(--ds-line-strong);
}

.news h3 {
  margin: 0;
  font-family: var(--ds-font-display);
  font-stretch: 100%;
  font-size: 18px;
  font-weight: var(--ds-display-weight);
  line-height: 1.3;
  color: var(--ds-ink);
}

.news ul {
  margin: 8px 0 0;
  padding: 0 0 0 18px;
  font-size: var(--ds-fs-small);
  line-height: var(--ds-lh-small);
  color: var(--ds-ink-2);
}

.news ul > li + li {
  margin-top: 4px;
}

.news ul > li::marker {
  color: var(--ds-ink-3);
}

@media (max-width: 719px) {
  .news > li {
    padding: 12px 0 16px;
  }

  .news ul {
    margin-top: 6px;
  }

  .news ul > li + li {
    margin-top: 2px;
  }
}

/* Migration band with a schematic on the right */
@media (min-width: 960px) {
  .band--art .band__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: var(--ds-hero-gap);
  }
}

.band__action {
  margin-top: var(--ds-space-m);
}

.band__art {
  width: 100%;
  max-width: 520px;
  justify-self: center;
}

/* Editions: a light divider between sections, small type, two hairlines */
.editions {
  padding-block: calc(var(--ds-section-y) * 0.6);
}

.editions__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px var(--ds-gap);
  padding-block: 22px;
  border-top: 1px solid var(--ds-line-strong);
  border-bottom: 1px solid var(--ds-line-strong);
}

@media (min-width: 960px) {
  .editions__inner {
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    align-items: start;
  }
}

.editions__title {
  font-family: var(--ds-font-label);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-2);
}

.editions__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .editions__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .editions__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.editions__list strong {
  display: block;
  font-weight: 600;
  color: var(--ds-ink);
}

.editions__list span {
  display: block;
  margin-top: 2px;
  font-size: var(--ds-fs-small);
  line-height: var(--ds-lh-small);
  color: var(--ds-ink-2);
}

.editions__links {
  flex-direction: column;
  gap: 6px;
  white-space: nowrap;
}

/* Aside layout for reference sections: heading on the left, one readable column right */
.aside-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 960px) {
  .aside-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--ds-hero-gap);
    align-items: start;
  }
}

.aside-layout__head .link-arrow {
  display: inline-block;
  margin-top: 10px;
}

/* Rows: a readable single-column list with hairlines */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ds-line-strong);
}

.rows > li {
  padding: 13px 0;
  border-bottom: 1px solid var(--ds-line);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ds-ink);
}

@media (min-width: 720px) {
  .rows--defs > li {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4px 32px;
  }
}

.rows a {
  font-weight: 600;
  color: var(--ds-ink);
  text-decoration: none;
}

.rows a:hover {
  color: var(--ds-link);
  text-decoration: underline;
}

.rows__desc {
  display: block;
  color: var(--ds-ink-2);
}

/* 10. Footer ------------------------------------------------------------------ */

.site-footer {
  padding-top: clamp(32px, 21.6px + 2.667vw, 60px);
  background: var(--ds-dark);
  color: var(--ds-on-dark);
  font-size: var(--ds-fs-small);
}

.site-footer a {
  color: var(--ds-on-dark);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer :focus-visible {
  outline-color: var(--ds-link-on-dark);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px var(--ds-gap);
  padding-bottom: 32px;
}

@media (min-width: 960px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

.footer-brand img {
  width: auto;
  height: 23px;
}

.footer-line {
  margin-top: 14px;
  font-family: var(--ds-font-display);
  font-stretch: var(--ds-display-stretch);
  font-weight: var(--ds-display-weight);
  font-size: 18px;
  line-height: 1.35;
  color: var(--ds-on-dark);
}

.footer-desc {
  margin-top: 4px;
  color: var(--ds-on-dark-2);
}

.footer-nav ul,
.footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-block;
  padding: 6px 16px 6px 0;
  font-size: 15px;
}

@media (max-width: 559px) {
  .footer-top {
    gap: 16px;
    padding-bottom: 20px;
  }

  .footer-nav a {
    padding: 5px 18px 5px 0;
  }
}

@media (min-width: 960px) {
  .footer-nav a {
    padding: 6px 0 6px 22px;
  }
}

.footer-legal {
  padding-bottom: 22px;
  color: var(--ds-on-dark-2);
}

.footer-legal::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 18px;
  background: var(--ds-dark-line);
}

.footer-legal a {
  color: var(--ds-on-dark-2);
}

.footer-legal li:not(:last-child)::after {
  content: "\00B7" / "";
  margin: 0 10px;
}

/* Legal and utility pages: the legal line only (T5) */
.site-footer--quiet {
  padding-top: 22px;
}

.site-footer--quiet .footer-legal::before {
  display: none;
}

/* 11. Motion ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Tabs (I4, owner 2026-10-16): a few options of one thing, one shown at a time on a wide screen; below 960 px all of
   them follow one another, each under its own heading (the tab list is hidden). Markup: [data-tabs] > .tabs__list >
   button[role=tab] ... and .tabs__panel[role=tabpanel] with a .tabs__title inside. */
.tabs__list {
  display: none;
}

.tabs__panel + .tabs__panel {
  margin-top: var(--ds-space-xl);
}

.tabs__title {
  margin: 0 0 6px;
  font-size: var(--ds-fs-h4, 18px);
}

@media (min-width: 960px) {
  .tabs.is-ready .tabs__list {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ds-line);
  }

  .tabs__tab {
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: var(--ds-ink-2);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .tabs__tab[aria-selected="true"] {
    border-bottom-color: var(--ds-link);
    color: var(--ds-ink);
  }

  .tabs__tab:focus-visible {
    outline: 2px solid var(--ds-focus);
    outline-offset: 2px;
  }

  .tabs.is-ready .tabs__panel { display: none; margin-top: 0; }
  .tabs.is-ready .tabs__panel.is-current { display: block; }
  .tabs.is-ready .tabs__title { display: none; }
}