/* ============================================================
   Klasa w chmurze: layout: grid, sections, header, footer,
   named asymmetric patterns
   ============================================================ */

/* ---- Grid ---- */

.l-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gutter);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (max-width: 1024px) {
  .l-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (max-width: 640px) {
  .l-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Sections ---- */

.l-section {
  position: relative;
  padding-block: var(--section-pad);
}

.l-section--tight {
  padding-block: clamp(48px, 6vw, 96px);
}

.l-section--rule {
  /* separator rules retired: sections are divided by whitespace and
     the section-head rule; class kept for markup compatibility */
}

/* The home page is a single decision path. Keep adjacent stages close
   enough to read as one sequence while preserving the larger hero rhythm. */
.page-home main > .l-section:not(.l-hero):not(.l-section--tight) {
  padding-block: clamp(48px, 5vw, 80px);
}

.page-home .l-hero {
  display: grid;
  min-height: min(900px, calc(100svh - 48px));
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(88px, 10vw, 144px) clamp(56px, 6vw, 88px);
}

.page-home .l-hero > .l-grid {
  width: 100%;
}

.page-home main {
  position: relative;
}

.page-home .c-stage {
  scroll-margin-top: 48px;
}

.page-home .c-stage--use {
  background:
    linear-gradient(rgba(42, 107, 102, 0.025), rgba(42, 107, 102, 0.025)),
    var(--surface-paper);
}

.l-section > .l-grid {
  position: relative;
  z-index: var(--z-content);
}

/* Dark section: theming by token re-declaration only */
.l-section--dark {
  background: var(--surface-graphite);
  color: var(--text-inverse);
  --text-primary: var(--text-inverse);
  --text-secondary: var(--text-inverse-secondary);
  --text-muted: var(--text-inverse-secondary);
  --line-primary: var(--line-inverse);
  --line-subtle: rgba(242, 241, 236, 0.15);
  --accent: var(--accent-on-dark);
  --accent-hover: #9ccbc7;
  --accent-wash: rgba(143, 188, 158, 0.1);
  --line-sketch: rgba(242, 241, 236, 0.05);
  --line-sketch-label: rgba(242, 241, 236, 0.28);
  --surface-technical: rgba(242, 241, 236, 0.04);
  --surface-interactive: rgba(242, 241, 236, 0.06);
}

/* ============================================================
   Named asymmetric patterns
   ============================================================ */

/* Metadata aside (1–3) + reading body (4–9), 10–12 empty */
.l-split-meta__aside {
  grid-column: 1 / 4;
  align-self: start;
}

.l-split-meta__body {
  grid-column: 4 / 10;
  max-width: var(--measure);
}

/* Legal documents retain the site's wide editorial grid. */
.page-legal .l-split-meta__body {
  grid-column: 1 / -1 !important;
  max-width: none;
}

/* Main legal paragraphs are separated by a quiet rule and compact rhythm. */
.page-legal .l-hero {
  padding-bottom: clamp(32px, 3vw, 48px);
}

.page-legal .l-hero + .l-section[id^="par-"] {
  padding-top: clamp(24px, 2vw, 32px);
}

.page-legal main > .l-section[id^="par-"] {
  padding-block: clamp(32px, 3vw, 48px);
}

.page-legal main > .l-section[id^="par-"] + .l-section[id^="par-"] {
  border-top: var(--stroke-hair) solid var(--line-subtle);
}

@media (min-width: 1025px) {
  .l-split-meta__aside--sticky {
    position: sticky;
    top: var(--space-96);
  }
}

/* Meta (1–2) + body (3–8) + figure (9–12) */
.l-split-diagram__meta {
  grid-column: 1 / 3;
}

.l-split-diagram__body {
  grid-column: 3 / 9;
  max-width: var(--measure);
}

.l-split-diagram__figure {
  grid-column: 9 / 13;
  align-self: center;
}

/* Wide variant: body narrower, figure wider */
.l-split-diagram__body--wide {
  grid-column: 3 / 8;
}

.l-split-diagram__figure--wide {
  grid-column: 8 / 13;
}

/* Hero */
.l-hero {
  padding-block: clamp(96px, 14vw, 192px) clamp(64px, 9vw, 128px);
}

.l-hero__ident {
  grid-column: 1 / 10;
  margin-bottom: var(--space-32);
}

.l-hero__title {
  grid-column: 1 / 11;
}

/* Strona główna: tytuł hero wykorzystuje dostępny wiersz bez sztucznego balansowania. */
.page-home .l-hero__title {
  max-width: none;
  text-wrap: wrap;
}

.l-hero__lead {
  grid-column: 1 / 7;
  margin-top: var(--space-32);
}

.l-hero__document-meta {
  grid-column: 1 / 11;
  margin-top: var(--space-24);
}

/* Article listing and article pages: let hero copy use the available row
   instead of forcing editorial line breaks. */
body:has(.c-index) .l-hero__title,
body:has(main > article) .l-hero__title {
  max-width: none;
  text-wrap: wrap;
}

/* Pojedyncze artykuły mają spokojniejszą skalę tytułów niż hero strony głównej. */
body:has(main > article) .l-hero__title {
  font-size: clamp(1.75rem, 1.2rem + 3.2vw, 3.5rem);
  line-height: 1.02;
}

body:has(main > article) .l-hero__title {
  grid-column: 1 / -1;
  font-size: clamp(2rem, 1.45rem + 2.3vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
}

body:has(.c-index) .l-hero__lead,
body:has(main > article) .l-hero__lead {
  grid-column: 1 / 11;
  max-width: none;
  text-wrap: wrap;
}

body:has(main > article) .l-hero__lead {
  grid-column: 1 / -1;
  margin-top: var(--space-24);
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  line-height: 1.6;
}

/* Article details follow the quiet, technical rhythm of the article index. */
.c-article-masthead {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16) var(--space-32);
  margin-bottom: clamp(var(--space-32), 3vw, 40px);
}

/* W artykułach tytuł potrzebuje wyraźniejszej przerwy po metadanych. */
body:has(main > article) .c-article-masthead {
  margin-bottom: clamp(48px, 5vw, 64px);
}

.c-article-masthead__identity {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin: 0;
}

.c-article-masthead__identity::before {
  content: none;
}

.c-article-masthead__identity::after {
  content: "·";
  order: 1;
  color: var(--text-muted);
}

.c-article-masthead__identity strong {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.6;
}

.c-article-masthead__type,
.c-article-masthead__category,
.c-article-masthead__facts {
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
}

.c-article-masthead__type {
  display: none;
}

.c-article-masthead__category {
  order: 2;
  color: var(--text-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

.c-article-masthead__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-16) var(--space-32);
  margin: 0;
}

.c-article-masthead__facts > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  min-width: max-content;
  padding-left: 0;
}

.c-article-masthead__facts > div::before {
  content: none;
}

.c-article-masthead__facts > div:first-child::before {
  content: none;
}

.c-article-masthead__facts dt {
  color: var(--text-muted);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
}

.c-article-masthead__facts dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.c-article-masthead__facts > div:first-child dd {
  color: var(--accent);
}

@media (max-width: 800px) {
  .c-article-masthead__facts {
    justify-content: flex-start;
  }
}

@media (max-width: 420px) {
  .c-article-masthead__facts {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Keep the transition from article introduction to content compact. */
body:has(.c-index) .l-hero {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(32px, 4vw, 48px);
}

body:has(.c-index) .l-hero + .l-section {
  padding-top: clamp(32px, 4vw, 48px);
}

body:has(main > article) .l-hero {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(32px, 3vw, 48px);
}

body:has(main > article) .l-hero + .l-section {
  padding-top: clamp(32px, 3vw, 48px);
}

/* Related articles follow the article body without an oversized gap. */
body:has(main > article) main > article {
  padding-bottom: clamp(24px, 3vw, 40px);
}

body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] {
  padding-top: clamp(24px, 3vw, 40px);
}

body:has(main > article) main > article .l-split-meta__body {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  font-size: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  line-height: 1.7;
}

body:has(main > article) main > article .c-prose > * {
  max-width: none;
}

body:has(main > article) main > article .c-prose :is(h2, h3) {
  max-width: none;
  text-wrap: wrap;
}

body:has(main > article) main > article .c-prose > * + * {
  margin-top: var(--space-16);
}

body:has(main > article) main > article .c-prose > h2 {
  margin-top: var(--space-48);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  line-height: 1.22;
  letter-spacing: -0.006em;
}

body:has(main > article) main > article .c-prose > h2:first-child {
  margin-top: 0;
}

body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-section-head {
  margin-bottom: var(--space-32);
}

body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-section-head__num {
  margin-bottom: var(--space-12);
}

body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .t-heading {
  font-size: clamp(1.5rem, 1.32rem + 0.75vw, 2rem);
}

body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  min-height: 224px;
  padding: var(--space-24);
  border-bottom: 0;
  border-right: var(--stroke-hair) solid var(--line-subtle);
}

/* Related reading becomes a compact three-column editorial index. */
body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-bottom: var(--stroke-hair) solid var(--line-subtle);
}

