/* SaaStacular static site. No build step, no remote assets, one small local script (full-width view of the diagrams and screenshots).
   Fonts: the repository's bundled OFL files (see assets/fonts/<family>/OFL.txt). */

@font-face {
  font-family: "Oswald";
  src: url("assets/fonts/oswald/oswald-wght.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed/barlow-condensed-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist/geist-wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist-mono/geist-mono-wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Tokens: neutral dark default; navy #253b55 and lime #c9d839 are the only accents. */
:root {
  color-scheme: dark;
  --bg: #0c0a09;
  --card: #1d1816;
  --section-muted: #1d1816;
  --fg: #fbfaf9;
  --muted: #aba09c;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.45);
  --link: #c9d839;
  --kicker: #c9d839;
  --accent-rule: #c9d839;
  --focus: #c9d839;
  --code-bg: #2b2422;
  --primary-bg: #c9d839;
  --primary-fg: #202020;
  --navy: #253b55;
  --lime: #c9d839;
  --on-lime: #202020;
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-kicker: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Geist", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --radius: 0.625rem;
  --radius-pill: 1.125rem;
  --gutter: 16px;
}

/* Light variant: lime is never used as text on light grounds. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --card: #ffffff;
    --section-muted: #f3f1f1;
    --fg: #0c0a09;
    --muted: #5f524d;
    --border: #e8e4e3;
    --border-strong: #7c6d67;
    --link: #253b55;
    --kicker: #253b55;
    --accent-rule: #253b55;
    --focus: #253b55;
    --code-bg: #f3f1f1;
    --primary-bg: #253b55;
    --primary-fg: #ffffff;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
}

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

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

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

main:focus {
  outline: none;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--code-bg);
  border-radius: 0.3rem;
  padding: 0.05em 0.3em;
  overflow-wrap: anywhere;
}

pre {
  margin: 0.75rem 0 0;
  padding: 0.875rem 1rem;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: clamp(2.25rem, 5.6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
}

h3 {
  font-size: 1.3rem;
  font-weight: 500;
}

p {
  margin: 0 0 1rem;
}

.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 48rem) {
  :root {
    --gutter: 32px;
  }
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0.5rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--primary-bg);
  color: var(--primary-fg);
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-200%);
}

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

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "brand"
    "cta"
    "nav";
  gap: 0.75rem 1.5rem;
  padding-block: 0.875rem;
  align-items: center;
}

.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  justify-self: start;
  color: var(--fg);
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
  flex: none;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.site-nav {
  grid-area: nav;
}

/* On a phone the nav is its own row under the buttons: 0.5rem more room above it. The wider layouts keep their spacing. */
@media (max-width: 39.9375rem) {
  .site-nav {
    margin-top: 0.5rem;
  }
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding-block: 0.375rem;
  color: var(--fg);
  font-family: var(--font-kicker);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

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

.header-cta {
  grid-area: cta;
}

@media (min-width: 40rem) {
  .header-inner {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand cta"
      "nav nav";
  }

  .header-cta {
    justify-content: flex-end;
  }
}

@media (min-width: 72rem) {
  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav cta";
  }

  .site-nav ul {
    justify-content: center;
  }
}

/* A small muted dot between the nav items, at every width. It follows each item except the last, so when the items wrap a line ends with its
   separator and never starts with one, and the row has no dot before the first or after the last item. It is drawn by CSS only, so it is never
   announced. The space between two items is 16px (6px gap, 4px dot, 6px margin), less than the 20px it replaces, so the row is no wider; the
   links keep their own hit areas and the items still wrap naturally. */
.site-nav ul {
  column-gap: 0.375rem;
}

.site-nav li {
  display: flex;
  align-items: center;
}

.site-nav li:not(:last-child)::after {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  margin-inline-start: 0.375rem;
  border-radius: 50%;
  background: var(--muted);
}

/* Buttons */
.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  min-width: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 44px;
  padding: 0.5rem 1.125rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

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

.button-primary {
  background: var(--primary-bg);
  color: var(--primary-fg);
  border-color: var(--primary-bg);
}

.button-secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}

.text-link {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
}

/* Hero */
.hero {
  padding-block: 3rem 3.5rem;
}

.hero-inner {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.hero-text {
  min-width: 0;
  max-width: 46rem;
}

.lead {
  font-size: 1.19rem;
  line-height: 1.62;
}

.hero-cta {
  margin: 2rem 0 1rem;
}

/* A subtle rule separates the hero buttons from the notes below them, with 2rem above and below. Adjacent margins collapse, so the
   buttons' own bottom margin (1rem) is absorbed by the rule's 2rem on every screen width; the rule stays inside the hero text column. */
.hero-rule {
  height: 0;
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.template-note {
  max-width: 40rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.hero-art {
  display: none;
}

@media (min-width: 60rem) {
  .hero {
    padding-block: 5rem;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hero-art {
    display: block;
  }

  /* The mark's file has a transparent margin of 52 of 512 pixels above the visible shape; the negative margin puts the
     visible top level with the top of the hero text. */
  .hero-art img {
    display: block;
    width: 18rem;
    height: auto;
    margin-top: calc(-18rem * 52 / 512);
  }
}

.badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 0.75rem;
  background: #b4bc62; /* the brand lime, muted: same hue, less saturation (about 40%); only this badge */
  color: var(--on-lime);
  border-radius: var(--radius-pill);
  font-family: var(--font-kicker);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kicker {
  margin-bottom: 0.5rem;
  color: var(--kicker);
  font-family: var(--font-kicker);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Sections */
.section {
  padding-block: 3rem;
  border-top: 1px solid var(--border);
}

@media (min-width: 48rem) {
  .section {
    padding-block: 4.5rem;
  }
}

.section-lead {
  max-width: 48rem;
  color: var(--muted);
  font-size: 1.0625rem;
}

.h-line {
  display: block;
}

.h-line + .h-line {
  margin-top: 1rem;
}

.agent-lead {
  color: var(--fg);
  font-size: 1.1875rem;
}

.section-muted {
  background: var(--section-muted);
  --code-bg: #2b2422;
}

@media (prefers-color-scheme: light) {
  .section-muted {
    --code-bg: #ffffff;
  }
}

/* Navy band: always dark-on-navy, so lime text is allowed here. */
.band {
  background: var(--navy);
  color: #fbfaf9;
  border-top: 0;
  --fg: #fbfaf9;
  --muted: #dfe5ec;
  --link: #c9d839;
  --kicker: #c9d839;
  --accent-rule: #c9d839;
  --focus: #c9d839;
  --code-bg: rgba(0, 0, 0, 0.28);
  --border: rgba(255, 255, 255, 0.18);
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.card {
  min-width: 0;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
}

.card p {
  font-size: 0.975rem;
}

.card-index {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.card-links {
  margin: 0;
  font-weight: 500;
}

.callout {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-rule);
  border-radius: 1rem;
}

/* Lists of facts */
.facts {
  max-width: 52rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.facts li {
  position: relative;
  margin-bottom: 0.875rem;
  padding-left: 1.5rem;
}

.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 14px;
  height: 2px;
  background: var(--accent-rule);
}

.analogy,
.limits {
  max-width: 52rem;
}

.limits {
  color: var(--muted);
}

/* Architecture diagrams: code-authored SVG drawn inline (its own light/dark colours, text kept as text), with the same
   content in plain text below. No remote assets. On narrow screens the drawing keeps a readable size and scrolls; the full-width view opens it in a dialog. */
.diagram {
  margin: 2rem 0 0;
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
}

.diagram + .diagram {
  margin-top: 2rem;
}

.diagram > figcaption {
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
}

.diagram-no {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--kicker);
  font-family: var(--font-kicker);
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.diagram-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
}

.diagram-scroll svg {
  display: block;
  width: 100%;
  min-width: 44rem;
  max-width: 56rem;
  height: auto;
  margin-inline: auto;
}

.diagram-tools {
  margin: 1rem 0 2rem;
  font-size: 0.9375rem;
  text-align: right;
}

.diagram-open {
  font: inherit;
  color: var(--link);
  background: none;
  border: 0;
  padding: 0.25rem 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.diagram-zoomable svg {
  cursor: zoom-in;
}

/* Full-width view: a native modal dialog, nearly the full viewport width on a phone and capped at 1440px on a wide screen. Its height
   is capped at 80% of the viewport: the body scrolls inside, under a fixed header with Close, and the page never scrolls. */
.diagram-dialog {
  box-sizing: border-box;
  width: calc(100vw - 1rem);
  max-width: 1440px;
  max-height: 80vh;
  max-height: 80dvh;
  padding: 0;
  color: var(--fg);
  background: var(--card);
  border: 1px solid #404040;
  border-radius: 1rem;
  overflow: hidden;
}

.diagram-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Open 180ms, close 120-160ms (140ms): opacity and a slight scale. The controller adds .closing and waits for the animation, so the
   dialog stays modal and inert until it is gone; with reduced motion there is no animation and it closes at once. */
.diagram-dialog[open] {
  animation: diagram-in 180ms ease-out;
}

.diagram-dialog[open]::backdrop {
  animation: diagram-fade-in 180ms ease-out;
}

.diagram-dialog.closing {
  animation: diagram-out 140ms ease-in forwards;
}

.diagram-dialog.closing::backdrop {
  animation: diagram-fade-out 140ms ease-in forwards;
}

@keyframes diagram-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes diagram-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* The dim fades in while the page behind blurs from 0 to 6px, on the dialog's own backdrop only; a browser without backdrop-filter
   keeps the dim fade. Reduced motion shows the final dim and blur at once. */
@keyframes diagram-fade-in {
  from {
    background-color: rgba(0, 0, 0, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

@keyframes diagram-fade-out {
  from {
    background-color: rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  to {
    background-color: rgba(0, 0, 0, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .diagram-dialog[open],
  .diagram-dialog[open]::backdrop,
  .diagram-dialog.closing,
  .diagram-dialog.closing::backdrop {
    animation: none;
  }
}

.diagram-dialog[open] {
  display: block;
}

.diagram-dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  max-height: 80dvh;
}

.diagram-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.diagram-dialog-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
}

.diagram-close {
  flex: none;
  margin-inline-start: auto;
  font: inherit;
  color: var(--fg);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.375rem 0.875rem;
  cursor: pointer;
}

.diagram-dialog-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.diagram-dialog-body svg {
  display: block;
  width: 100%;
  height: auto;
}

/* A screenshot is shown at most at its own pixel size (the controller sets max-width from the image's width attribute) and never wider
   than the dialog, centred; a tall one scrolls inside. Its width and height attributes give the aspect ratio before it loads, so the
   dialog does not change height when the image arrives. */
.diagram-dialog-body img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.shot-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: zoom-in;
}

.diagram-text {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
}

.diagram-text li {
  margin-bottom: 0.5rem;
}

.diagram-note {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
}

.diagram-sources {
  margin-top: 1rem;
  font-size: 0.9375rem;
}

.diagram-sources summary {
  min-height: 44px;
  padding-block: 0.625rem;
  cursor: pointer;
  font-weight: 600;
}

.diagram-sources ul {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}

.diagram-sources li {
  margin-bottom: 0.5rem;
}

/* Gallery: secondary to the diagrams, so smaller. */
.section-compact {
  padding-block: 2.5rem;
}

.h-secondary {
  font-size: 1.5rem;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.5rem 1.25rem;
  margin-top: 1.5rem;
}

.shot {
  min-width: 0;
  margin: 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot-mobile img {
  max-width: 11rem;
  margin-inline: auto;
}

.shot figcaption {
  margin-top: 0.625rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* Steps */
.steps {
  max-width: 52rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  position: relative;
  margin-bottom: 2rem;
  padding-left: 2.75rem;
  counter-increment: step;
}

.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}

.steps h3 {
  margin-bottom: 0.375rem;
}

.steps p {
  margin-bottom: 0;
}

@media (max-width: 30rem) {
  .steps > li {
    padding-left: 0;
  }

  .steps > li::before {
    position: static;
    display: block;
    margin-bottom: 0.25rem;
  }
}

/* Footer */
.site-footer {
  padding-block: 2rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9375rem;
}

.footer-inner p {
  margin-bottom: 0.5rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}

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

/* Author band: the same navy band as the included test harness. The primary button keeps its lime fill on navy. */
.band .button-primary {
  --primary-bg: var(--lime);
  --primary-fg: var(--on-lime);
}

/* The portrait sits beside the name, title and button, with its top level with the top of the name. The Author label
   stays above the name in the text column. */
.author-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: 2rem;
}

.author-photo {
  display: block;
  grid-column: 1;
  grid-row: 2 / 6;
  align-self: start;
  width: 9rem;
  height: auto;
  border-radius: 50%;
}

.author-text {
  display: contents;
}

.author-text .kicker {
  grid-column: 2;
  grid-row: 1;
}

.author-text h2 {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
  margin-bottom: 0.25rem;
  line-height: 1;
}

.author-role {
  grid-column: 2;
  grid-row: 3;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 1.0625rem;
}

.workflow-note,
.workflow-case {
  max-width: 52rem;
}

/* The standalone handbook callout: 1.5rem above and below it (adjacent margins collapse, so this is also its clear distance from the
   case study and from the source links). */
.workflow-handbook {
  margin: 1.5rem 0;
}

/* The callout reads as ordinary text with one bold phrase. The link's default display face (Oswald, condensed) makes a regular and a bold
   weight hard to tell apart, so this callout uses the body font: 400 for the lead-in and the arrow, 700 for the phrase only. */
.workflow-handbook a {
  color: #cbcfd6; /* gray, not the band's lime: this callout only; about 7.3:1 on the navy band, which is the same in both themes */
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
}

.workflow-handbook strong {
  font-weight: 700;
}

.author-text p:last-child {
  grid-column: 2;
  grid-row: 4;
  margin-bottom: 0;
}

/* On a phone the portrait shrinks so it stays beside the text instead of wrapping above it. */
@media (max-width: 30rem) {
  .author-inner {
    column-gap: 1rem;
  }

  .author-photo {
    width: 5rem;
  }
}

/* Limits and provenance: a subordinate disclosure in the footer, open by default. */
.limits-wrap {
  margin-bottom: 1.5rem;
}

.limits-disclosure {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}

.limits-disclosure summary {
  min-height: 44px;
  padding-block: 0.625rem;
  color: var(--fg);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
}

.limits-disclosure .facts {
  margin-top: 0.5rem;
}

/* The trademark symbol is a small superscript that does not change the heading's line height. */
.tm {
  font-size: 0.45em;
  font-weight: 500;
  line-height: 0;
  vertical-align: super;
}

/* Inside a bold phrase the trademark sign takes the phrase's weight. */
strong .tm {
  font-weight: inherit;
}

/* Restruct SDLC section: text beside the supplied badge, on the shared navy band. */
.workflow-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 3rem;
}

.workflow-text {
  flex: 1 1 24rem;
  min-width: 0;
}

.workflow-badge {
  display: block;
  flex: none;
  width: 12rem;
  height: auto;
  margin-inline: auto;
}