/* airapac.org mockup v2 - page components.

   site.css holds the home page: header, hero field, bands, carousel, bands, footer.
   This file holds the components the interior pages need (Academy, Insights, report
   pages). It is loaded only by those pages, so the home page is untouched.

   Same rules as site.css: mobile first, tiers at 768, 1024 and 1440, no clamp() on
   type, tokens only from :root in site.css, one serif for headings at weight 300,
   Inter for body, JetBrains Mono for eyebrows and labels. No external requests. */

/* ------------------------------------------------------------------- grounds */
.section {
  padding: var(--section-pad-y) var(--page-margin);
  background: var(--white);
  color: var(--ink);
}
.section--pale { background: var(--blue-100); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--blue-800); color: var(--white); }
.section--tight { padding-top: 0; }
.section-inner { max-width: var(--max-content-width); margin: 0 auto; }
.section-inner--narrow { max-width: 760px; }

.section-head { margin-bottom: 24px; }
.section-head h2 { margin: 8px 0 8px; }
.section-head .description { max-width: 62ch; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: var(--font-weight-headings); }
h1 { font-size: 38px; line-height: 108%; margin: 0 0 16px; }
h2 { font-size: 28px; line-height: 112%; margin: 0 0 12px; }
h3 { font-size: 21px; line-height: 118%; margin: 0 0 8px; }
h4 { font-size: 18px; line-height: 122%; margin: 0 0 6px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- page opening */
.page-hero {
  padding: calc(var(--section-pad-y) + 24px) var(--page-margin) var(--section-pad-y);
  background: var(--blue-100);
  color: var(--ink);
}
.page-hero--dark { background: var(--blue-800); color: var(--white); }
.page-hero-inner { max-width: var(--max-content-width); margin: 0 auto; }
.page-hero-inner--narrow { max-width: 820px; }

.crumbs {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--blue-700);
}
.page-hero--dark .crumbs { color: var(--blue-200); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--muted); margin: 0 8px; }

.page-title { font-size: 40px; line-height: 106%; margin: 10px 0 14px; max-width: 20ch; }
.page-standfirst { font-size: 18px; line-height: 150%; max-width: 66ch; color: #2c3540; }
.page-hero--dark .page-standfirst { color: #dbe9f4; }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* A quiet status line for anything not yet true: "not recorded", "to be published". */
.status-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-700);
  background: var(--white);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-70, 70px);
  padding: 6px 12px;
  margin-bottom: 16px;
}
.status-line--quiet { color: var(--muted); border-color: var(--gray-300); }

/* ------------------------------------------------------------------- prose */
.prose { max-width: 68ch; font-size: 17px; line-height: 160%; }
.prose h2 { margin: 36px 0 12px; }
.prose h3 { margin: 28px 0 10px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--blue-700); }
.lede { font-size: 19px; line-height: 155%; }

/* ------------------------------------------------------------------ callouts */
.callout {
  border: 1px solid var(--gray-300);
  border-left: 4px solid var(--blue-500);
  border-radius: var(--radius-10);
  background: var(--white);
  padding: 20px;
  margin: 24px 0;
}
.callout > h3, .callout > h4 { margin-top: 0; }
.callout--basis { border-left-color: var(--blue-700); }
.callout--noclaim { border-left-color: var(--blue-200); background: var(--paper); }
.callout--status { border-left-color: var(--muted); background: var(--gray-200); }
.callout dl { margin: 0; }
.callout dt {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-top: 12px;
}
.callout dt:first-of-type { margin-top: 0; }
.callout dd { margin: 4px 0 0; font-size: 16px; line-height: 150%; }

/* --------------------------------------------------------------- fact blocks */
.fact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--gray-300);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-10);
  overflow: hidden;
  margin: 24px 0;
}
.fact { background: var(--white); padding: 16px 18px; }
.fact-label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: 6px;
}
.fact-value { font-size: 17px; line-height: 140%; }

/* ------------------------------------------------------------------- steps */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--gray-300);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-700);
  padding-top: 3px;
}

/* ------------------------------------------------------------- outcome lists */
.outcome-list { list-style: none; margin: 0 0 20px; padding: 0; }
.outcome-list li {
  position: relative;
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid var(--gray-300);
  font-size: 17px;
  line-height: 150%;
}
.outcome-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue-200);
}