body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-row:last-child {
  border-right: 0;
}

body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-row__idx,
body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-row__desc,
body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-row__spec {
  margin: 0;
}

body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-row__idx {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-row__title {
  max-width: none;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  line-height: 1.25;
}

body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-row__title a:hover {
  color: var(--accent);
}

body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-row__desc {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-row__spec {
  margin-top: auto;
  text-align: left;
}

@media (max-width: 1024px) {
  body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-rows {
    grid-template-columns: 1fr;
  }

  body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-row {
    min-height: 0;
    border-right: 0;
    border-bottom: var(--stroke-hair) solid var(--line-subtle);
  }

  body:has(main > article) main > article + .l-section[aria-labelledby="rel-h"] .c-row:last-child {
    border-bottom: 0;
  }
}

.l-hero__actions {
  grid-column: 1 / 8;
  margin-top: var(--space-48);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24) var(--space-32);
}

@media (min-width: 1025px) {
  .page-home .l-hero__ident {
    grid-row: 1;
  }

  .page-home .l-hero__title {
    grid-row: 2;
  }

  .page-home .l-hero__lead {
    grid-column: 1 / 7;
    grid-row: 3;
  }

  .page-home .l-hero__actions {
    grid-column: 1 / 7;
    grid-row: 4;
  }
}

/* Compact paired introductions on the home page. The heading explains
   the stage, while the adjacent copy provides the decision context. */
@media (min-width: 1025px) {
  .page-home :is(#zastosowania, #zakres, #opinie, #korzysci) .c-section-head {
    grid-column: 1 / 6;
    grid-row: 1;
    align-self: end;
    padding-right: var(--space-32);
  }

  .page-home #opinie .c-section-head {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .page-home :is(#zastosowania, #zakres, #opinie, #korzysci) .c-section-head + .l-split-meta__body {
    grid-column: 7 / 13;
    grid-row: 1;
    align-self: end;
  }

  .page-home #konfiguracja .l-split-diagram__body--wide {
    grid-column: 1 / 7;
    grid-row: 2;
  }

  .page-home #konfiguracja .l-split-diagram__figure--wide {
    grid-column: 7 / 13;
    grid-row: 1 / 3;
  }

  .page-home #dostep .l-split-diagram__body--wide {
    grid-column: 1 / 7;
    grid-row: 2;
  }

  .page-home #dostep .l-split-diagram__figure--wide {
    grid-column: 7 / 13;
    grid-row: 1 / 3;
  }

  .page-home #jak-to-dziala .l-split-diagram__body--wide {
    grid-column: 1 / 7;
    grid-row: 2;
    align-self: center;
  }

  .page-home #jak-to-dziala .l-split-diagram__figure--wide {
    grid-column: 7 / 13;
    grid-row: 1 / 3;
  }

  .page-home :is(#jak-to-dziala, #dostep, #konfiguracja) .c-section-head {
    grid-column: 1 / 7;
    grid-row: 1;
    align-self: end;
    padding-right: var(--space-32);
  }

  .page-home #jak-to-dziala .c-steps {
    grid-row: 3;
  }

  .page-home .c-stage::before {
    display: none;
  }

  .page-home .c-stage .c-section-head {
    padding-left: 0;
  }

}

