:root {
  --color-ink: #22303c;
  --color-slate: #2c3e50;
  --color-text: #414b57;
  --color-muted: #69727d;
  --color-subtle: #97a0a9;
  --color-line: #dfe4ea;
  --color-line-soft: #e2e7ed;
  --color-surface: #f2f5f7;
  --color-surface-light: #fafbfc;
  --color-accent: #0056a7;
  --color-accent-dark: #004384;
  --color-white: #fff;
  --content-wide: 77.5rem;
  --content-narrow: 47.5rem;
  --space-page: 2rem;
  --section-space: 5rem;
  --radius-media: 0.5rem;
  --mega-menu-icon-size: 1.375rem;
  --mega-menu-item-decoration: underline;
  --site-logo-height: 2.75rem;
}

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

html {
  color: var(--color-ink);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--color-white);
  margin: 0;
  overflow-wrap: break-word;
}

body.navigation-is-open {
  overflow: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--color-accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 0.1875rem solid var(--color-accent);
  outline-offset: 0.1875rem;
}

p,
h1,
h2,
h3,
h4 {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--color-ink);
  text-wrap: balance;
}

h1 {
  font-size: 3.25rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

h2 {
  font-size: 2.25rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h3 {
  font-size: 1.375rem;
  line-height: 1.3;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.screen-reader-text:focus {
  background: var(--color-white);
  clip: auto;
  clip-path: none;
  color: var(--color-ink);
  height: auto;
  left: 1rem;
  padding: 0.75rem 1rem;
  top: 1rem;
  width: auto;
  z-index: 100000;
}

.content-container {
  margin-inline: auto;
  max-width: var(--content-wide);
  padding-inline: var(--space-page);
  width: 100%;
}

.content-container--narrow {
  max-width: var(--content-narrow);
}

.eyebrow {
  color: var(--color-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.button {
  align-items: center;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 0.1875rem;
  color: var(--color-white);
  display: inline-flex;
  font-size: 1rem;
  font-weight: 600;
  gap: 0.5rem;
  justify-content: center;
  line-height: 1.2;
  min-height: 3.375rem;
  padding: 0.9375rem 1.625rem;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.button:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-white);
}

.button--small {
  font-size: 0.875rem;
  min-height: 2.625rem;
  padding: 0.625rem 1.125rem;
}

.button--secondary {
  background: var(--color-white);
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.button--secondary:hover {
  background: var(--color-surface);
  border-color: var(--color-ink);
  color: var(--color-ink);
}

/* Primary action sitting on an accent-coloured surface, where the normal blue
   button would disappear into its own background. */
.button--on-accent {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-accent);
}

.button--on-accent:hover {
  background: var(--color-surface);
  border-color: var(--color-surface);
  color: var(--color-accent-dark);
}

.text-link {
  align-items: center;
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.5rem;
}

/* Reusable rainbow-gradient heart. Font Awesome's solid heart shape,
   masked with the pride-flag gradient so it works for any inline element
   regardless of the surrounding text color. Size follows font-size. */
.rainbow-heart {
  background: linear-gradient(
    138deg,
    #e40303 0.0%,
    #e40303 12.5%,
    #ff8c00 20.8%,
    #ff8c00 29.2%,
    #ffed00 37.5%,
    #ffed00 45.8%,
    #008026 54.2%,
    #008026 62.5%,
    #24408e 70.8%,
    #24408e 79.2%,
    #732982 87.5%,
    #732982 100.0%
  );
  display: inline-block;
  height: 1.2em;
  vertical-align: -0.15em;
  width: 1.2em;
  -webkit-mask-image: url("../images/icons/heart-solid.svg");
  mask-image: url("../images/icons/heart-solid.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Utility bar and header */

.utility-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line-soft);
  font-size: 0.8125rem;
}

.utility-bar__inner {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: 2.5rem;
}

.header-row__slot--utility-left {
  grid-column: 1;
}

.header-row__slot--utility-center {
  grid-column: 2;
}

.header-row__slot--utility-right {
  align-items: center;
  display: flex;
  gap: 1.375rem;
  grid-column: 3;
  justify-self: end;
}

.utility-menu {
  align-items: center;
  display: flex;
  gap: 1.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.utility-bar a,
.utility-bar button,
.utility-bar span {
  color: #4a5560;
}

.utility-bar button {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.utility-bar__separator {
  background: #cfd6dd;
  height: 1rem;
  width: 1px;
}

.utility-bar__search {
  align-items: center;
  display: inline-flex;
  gap: 0.375rem;
}

.utility-bar__search.is-inactive {
  opacity: 0.5;
  pointer-events: none;
}

.site-header {
  backdrop-filter: saturate(140%) blur(2px);
  background: rgb(255 255 255 / 97%);
  border-bottom: 1px solid var(--color-line-soft);
  box-shadow: 0 1.125rem 1.875rem -1.375rem rgb(41 51 61 / 20%);
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-bar .site-header {
  top: 2rem;
}

.site-header__inner {
  align-items: center;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr auto 1fr;
  height: 4.625rem;
}

.header-row__slot--main-left {
  grid-column: 1;
  justify-self: start;
}

.navigation-panel {
  display: contents;
}

.site-brand {
  align-items: baseline;
  color: var(--color-ink);
  display: inline-flex;
  flex: none;
  font-size: 1.375rem;
  font-weight: 700;
  gap: 0.125rem;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}

.site-brand:hover {
  color: var(--color-ink);
}

.site-brand__dot {
  color: var(--color-accent);
}

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

.site-brand--logo .custom-logo-link {
  display: inline-flex;
}

.site-brand--logo img.custom-logo {
  display: block;
  height: auto;
  max-height: var(--site-logo-height);
  width: auto;
}

.header-mobile-actions {
  display: none;
}

.header-search-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 0.1875rem;
  color: var(--color-ink);
  display: none;
  height: 2.75rem;
  justify-content: center;
  padding: 0;
  width: 2.75rem;
}

.navigation-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 0.1875rem;
  color: var(--color-ink);
  display: none;
  height: 2.75rem;
  justify-content: center;
  padding: 0;
  width: 2.75rem;
}

.navigation-toggle__lines {
  display: grid;
  gap: 0.375rem;
  width: 1.125rem;
}

.navigation-toggle__lines span {
  background: currentColor;
  display: block;
  height: 0.09375rem;
  transition: transform 160ms ease;
  width: 100%;
}

.navigation-toggle[aria-expanded="true"] .navigation-toggle__lines span:first-child {
  transform: translateY(0.234rem) rotate(45deg);
}

.navigation-toggle[aria-expanded="true"] .navigation-toggle__lines span:last-child {
  transform: translateY(-0.234rem) rotate(-45deg);
}

.primary-navigation {
  align-self: stretch;
  display: flex;
  grid-column: 2;
}

.primary-navigation__list {
  align-items: center;
  display: flex;
  gap: 1.875rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-navigation__list > li {
  align-items: center;
  display: flex;
  height: 100%;
}

.primary-navigation__list > li > a:not(.button),
.solutions-menu > summary {
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.primary-navigation__list > li > a:not(.button):hover,
.solutions-menu > summary:hover {
  color: var(--color-accent);
}

.header-actions {
  align-items: center;
  display: flex;
  grid-column: 3;
  justify-self: end;
}

.header-action-menu {
  align-items: center;
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-navigation__cta .button {
  font-size: 0.875rem;
  min-height: 2.625rem;
  padding: 0.625rem 1.125rem;
}

.solutions-menu {
  align-items: center;
  display: flex;
  height: 100%;
}

.solutions-menu > summary {
  align-items: center;
  display: flex;
  gap: 0.375rem;
  height: 100%;
  list-style: none;
  position: relative;
}

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

.solutions-menu > summary::after {
  background: var(--color-accent);
  bottom: -1px;
  content: "";
  height: 0.125rem;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transition: transform 160ms ease;
  width: 100%;
}

.solutions-menu[open] > summary {
  color: var(--color-accent);
}

.solutions-menu[open] > summary::after {
  transform: scaleX(1);
}

.solutions-menu > summary svg {
  transition: transform 160ms ease;
}

.solutions-menu[open] > summary svg {
  transform: rotate(180deg);
}

.mega-menu {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-line-soft);
  border-top: 1px solid var(--color-line-soft);
  box-shadow: 0 1.125rem 1.875rem -1.375rem rgb(41 51 61 / 40%);
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
}

.mega-menu__content {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1.15fr 1fr 1fr;
  margin-inline: auto;
  max-width: var(--content-wide);
  padding: 2.5rem var(--space-page) 2.25rem;
}

.mega-menu__section-title {
  color: var(--color-accent);
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 1.125rem;
  text-decoration: none;
  text-transform: uppercase;
}

.mega-menu__section-title span {
  display: inline-block;
  margin-left: 0.375rem;
}

.mega-menu__section-title--secondary {
  color: var(--color-accent);
  display: block;
  margin: 1.625rem 0 1.125rem;
}

.mega-menu__items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mega-menu__item {
  border-radius: 0.25rem;
  color: inherit;
  display: flex;
  gap: 0.875rem;
  margin-inline: -0.75rem;
  padding: 0.625rem 0.75rem;
  text-decoration: none;
}

.mega-menu__item:hover {
  background: var(--color-surface);
  color: inherit;
}

.mega-menu__item-icon {
  color: var(--color-accent);
  flex: none;
}

.mega-menu__item-icon svg {
  height: var(--mega-menu-icon-size);
  width: var(--mega-menu-icon-size);
}

.mega-menu__item strong,
.mega-menu__item small {
  display: block;
}

.mega-menu__item strong {
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: var(--mega-menu-item-decoration);
}

.mega-menu__item small {
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-top: 0.125rem;
}

.mega-menu__compact-links {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mega-menu__compact-links a {
  border-radius: 0.25rem;
  color: var(--color-text);
  font-size: 0.875rem;
  margin-left: -0.75rem;
  padding: 0.5rem 0.75rem;
}

.mega-menu__compact-links a:hover {
  background: var(--color-surface);
  color: var(--color-accent);
}

.mega-menu__tagcloud.editorial-topics {
  margin-top: 0;
}

.mega-menu__posts {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mega-menu__post {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  color: inherit;
  display: block;
  padding-bottom: 3.5rem;
  position: relative;
  text-decoration: none;
}

.mega-menu__post-media {
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
  display: block;
  overflow: hidden;
}

.mega-menu__post-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Collapsed to ~2 lines by default; on hover/focus the panel grows upward
   (anchored to the card's bottom edge) to reveal the full title. Absolute
   positioning keeps the growth self-contained so it never pushes the grid
   or shifts sibling cards. */
.mega-menu__post-title {
  background: var(--color-white);
  bottom: 0;
  box-shadow: 0 -0.5rem 0.75rem -0.5rem rgb(34 48 60 / 18%);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  left: 0;
  line-height: 1.35;
  max-height: 3.5rem;
  overflow: hidden;
  padding: 0.625rem 0.75rem;
  position: absolute;
  right: 0;
  transition: max-height 200ms ease;
}

.mega-menu__post:hover .mega-menu__post-title,
.mega-menu__post:focus-visible .mega-menu__post-title {
  color: var(--color-accent);
  max-height: 9rem;
}

.mega-menu__subsection {
  margin-top: 1.625rem;
}

.mega-menu__subsection--compact {
  margin-top: 0;
}

.mega-menu__callout {
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.375rem;
}

.mega-menu__callout--subsection {
  margin-top: 1.5rem;
}

.mega-menu__callout > strong {
  color: var(--color-ink);
  font-size: 0.9375rem;
}

.mega-menu__callout p {
  color: var(--color-muted);
  font-size: 0.8125rem;
  margin: 0;
}

.mega-menu__callout .button {
  font-size: 0.8125rem;
  min-height: 2.375rem;
  padding: 0.5625rem 0.9375rem;
}

.mega-menu__actions {
  background: var(--color-surface-light);
  border-top: 1px solid var(--color-line-soft);
}

.mega-menu__actions-inner {
  display: flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 2rem;
  margin-inline: auto;
  max-width: var(--content-wide);
  padding: 1rem var(--space-page);
}

.mega-menu__actions a {
  color: var(--color-ink);
}

/* Homepage: template-faithful sections */

/* Image-led hero: a full-bleed motif with the text card lifted over its lower
   edge. Heights and the negative offset are tuned together so the primary CTA
   still sits above the fold at 1366x768 (checklist section 2) — changing one
   without re-measuring the other will push the button below it. */
.hero {
  border-bottom: 1px solid var(--color-line-soft);
  padding-bottom: 3.5rem;
}

/* The motif is tall enough that it still flanks the card on the right instead
   of ending at its top edge. Placeholder copy sits top-right, clear of the
   area the card covers. */
.hero__backdrop {
  height: 26rem;
  overflow: hidden;
}

.hero__backdrop img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Compound selector on purpose: `.media-placeholder` is defined later in this
   file and would otherwise win the alignment declarations. */
.hero__backdrop.media-placeholder {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 2.25rem 2.5rem;
  text-align: right;
}

.hero__backdrop .media-placeholder__note {
  max-width: 24rem;
}

.hero__card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  margin-top: -12rem;
  max-width: 47rem;
  padding: 2.75rem 3rem 2.5rem;
  position: relative;
}

.hero__card .eyebrow {
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.hero__card h1 {
  font-size: 2.875rem;
  margin-bottom: 1.125rem;
}

.hero__card h1 strong {
  font-weight: 600;
}

.hero__lead {
  color: var(--color-text);
  font-size: 1.0625rem;
  margin-bottom: 1.75rem;
  max-width: 36rem;
}

.hero__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-bottom: 0;
}

/* Labelled image placeholder. Every placeholder states what belongs there, so
   the later image production does not have to reinterpret the intent. */
.media-placeholder {
  align-items: center;
  background:
    repeating-linear-gradient(
      45deg,
      #e7ecf0 0 0.6875rem,
      #eef2f5 0.6875rem 1.375rem
    );
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
  overflow: hidden;
  padding: 2rem;
  position: relative;
  text-align: center;
}

.media-placeholder__tag {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: #7c8794;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 0.375rem 0.75rem;
  text-transform: uppercase;
}

.media-placeholder__note {
  color: #5d6874;
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
  max-width: 26rem;
}

/* Asymmetric media/text block. Breaks up the stacked full-width grids so the
   page reads as a rhythm rather than one long column of text. */
.split-feature {
  align-items: stretch;
  display: grid;
  gap: 4rem;
  grid-template-columns: 0.8fr 1.2fr;
}

.split-feature--reverse .split-feature__media {
  order: 2;
}

/* For blocks with a short text column: without this the portrait image would
   dictate the row height and leave a large void beside the text. Narrower
   column plus a capped height keeps both sides in proportion. */
.split-feature--compact {
  align-items: center;
  grid-template-columns: 1.25fr 0.75fr;
}

.split-feature--compact .split-feature__media img,
.split-feature--compact .split-feature__media .media-placeholder {
  height: 30rem;
  min-height: 0;
}

/* Fills the full height of the taller text column, so a portrait image reads
   as one deliberate block rather than leaving a gap beneath itself. */
.split-feature__media .media-placeholder {
  height: 100%;
  min-height: 26rem;
}

.split-feature__media img {
  border-radius: var(--radius-media);
  height: 100%;
  min-height: 26rem;
  object-fit: cover;
  width: 100%;
}

.split-feature__media .media-placeholder {
  border-radius: var(--radius-media);
}

.split-feature__body .section-heading {
  margin-bottom: 2.5rem;
}

.situation-list {
  display: grid;
  gap: 1.75rem;
}

.situation-card {
  border-left: 1px solid var(--color-line);
  padding: 0.25rem 0 0.25rem 1.75rem;
}

.situation-card h3 {
  font-size: 1.1875rem;
  margin-bottom: 0.625rem;
}

.situation-card p {
  color: var(--color-text);
  font-size: 0.9375rem;
  margin-bottom: 0;
  max-width: 34rem;
}

.section-footer-link {
  margin: 2rem 0 0;
}

/* Mid-page conversion point on a full-bleed accent surface. Sits after the
   offering sections, where a visitor has enough information to decide
   (checklist section 12). */
.accent-band {
  background: var(--color-accent);
  color: var(--color-white);
  padding-block: var(--section-space);
}

.accent-band__inner {
  align-items: center;
  display: grid;
  gap: 3.5rem;
  grid-template-columns: 1fr 1fr;
}

.accent-band__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-media);
  overflow: hidden;
}

.accent-band__media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Placeholder variant: inverted so the striping stays legible on the accent
   surface. Only rendered while no real motif is set. */
.accent-band__media .media-placeholder {
  background:
    repeating-linear-gradient(
      45deg,
      rgb(255 255 255 / 8%) 0 0.6875rem,
      rgb(255 255 255 / 14%) 0.6875rem 1.375rem
    );
  border-color: rgb(255 255 255 / 35%);
  height: 100%;
}

.accent-band__media .media-placeholder__tag {
  background: transparent;
  border-color: rgb(255 255 255 / 55%);
  color: var(--color-white);
}

.accent-band__media .media-placeholder__note {
  color: rgb(255 255 255 / 88%);
}

.accent-band__body h2 {
  color: var(--color-white);
  margin-bottom: 0.875rem;
}

.accent-band__body > p {
  color: rgb(255 255 255 / 88%);
  font-size: 1.0625rem;
  margin-bottom: 1.75rem;
  max-width: 32rem;
}


.section {
  padding-block: var(--section-space);
}

.section--surface {
  background: var(--color-surface);
  border-block: 1px solid var(--color-line-soft);
}

.section--bordered {
  border-top: 1px solid var(--color-line-soft);
}

.section-heading {
  margin-bottom: 3rem;
  max-width: 40rem;
}

.section-heading h2 {
  margin-bottom: 0.875rem;
}

.section-heading > p:not(.eyebrow),
.section-heading--split > p,
.section-heading--split > div > p {
  color: #4a5560;
  font-size: 1.0625rem;
  margin-bottom: 0;
}

.section-heading__link {
  margin-top: 1.25rem;
}

.section-heading--split {
  align-items: end;
  display: grid;
  gap: 4rem;
  grid-template-columns: 1.1fr 0.9fr;
  max-width: none;
}

.section-heading--split h2 {
  margin-bottom: 0;
}

.section-heading--split > div:last-child .text-link {
  margin-top: 1.25rem;
}

/* The site's primary "here is one thing you can click into" card. Reused for
   the four Solution areas, the nine applications and the editorial teasers, so
   the same visual language always means the same kind of entry point. */
.solution-grid {
  background: var(--color-line-soft);
  border: 1px solid var(--color-line-soft);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.solution-grid--thirds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-card {
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  min-height: 12.5rem;
  padding: 1.75rem 1.625rem;
}

/* Card variant carrying a real image. The media bleeds to the card edges, so
   the padding lives on the card's remaining children instead. */
.solution-card--media {
  padding: 0 1.625rem 1.75rem;
}

.solution-card--media > .solution-card__media {
  margin-left: 0;
  margin-right: 0;
}

/* Inset rather than bleeding to the card edge: a rounded image flush against
   a square card would leave visible slivers in the card corners. */
.solution-card__media {
  border-radius: var(--radius-media);
  display: block;
  margin: 1.625rem 0 1.25rem;
  overflow: hidden;
}

.solution-card__media img {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  transition: transform 240ms ease;
  width: 100%;
}

.solution-card__media:hover img {
  transform: scale(1.03);
}

.solution-card__meta {
  color: var(--color-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.solution-card h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.625rem;
}

.solution-card h3 a {
  color: var(--color-ink);
  text-decoration: none;
}

.solution-card h3 a:hover {
  text-decoration: underline;
}

.solution-card__benefit {
  color: var(--color-text);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

/* Chunked entry points: every solution on the site stays reachable from the
   homepage without listing all of them in one flat row. */
.solution-card__links {
  border-top: 1px solid var(--color-line-soft);
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: auto 0 0;
  padding: 1rem 0 0;
}

.solution-card__links a {
  align-items: baseline;
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
  justify-content: space-between;
  text-decoration: none;
}

.solution-card__links a:hover {
  text-decoration: underline;
}

.solution-card__links span {
  flex: none;
}

.operations-section {
  background: var(--color-ink);
  color: #dbe2e9;
  padding-block: var(--section-space);
}

.section-heading--light h2 {
  color: var(--color-white);
}

.section-heading--light .eyebrow {
  color: #7f93a6;
}

.section-heading--light > p:last-child {
  color: #aeb9c4;
}

.operations-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operations-grid article {
  background: var(--color-slate);
  border: 1px solid #3a4c5e;
  min-height: 9.75rem;
  padding: 1.875rem 2rem;
}

.operations-grid h3 {
  color: var(--color-white);
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
}

.operations-grid p {
  color: #aeb9c4;
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.feature-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card {
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  min-height: 18rem;
  padding: 1.875rem 2rem;
}

.feature-card__label {
  color: var(--color-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin-bottom: 2.5rem;
  text-transform: uppercase;
}

.feature-card h3 {
  font-size: 1.375rem;
  margin-bottom: 0.75rem;
}

.feature-card > p:not(.feature-card__label) {
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.feature-card .text-link {
  margin-top: auto;
}

/* Deliberately identical to `.collaboration-principles` below it: both are
   text boxes in the same section and must read as one set. The only
   difference is the markup — steps carry a heading, principles a lead-in. */
.process-grid {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.process-grid li {
  border-left: 2px solid var(--color-accent);
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  padding-left: 1rem;
}

.process-grid h3 {
  color: var(--color-ink);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 0.25rem;
}

/* Working principles below the three steps: what guides the work, as opposed
   to the sequence it follows. Same blue rule as the steps, so the section
   reads as one argument rather than two unrelated blocks. */
.collaboration-principles {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}

.collaboration-principles li {
  border-left: 2px solid var(--color-accent);
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  padding-left: 1rem;
}

.collaboration-principles strong {
  color: var(--color-ink);
  display: block;
  margin-bottom: 0.25rem;
}

.process-grid p {
  color: inherit;
  font-size: inherit;
  margin-bottom: 0;
}

/* Editorial templates */

.site-main:not(.front-page-main) {
  min-height: 60vh;
  padding-block: var(--section-space);
}

.site-main:not(.front-page-main) h1 {
  margin-bottom: 2rem;
  max-width: 16ch;
}

.entry-content {
  color: var(--color-text);
  max-width: var(--content-narrow);
}

.entry-content > * + * {
  margin-top: 1.25em;
}

.entry-content > p:first-of-type {
  color: var(--color-ink);
  font-size: 1.1875rem;
}

.entry-content h2,
.entry-content h3 {
  margin-top: 2em;
  scroll-margin-top: 6rem;
}

.entry-content h2 + *,
.entry-content h3 + * {
  margin-top: 0.75em;
}

.entry-content img {
  height: auto;
}

.entry-content strong {
  color: var(--color-ink);
}

/* Native list block */

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

.entry-content ul {
  list-style: none;
}

.entry-content ul > li {
  position: relative;
}

.entry-content ul > li::before {
  color: var(--color-accent);
  content: "—";
  left: -1.25em;
  position: absolute;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content ol > li::marker {
  color: var(--color-accent);
  font-weight: 600;
}

.entry-content li + li {
  margin-top: 0.625em;
}

/* Native quote block, and the Group block's "Hinweis" style variation —
   the one "note"/callout box every post gets for free, instead of a
   bespoke group className per post. */

.entry-content blockquote,
.entry-content .is-style-hinweis {
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  margin: 0;
  padding: 1.5rem 1.75rem;
}

.entry-content blockquote p,
.entry-content .is-style-hinweis p {
  margin: 0;
}

.entry-content blockquote p + p,
.entry-content .is-style-hinweis p + p {
  margin-top: 0.75em;
}

.entry-content blockquote strong,
.entry-content .is-style-hinweis strong {
  display: block;
  color: var(--color-ink);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.entry-content blockquote cite {
  color: var(--color-muted);
  display: block;
  font-size: 0.8125rem;
  font-style: normal;
  margin-top: 0.75em;
}

/* Native table block */

.entry-content .wp-block-table {
  border: 1px solid var(--color-line);
  overflow-x: auto;
}

.entry-content table {
  border-collapse: collapse;
  font-size: 0.9375rem;
  width: 100%;
}

.entry-content th,
.entry-content td {
  border-bottom: 1px solid var(--color-line);
  padding: 0.875rem 1.125rem;
  text-align: left;
  vertical-align: top;
}

.entry-content thead th {
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.entry-content tbody th {
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 600;
}

.entry-content tbody td {
  color: var(--color-text);
}

.entry-content tr:last-child th,
.entry-content tr:last-child td {
  border-bottom: 0;
}

.entry-content figcaption {
  color: var(--color-subtle);
  font-size: 0.8125rem;
  font-style: italic;
  margin-top: 0.625rem;
}

/* Native columns block */

.entry-content .wp-block-columns {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 1.5em;
}

.entry-content .wp-block-column {
  border-top: 2px solid var(--color-line);
  padding-top: 1.25rem;
}

.entry-content .wp-block-column > * + * {
  margin-top: 0.625em;
}

.entry-content .wp-block-column h3 {
  margin-top: 0;
}

/* Native buttons block, mapped onto the site's real .button component */

.entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin-top: 2em;
}

.entry-content .wp-block-button__link {
  align-items: center;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 0.1875rem;
  color: var(--color-white);
  display: inline-flex;
  font-size: 1rem;
  font-weight: 600;
  min-height: 3.375rem;
  padding: 0.9375rem 1.625rem;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.entry-content .wp-block-button__link:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.entry-content .is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.entry-content .is-style-outline .wp-block-button__link:hover {
  background: var(--color-surface);
}

.entry-content hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin-block: 3rem;
}

.article-with-toc {
  display: grid;
  gap: 3rem;
  grid-template-columns: 15rem minmax(0, 1fr);
  padding-bottom: var(--section-space);
}

.page-hero + .article-with-toc {
  padding-top: var(--section-space);
}

.article-with-toc--no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.article-toc {
  align-self: start;
  position: sticky;
  top: 7rem;
}

.article-toc__label {
  color: var(--color-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.article-toc ol {
  border-top: 1px solid var(--color-line);
  list-style: none;
  margin: 0;
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
  padding: 0;
}

.article-toc__item {
  border-bottom: 1px solid var(--color-line);
}

.article-toc__item a,
.article-toc__item a:visited {
  color: var(--color-text);
  display: block;
  font-size: 0.875rem;
  line-height: 1.35;
  padding-block: 0.75rem;
  text-decoration: none;
}

.article-toc__item a:hover {
  color: var(--color-accent);
}

.article-toc__item--level-3 a,
.article-toc__item--level-3 a:visited {
  color: var(--color-muted);
  font-size: 0.8125rem;
  padding-left: 1rem;
}

.article-toc__item--active a,
.article-toc__item--active a:visited {
  color: var(--color-ink);
  font-weight: 600;
}

.content-entry {
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
}

.editorial-archive__header {
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 3.5rem;
}

.editorial-archive__header h1 {
  margin-bottom: 1.25rem !important;
}

.editorial-archive__description {
  color: var(--color-text);
  font-size: 1.0625rem;
  max-width: 42rem;
}

.editorial-archive__description > :last-child {
  margin-bottom: 0;
}

.editorial-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 2.25rem;
  max-width: 42rem;
}

.editorial-search--with-filter {
  grid-template-columns: minmax(12rem, 0.45fr) minmax(0, 1fr) auto;
  max-width: 54rem;
}

.editorial-search--with-filter-2 {
  grid-template-columns: minmax(10rem, 0.4fr) minmax(10rem, 0.4fr) minmax(0, 1fr) auto;
  max-width: 64rem;
}

.editorial-search input,
.editorial-search select {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  min-width: 0;
  padding: 0.875rem 1rem;
}

.editorial-search input {
  border-radius: 0.1875rem 0 0 0.1875rem;
}

.editorial-search select {
  border-radius: 0.1875rem 0 0 0.1875rem;
}

.editorial-search--with-filter input {
  border-left: 0;
  border-radius: 0;
}

.editorial-search--with-filter-2 #topic-index-type-filter {
  border-left: 0;
  border-radius: 0;
}

.editorial-search input:focus,
.editorial-search select:focus {
  border-color: var(--color-accent);
  outline: 0.125rem solid var(--color-accent);
  outline-offset: -0.125rem;
  position: relative;
  z-index: 1;
}

.editorial-search .button {
  border-radius: 0 0.1875rem 0.1875rem 0;
}

.editorial-archive__content {
  padding-top: 3.5rem;
}

.editorial-archive__result-count {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.editorial-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.editorial-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.editorial-card__media {
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
  overflow: hidden;
}

.editorial-card__media img {
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease;
  width: 100%;
}

.editorial-card__media:hover img {
  transform: scale(1.025);
}

.editorial-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.75rem;
}

.editorial-card__meta,
.editorial-single__meta {
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  gap: 0.5rem 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.editorial-card__meta a {
  color: inherit;
}

.editorial-card__title {
  font-size: 1.375rem;
  font-weight: 600;
  margin: 1rem 0 0.75rem;
}

.editorial-card__title a {
  color: var(--color-ink);
  text-decoration: none;
}

.editorial-card__title a:hover {
  color: var(--color-accent);
}

.editorial-card__excerpt {
  color: var(--color-text);
}

.editorial-card__excerpt > :last-child {
  margin-bottom: 0;
}

.editorial-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.editorial-topics a {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: var(--color-text);
  display: inline-flex;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.4375rem 0.625rem;
  text-decoration: none;
}

.editorial-topics a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.editorial-single__topics {
  margin-top: 1.5rem;
}

.editorial-card__link {
  margin-top: auto;
  padding-top: 1.5rem;
}

.editorial-card--featured {
  grid-column: span 2;
}

.editorial-card--featured .editorial-card__media {
  aspect-ratio: 21 / 9;
}

.editorial-card--featured .editorial-card__body {
  padding: 2.25rem;
}

.editorial-card--featured .editorial-card__title {
  font-size: 1.875rem;
  margin-top: 1.25rem;
}

.editorial-empty {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  max-width: 47.5rem;
  padding: 2.5rem;
}

.editorial-empty h2 {
  font-size: 1.75rem;
}

.navigation.pagination {
  border-top: 1px solid var(--color-line);
  margin-top: 3.5rem;
  padding-top: 2rem;
}

.navigation.pagination .nav-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.navigation.pagination .page-numbers {
  align-items: center;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  display: inline-flex;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

.navigation.pagination .page-numbers.current,
.navigation.pagination a.page-numbers:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}

.editorial-single__header {
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 3.5rem;
}

.editorial-single__header .eyebrow a {
  color: inherit;
}

.editorial-topic-archive .editorial-archive__header .eyebrow a {
  color: inherit;
}

.editorial-single__header h1 {
  margin-bottom: 1.5rem !important;
  max-width: 18ch !important;
  overflow-wrap: anywhere !important;
}

.editorial-single__lead {
  color: var(--color-text);
  font-size: 1.1875rem;
  margin-bottom: 1.75rem;
  max-width: 42rem;
}

/* Split header: title/excerpt left, featured image right — desktop only.
   Without a featured image, .editorial-single__header-inner keeps the
   plain single-column narrow layout used everywhere else. */

.editorial-single__header-inner--split {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr 1fr;
}

.editorial-single__header-media {
  aspect-ratio: 4 / 3;
  border-radius: 0.5rem;
  box-shadow: 0 1rem 2.5rem rgb(34 48 60 / 8%);
  overflow: hidden;
}

.editorial-single__header-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.editorial-single__header + .editorial-single__body--with-toc {
  padding-top: 3.5rem;
}

.article-with-toc--wide-content .entry-content {
  max-width: none;
  min-width: 0;
}

.editorial-single__body--with-toc > .editorial-resource,
.editorial-single__body--with-toc > .editorial-single__footer {
  margin-inline: auto;
  max-width: var(--content-narrow);
}

.editorial-resource {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  margin-top: 3.5rem;
  padding: 2rem;
}

.editorial-resource h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

.editorial-single__footer {
  border-top: 1px solid var(--color-line);
  margin-top: 3.5rem;
  padding-top: 2rem;
}

.related-posts {
  background: var(--color-surface-light);
  border-top: 1px solid var(--color-line);
  padding-block: var(--section-space);
}

.related-posts__head {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}

.related-posts__head h2 {
  font-size: 1.75rem;
}

.topic-index__content {
  padding-top: 3.5rem;
}

.topic-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.topic-card {
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  min-height: 19rem;
  padding: 2rem;
}

.topic-card h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.topic-card h2 a {
  color: var(--color-ink);
  text-decoration: none;
}

.topic-card h2 a:hover {
  color: var(--color-accent);
}

.topic-card > p:not(.eyebrow) {
  color: var(--color-text);
}

.topic-card__children {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.topic-card__children a {
  font-size: 0.875rem;
}

.topic-card__link {
  margin-top: auto;
  padding-top: 1.5rem;
}

.solution-directory__content {
  padding-top: 3.5rem;
}

.solution-directory__group + .solution-directory__group {
  border-top: 1px solid var(--color-line);
  margin-top: 4rem;
  padding-top: 4rem;
}

.solution-directory__group-heading {
  align-items: end;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
  margin-bottom: 2rem;
}

.solution-directory__group-heading h2 {
  margin-bottom: 0;
}

.solution-directory__group-heading > div:last-child > p {
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.solution-directory-card {
  min-height: 23rem;
}

.solution-directory-card__icon {
  align-items: center;
  color: var(--color-accent);
  display: inline-flex;
  height: 2rem;
  margin-bottom: 1.5rem;
  width: 2rem;
}

.solution-directory-card__icon svg {
  height: 100%;
  width: 100%;
}

.solution-directory-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.solution-directory-card h3 a {
  color: var(--color-ink);
  text-decoration: none;
}

.solution-directory-card h3 a:hover {
  color: var(--color-accent);
}

.solution-directory-card__audience {
  border-top: 1px solid var(--color-line);
  font-size: 0.875rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.solution-directory-card__audience strong {
  display: block;
  margin-bottom: 0.25rem;
}

.solution-directory-card__link {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* Managed Application product template */

.site-main.managed-application {
  padding-block: 0;
}

.managed-application-hero {
  border-bottom: 1px solid var(--color-line-soft);
}

.managed-application-hero__grid {
  align-items: center;
  display: grid;
  gap: 5rem;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
  padding-block: 5.25rem 4.75rem;
}

.managed-application-hero__content .eyebrow {
  color: var(--color-accent);
  margin-bottom: 1.375rem;
}

.managed-application-hero__content {
  min-width: 0;
}

.site-main.managed-application .managed-application-hero h1 {
  margin-bottom: 1.5rem;
  max-width: 15ch;
  overflow-wrap: anywhere;
}

.managed-application-hero__lead {
  color: var(--color-text);
  font-size: 1.1875rem;
  margin-bottom: 2rem;
  max-width: 39rem;
}

.managed-application-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.managed-application-hero__note {
  color: var(--color-muted);
  font-size: 0.875rem;
  margin: 0;
}

.managed-application-preview {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  box-shadow: 0 1.5rem 3.5rem rgb(34 48 60 / 10%);
  min-height: 25rem;
  min-width: 0;
  width: 100%;
}

.managed-application-preview__bar {
  align-items: center;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  display: flex;
  gap: 0.375rem;
  min-height: 3.125rem;
  padding: 0 1.25rem;
}

.managed-application-preview__bar > span {
  background: #bcc5cd;
  border-radius: 50%;
  height: 0.5rem;
  width: 0.5rem;
}

.managed-application-preview__bar small {
  color: var(--color-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  margin-left: auto;
  text-transform: uppercase;
}

.managed-application-preview__body {
  padding: 3rem;
}

.managed-application-preview--image {
  min-height: 0;
}

.managed-application-preview__media {
  background: var(--color-white);
  overflow: hidden;
}

.managed-application-preview__media img {
  aspect-ratio: 691 / 450;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.managed-application-preview__mark,
.managed-application-preview__icon {
  align-items: center;
  background: var(--color-accent);
  color: var(--color-white);
  display: flex;
  font-size: 1.125rem;
  font-weight: 700;
  height: 3.5rem;
  justify-content: center;
  margin-bottom: 2rem;
  width: 3.5rem;
}

.managed-application-preview__icon svg {
  height: 1.5rem;
  width: 1.5rem;
}

.managed-application-preview__body .eyebrow {
  margin-bottom: 0.5rem;
}

.managed-application-preview__body > strong {
  color: var(--color-ink);
  display: block;
  font-size: 1.625rem;
  margin-bottom: 2rem;
}

.managed-application-preview__status {
  display: grid;
  gap: 0.75rem;
}

.managed-application-preview__status span {
  align-items: center;
  border-top: 1px solid var(--color-line-soft);
  color: var(--color-text);
  display: flex;
  font-size: 0.875rem;
  gap: 0.75rem;
  padding-top: 0.75rem;
}

.managed-application-preview__status span::before {
  color: var(--color-accent);
  content: "✓";
  font-weight: 700;
}

/* Ergebnis-Panel: Lieferergebnis statt Instanz-Mock, für Seiten ohne betriebene Instanz. */

.managed-application-preview--result {
  border-top: 0.1875rem solid var(--color-accent);
}

.managed-application-preview__sheet {
  padding: 3rem;
}

.managed-application-preview__sheet .eyebrow {
  margin-bottom: 0.5rem;
}

.managed-application-preview__sheet > strong {
  color: var(--color-ink);
  display: block;
  font-size: 1.625rem;
  margin-bottom: 2rem;
}

.managed-application-preview__deliverables {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.managed-application-preview__deliverables li {
  border-top: 1px solid var(--color-line-soft);
  color: var(--color-text);
  font-size: 0.875rem;
  padding-top: 0.75rem;
}

/* DMARC Manager Solution */

.dmarc-solution .managed-application-hero h1 {
  max-width: 18ch;
}

.dmarc-control {
  min-height: 0;
}

.dmarc-control__body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.dmarc-control__heading {
  margin-bottom: 2rem;
}

.dmarc-control__heading-logo {
  display: block;
  height: 3rem;
  margin-inline: auto;
  width: auto;
}

.dmarc-control__domains {
  border-top: 1px solid var(--color-line);
  list-style: none;
  margin: 0;
  padding: 0;
}

.dmarc-control__domains li {
  align-items: center;
  border-bottom: 1px solid var(--color-line);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-block: 1rem;
}

.dmarc-control__domains li > span {
  color: var(--color-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.dmarc-control__status {
  align-items: center;
  color: var(--color-text);
  display: flex;
  font-size: 0.75rem;
  gap: 0.5rem;
  white-space: nowrap;
}

.dmarc-control__status::before {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  font-size: 0.5625rem;
  height: 1.125rem;
  justify-content: center;
  width: 1.125rem;
}

.dmarc-control__status--active::before {
  color: #2e6f47;
  content: "✓";
}

.dmarc-control__status--review::before {
  color: #8a6116;
  content: "…";
}

.dmarc-control__status--locked::before {
  color: var(--color-slate);
  content: "×";
}

.dmarc-control__policy {
  margin-top: 2rem;
}

.dmarc-control__policy > span {
  color: var(--color-ink);
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.dmarc-control__policy-steps {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dmarc-control__policy-steps i {
  display: block;
  height: 0.375rem;
}

.dmarc-control__policy-steps i:nth-child(1) {
  background: var(--color-muted);
}

.dmarc-control__policy-steps i:nth-child(2) {
  background: #d9a404;
}

.dmarc-control__policy-steps i:nth-child(3) {
  background: #2e6f47;
}

.dmarc-control__policy-labels {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.5rem;
}

.dmarc-control__policy-labels small {
  color: var(--color-muted);
  font-size: 0.625rem;
}

.dmarc-control__policy-labels small:nth-child(2) {
  text-align: center;
}

.dmarc-control__policy-labels small:last-child {
  text-align: right;
}

.dmarc-faq-module {
  margin-top: clamp(3rem, 7vw, 5rem);
}

.dmarc-check-consequences {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 3rem;
}

.dmarc-check-section {
  scroll-margin-top: 5rem;
}

.dmarc-check-consequences article {
  border-top: 1px solid var(--color-line);
  padding: 1.5rem 2rem 0 0;
}

.dmarc-check-consequences span {
  color: var(--color-slate);
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.dmarc-check-consequences p {
  color: var(--color-text);
  font-size: 0.9375rem;
  margin: 0;
  max-width: 34ch;
}

.dmarc-check-module {
  background: var(--color-white);
  border: 1px solid var(--color-line);
}

.dmarc-check-module__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dmarc-check-module__tab {
  appearance: none;
  background: var(--color-surface);
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-right: 1px solid var(--color-line);
  color: var(--color-text);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 0.375rem;
  min-height: 6.5rem;
  padding: 1.25rem;
  text-align: left;
}

.dmarc-check-module__tab:last-child {
  border-right: 0;
}

.dmarc-check-module__tab span {
  color: var(--color-ink);
  font-weight: 650;
}

.dmarc-check-module__tab small {
  color: var(--color-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.dmarc-check-module__tab:hover {
  background: var(--color-white);
}

.dmarc-check-module__tab.is-active {
  background: var(--color-white);
  border-bottom-color: var(--color-white);
  box-shadow: inset 0 0.1875rem 0 var(--color-slate);
}

.dmarc-check-module__tab:focus-visible {
  outline: 0.1875rem solid var(--color-accent);
  outline-offset: -0.25rem;
  position: relative;
  z-index: 2;
}

.dmarc-check-module__panel {
  min-height: 32rem;
  position: relative;
}

.dmarc-check-module__frame {
  border: 0;
  display: block;
  height: 50rem;
  width: 100%;
}

.dmarc-check-module__loading {
  background: rgb(255 255 255 / 92%);
  color: var(--color-muted);
  font-size: 0.8125rem;
  inset: 0;
  padding-top: 6rem;
  position: absolute;
  text-align: center;
}

.dmarc-check-module__loading p {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  margin: 0;
}

.dmarc-check-module__loading[hidden] {
  display: none;
}

.dmarc-check-module__footer {
  align-items: center;
  background: var(--color-slate);
  color: #dbe2e8;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 2rem;
}

.dmarc-check-module__footer p {
  margin: 0;
  max-width: 70ch;
}

.dmarc-check-module__footer strong {
  color: var(--color-white);
}

.dmarc-check-module__footer .button--secondary {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-slate);
  white-space: nowrap;
}

.dmarc-check-module__noscript {
  border-top: 1px solid var(--color-line);
  margin: 0;
  padding: 1.5rem 2rem;
}

.dmarc-check-module__noscript a {
  margin-left: 0.75rem;
}

.dmarc-product-capabilities .application-capabilities__heading > p:last-child {
  color: var(--color-text);
  margin-bottom: 0;
}

.managed-application-principles {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line-soft);
}

.managed-application-principles__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.managed-application-principles__grid span {
  color: var(--color-slate);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding-block: 1.375rem;
  text-align: center;
  text-transform: uppercase;
}

.managed-application-principles__grid span + span {
  border-left: 1px solid var(--color-line);
}

.application-content-section {
  margin-inline: auto;
  max-width: var(--content-wide);
  padding: var(--section-space) var(--space-page);
}

.application-content-section--surface {
  background: var(--color-surface);
  box-shadow: 0 0 0 100vmax var(--color-surface);
  clip-path: inset(0 -100vmax);
}

.application-content-section + .application-content-section {
  border-top: 1px solid var(--color-line-soft);
}

.application-content-section__heading {
  margin-bottom: 3rem;
  max-width: 44rem;
}

.application-content-section__heading h2 {
  margin-bottom: 1rem;
  overflow-wrap: break-word;
}

.application-content-section__heading > p:last-child:not(.eyebrow) {
  color: var(--color-text);
  font-size: 1.0625rem;
  margin-bottom: 0;
}

.application-detail-grid,
.application-service-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.application-detail-grid article,
.application-service-grid article {
  border: 1px solid var(--color-line);
  padding: 2rem;
}

.application-detail-grid h3,
.application-service-grid h3 {
  margin-bottom: 0.75rem;
}

.application-detail-grid__meta {
  color: var(--color-accent);
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.application-detail-grid p,
.application-service-grid p,
.application-use-cases p {
  color: var(--color-text);
  margin-bottom: 0;
}

.application-transformation {
  align-items: stretch;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  margin-top: 3.5rem;
}

.application-transformation__state {
  border: 1px solid var(--color-line);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

.application-transformation__state--before {
  background: var(--color-surface);
}

.application-transformation__state--after {
  background: #f3f8fc;
  border-top: 0.1875rem solid var(--color-accent);
}

.application-transformation__state > span {
  color: var(--color-accent);
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.application-transformation__state h3 {
  margin-bottom: 1.5rem;
}

.application-transformation__state ul {
  color: var(--color-text);
  list-style: none;
  margin: 0;
  padding: 0;
}

.application-transformation__state li {
  border-top: 1px solid var(--color-line-soft);
  padding: 0.75rem 0 0.75rem 1.5rem;
  position: relative;
}

.application-transformation__state li::before {
  color: var(--color-muted);
  content: "–";
  left: 0;
  position: absolute;
}

.application-transformation__state--after li::before {
  color: var(--color-accent);
  content: "✓";
  font-weight: 700;
}

.application-transformation__arrow {
  align-items: center;
  align-self: center;
  background: var(--color-accent);
  border-radius: 50%;
  color: var(--color-white);
  display: flex;
  font-size: 1.25rem;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.application-feature-source {
  background: var(--color-surface);
  border-left: 0.1875rem solid var(--color-accent);
  margin-top: 1.5rem;
  max-width: 55rem;
  padding: 1.5rem 1.75rem;
}

.application-feature-source > strong {
  color: var(--color-ink);
  display: block;
  margin-bottom: 0.5rem;
}

.application-feature-source p {
  color: var(--color-text);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.application-feature-source .text-link {
  font-size: 0.8125rem;
}

.application-solution-combination {
  margin-top: 2.5rem;
  max-width: 62rem;
}

.application-product-showcase__brand {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(14rem, 23rem) minmax(0, 1fr);
  margin-bottom: 2rem;
  padding: clamp(1.75rem, 4vw, 3rem);
}

.application-product-showcase__brand img {
  height: auto;
  max-width: 23rem;
  width: 100%;
}

.application-product-showcase__brand p {
  color: var(--color-text);
  font-size: 1.0625rem;
  margin: 0;
  max-width: 35rem;
}

.application-product-showcase__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.application-product-showcase__grid--single {
  grid-template-columns: minmax(0, 45rem);
}

.application-product-showcase__figure {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  margin: 0;
  min-width: 0;
}

.application-product-showcase__figure--primary {
  margin-bottom: 1.5rem;
}

.application-product-showcase__media {
  align-items: center;
  background: var(--color-surface);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.application-product-showcase__media img {
  display: block;
  height: auto;
  width: 100%;
}

.application-product-showcase__media > a {
  display: block;
  width: 100%;
}

.application-product-showcase__media > button {
  appearance: none;
  background: none;
  border: 0;
  cursor: zoom-in;
  display: block;
  padding: 0;
  width: 100%;
}

.application-product-showcase__figure figcaption {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 0.375rem;
  padding: 1.5rem 1.75rem;
}

.application-product-showcase__figure figcaption strong {
  color: var(--color-ink);
}

.application-product-showcase__figure figcaption span {
  color: var(--color-text);
  font-size: 0.875rem;
}

.application-product-showcase__zoom {
  font-size: 0.8125rem;
  font-weight: 600;
  justify-self: start;
}

.application-editions__axes {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 2.5rem;
}

.application-editions__axes article,
.application-editions__axes > .wp-block-column {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  padding: 1.75rem;
}

.application-editions__axes article > span,
.application-editions__index {
  color: var(--color-accent);
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  margin-bottom: 1rem;
}

.application-editions__axes h3 {
  margin-bottom: 0.625rem;
}

.application-editions__axes p,
.application-editions__paths p {
  color: var(--color-text);
  margin-bottom: 0;
}

.application-editions__table-wrap {
  border: 1px solid var(--color-line);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.application-editions__scroll-hint {
  display: none;
}

.application-editions__table-wrap:focus-visible {
  outline: 0.1875rem solid var(--color-accent);
  outline-offset: 0.1875rem;
}

.application-editions__table,
.application-editions__table-wrap table {
  border-collapse: collapse;
  font-size: 0.8125rem;
  min-width: 68rem;
  width: 100%;
}

.application-editions__table th,
.application-editions__table td,
.application-editions__table-wrap th,
.application-editions__table-wrap td {
  border-bottom: 1px solid var(--color-line);
  border-right: 1px solid var(--color-line);
  padding: 1.125rem 1rem;
  text-align: left;
  vertical-align: top;
}

.application-editions__table tr:last-child th,
.application-editions__table tr:last-child td,
.application-editions__table-wrap tr:last-child th,
.application-editions__table-wrap tr:last-child td {
  border-bottom: 0;
}

.application-editions__table th:last-child,
.application-editions__table td:last-child,
.application-editions__table-wrap th:last-child,
.application-editions__table-wrap td:last-child {
  border-right: 0;
}

.application-editions__table thead th,
.application-editions__table-wrap thead th {
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 0.875rem;
  padding-block: 1.25rem;
}

.application-editions__table thead th:not(:first-child),
.application-editions__table-wrap thead th:not(:first-child) {
  min-width: 15rem;
}

.application-editions__table tbody th,
.application-editions__table-wrap tbody td:first-child {
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 600;
  width: 11rem;
}

.application-editions__table tbody td,
.application-editions__table-wrap tbody td {
  color: var(--color-text);
}

.application-editions__table tbody td:last-child,
.application-editions__table-wrap tbody td:last-child {
  background: #f7fafc;
}

.application-editions__table-wrap figcaption {
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 0.75rem;
  padding: 0.75rem 1rem;
}

.application-license-warning {
  border: 1px solid var(--color-line);
  border-left: 0.1875rem solid var(--color-ink);
  margin-top: 1.5rem;
  max-width: 62rem;
  padding: 1.5rem 1.75rem;
}

.application-license-warning > strong {
  color: var(--color-ink);
  display: block;
  margin-bottom: 0.5rem;
}

.application-license-warning > .wp-block-heading {
  color: var(--color-ink);
  font-size: 1rem;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.application-license-warning p {
  color: var(--color-text);
  font-size: 0.875rem;
  margin-bottom: 0;
}

.application-editions__paths {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.5rem;
}

.application-editions__paths article,
.application-editions__paths > .wp-block-column {
  border: 1px solid var(--color-line);
  padding: 2rem;
}

.application-editions__paths h3 {
  margin-bottom: 0.75rem;
}

.application-editions__sources {
  align-items: center;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  gap: 0.625rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}

.application-editions__sources strong {
  color: var(--color-ink);
}

.editorial-intro {
  color: var(--color-ink);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.6;
}

.editorial-key-point {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 0.1875rem solid var(--color-accent);
  margin-top: 2rem;
  padding: 1.75rem;
}

.editorial-key-point strong {
  color: var(--color-ink);
  display: block;
  margin-bottom: 0.5rem;
}

.editorial-key-point p {
  margin-bottom: 0;
}

.editorial-source-note {
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 0.8125rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.application-edition-teaser__link {
  max-width: 62rem;
}

.application-use-cases {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.application-use-cases article > span {
  color: var(--color-accent);
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  margin-bottom: 1.5rem;
}

.application-use-cases h3 {
  border-top: 1px solid var(--color-line);
  padding-top: 1.5rem;
}

/* Solution-led Managed Application journey */

.managed-application__article--strategy .managed-application-hero__content .eyebrow,
.managed-application__article--strategy .application-use-cases article > span,
.managed-application__article--strategy .application-detail-grid__meta {
  color: var(--color-muted);
}

.managed-application__article--strategy .application-transformation__state--after {
  background: #f7f9fa;
  border-top-color: var(--color-slate);
}

.managed-application__article--strategy .application-transformation__state > span,
.managed-application__article--strategy .application-transformation__state--after li::before {
  color: var(--color-slate);
}

.managed-application__article--strategy .application-transformation__arrow {
  background: var(--color-slate);
}

.application-journey-section .application-content-section__heading {
  max-width: 42rem;
}

.application-journey-section .application-content-section__heading > p:last-child:not(.eyebrow) {
  max-width: 65ch;
}

.application-signal-grid {
  gap: 2rem;
}

.application-solution-stack {
  display: grid;
  gap: 0 3rem;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
}

.application-solution-stack article {
  border-top: 1px solid var(--color-line);
  padding-block: 2rem;
}

.application-solution-stack article:last-child {
  border-bottom: 1px solid var(--color-line);
}

.application-solution-stack__primary {
  align-self: stretch;
  background: var(--color-slate);
  border: 0 !important;
  color: #dbe2e8;
  grid-row: span 2;
  padding: clamp(2rem, 4vw, 3rem) !important;
}

.application-solution-stack__primary h3 {
  color: var(--color-white);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 300;
  margin-bottom: 1.5rem;
  max-width: 18ch;
}

.application-solution-stack article:not(.application-solution-stack__primary) h3 {
  margin-bottom: 0.75rem;
}

.application-solution-stack article p {
  color: var(--color-text);
  margin-bottom: 0;
}

.application-solution-stack__primary p {
  color: #dbe2e8 !important;
  max-width: 50ch;
}

.application-solution-stack__primary ul {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.application-solution-stack__primary li {
  border-top: 1px solid rgb(255 255 255 / 18%);
  padding: 0.75rem 0 0.75rem 1.5rem;
  position: relative;
}

.application-solution-stack__primary li::before {
  content: "✓";
  font-weight: 700;
  left: 0;
  position: absolute;
}

.application-solution-stack__label,
.application-related-solution__label {
  color: var(--color-muted);
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.application-solution-stack__primary .application-solution-stack__label {
  color: #c2ccd5;
}

.application-related-solution {
  align-items: end;
  border-block: 1px solid var(--color-line);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 3rem;
  padding-block: 2rem;
}

.application-related-solution strong {
  color: var(--color-ink);
  display: block;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.application-related-solution p {
  color: var(--color-text);
  margin: 0;
  max-width: 65ch;
}

.application-related-solution .text-link {
  white-space: nowrap;
}

.application-trust-badges {
  align-items: center;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
}

.application-trust-badges img {
  height: 3.5rem;
  width: auto;
}

.application-trust-badges__brand {
  height: 2.25rem;
}

.application-process {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.application-process > li > span {
  color: var(--color-muted);
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  margin-bottom: 1.5rem;
}

.application-process h3 {
  border-top: 1px solid var(--color-line);
  margin-bottom: 0.75rem;
  padding-top: 1.5rem;
}

.application-process p {
  color: var(--color-text);
  margin: 0;
}

.application-process-cta {
  align-items: center;
  border-block: 1px solid var(--color-line);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 3rem;
  padding-block: 2rem;
}

.application-process-cta p {
  color: var(--color-text);
  margin: 0;
  max-width: 56ch;
}

.application-product-showcase__layout {
  align-items: start;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
}

.application-product-showcase__layout .application-product-showcase__figure--primary {
  margin: 0;
}

.application-product-showcase__aside {
  display: grid;
  gap: 1.5rem;
}

.application-product-showcase__aside .application-product-showcase__brand {
  display: block;
  margin: 0;
  padding: 2rem;
}

.application-product-showcase__aside .application-product-showcase__brand img {
  margin-bottom: 1.5rem;
  max-width: 15rem;
}

.application-product-showcase__aside .application-product-showcase__brand p {
  font-size: 0.9375rem;
}

.application-capabilities {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 4rem;
  grid-template-columns: minmax(16rem, 0.65fr) minmax(0, 1.35fr);
  margin-top: 4rem;
  padding-top: 4rem;
}

.application-capabilities__heading h3 {
  font-size: 1.75rem;
  font-weight: 300;
  max-width: 18ch;
}

.application-capabilities dl {
  margin: 0;
}

.application-capabilities dl > div {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 1.25fr);
  padding-block: 1.5rem;
}

.application-capabilities dl > div:last-child {
  border-bottom: 1px solid var(--color-line);
}

.application-capabilities dt {
  color: var(--color-ink);
  font-weight: 600;
}

.application-capabilities dd {
  color: var(--color-text);
  margin: 0;
}

.application-feature-grid {
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.application-feature-grid article {
  border-top: 1px solid var(--color-line);
  padding-top: 1.5rem;
}

.application-feature-grid__icon {
  align-items: center;
  color: var(--color-accent);
  display: inline-flex;
  height: 2rem;
  margin-bottom: 1.25rem;
  width: 2rem;
}

.application-feature-grid__icon svg {
  height: 100%;
  width: 100%;
}

.application-feature-grid h4 {
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.application-feature-grid p {
  color: var(--color-text);
  margin: 0;
}

.application-reference-grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 4rem;
}

.application-reference-grid aside {
  border-top: 1px solid var(--color-line);
  padding-top: 1.5rem;
}

.application-reference-grid strong {
  color: var(--color-ink);
  display: block;
  margin-bottom: 0.5rem;
}

.application-reference-grid p {
  color: var(--color-text);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  max-width: 55ch;
}

.application-faq {
  border-top: 1px solid var(--color-line);
  max-width: 55rem;
}

.application-faq details {
  border-bottom: 1px solid var(--color-line);
}

.application-faq summary {
  color: var(--color-ink);
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 600;
  padding: 1.375rem 2.5rem 1.375rem 0;
  position: relative;
}

.application-faq summary::after {
  color: var(--color-accent);
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  position: absolute;
  right: 0;
  top: 1.1rem;
}

.application-faq details[open] summary::after {
  content: "−";
}

.application-faq details p {
  color: var(--color-text);
  margin: 0;
  max-width: 45rem;
  padding: 0 2.5rem 1.5rem 0;
}

.application-pricing {
  background: var(--color-surface);
  border-block: 1px solid var(--color-line-soft);
  padding-block: var(--section-space);
}

.application-pricing__heading {
  align-items: end;
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
  margin-bottom: 3rem;
}

.application-pricing__heading h2,
.application-pricing__heading > p {
  margin-bottom: 0;
}

.application-pricing__heading > p {
  color: var(--color-text);
}

.application-pricing__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.application-package {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2rem;
  position: relative;
}

.application-package--featured {
  border-color: var(--color-accent);
  box-shadow: 0 1rem 2.5rem rgb(34 48 60 / 8%);
}

.application-package__badge {
  background: var(--color-accent);
  color: var(--color-white);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  left: -1px;
  letter-spacing: 0.08em;
  padding: 0.375rem 0.75rem;
  position: absolute;
  text-transform: uppercase;
  top: -1px;
}

.application-package--featured .application-package__heading {
  padding-top: 1.25rem;
}

.application-package__heading {
  min-height: 6.25rem;
}

.application-package__heading h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.application-package__heading p {
  color: var(--color-muted);
  font-size: 0.875rem;
  margin-bottom: 0;
}

.application-package__price {
  border-block: 1px solid var(--color-line-soft);
  margin: 1.25rem 0;
  padding-block: 1.5rem;
}

.application-package__price strong,
.application-package__price > span,
.application-package__price small {
  display: block;
}

.application-package__price strong {
  color: var(--color-ink);
  font-size: clamp(2rem, 3vw, 2.625rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.application-package__price > span {
  color: var(--color-text);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 0.375rem;
}

.application-package__price small {
  color: var(--color-muted);
  font-size: 0.75rem;
  margin-top: 0.75rem;
}

.application-package__facts {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.application-package__facts > div {
  display: flex;
  font-size: 0.8125rem;
  gap: 1rem;
  justify-content: space-between;
}

.application-package__facts dt {
  color: var(--color-muted);
}

.application-package__facts dd {
  color: var(--color-ink);
  font-weight: 600;
  margin: 0;
  text-align: right;
}

.application-package__features {
  display: grid;
  gap: 0.625rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.application-package__features li {
  color: var(--color-text);
  display: flex;
  font-size: 0.8125rem;
  gap: 0.625rem;
}

.application-package__features li::before {
  color: var(--color-accent);
  content: "✓";
  flex: none;
  font-weight: 700;
}

.application-package > .button {
  margin-top: auto;
  width: 100%;
}

.application-pricing__note {
  color: var(--color-muted);
  font-size: 0.8125rem;
  margin: 1.5rem 0 0;
}

.application-addons {
  padding-block: var(--section-space);
}

.application-addons__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.application-addons article {
  border: 1px solid var(--color-line);
  padding: 2.5rem;
}

.application-addons h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.application-addons article > p:last-child {
  color: var(--color-text);
  margin-bottom: 0;
}

.application-closing-cta {
  background: var(--color-ink);
  color: #c9d0d7;
  padding-block: var(--section-space);
}

.application-closing-cta__inner {
  align-items: center;
  display: grid;
  gap: 4rem;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
}

.application-closing-cta .eyebrow {
  color: #9ebad3;
}

.application-closing-cta h2 {
  color: var(--color-white);
  margin-bottom: 0;
}

.application-closing-cta__inner > div:last-child > p {
  margin-bottom: 1.5rem;
}

/*
 * Light variant for closing panels that sit flush on the dark footer: an ink
 * band right above the footer would read as one block with it. The section
 * keeps the plain page background so the footer provides the contrast.
 */
.application-closing-cta--plain {
  background: transparent;
  color: var(--color-text);
}

.application-closing-cta--plain .eyebrow {
  color: var(--color-muted);
}

.application-closing-cta--plain h2 {
  color: var(--color-ink);
}

/* Central forms */

.page-form-module,
.contact-page__form {
  padding-block: var(--section-space);
}

.application-form-section {
  background: var(--color-ink);
  padding-block: var(--section-space);
}

.zunicode-form {
  align-items: start;
  display: grid;
  gap: clamp(2.5rem, 7vw, 6rem);
  grid-template-columns: minmax(0, 0.8fr) minmax(24rem, 1.2fr);
}

.zunicode-form__intro {
  padding-top: 1rem;
}

.zunicode-form__intro h2 {
  margin-bottom: 1.25rem;
}

.zunicode-form__description {
  color: var(--color-text);
  max-width: 38rem;
}

.zunicode-form__description > :last-child {
  margin-bottom: 0;
}

.application-form-section .zunicode-form__intro h2 {
  color: var(--color-white);
}

.application-form-section .zunicode-form__intro .eyebrow {
  color: #9ebad3;
}

.application-form-section .zunicode-form__description {
  color: #c9d0d7;
}

.zunicode-form__panel {
  background: var(--color-surface-light);
  border: 1px solid var(--color-line);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.zunicode-form__fields {
  display: grid;
  gap: 1.25rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zunicode-form__field {
  min-width: 0;
}

.zunicode-form__field--full {
  grid-column: 1 / -1;
}

.zunicode-form__field > label:not(.zunicode-form__checkbox) {
  color: var(--color-ink);
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.zunicode-form__field input:not([type="checkbox"]),
.zunicode-form__field select,
.zunicode-form__field textarea {
  background: var(--color-white);
  border: 1px solid #b8c1ca;
  border-radius: 0.1875rem;
  color: var(--color-ink);
  min-height: 3.25rem;
  padding: 0.75rem 0.875rem;
  width: 100%;
}

.zunicode-form__field textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.zunicode-form__field.has-error input,
.zunicode-form__field.has-error select,
.zunicode-form__field.has-error textarea {
  border-color: #a82828;
}

.zunicode-form__field small {
  color: var(--color-muted);
  display: block;
  font-size: 0.75rem;
  margin-top: 0.375rem;
}

.zunicode-form__field .zunicode-form__error {
  color: #8c1c1c;
  font-weight: 600;
}

.zunicode-form__checkbox {
  align-items: start;
  color: var(--color-text);
  display: flex;
  font-size: 0.8125rem;
  gap: 0.625rem;
}

.zunicode-form__checkbox input {
  flex: 0 0 auto;
  height: 1.125rem;
  margin-top: 0.2rem;
  width: 1.125rem;
}

.zunicode-form__privacy-note {
  color: var(--color-muted);
  font-size: 0.75rem;
  margin: 1.25rem 0;
}

.zunicode-form__altcha {
  margin: 1.25rem 0;
}

.zunicode-form__notice {
  border-left: 0.25rem solid var(--color-accent);
  padding: 1.25rem 1.5rem;
}

.zunicode-form__notice h3,
.zunicode-form__notice p:last-child {
  margin-bottom: 0;
}

.zunicode-form__notice--success {
  background: #edf7f0;
  border-left-color: #2f7742;
}

.zunicode-form__notice--error {
  background: #fbefef;
  border-left-color: #a82828;
  margin-bottom: 1.5rem;
}

.zunicode-form__honeypot {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

/*
 * Marks a field that only becomes mandatory once related fields are filled
 * in — the consent checkbox next to voluntary contact details. The class is
 * set by the rating script; the server enforces the same rule regardless.
 */
.zunicode-form__field.is-required .zunicode-form__checkbox > span::after {
  content: " *";
}

/*
 * Post rating: the like/dislike bar below an editorial post, plus the
 * feedback dialog that every dislike opens. Only the like count is ever
 * shown here.
 */
.zunicode-rating {
  border-top: 1px solid var(--color-line);
  margin-top: var(--section-space);
  padding-block: 2.5rem;
}

.zunicode-rating__question {
  color: var(--color-ink);
  font-weight: 600;
  margin-bottom: 1rem;
}

.zunicode-rating__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.zunicode-rating__button {
  align-items: center;
  background: var(--color-white);
  border: 1px solid #b8c1ca;
  border-radius: 0.1875rem;
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  transition: border-color 160ms ease, color 160ms ease;
}

.zunicode-rating__button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.zunicode-rating__button[aria-pressed="true"] {
  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}

.zunicode-rating__icon {
  fill: currentcolor;
  height: 1rem;
  width: 1rem;
}

.zunicode-rating__count {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.zunicode-rating__button[aria-pressed="true"] .zunicode-rating__count {
  color: inherit;
}

.zunicode-rating__count:empty {
  display: none;
}

.zunicode-rating__status {
  color: var(--color-muted);
  font-size: 0.875rem;
  margin-top: 0.875rem;
}

.zunicode-rating__status:empty {
  display: none;
}

.zunicode-rating__dialog {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  color: var(--color-text);
  max-height: min(85vh, calc(100% - 2rem));
  max-width: min(38rem, calc(100vw - 2rem));
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  position: relative;
  width: 100%;
}

.zunicode-rating__dialog::backdrop {
  background: rgb(34 48 60 / 60%);
}

.zunicode-rating__dialog-close {
  background: none;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
}

.zunicode-rating__dialog-close:hover {
  color: var(--color-ink);
}

/*
 * The central form renders as a two-column module on a page; inside the
 * dialog it becomes one plain column, since the dialog already provides the
 * frame the panel would otherwise draw.
 */
.zunicode-rating__dialog .zunicode-form {
  display: block;
}

.zunicode-rating__dialog .zunicode-form__intro {
  margin-bottom: 1.25rem;
  padding-top: 0;
}

/*
 * Keeps the send button within reach without scrolling on a normal laptop
 * screen: the dialog carries far less context than a full page section, so
 * it does not need the page form's generous vertical rhythm.
 */
.zunicode-rating__dialog .zunicode-form__field textarea {
  min-height: 6rem;
}

.zunicode-rating__dialog .zunicode-form__altcha {
  margin: 1rem 0;
}

.zunicode-rating__dialog .zunicode-form__privacy-note {
  margin: 1rem 0;
}

.zunicode-rating__dialog .zunicode-form__intro h2 {
  font-size: 1.375rem;
  margin-bottom: 0.75rem;
  padding-right: 2rem;
}

.zunicode-rating__dialog .zunicode-form__panel {
  background: none;
  border: 0;
  padding: 0;
}

@media (max-width: 37.5rem) {
  .zunicode-rating__dialog .zunicode-form__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .zunicode-rating__dialog .zunicode-form__field--half {
    grid-column: 1 / -1;
  }
}

.image-lightbox {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  max-height: min(90vh, calc(100% - 2rem));
  max-width: min(70rem, calc(100vw - 2rem));
  overflow: auto;
  padding: 0;
  width: 100%;
}

.image-lightbox::backdrop {
  background: rgb(34 48 60 / 78%);
}

.image-lightbox img {
  display: block;
  height: auto;
  width: 100%;
}

.image-lightbox__close {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 1.25rem;
  height: 2.25rem;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  width: 2.25rem;
}

.image-lightbox__close:hover {
  color: var(--color-ink);
}

/*
 * Standard hero header for generic pages (Kontakt, Impressum, Datenschutz, …).
 * `.site-main.has-page-hero` cancels the generic top padding from
 * `.site-main:not(.front-page-main)` so this panel sits flush under the
 * sticky `.site-header`, matching sitewide vertical rhythm.
 */
.site-main.has-page-hero {
  padding-top: 0;
}

/*
 * Counterpart to `.has-page-hero` for pages ending in a full-width closing
 * section: drops the generic bottom padding so that section meets the footer
 * without a strip of page background between the two.
 */
.site-main.has-flush-closing {
  padding-bottom: 0;
}

.page-hero {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--section-space);
}

.page-hero__inner {
  align-items: end;
  display: grid;
  gap: 4rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
}

.site-main .page-hero h1 {
  hyphens: auto;
  margin-bottom: 0;
  max-width: 16ch;
}

.page-hero__inner > div:last-child > p {
  color: var(--color-text);
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
}

.contact-page__content {
  padding-top: var(--section-space);
}

/* Footer */

.site-footer {
  background: var(--color-ink);
  color: var(--color-subtle);
  padding-top: 4rem;
}

.site-footer__grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1.4fr repeat(3, 1fr);
}

.site-brand--footer {
  color: #e8edf2;
  display: inline-flex;
  margin-bottom: 0.875rem;
}

.site-brand--footer:hover {
  color: var(--color-white);
}

.site-footer__logo {
  display: block;
  height: 2rem;
  width: auto;
}

.site-footer__column-group {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.site-footer__brand p {
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 21rem;
}

.site-footer__heading {
  color: #e8edf2;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.site-footer__column {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}

.site-footer__menu,
.site-footer__legal-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__menu {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}

.site-footer__column a,
.site-footer__legal a {
  color: var(--color-subtle);
  font-size: 0.875rem;
}

.site-footer__badges {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer__badge {
  align-items: center;
  background: var(--color-white);
  border-radius: 0.5rem;
  display: flex;
  height: 70px;
  padding: 0.375rem 0.625rem;
}

.site-footer__badge img {
  display: block;
  height: 100%;
  max-width: 7rem;
  object-fit: contain;
  object-position: left center;
  width: auto;
}

.site-footer__bottom {
  align-items: center;
  border-top: 1px solid #34424f;
  display: flex;
  justify-content: space-between;
  margin-top: 2.75rem;
  min-height: 5.5rem;
}

.site-footer__bottom p {
  font-size: 0.8125rem;
  margin: 0;
}

.site-footer__bottom p.site-footer__made-with {
  align-items: center;
  display: inline-flex;
  font-size: 0.875rem;
  gap: 0.375em;
}

/* Pinned to match the text's own font-size — otherwise it would keep
   scaling with the .rainbow-heart class's own em-based sizing and drift
   out of sync with the surrounding text again. */
.site-footer__made-with .rainbow-heart {
  height: 0.875rem;
  vertical-align: unset;
  width: 0.875rem;
}

.site-footer__legal {
  display: flex;
  gap: 1.375rem;
}

.site-footer__legal-menu {
  display: flex;
  gap: 1.375rem;
}

@media (max-width: 67.5rem) {
  .utility-bar {
    display: none;
  }

  .site-header__inner {
    grid-template-columns: 1fr auto;
    height: 4.25rem;
  }

  .header-mobile-actions {
    align-items: center;
    display: flex;
    gap: 0.625rem;
    grid-column: 2;
    justify-self: end;
  }

  .js .navigation-toggle,
  .js .header-search-toggle {
    display: inline-flex;
  }

  .navigation-panel {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-line);
    box-shadow: 0 1.25rem 2.5rem rgb(34 48 60 / 12%);
    display: block;
    left: 0;
    max-height: calc(100vh - 4.25rem);
    overflow-y: auto;
    padding: 0 var(--space-page) 1.5rem;
    position: absolute;
    right: 0;
    top: 100%;
  }

  .js .navigation-panel {
    display: none;
  }

  .js .navigation-panel.is-open {
    display: block;
  }

  .primary-navigation,
  .header-actions {
    display: block;
  }

  .header-actions,
  .header-action-menu,
  .header-action-menu .primary-navigation__cta {
    justify-self: stretch;
    width: 100%;
  }

  .header-action-menu {
    display: block;
  }

  .primary-navigation__list {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .primary-navigation__list > li {
    align-items: stretch;
    border-bottom: 1px solid var(--color-line);
    display: block;
    height: auto;
  }

  .primary-navigation__list > li > a:not(.button),
  .solutions-menu > summary {
    align-items: center;
    display: flex;
    font-size: 1rem;
    justify-content: space-between;
    min-height: 3.75rem;
    width: 100%;
  }

  .solutions-menu {
    display: block;
    height: auto;
  }

  .solutions-menu > summary::after {
    display: none;
  }

  .mega-menu {
    border: 0;
    border-top: 1px solid var(--color-line);
    box-shadow: none;
    display: block;
    left: auto;
    padding: 0;
    position: static;
    transform: none;
    width: auto;
  }

  .mega-menu__content {
    gap: 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 1.5rem 0;
  }

  .mega-menu__actions-inner {
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 1rem 0;
  }

  .primary-navigation__cta {
    padding-top: 1.25rem;
  }

  .primary-navigation__cta .button {
    width: 100%;
  }

  .solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .managed-application-hero__grid {
    gap: 3rem;
  }

  .managed-application-principles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .managed-application-principles__grid span:nth-child(3) {
    border-left: 0;
  }

  .managed-application-principles__grid span:nth-child(n + 3) {
    border-top: 1px solid var(--color-line);
  }

  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

/* Company page */

.company-hero {
  padding-block: var(--section-space);
}

.company-hero .eyebrow {
  margin-bottom: 1.25rem;
}

.company-hero h1 {
  max-width: 24ch;
}

.company-hero__lead {
  color: #4a5560;
  font-size: 1.1875rem;
  margin-top: 1.5rem;
  max-width: var(--content-narrow);
}

.company-hero__actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.company-timeline {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.company-timeline li {
  border-top: 1px solid var(--color-ink);
  padding-top: 1.5rem;
}

.company-timeline li > span {
  color: var(--color-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.company-timeline h3 {
  font-size: 1.1875rem;
  margin: 1rem 0 0.625rem;
}

.company-timeline p {
  color: var(--color-muted);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.team-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-card__photo {
  border-radius: 50%;
  height: 6rem;
  margin-bottom: 1.25rem;
  object-fit: cover;
  width: 6rem;
}

.team-card h3 {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 1.25rem;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.badge {
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.25rem 0.5625rem;
  text-transform: uppercase;
}

.badge--ai {
  background: #e6edf4;
  color: #35526b;
}

.team-card__name {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.2em;
}

.team-card__name:hover {
  color: var(--color-accent);
  text-decoration-color: currentColor;
}

.team-card__role {
  color: var(--color-accent);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.team-card > p:not(.team-card__role) {
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.feature-grid--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-callout {
  border: 1px solid var(--color-line);
  margin-top: 1.5rem;
  padding: 2rem 2.25rem;
}

.company-callout h3 {
  font-size: 1.25rem;
  margin-bottom: 0.625rem;
}

.company-callout p {
  color: var(--color-muted);
  margin-bottom: 0;
}

.company-sources {
  border-top: 1px solid var(--color-line);
  margin-top: 3rem;
  padding-top: 1.5rem;
}

.company-sources__label {
  color: var(--color-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.company-sources ol {
  color: var(--color-muted);
  font-size: 0.8125rem;
  margin: 0;
  padding-left: 1.25rem;
}

.company-sources li {
  margin-bottom: 0.375rem;
}

.company-empty-state {
  color: var(--color-muted);
  max-width: var(--content-narrow);
}

.partner-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.partner-grid--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.partner-card {
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  padding: 1.875rem 2rem;
}

.partner-card__logo {
  align-items: center;
  display: flex;
  height: 3.5rem;
  margin-bottom: 1.75rem;
}

.partner-card__logo img {
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  width: auto;
}

/* Logos whose usage terms require the image itself to be wrapped in a
   link: the anchor needs an explicit height, otherwise it never
   establishes a percentage-height context and the img's height:100%
   falls through to its intrinsic size instead of filling the row. */
.partner-card__logo a {
  display: flex;
  height: 100%;
}

/* For logos whose artwork fills its own bounding box edge-to-edge (solid
   background instead of a compact mark) — adds breathing room so it
   doesn't read as cramped against the card border. */
.partner-card__logo--framed {
  padding: 0.5rem 1rem;
}

.partner-card > p {
  color: var(--color-muted);
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}

.partner-card .text-link {
  margin-top: auto;
}

sup a {
  text-decoration: none;
}

/* Author byline and profile panel */

.editorial-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
}

.editorial-byline__author {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 0.625rem;
  padding: 0;
}

.editorial-byline__photo {
  border-radius: 50%;
  flex-shrink: 0;
  height: 2rem;
  object-fit: cover;
  width: 2rem;
}

.editorial-byline__photo--placeholder {
  background: var(--color-line-soft);
}

.editorial-byline__name {
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.2em;
}

.editorial-byline__author:hover .editorial-byline__name {
  color: var(--color-accent);
  text-decoration-color: currentColor;
}

body.author-panel-is-open {
  overflow: hidden;
}

.author-panel__backdrop {
  background: rgb(34 48 60 / 45%);
  inset: 0;
  position: fixed;
  z-index: 200;
}

.author-panel {
  background: var(--color-white);
  bottom: 0;
  box-shadow: -1.5rem 0 3rem rgb(34 48 60 / 18%);
  max-width: 36rem;
  min-width: 22rem;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 260ms ease;
  width: 40vw;
  z-index: 201;
}

.author-panel.is-open {
  transform: translateX(0);
}

.author-panel__scroll {
  height: 100%;
  overflow-y: auto;
  padding: 3.5rem 2.5rem 2.5rem;
  position: relative;
}

.author-panel__close {
  background: none;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-ink);
  cursor: pointer;
  font-size: 1.25rem;
  height: 2.25rem;
  line-height: 1;
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  width: 2.25rem;
}

.author-panel__close:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.author-panel__photo {
  border-radius: 50%;
  height: 7rem;
  margin-bottom: 1.5rem;
  object-fit: cover;
  width: 7rem;
}

.author-panel__name {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 1.625rem;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.author-panel__position {
  color: var(--color-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.author-panel__bio {
  color: var(--color-text);
}

.author-panel__bio > :last-child {
  margin-bottom: 0;
}

.author-panel__contact {
  border-top: 1px solid var(--color-line);
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
}

.author-panel__contact li + li {
  margin-top: 0.625rem;
}

.author-panel__contact a {
  align-items: center;
  color: var(--color-text);
  display: inline-flex;
  font-size: 0.9375rem;
  gap: 0.625rem;
  text-decoration: none;
}

.author-panel__contact a:hover {
  color: var(--color-accent);
}

.author-panel__contact svg {
  color: var(--color-accent);
  flex-shrink: 0;
  height: 1.125rem;
  width: 1.125rem;
}

.author-panel__socials {
  display: flex;
  gap: 0.625rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.author-panel__socials a {
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-ink);
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.author-panel__socials a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.author-panel__socials svg {
  height: 1rem;
  width: 1rem;
}

.author-panel__posts {
  border-top: 1px solid var(--color-line);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}

.author-panel__posts-label {
  color: var(--color-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.author-panel__posts ul {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.author-panel__posts a {
  color: var(--color-text);
  font-size: 0.9375rem;
}

.author-panel__posts a:hover {
  color: var(--color-accent);
}

.author-panel__form {
  border-top: 1px solid var(--color-line);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.author-panel__form .zunicode-form {
  display: block;
}

.author-panel__form .zunicode-form__intro {
  padding-top: 0;
}

.author-panel__form .zunicode-form__panel {
  margin-top: 1.25rem;
  padding: 1.5rem;
}

.author-panel__form .zunicode-form__fields {
  grid-template-columns: 1fr;
}

/* Zammad chat, floating display mode: Zammad's own default tab is a full
   33em-wide bar even while closed (just the title showing). Shrink it to
   fit the title instead, so it reads as a small tab rather than a wide
   bar — it only needs to be full width once actually open. */

.zammad-chat:not(.zammad-chat-is-open) {
  width: auto;
}

/* The theme's own global reset (`svg { display: block; }`) forces every
   icon Zammad ships (welcome icon, header open/close toggle, …) block-
   level too, breaking layouts vendor CSS built assuming inline SVGs —
   e.g. the welcome icon stacks above the title instead of beside it,
   and the fixed 3.5em header height then clips the title below the
   visible viewport. Restore the inline behavior their CSS expects.
   Pre-dates the width:auto rule above; happened at the original 33em
   width too, just as invisibly. */
.zammad-chat svg {
  display: inline;
}

.zammad-chat-welcome {
  white-space: nowrap;
}

/* Zammad chat, sidebar display mode: mirrors .author-panel's slide-in
   panel so both patterns feel like the same system. The floating-mode
   position/offset overrides live inline (admin-configurable), but this
   structural panel shape is fixed, so it belongs in the stylesheet. */

body.zammad-chat-panel-is-open {
  overflow: hidden;
}

.zammad-chat-backdrop {
  background: rgb(34 48 60 / 45%);
  inset: 0;
  position: fixed;
}

.zammad-chat-backdrop[hidden] {
  display: none;
}

body.zammad-chat-mode-sidebar .zammad-chat {
  border-radius: 0 !important;
  bottom: 0 !important;
  box-shadow: -1.5rem 0 3rem rgb(34 48 60 / 18%) !important;
  height: 100% !important;
  max-width: 36rem !important;
  min-width: 22rem !important;
  right: 0 !important;
  top: 0 !important;
  transform: translateX(100%);
  transition: transform 260ms ease !important;
  width: 40vw !important;
}

body.zammad-chat-mode-sidebar .zammad-chat.zammad-chat-is-open {
  transform: translateX(0);
}

/* Search palette (Ctrl+K / Cmd+K): a self-contained overlay above the
   entire existing z-index stack (skip-link excepted), mirroring
   .author-panel's backdrop/focus/Escape pattern. */

body.search-palette-is-open {
  overflow: hidden;
}

.search-palette__backdrop {
  background: rgb(34 48 60 / 45%);
  inset: 0;
  position: fixed;
  z-index: 300;
}

.search-palette__dialog {
  background: var(--color-white);
  border-radius: 0.1875rem;
  box-shadow: 0 1.5rem 3.5rem rgb(34 48 60 / 18%);
  display: flex;
  flex-direction: column;
  left: 50%;
  max-height: min(32rem, 80vh);
  max-width: 38rem;
  overflow: hidden;
  position: fixed;
  top: 12vh;
  transform: translateX(-50%);
  width: calc(100% - 2 * var(--space-page));
  z-index: 301;
}

.search-palette__input-row {
  align-items: center;
  border-bottom: 1px solid var(--color-line);
  display: flex;
  flex-shrink: 0;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
}

.search-palette__input-row:focus-within {
  box-shadow: inset 0 -0.125rem 0 var(--color-accent);
}

.search-palette__input-icon {
  color: var(--color-muted);
  flex-shrink: 0;
}

.search-palette__input {
  appearance: none;
  background: none;
  border: 0;
  color: var(--color-ink);
  flex: 1;
  font: inherit;
  font-size: 1rem;
  min-width: 0;
}

.search-palette__input:focus {
  outline: none;
}

.search-palette__input::-webkit-search-cancel-button {
  display: none;
}

.search-palette__close {
  background: none;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1.375rem;
  line-height: 1;
  padding: 0.25rem;
}

.search-palette__close:hover {
  color: var(--color-accent);
}

.search-palette__status {
  color: var(--color-muted);
  flex-shrink: 0;
  font-size: 0.8125rem;
  padding: 0 1.25rem;
}

.search-palette__status:not(:empty) {
  padding-top: 0.75rem;
}

.search-palette__results {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0 0.75rem;
}

.search-palette__group + .search-palette__group {
  border-top: 1px solid var(--color-line-soft);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.search-palette__group-label {
  color: var(--color-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 0.5rem 1.25rem 0.375rem;
  text-transform: uppercase;
}

.search-palette__result {
  align-items: center;
  color: var(--color-text);
  display: flex;
  gap: 0.875rem;
  padding: 0.625rem 1.25rem;
  text-decoration: none;
}

.search-palette__result:hover,
.search-palette__result.is-active {
  background: var(--color-surface);
}

.search-palette__result:focus-visible {
  background: var(--color-surface);
  outline: 0.1875rem solid var(--color-accent);
  outline-offset: -0.1875rem;
}

.search-palette__result:hover .search-palette__result-title,
.search-palette__result.is-active .search-palette__result-title,
.search-palette__result:focus-visible .search-palette__result-title {
  color: var(--color-accent);
}

.search-palette__result-icon {
  align-items: center;
  color: var(--color-muted);
  display: flex;
  flex-shrink: 0;
  height: 1.25rem;
  width: 1.25rem;
}

.search-palette__result-icon svg {
  height: 100%;
  width: 100%;
}

.search-palette__result-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.search-palette__result-title {
  color: var(--color-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-palette__result-excerpt {
  color: var(--color-muted);
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-palette__result-badge {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 0.1875rem;
  color: var(--color-muted);
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  margin-left: auto;
  padding: 0.1875rem 0.5rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.search-palette__empty,
.search-palette__error {
  padding: 2rem 1.25rem;
  text-align: center;
}

.search-palette__empty-title,
.search-palette__error-title {
  color: var(--color-ink);
  font-weight: 650;
  margin: 0 0 0.375rem;
}

.search-palette__empty p,
.search-palette__error p {
  color: var(--color-muted);
  margin: 0 0 1rem;
}

.search-palette__retry {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 0.1875rem;
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  padding: 0.5rem 1rem;
}

.search-palette__retry:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.search-palette__hint {
  border-top: 1px solid var(--color-line);
  color: var(--color-subtle);
  display: flex;
  flex-shrink: 0;
  font-size: 0.75rem;
  gap: 1.25rem;
  padding: 0.625rem 1.25rem;
}

.search-palette__hint-shortcut {
  margin-right: auto;
}

.search-palette__hint kbd {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 0.1875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  padding: 0.0625rem 0.3125rem;
}

@media (max-width: 52rem) {
  :root {
    --section-space: 4rem;
  }

  h1 {
    font-size: clamp(2.5rem, 10vw, 3.25rem);
  }

  h2 {
    font-size: clamp(1.9rem, 8vw, 2.25rem);
  }

  .hero__backdrop {
    height: 20rem;
  }

  .hero__card {
    margin-top: -8rem;
    padding: 2.25rem 2rem 2rem;
  }

  .managed-application-hero__grid {
    grid-template-columns: 1fr;
    padding-block: 4rem;
  }

  .managed-application-preview {
    max-width: 34rem;
    min-height: 0;
  }

  .mega-menu__content {
    grid-template-columns: 1fr;
  }

  .mega-menu__column {
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 1.75rem;
  }

  .mega-menu__column:last-child {
    border-bottom: 0;
  }

  .section-heading--split {
    align-items: start;
    gap: 1.25rem;
    grid-template-columns: 1fr;
  }

  .solution-directory__group-heading {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .application-detail-grid,
  .application-service-grid,
  .application-use-cases,
  .application-transformation,
  .application-solution-stack,
  .application-process,
  .application-product-showcase__layout,
  .application-capabilities,
  .application-feature-grid,
  .application-reference-grid,
  .application-product-showcase__grid,
  .application-product-showcase__brand,
  .application-editions__axes,
  .application-editions__paths,
  .application-pricing__grid,
  .application-pricing__heading,
  .application-addons__grid,
  .application-closing-cta__inner,
  .zunicode-form,
  .page-hero__inner,
  .editorial-single__header-inner--split {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .article-with-toc {
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
  }

  .editorial-single__header-media {
    display: none;
  }

  .article-toc {
    position: static;
  }

  .article-toc ol {
    max-height: none;
  }

  .application-solution-stack {
    gap: 0;
  }

  .application-solution-stack__primary {
    grid-row: auto;
  }

  .application-related-solution,
  .application-process-cta,
  .dmarc-check-module__footer {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .application-related-solution .text-link {
    white-space: normal;
  }

  .application-capabilities {
    gap: 2rem;
  }

  .application-trust-badges {
    gap: 1.75rem;
  }

  .application-capabilities__heading h3 {
    max-width: 24ch;
  }

  .dmarc-check-consequences {
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  .dmarc-check-consequences article {
    padding-right: 0;
  }

  .dmarc-check-module__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dmarc-check-module__tab:nth-child(2) {
    border-right: 0;
  }

  .dmarc-check-module__tab:nth-child(-n + 2) {
    border-bottom-color: var(--color-line);
  }

  .dmarc-check-module__tab.is-active {
    border-bottom-color: var(--color-line);
  }

  .application-transformation__arrow {
    justify-self: center;
    transform: rotate(90deg);
  }

  .application-editions__scroll-hint {
    color: var(--color-muted);
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
    text-align: right;
    text-transform: uppercase;
  }

  .application-package__heading {
    min-height: 0;
  }

  .feature-grid,
  .process-grid,
  .collaboration-principles,
  .split-feature,
  .accent-band__inner,
  .editorial-grid,
  .topic-grid,
  .team-grid,
  .partner-grid {
    grid-template-columns: 1fr;
  }

  /* A full-height portrait would dominate a single-column layout. */
  .split-feature__media .media-placeholder,
  .split-feature__media img {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }

  .editorial-card--featured {
    grid-column: span 1;
  }

  .editorial-card--featured .editorial-card__media {
    aspect-ratio: 16 / 9;
  }

  .related-posts .editorial-grid {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-padding-inline: var(--space-page);
    scroll-snap-type: x mandatory;
  }

  .related-posts .editorial-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .process-grid {
    gap: 2.5rem;
  }

  .company-timeline {
    gap: 2.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-hero h1 {
    max-width: none;
  }

  .author-panel {
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  body.zammad-chat-mode-sidebar .zammad-chat {
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 40rem) {
  :root {
    --space-page: 1.25rem;
    --section-space: 3.75rem;
  }

  .admin-bar .site-header {
    top: 2.875rem;
  }

  .solution-grid,
  .operations-grid,
  .site-footer__grid,
  .company-timeline {
    grid-template-columns: 1fr;
  }

  /* One full-width row per post instead of a 2x2 grid; the title returns to
     normal flow at its full length since there's no hover on touch. */
  .mega-menu__posts {
    grid-template-columns: 1fr;
  }

  .mega-menu__post {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-bottom: 0;
  }

  .mega-menu__post-media {
    flex: none;
    width: 5.5rem;
  }

  .mega-menu__post-title {
    background: none;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    padding: 0 0.75rem 0 0;
    position: static;
  }

  /* No overlap on phones: the card would cover most of the motif anyway, and
     a negative offset only steals vertical room from the CTA. */
  .hero__backdrop {
    height: 12rem;
  }

  .hero__card {
    margin-top: 0;
    padding: 1.75rem 1.5rem;
  }

  .hero__card h1 {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }

  .hero__actions,
  .hero__actions .button {
    width: 100%;
  }

  .managed-application-hero__actions,
  .managed-application-hero__actions .button {
    width: 100%;
  }

  .application-process-cta .button {
    width: 100%;
  }

  .dmarc-check-module__tab {
    min-height: 5.75rem;
    padding: 1rem;
  }

  .dmarc-check-module__tab small {
    display: none;
  }

  .dmarc-check-module__panel {
    min-height: 30rem;
  }

  .dmarc-check-module__frame {
    height: 46rem;
  }

  .dmarc-check-module__footer {
    padding: 1.5rem;
  }

  .dmarc-check-module__footer .button {
    width: 100%;
  }

  .application-capabilities dl > div {
    gap: 0.5rem;
    grid-template-columns: 1fr;
  }

  .managed-application-preview__body,
  .managed-application-preview__sheet,
  .dmarc-control__body,
  .application-detail-grid article,
  .application-service-grid article,
  .application-editions__axes article,
  .application-editions__axes > .wp-block-column,
  .application-editions__paths article,
  .application-editions__paths > .wp-block-column,
  .application-package,
  .application-addons article {
    padding: 1.5rem;
  }

  .zunicode-form__fields {
    grid-template-columns: 1fr;
  }

  .zunicode-form__field--full,
  .zunicode-form__field--half {
    grid-column: auto;
  }

  .zunicode-form__panel {
    padding: 1.5rem;
  }

  .dmarc-control__domains li {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .dmarc-control__status {
    white-space: normal;
  }

  .zunicode-form .button {
    width: 100%;
  }

  .editorial-search {
    grid-template-columns: 1fr;
  }

  .editorial-search input,
  .editorial-search select,
  .editorial-search .button {
    border-radius: 0.1875rem;
  }

  .editorial-search--with-filter input {
    border-left: 1px solid var(--color-line);
  }

  .editorial-search--with-filter-2 #topic-index-type-filter {
    border-left: 1px solid var(--color-line);
  }

  .editorial-search .button {
    margin-top: 0.75rem;
  }

  .editorial-card__body,
  .editorial-empty,
  .editorial-resource,
  .topic-card {
    padding: 1.5rem;
  }

  .site-footer__column {
    border-top: 1px solid #34424f;
    padding-top: 1.5rem;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    padding-block: 1.5rem;
  }

  .search-palette__dialog {
    border-radius: 0;
    height: 100%;
    left: 0;
    max-height: none;
    max-width: none;
    top: 0;
    transform: none;
    width: 100%;
  }

  /* Ctrl+K doesn't exist on a touch keyboard, so the shortcut tip is
     dropped from the hint row on the fullscreen mobile dialog. */
  .search-palette__hint-shortcut {
    display: none;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}