/* ------------------------------------------------------------------- tables */
.table-scroll { overflow-x: auto; margin: 24px 0; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 145%;
  background: var(--white);
}
table.data caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-700);
  padding-bottom: 10px;
}
table.data th, table.data td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-300);
}
table.data thead th {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-800);
  border-bottom: 2px solid var(--blue-800);
}
table.data tbody tr:nth-child(even) { background: #fbfcfd; }
table.data td:first-child { font-weight: 700; white-space: nowrap; }

/* --------------------------------------------------------------------- FAQ */
.faq { margin: 24px 0; border-top: 1px solid var(--gray-300); }
.faq details { border-bottom: 1px solid var(--gray-300); }
.faq summary {
  cursor: pointer;
  padding: 16px 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 130%;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; font-family: var(--mono); color: var(--blue-700); }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-body { padding: 0 0 18px; max-width: 68ch; }

/* ---------------------------------------------------------- cards and grids */
.grid-2, .grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 24px 0;
}
.panel {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-15);
  padding: 22px;
}
.panel--pale { background: var(--blue-100); border-color: transparent; }
.panel--dark { background: var(--blue-800); color: var(--white); border-color: transparent; }
.panel h3, .panel h4 { margin-top: 0; }
.panel .eyebrow { color: var(--blue-700); margin-bottom: 8px; }
.panel--dark .eyebrow { color: var(--blue-200); }

.price-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 12px;
}
.price { font-family: var(--serif); font-size: 26px; }
.price-note { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

/* ------------------------------------------------------------------ notices */
.notice {
  border: 1px dashed var(--blue-400);
  border-radius: var(--radius-15);
  background: var(--blue-100);
  padding: 22px;
  margin: 24px 0;
}
.notice h3 { margin-top: 0; }

/* --------------------------------------------------------------- filter bar */
.filterbar { margin: 0 0 8px; }
.filter-group { margin-bottom: 14px; }
.filter-label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: 8px;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  appearance: none;
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-70, 70px);
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 100%;
  cursor: pointer;
}
.filter-chip:hover { background: var(--gray-200); }
.filter-chip[aria-pressed="true"] {
  background: var(--blue-800);
  border-color: var(--blue-800);
  color: var(--white);
}
.filter-count {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------- publication rows */
.pub-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gray-300); }
.pub-item { border-bottom: 1px solid var(--gray-300); padding: 22px 0; }
.pub-item[hidden] { display: none; }
.pub-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pub-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.pub-format {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue-800);
  border: 1px solid var(--blue-800);
  border-radius: var(--radius-5);
  padding: 3px 7px;
}
.pub-date {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.pub-title { font-size: 24px; line-height: 120%; margin: 0 0 8px; max-width: 34ch; }
.pub-title a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--blue-200); }
.pub-title a:hover { border-bottom-color: var(--blue-700); }
.pub-dek { max-width: 62ch; margin: 0 0 12px; }
.pub-artefact {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--blue-700);
}
.pub-artefact a { color: inherit; }
.pub-children { margin: 12px 0 0; padding: 0 0 0 18px; font-size: 15px; line-height: 160%; }
.pub-children li { margin-bottom: 4px; }
.lang-switch {
  display: inline-flex;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lang-switch a { color: var(--blue-700); }

/* ---------------------------------------------------------------- downloads */
.download-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.download-card {
  flex: 1 1 240px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-10);
  background: var(--white);
  padding: 16px 18px;
}
.download-card .eyebrow { color: var(--blue-700); margin-bottom: 6px; }
.download-card a { color: var(--blue-800); font-weight: 700; text-decoration: none; }
.download-card a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ figures */
.figure-wide { margin: 24px 0; }
.figure-wide img { width: 100%; height: auto; border-radius: var(--radius-10); }
.figure-wide figcaption {
  font-size: 14px;
  line-height: 150%;
  color: #3c4652;
  margin-top: 10px;
  max-width: 68ch;
}

/* --------------------------------------------------------------- byline/CTA */
.byline-block {
  border-top: 1px solid var(--gray-300);
  margin-top: 32px;
  padding-top: 20px;
  max-width: 68ch;
  font-size: 16px;
  line-height: 155%;
}
.byline-block .eyebrow { color: var(--blue-700); margin-bottom: 8px; }
.enquiry-strip {
  display: grid;
  gap: 16px;
  background: var(--blue-800);
  color: var(--white);
  border-radius: var(--radius-20);
  padding: 26px;
  margin: 32px 0 0;
}
.enquiry-strip h3 { color: var(--white); margin: 0; }

