/* ============================================================
   MOS — Medtech Operating System
   Tokens mirror ../Brand/brand-guide.md. Do not invent values.
   ============================================================ */

:root {
  /* Palette — brand guide §8 */
  --navy:       #0B2D5B;
  --azure:      #2563EB;
  --teal:       #0FB8A9;
  --slate:      #64748B;
  --pale:       #E6F2FF;
  --soft-teal:  #D1F0EC;
  --off-white:  #F8FAFC;
  --white:      #FFFFFF;
  --border:     #D8E1EC;

  /* Roles */
  --bg:          var(--off-white);
  --surface:     var(--white);
  --ink:         var(--navy);
  --ink-muted:   var(--slate);
  --rule:        var(--border);
  --action:      var(--azure);

  /* Spacing — 8px base, §11 */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px;

  /* Radius — §11 */
  --r-control: 8px;
  --r-card:    12px;
  --r-panel:   20px;

  /* Motion — §11 */
  --t: 180ms cubic-bezier(0.2, 0, 0.2, 1);

  /* Type */
  --sans: "Inter", Arial, Helvetica, sans-serif;
  --mono: "IBM Plex Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace;

  --measure: 68ch;
  --indent: 0px;
  --gutter: 16px;
  --maxw: 1200px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5625 var(--sans);   /* 16/25 — §9 */
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Type scale — §9 ---------- */

h1, h2, h3 { margin: 0; text-wrap: balance; }

h1 { font-size: 2rem;    line-height: 1.1875; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem;  line-height: 1.25;   font-weight: 600; }
h3 { font-size: 1.125rem;line-height: 1.3333; font-weight: 600; }

@media (min-width: 900px) {
  h1 { font-size: 3rem;    line-height: 1.125; }  /* 48/54 */
  h2 { font-size: 2rem;    line-height: 1.1875; } /* 32/38 */
  h3 { font-size: 1.5rem;  line-height: 1.25; }   /* 24/30 */
}

p { margin: 0 0 var(--s2); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

/* Small all-caps system labels — §9 permits these for nav/metadata */
.label {
  font: 500 0.6875rem/1.4545 var(--mono);  /* 11/16 */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s2);
}

.lede {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 60ch;
}

.note {
  font-size: 0.8125rem;   /* 13/20 */
  line-height: 1.5385;
  color: var(--ink-muted);
  max-width: var(--measure);
}

.mono { font-family: var(--mono); font-size: 0.875em; }

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 900px)  { :root { --gutter: 64px; --indent: 4.5rem; } }
@media (min-width: 1360px) { :root { --gutter: 96px; } }

.section { padding-block: var(--s5); border-top: 1px solid var(--rule); }
.section:first-of-type { border-top: 0; }

@media (min-width: 900px) { .section { padding-block: var(--s7); } }

.section--tint { background: var(--white); }

/* Numbered section head: mono index + heading, the "controlled document" move.
   --indent keeps every section body aligned to the heading's left edge. */
.head {
  display: grid;
  gap: var(--s1) var(--s3);
  grid-template-columns: 1fr;
  margin-bottom: var(--s4);
}

@media (min-width: 900px) {
  .head { grid-template-columns: 3rem 1fr; align-items: baseline; }
}

.head__no {
  font: 500 0.6875rem/1.4545 var(--mono);
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  padding-top: 0.35em;
}

.head__sub { margin-top: var(--s2); color: var(--ink-muted); max-width: var(--measure); }

.section__body { padding-left: var(--indent); }
/* bare sub-headings inside a section body: headings carry no margin by default */
.section__body > h3 { margin-bottom: var(--s2); }

/* ---------- Skip link ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: var(--s1);
  background: var(--navy);
  color: var(--white);
  padding: var(--s1) var(--s2);
  border-radius: var(--r-control);
  z-index: 10;
}
.skip:focus { left: var(--s2); }

/* ---------- Masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 5;
}

.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 64px;
  flex-wrap: wrap;
  padding-block: var(--s1);
}

.masthead__logo { display: inline-flex; align-items: center; }
.masthead__logo img { display: block; width: 104px; height: auto; }

.nav { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

.nav a {
  font: 500 0.8125rem/1 var(--sans);
  color: var(--ink);
  text-decoration: none;
  padding: var(--s1) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t), color var(--t);
}
.nav a:hover { color: var(--action); border-bottom-color: var(--action); }
.nav a[aria-current="page"] { border-bottom-color: var(--navy); }

/* ---------- Hero ---------- */