/* Full-width content block inside grid */
.l-full {
  grid-column: 1 / -1;
}

/* Tablet + mobile collapse: source order = reading order */
@media (max-width: 1024px) {
  .l-split-meta__aside,
  .l-split-meta__body,
  .l-split-diagram__meta,
  .l-split-diagram__body,
  .l-split-diagram__figure,
  .l-split-diagram__body--wide,
  .l-split-diagram__figure--wide,
  .l-hero__ident,
  .l-hero__title,
  .l-hero__lead,
  .l-hero__document-meta,
  .l-hero__actions {
    grid-column: 1 / -1;
  }

  .l-split-meta__aside {
    margin-bottom: var(--space-24);
  }

  .l-split-diagram__meta {
    margin-bottom: var(--space-16);
  }

  .l-split-diagram__figure {
    margin-top: var(--space-32);
  }

  body:has(main > article) main > article .l-split-meta__body {
    grid-column: 1 / -1;
  }

}

@media (max-width: 1024px) {
  .page-home .l-hero {
    min-height: auto;
  }
}

/* ============================================================
   Header
   ============================================================ */

.l-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: var(--stroke-hair) solid var(--line-subtle);
  background: rgba(246, 245, 241, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.l-header.is-scrolled {
  border-bottom-color: rgba(22, 24, 22, 0.16);
  box-shadow: 0 8px 24px rgba(22, 24, 22, 0.08);
}

.l-header__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0 var(--gutter);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

/* Main navigation */
.l-nav {
  display: flex;
  align-self: stretch;
}

.c-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  gap: var(--space-8);
  white-space: nowrap;
}