/* ------------------------------------------------------------------ tiers */
@media (min-width: 768px) {
  h1 { font-size: 46px; }
  h2 { font-size: 32px; }
  .page-title { font-size: 50px; }
  .page-standfirst { font-size: 19px; }
  .section { padding: calc(var(--section-pad-y) * 1.5) var(--page-margin); }
  .fact-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .enquiry-strip { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .section-head { margin-bottom: 32px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 54px; }
  h2 { font-size: 36px; }
  .page-title { font-size: 58px; }
  .fact-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .pub-title { font-size: 26px; }
  .page-hero { padding-top: calc(var(--section-pad-y) * 2); }
}
@media (min-width: 1440px) {
  :root { --max-content-width: 1320px; }
  h1 { font-size: 58px; }
}
@media print {
  .filterbar, .page-actions, .enquiry-strip { display: none; }
}

/* ------------------------------------------------- Index result components */
/* Added for the market, sector and organisation pages generated from the
   Index data. Same tokens, same tiers, nothing else changed. */

.stat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--gray-300);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-10);
  overflow: hidden;
  margin: 24px 0;
}
.stat { background: var(--white); padding: 18px; }
.stat-value {
  display: block;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 108%;
  color: var(--blue-800);
  margin-bottom: 6px;
}
.stat-label { display: block; font-size: 14px; line-height: 145%; color: #3c4652; }

.chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 24px 0;
}
.chart-card {
  margin: 0;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-10);
  background: var(--white);
  padding: 16px;
}
.chart-card img { width: 100%; height: auto; display: block; }
.chart-card figcaption {
  font-size: 13px;
  line-height: 150%;
  color: #3c4652;
  margin-top: 12px;
  border-top: 1px solid var(--gray-300);
  padding-top: 10px;
}

.tier-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 12px 0 8px; }
.tier-seg { display: block; height: 100%; }
.tier-seg--pacesetter { background: var(--blue-800); }
.tier-seg--momentum { background: var(--blue-500); }
.tier-seg--emerging { background: var(--blue-200); }
.tier-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; margin-bottom: 8px; }
.tier-legend span { display: inline-flex; align-items: center; gap: 7px; }
.tier-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* The number in the first column of a published table is the order an organisation
   holds in the published list for that edition. It is not a rank. */
.order-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-800);
  border: 1px solid var(--blue-800);
  border-radius: var(--radius-5);
  padding: 3px 7px;
  margin-right: 8px;
}

.dir-list { columns: 1; column-gap: 32px; font-size: 15px; line-height: 175%; margin: 16px 0; }
.dir-list a { color: var(--blue-700); text-decoration: none; }
.dir-list a:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .chart-grid { grid-template-columns: repeat(2, 1fr); }
  .dir-list { columns: 2; }
}
@media (min-width: 1024px) {
  .chart-grid--three { grid-template-columns: repeat(3, 1fr); }
  .dir-list { columns: 3; }
}

/* Header clearance, in one place. The header is fixed, so a page hero needs to
   start below it. Appended last so it wins over the base .page-hero rule above. */
html { scroll-padding-top: 132px; }
.page-hero { padding-top: 112px; }
@media (min-width: 768px) { .page-hero { padding-top: 128px; } }
@media (min-width: 1024px) { .page-hero { padding-top: 152px; } }

/* ------------------------------------------------------- ported Standard routes
   Round 3 (owner ruling, 2026-10-08) ported the 15 /standard/ routes that the redesign
   had been leaving on their live URLs. tools/build-standard.py lifts the live text and
   keeps a small set of structural class names; the masthead, hero, contents rail and
   footer are the redesign's. These rules style those blocks. The four governing
   documents (AIRS-J/1 v1.0, v1.1, v2.0 and the StepSim specification) keep their own
   text and punctuation; the page around them is this one. */

.std-designation {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin: 0 0 16px;
}
.page-note { font-size: 17px; line-height: 155%; max-width: 66ch; color: #2c3540; margin: 0 0 14px; }
.page-note a { color: var(--blue-700); }
.std-status {
  font-size: 16px;
  line-height: 155%;
  max-width: 66ch;
  border-left: 3px solid var(--blue-500);
  padding-left: 14px;
  margin: 20px 0 16px;
  color: #2c3540;
}
.std-status a { color: var(--blue-700); }
.status-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-700);
  background: var(--white);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-70);
  padding: 4px 10px;
  margin-right: 10px;
}
.status-chip-dot { display: none; }