.hero { padding-block: var(--s5) var(--s5); }
@media (min-width: 900px) { .hero { padding-block: var(--s7) var(--s6); } }

.hero h1 { max-width: 22ch; }
.hero .lede { margin-top: var(--s3); }

.hero__grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1040px) { .hero__grid { grid-template-columns: 1.35fr 1fr; gap: var(--s7); } }

/* Document header block — the "controlled document" signature */
.docmeta {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: var(--s3);
}
.docmeta dl { margin: 0; display: grid; grid-template-columns: 1fr; }
.docmeta div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--s2);
  padding: var(--s2) 0;
  border-top: 1px solid var(--rule);
}
.docmeta div:first-child { border-top: 0; padding-top: 0; }
.docmeta div:last-child { padding-bottom: 0; }
.docmeta dt {
  font: 500 0.6875rem/1.4545 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0.2em;
}
.docmeta dd { margin: 0; font-size: 0.875rem; line-height: 1.4286; }

.hero__meta {
  margin-top: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  align-items: center;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 44px;
  padding: 0 var(--s3);
  border-radius: var(--r-control);
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--white);
  font: 500 0.9375rem/1 var(--sans);
  text-decoration: none;
  transition: transform var(--t), background-color var(--t), border-color var(--t);
}
.btn:hover { background: #0e3a73; border-color: #0e3a73; }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn--ghost:hover { background: var(--pale); border-color: var(--navy); }

/* ---------- Rules / lists ---------- */

.stack > * + * { margin-top: var(--s3); }

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.points > li {
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}
.points > li:first-child { border-top: 0; padding-top: 0; }
.points h3 { margin-bottom: var(--s1); }
.points p { color: var(--ink-muted); margin: 0; }

@media (min-width: 900px) {
  .points { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .points > li {
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
    padding: var(--s3);
    max-width: none;
  }
  .points > li:first-child { padding-top: var(--s3); border-left: 0; }
}

/* Two-column definition grid (OS concept -> MOS equivalent) */
.defs { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.defs__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .defs__row { grid-template-columns: 11rem 1fr; gap: var(--s5); align-items: start; }
}
.defs__k {
  font: 500 0.6875rem/1.4545 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0.25em;
}
.defs__v { margin: 0; max-width: var(--measure); }
.defs__v strong { color: var(--ink); }

/* ---------- Cards ---------- */

.cards {
  display: grid;
  gap: var(--s2);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s3);
}
.card h3 { margin-bottom: var(--s1); }
.card p { color: var(--ink-muted); margin: 0; }
.card__no {
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  display: block;
  margin-bottom: var(--s2);
}

/* ---------- Status panel — the honesty block ---------- */

.status {
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--surface);
  overflow: hidden;
}
.status__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s2);
  align-items: center;
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--rule);
}
.status__row:first-child { border-top: 0; }
.status__name { margin: 0; font-weight: 500; }
.status__name span { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--ink-muted); }

.pill {
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px var(--s1);
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  white-space: nowrap;
}
/* Status never rides on colour alone — the word carries it. §8
   The ramp tracks maturity: in progress -> draft -> published. */
.pill--progress  { border-color: var(--rule); color: var(--slate); background: var(--white); }
.pill--drafted   { border-color: #A8CBFF; color: var(--azure); background: var(--pale); }
.pill--live      { border-color: var(--navy); color: var(--white); background: var(--navy); }

/* ---------- Lifecycle: phase flow ---------- */

.flow { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s1); }
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(7, 1fr); gap: 0; }
}

.flow__item {
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: var(--s2);
  min-height: 84px;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: var(--r-control);
}
@media (min-width: 900px) {
  .flow__item { border-radius: 0; margin-left: -1px; }
  .flow__item:first-child { margin-left: 0; border-top-left-radius: var(--r-control); border-bottom-left-radius: var(--r-control); }
  .flow__item:last-child  { border-top-right-radius: var(--r-control); border-bottom-right-radius: var(--r-control); }
}

.flow__no {
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}
.flow__name { font-weight: 600; font-size: 0.9375rem; line-height: 1.2667; }

.flowwrap { display: grid; grid-template-columns: 1fr; }

.loop { margin-top: var(--s2); }
.loop__bar { display: none; }
.loop p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5385;
  color: var(--ink-muted);
  max-width: var(--measure);
}
.loop p::before {
  content: "←";
  font-family: var(--sans);
  color: #0A766C;
  margin-right: 0.5em;
}