.c-logo:hover,
.c-logo:active {
  color: var(--text-primary);
}

.c-logo__mark {
  width: 11px;
  height: 11px;
  color: var(--accent);
  align-self: center;
}

.l-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-24);
  align-items: stretch;
  height: 100%;
}

.l-nav__list > li {
  display: flex;
}

.l-nav__link {
  position: relative;
  isolation: isolate;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding-block: 0;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.l-nav__link:hover {
  color: var(--text-primary);
}

.l-nav__link.is-active,
.l-nav__link[aria-current="page"] {
  color: var(--text-primary);
}

/* A quiet background fade marks both hover and the current page. Its box has
   equal padding on every side and does not affect the links' spacing. */
@media (min-width: 961px) {
  .l-nav__link::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: calc(-1 * var(--space-8));
    right: calc(-1 * var(--space-8));
    height: calc(1.65em + var(--space-16));
    background: var(--accent-wash);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--dur-base) var(--ease);
  }

  .l-nav__link.is-active::before,
  .l-nav__link[aria-current="page"]::before {
    opacity: 1;
  }

  .l-nav__link:hover:not(.is-active):not([aria-current="page"]),
  .l-nav__link:focus-visible:not(.is-active):not([aria-current="page"]) {
    color: var(--text-primary);
  }

  .l-nav__link:hover:not(.is-active):not([aria-current="page"])::before,
  .l-nav__link:focus-visible:not(.is-active):not([aria-current="page"])::before {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-header,
  .l-nav__link,
  .l-nav__link::before,
  .c-nav-toggle {
    transition: none;
  }
}

.c-nav-toggle {
  display: none;
  appearance: none;
  background: none;
  border: var(--stroke-hair) solid var(--line-primary);
  border-radius: var(--radius-1);
  padding: var(--space-8) var(--space-12);
  min-width: 86px;
  min-height: 40px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

@media (max-width: 960px) {
  .c-nav-toggle {
    display: inline-block;
  }

  .c-nav-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    background: var(--accent-wash);
    color: var(--accent);
  }

  .l-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-nav-overlay);
    background: rgba(246, 245, 241, 0.98);
    box-shadow: 0 16px 32px rgba(22, 24, 22, 0.1);
    border-bottom: var(--stroke-hair) solid var(--line-primary);
  }

  .l-header.is-open .l-nav {
    display: block;
  }

  .l-nav__list {
    flex-direction: column;
    gap: 0;
    padding: var(--space-8) var(--gutter) var(--space-16);
  }

  .l-nav__list > li {
    display: block;
  }

  .l-nav__link {
    display: flex;
    width: 100%;
    min-height: 52px;
    padding: var(--space-12) var(--space-16);
    border-bottom: var(--stroke-hair) solid var(--line-subtle);
  }

  .l-nav__link:hover:not(.is-active):not([aria-current="page"]),
  .l-nav__link:focus-visible:not(.is-active):not([aria-current="page"]) {
    background: var(--accent-wash);
  }

  .l-nav__link.is-active,
  .l-nav__link[aria-current="page"] {
    background: var(--accent-wash);
  }
}