.std-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 32px;
  margin: 24px 0 0;
  max-width: 66ch;
}
.std-meta div { border-top: 1px solid var(--gray-300); padding-top: 8px; }
.std-meta dt {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.std-meta dd { margin: 4px 0 0; font-size: 15px; line-height: 150%; }

.prose--wide { max-width: none; }
.narrow { max-width: 820px; }

/* the contents rail, and the document beside it */
.std-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }
.std-toc { font-size: 14px; }
.std-toc ul { list-style: none; margin: 8px 0 16px; padding: 0; }
.std-toc li { margin-bottom: 6px; line-height: 140%; }
.std-toc a { color: var(--ink); text-decoration: none; }
.std-toc a:hover { color: var(--blue-700); text-decoration: underline; }
.std-toc-foot {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.std-toc-foot a { color: var(--blue-700); text-decoration: none; }

.std-doc { max-width: 78ch; font-size: 16.5px; line-height: 165%; min-width: 0; }
.std-doc h2, .std-doc h3, .std-doc h4 { scroll-margin-top: 140px; }
.std-doc h2 { font-size: 26px; margin: 44px 0 14px; padding-top: 20px; border-top: 1px solid var(--gray-300); }
.std-doc h2.std-doc-title { border-top: 0; padding-top: 0; margin-top: 0; font-size: 30px; }
.std-doc h3 { font-size: 21px; margin: 32px 0 10px; }
.std-doc h4 { font-size: 18px; margin: 24px 0 8px; }
.std-doc p { margin: 0 0 14px; }
.std-doc ul, .std-doc ol { margin: 0 0 16px; padding-left: 22px; }
.std-doc li { margin-bottom: 8px; }
.std-doc a { color: var(--blue-700); }
.std-doc code {
  font-family: var(--mono);
  font-size: 13.5px;
  background: var(--blue-100);
  padding: 1px 5px;
  border-radius: var(--radius-5);
}
.std-doc hr { border: 0; border-top: 1px solid var(--gray-200); margin: 32px 0; }
.std-doc-footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-300);
  font-size: 13.5px;
  line-height: 150%;
  color: var(--muted);
}
.clause-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blue-700);
  margin-right: 8px;
}
.clause-permalink {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.55;
}
.clause-permalink:hover { opacity: 1; color: var(--blue-700); }

.std-table-wrap { overflow-x: auto; margin: 0 0 24px; }
.std-doc table, .prose--wide table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 145%; }
.std-doc th, .std-doc td, .prose--wide th, .prose--wide td {
  border: 1px solid var(--gray-300);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.std-doc thead th, .prose--wide thead th {
  background: var(--blue-100);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* numbered clause and phase blocks, ported from the live pages */
.std-phase-list { display: grid; gap: 14px; margin: 0 0 24px; padding: 0; list-style: none; }
.std-phase {
  border: 1px solid var(--gray-300);
  border-left: 3px solid var(--blue-500);
  border-radius: var(--radius-10);
  padding: 14px 16px;
  background: var(--white);
}
.std-phase h3, .std-phase h4 { margin: 0 0 6px; }
.std-phase-gate { margin: 0; }
.std-phase-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.std-doc-verbatim {
  border-left: 3px solid var(--blue-200);
  padding-left: 16px;
  margin: 0 0 24px;
  color: #2c3540;
}
.pillar-claim {
  font-size: 19px;
  line-height: 150%;
  border-top: 1px solid var(--gray-300);
  padding-top: 16px;
  margin: 0 0 20px;
}
.strip-note, .guardrail-note, .std-table-note {
  font-size: 14.5px;
  line-height: 150%;
  color: var(--muted);
  border-left: 3px solid var(--blue-200);
  padding-left: 12px;
  margin: 0 0 20px;
}
.strip-note a, .guardrail-note a, .std-table-note a { color: var(--blue-700); }

/* the nine dimensions */
.step-domain-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0 0 24px; }
.step-domain-card {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-10);
  padding: 18px;
  background: var(--white);
}
.step-dimension-list { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.step-dimension { border-top: 1px solid var(--gray-200); padding-top: 10px; }
.step-dimension p { margin: 0; font-size: 15px; }

/* intake routes, ported with their fields. The live route submits to the service; a
   static page cannot, so the fields are here and the endpoint is the live one. */
.std-intake { display: grid; gap: 16px; margin: 0 0 20px; }
.std-intake-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.std-intake-wide { grid-column: 1 / -1; }
.std-intake label { display: block; font-size: 15px; line-height: 150%; }
.std-intake input[type="text"], .std-intake input[type="email"], .std-intake input[type="tel"],
.std-intake textarea, .std-intake select {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-5);
  background: var(--white);
  color: var(--ink);
}
.std-intake-checkbox { display: flex; gap: 10px; align-items: flex-start; }
.std-intake-checkbox input { margin-top: 4px; }
.button-primary {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  background: var(--blue-700);
  border: 0;
  border-radius: var(--radius-70);
  padding: 12px 22px;
  cursor: pointer;
}
.button-primary:hover { background: var(--blue-800); }

@media (min-width: 768px) {
  .std-meta { grid-template-columns: 1fr 1fr; }
  .step-domain-grid { grid-template-columns: 1fr 1fr; }
  .std-intake-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .std-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
  .std-toc { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; }
}