/* ==========================================================================
   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): capabilities in rows, editions in columns. The Buy buttons in the head are one
   row of the same action (П12). Below 720 px the prices and Buy move above the table (.mx-cards) and the table scrolls
   inside its block with the capability column fixed. */
.mx-wrap {
  overflow-x: auto;
}

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

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

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

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

.mx thead th {
  vertical-align: bottom;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ds-ink);
  text-align: center;
}

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

.mx tbody th {
  padding-left: 0;
  font-weight: 400;
}

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

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

.mx-desc {
  display: block;
  max-width: 62ch;
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-2);
}

.mx-edition {
  display: block;
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-h3);
  font-weight: var(--ds-display-weight);
  color: var(--ds-ink);
}

.mx-price {
  display: block;
  font-size: var(--ds-fs-small);
  color: var(--ds-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mx-buy {
  margin-top: 10px;
}

.mx-group th {
  padding-top: 28px;
  padding-left: 0;
  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);
}

.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;
}

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

.mx-cards {
  display: none;
}

@media (max-width: 719px) {
  .mx-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
    margin: 0 0 var(--ds-space-m);
    padding: 0;
    list-style: none;
  }

  .mx-cards > li {
    padding-top: 10px;
    border-top: 2px solid var(--ds-ink);
  }

  .mx-cards .btn {
    margin-top: 8px;
    width: 100%;
  }

  .mx {
    min-width: 640px;
    font-size: 14px;
  }

  .mx-buy {
    display: none;
  }

  /* On a phone the rows keep only the capability names (each links to its details) */
  .mx-desc {
    display: none;
  }

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

  .mx-group th {
    position: static;
  }

  .mx th,
  .mx td {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.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; }
}