@media (min-width: 900px) {
  .flowwrap { grid-template-columns: repeat(7, 1fr); }
  .flowwrap .flow { grid-column: 1 / -1; }
  .loop {
    grid-column: 3 / 8;           /* Design (02) through Post-market (06) */
    margin-top: 0;
    position: relative;
  }
  .loop__bar {
    display: block;
    height: 22px;
    border: 1px solid var(--teal);
    border-top: 0;
    border-radius: 0 0 var(--r-control) var(--r-control);
  }
  /* arrowhead at the left end, pointing back toward Design */
  .loop__bar::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 15px;
    width: 7px; height: 7px;
    border-left: 1px solid var(--teal);
    border-bottom: 1px solid var(--teal);
    transform: rotate(45deg);
    transform-origin: center;
  }
  .loop p { margin-top: var(--s1); }
  .loop p::before { content: none; }
}

/* ---------- Lifecycle: the 7x4 matrix ---------- */

.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 860px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
}

.matrix caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--s2);
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.matrix th, .matrix td {
  text-align: left;
  vertical-align: top;
  padding: var(--s2);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.matrix thead th { border-top: 0; }
.matrix th:first-child, .matrix td:first-child { border-left: 0; }

.matrix thead th {
  background: var(--pale);
  font: 500 0.6875rem/1.4545 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}

.matrix tbody th {
  background: var(--off-white);
  width: 10.5rem;
}
.matrix__no {
  display: block;
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.matrix__phase { font-weight: 600; font-size: 0.9375rem; }

.matrix td {
  font-size: 0.875rem;
  line-height: 1.4286;
  color: var(--ink-muted);
  transition: background-color var(--t), color var(--t);
}
.matrix td:hover { background: var(--pale); color: var(--ink); }

/* Mobile: the matrix becomes stacked phase blocks */
@media (max-width: 719px) {
  .matrix-scroll { overflow: visible; }
  .matrix, .matrix tbody, .matrix tr, .matrix td, .matrix th { display: block; }
  .matrix { min-width: 0; }
  /* a caption inside a display:block table collapses to a sliver */
  .matrix caption { display: block; width: 100%; }
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .matrix tbody tr { border-top: 1px solid var(--rule); }
  .matrix tbody tr:first-child { border-top: 0; }
  .matrix tbody th { width: auto; border-left: 0; border-top: 0; }
  .matrix td { border-left: 0; padding-top: var(--s1); }
  .matrix td::before {
    content: attr(data-lane);
    display: block;
    font: 500 0.6875rem/1.4545 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 4px;
  }
}

/* ---------- Context tree ---------- */

.tree {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-card);
  padding: var(--s3);
  overflow-x: auto;
  margin: 0;
}
.tree code {
  font: 400 0.8125rem/1.6923 var(--mono);
  white-space: pre;
  color: var(--white);
}
.tree .c { color: #9FC0E8; }

/* ---------- Callout ---------- */

.callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--teal);
  border-radius: var(--r-control);
  background: var(--surface);
  padding: var(--s3);
}
.callout p { margin: 0; }
.callout .label { margin-bottom: var(--s1); }

/* ---------- Footer ---------- */

.foot {
  border-top: 1px solid var(--rule);
  background: var(--navy);
  color: var(--white);
  padding-block: var(--s5);
}
.foot a { color: var(--white); }
.foot__grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.2fr 1fr 1fr; } }

.foot img { width: 104px; height: auto; display: block; margin-bottom: var(--s2); }
.foot .label { color: #9FC0E8; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li + li { margin-top: var(--s1); }
.foot p { color: #C6D8EE; font-size: 0.8125rem; line-height: 1.5385; }
.foot .disclaimer {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,0.15);
  max-width: var(--measure);
}

/* ---------- Page-load reveal: one orchestrated moment ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(8px); animation: rise 220ms cubic-bezier(0.2,0,0.2,1) forwards; }
  .reveal:nth-child(1) { animation-delay: 0ms; }
  .reveal:nth-child(2) { animation-delay: 40ms; }
  .reveal:nth-child(3) { animation-delay: 80ms; }
  .reveal:nth-child(4) { animation-delay: 120ms; }
  .reveal:nth-child(5) { animation-delay: 160ms; }
  .reveal:nth-child(6) { animation-delay: 200ms; }
  .reveal:nth-child(7) { animation-delay: 240ms; }
}

@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Mechanism diagram (hero) ---------- */

.mech {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}

.mech__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  background: var(--pale);
  border-bottom: 1px solid var(--rule);
}
.mech__bar .label { margin: 0; color: var(--navy); }

.mech__cols { display: grid; grid-template-columns: 1fr; }