@media (max-width: 340px) {
  .l-header__inner {
    gap: var(--space-8);
  }

  .c-logo {
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
  }

  .c-nav-toggle {
    min-width: 72px;
    padding-inline: var(--space-8);
  }
}

/* no-JS fallback: keep nav visible on mobile */
html:not(.js) .l-nav {
  display: block;
  position: static;
  border: 0;
}

html:not(.js) .c-nav-toggle {
  display: none;
}

/* ============================================================
   Footer
   ============================================================ */

.l-footer {
  background: var(--surface-graphite);
  color: var(--text-inverse);
  --text-primary: var(--text-inverse);
  --text-secondary: var(--text-inverse-secondary);
  --text-muted: var(--text-inverse-secondary);
  --line-subtle: rgba(242, 241, 236, 0.15);
  --accent: var(--accent-on-dark);
  --accent-hover: #9ccbc7;
  padding-block: var(--space-96) var(--space-48);
}

.page-home .l-footer {
  padding-top: var(--space-48);
  border-top: var(--stroke-hair) solid rgba(242, 241, 236, 0.15);
}

.l-footer__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-48) var(--gutter);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-footer__brand {
  grid-column: 1 / 5;
}

.l-footer__col {
  grid-column: span 2;
}

.l-footer__col--wide {
  grid-column: span 3;
}

.l-footer__head {
  color: var(--text-inverse-secondary);
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-8);
  border-bottom: var(--stroke-hair) solid var(--line-subtle);
}

.l-footer__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-8);
}

.l-footer__list a {
  color: var(--text-inverse);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.l-footer__list a:hover {
  color: var(--accent-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.l-footer__legal {
  grid-column: 1 / -1;
  margin-top: var(--space-48);
  padding-top: var(--space-24);
  border-top: var(--stroke-hair) solid var(--line-subtle);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-12) var(--space-32);
  color: var(--text-inverse-secondary);
}

@media (max-width: 1024px) {
  .l-footer__brand {
    grid-column: 1 / -1;
  }

  .l-footer__col,
  .l-footer__col--wide {
    grid-column: span 4;
  }
}

@media (max-width: 640px) {
  .l-footer__col,
  .l-footer__col--wide {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   Layout extensions v2
   ============================================================ */

/* Technical band: gray surface section; plates invert to paper */
.l-section--technical {
  background: #eceae3;
  --surface-technical: var(--surface-paper);
  --surface-interactive: var(--surface-paper);
  --line-subtle: #cfccc2;
  --text-muted: #5d605b; /* 5.3:1 on the gray band (AA) */
}

/* Flipped split-diagram (even case studies): figure left, body right */
.l-split-diagram__figure--left {
  grid-column: 3 / 8;
}

.l-split-diagram__body--right {
  grid-column: 8 / 13;
}

@media (max-width: 1024px) {
  .l-split-diagram__figure--left,
  .l-split-diagram__body--right {
    grid-column: 1 / -1;
  }

  .l-split-diagram__figure--left {
    margin-top: 0;
    margin-bottom: var(--space-32);
  }
}


/* On dark surfaces the accent resolves to light teal - the accent
   button must carry dark text (7.6:1) instead of paper. */
.l-section--dark .c-btn--accent,
.l-footer .c-btn--accent {
  color: #1a1c1a;
}

.l-section--dark .c-btn--accent:hover,
.l-footer .c-btn--accent:hover {
  color: #1a1c1a;
}