/* Vertical steps: the hero sidebar is far too narrow for three columns. */
.mech__col {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s2);
  align-items: baseline;
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--rule);
}
.mech__col:first-child { border-top: 0; }

.mech__k {
  font: 500 0.6875rem/1.4545 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  grid-row: 1 / span 2;
  padding-top: 0.25em;
}
.mech__t { font-weight: 600; font-size: 0.9375rem; grid-column: 2; margin-bottom: 4px; }
.mech__d { font-size: 0.8125rem; line-height: 1.5385; color: var(--ink-muted); margin: 0; grid-column: 2; }

/* ---------- Phase tabs ---------- */

.phases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
/* 7 tabs in 2 columns leaves a half-empty last row */
.phases .phase:last-child { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .phases { grid-template-columns: repeat(7, 1fr); }
  .phases .phase:last-child { grid-column: auto; }
}

.phase {
  appearance: none;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  padding: var(--s2);
  min-height: 72px;
  margin: -1px 0 0 -1px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.phase:hover { background: var(--pale); }
.phase__no { font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.1em; color: var(--ink-muted); }
.phase__name { font-weight: 600; font-size: 0.9375rem; line-height: 1.2667; }

.phase[aria-selected="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  position: relative;
  z-index: 1;
}
.phase[aria-selected="true"] .phase__no { color: #9FC0E8; }

.phasepanel {
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: var(--surface);
  padding: var(--s3);
}
.phasepanel__lanes { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .phasepanel__lanes { grid-template-columns: repeat(4, 1fr); gap: var(--s4); } }
.phasepanel__lane p { margin: 0; font-size: 0.875rem; line-height: 1.4286; color: var(--ink-muted); }
.phasepanel__lane .label { margin-bottom: 6px; color: var(--navy); }

/* Without JS every phase panel simply stacks and stays readable */
.phasepanel[hidden] { display: none; }


/* ---------- Work rows with discipline tags ---------- */

.rows { display: grid; }
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1) var(--s3);
  padding: var(--s2) 0;
  border-top: 1px solid var(--rule);
}
.row:first-child { border-top: 0; }
@media (min-width: 720px) {
  .row { grid-template-columns: 1fr auto; align-items: start; }
}
.row__t { margin: 0; font-size: 0.9375rem; line-height: 1.4667; color: var(--ink); max-width: 56ch; }

/* Lane colours. Brand guide 8 leaves the lifecycle lanes uncoloured in v2.0
   and 17 item 11 lists an approved palette as an open item, so these are
   interim values defined locally, which is what the guide asks for. Technical
   and Clinical use brand colours outright — 8 already calls teal "clinical
   connection". The other four are muted tints in the same register.

   Colour never carries a lane on its own: every chip prints its word, and the
   six disciplines on the lifecycle page name each colour in text. Chip text is
   Indigo Navy throughout, 10.9:1 or better on all six tints. */
[data-lane="technical"]     { --lane-bg: #E6F2FF; --lane-line: #A9CDF2; }
[data-lane="clinical"]      { --lane-bg: #D1F0EC; --lane-line: #8FD6CC; }
[data-lane="regulatory"]    { --lane-bg: #E7E4FB; --lane-line: #BFB6EE; }
[data-lane="quality"]       { --lane-bg: #EDF1F6; --lane-line: #C6D0DD; }
[data-lane="manufacturing"] { --lane-bg: #FBEEDA; --lane-line: #E6C89B; }
[data-lane="commercial"]    { --lane-bg: #FBE6EE; --lane-line: #EFBDD1; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--lane-bg, var(--white));
  border: 1px solid var(--lane-line, var(--rule));
  border-radius: 999px;
  padding: 5px var(--s1);
  white-space: nowrap;
}
@media (min-width: 720px) { .tags { justify-content: flex-end; } }

/* ---------- Nav call to action ---------- */

.nav .nav__cta {
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-control);
  padding: 10px var(--s2);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: background-color var(--t), border-color var(--t), transform var(--t);
}
.nav .nav__cta:hover { background: #0e3a73; border-color: #0e3a73; color: var(--white); }
.nav .nav__cta:active { transform: translateY(1px); }

/* ---------- Truncated rows ---------- */

.row--action {
  display: flex;
  align-items: center;
  gap: var(--s2) var(--s3);
  flex-wrap: wrap;
  padding: var(--s3) 0 var(--s1);
  border-top: 1px solid var(--rule);
}
.row--action p { margin: 0; font-size: 0.8125rem; color: var(--ink-muted); }

/* ---------- Discipline cards ---------- */

.disc { border-top: 1px solid var(--rule); }
/* The discipline list doubles as the colour key, so each row shows its chip. */
.disc__name { position: relative; padding-left: 20px; }
.disc__name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--lane-bg, var(--white));
  border: 1px solid var(--lane-line, var(--rule));
}
.disc__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1) var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) { .disc__row { grid-template-columns: 11rem 1fr; } }
.disc__name {
  font: 500 0.6875rem/1.4545 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
  padding-top: 0.25em;
}
/* Each row leads with the question the domain answers; the keywords follow. */
.disc__q { margin: 0 0 4px; font-weight: 600; font-size: 0.9375rem; line-height: 1.3333; color: var(--navy); }
.disc__d { margin: 0; color: var(--ink-muted); max-width: var(--measure); }

/* ---------- The three parts (how it works, 01) ---------- */

.triad { display: grid; gap: var(--s3); }

.triad__parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}

.triad__part {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
}

.triad__k {
  font: 500 0.6875rem/1.4545 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.triad__t { font-size: 1.125rem; line-height: 1.3333; }
.triad__d { margin: 0; color: var(--ink-muted); max-width: none; }
/* tags sit on the panel floor, so they line up across all three */
.triad__part .tags { justify-content: flex-start; margin-top: auto; padding-top: var(--s2); }

/* Operators: 01 plus 02, both read by 03. Stacked, they sit under each panel;
   in the row layout they move into the column gap. */
.triad__part::after {
  content: "";
  position: absolute;
  display: grid;
  place-items: center;
  font: 400 1.125rem/1 var(--sans);
  color: var(--ink-muted);
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--s4));
  height: var(--s4);
}

.triad__part:nth-child(1)::after { content: "+"; }
.triad__part:nth-child(2)::after { content: "\2193"; }
.triad__part:nth-child(3)::after { display: none; }

/* The return path: what you approve goes back into 01. Only drawable when the
   three sit side by side, and the copy below carries it either way. */
.triad__loop { display: none; }

.triad__out {
  background: var(--pale);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s3);
}
/* Slate on Pale Blue is 4.19:1 — large text only (brand guide 8) */
.triad__out .label { color: var(--navy); margin-bottom: var(--s1); }
.triad__out p:last-child { margin: 0; max-width: none; }

@media (min-width: 900px) {
  .triad__parts { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .triad__part:nth-child(2)::after { content: "\2192"; }
  /* the panels stretch to a common height, so top:0/bottom:0 centres the
     operator against the pair it sits between */
  .triad__part::after {
    left: 100%;
    right: auto;
    top: 0;
    bottom: 0;
    width: var(--s5);
    height: auto;
  }

  .triad__loop {
    display: block;
    position: relative;
    height: 22px;
    margin-top: calc(-1 * var(--s3));   /* meet the panels it connects */
    /* centred on the first and third columns: each is (100% - 2 gutters) / 3 */
    margin-inline: calc((100% - 2 * var(--s5)) / 6);
    border: 1px solid var(--teal);
    border-top: 0;
    border-radius: 0 0 var(--r-control) var(--r-control);
  }
  /* the line says what it carries; the strip below repeats it in prose */
  .triad__loop-t {
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    background: var(--bg);
    padding-inline: var(--s1);
    font: 500 0.6875rem/1.4545 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
  }

  /* arrowhead at the left end, pointing back up into 01 */
  .triad__loop::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--teal);
    border-left: 1px solid var(--teal);
    transform: rotate(45deg);
  }
}

/* ---------- Stepwise sequence (how it works, 02) ---------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; }

.step {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--s2);
  padding-bottom: var(--s4);
}
.step:last-child { padding-bottom: 0; }

@media (min-width: 720px) { .step { column-gap: var(--s3); } }

/* The rail: a numbered chip with a rule running down to the next one. */
.step__rail { position: relative; }

.step__k {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-control);
  background: var(--navy);
  color: var(--white);
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.step:not(:last-child) .step__rail::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(40px + var(--s1));
  bottom: calc(-1 * (var(--s4) - var(--s1)));
  width: 1px;
  background: var(--rule);
}

.step__body { max-width: var(--measure); }
.step__body h3 { margin-bottom: var(--s1); padding-top: 4px; }
.step__body p { color: var(--ink-muted); }
.step__body .note { margin-top: var(--s2); max-width: none; }

/* The outcome line: what the reader has once the step is done. */
.step__end {
  margin: var(--s2) 0 0;
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.4667;
}
.step__end-k {
  font: 500 0.6875rem/1.4545 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-right: var(--s1);
}