/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
h6, .h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); }

/* Oversized display heading for hero banners */
.display {
  font-size: clamp(36px, 5.2vw, 62px);
  line-height: 1.1;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--color-heading);
}

p { margin: 0 0 var(--space-6); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-xl);
  line-height: 1.6;
  color: var(--color-body);
}
.text-small { font-size: var(--fs-base); line-height: var(--lh-snug); }
.text-xs    { font-size: var(--fs-xs);  line-height: var(--lh-snug); }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition);
}
a:hover { color: var(--color-primary-hover); }

/* Underline-on-hover link style */
.link-underline { text-decoration: underline; text-underline-offset: 3px; }

strong, b { font-weight: var(--fw-semibold); color: var(--color-heading); }
em, i, cite, dfn { font-style: italic; }
cite { font-weight: var(--fw-semibold); font-style: normal; }
small { font-size: var(--fs-xs); }
mark, ins {
  background: var(--color-accent-soft);
  color: var(--color-heading);
  text-decoration: none;
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
}
del { color: var(--color-meta); text-decoration: line-through; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

abbr[title] {
  border-bottom: 1px dotted var(--color-meta);
  cursor: help;
  text-decoration: none;
}

/* Lists */
ul, ol {
  margin-block: 0 var(--space-6);
  margin-inline: var(--space-5) 0;   /* the list indent sits on the start side */
  padding-inline-start: 0;
}
ul { list-style: disc; }
ol { list-style: decimal; }
li > ul, li > ol { margin-bottom: 0; padding-inline-start: var(--space-5); }
li { margin-bottom: var(--space-2); }

dl { margin: 0 0 var(--space-6); }
dt { font-weight: var(--fw-semibold); color: var(--color-heading); margin-bottom: var(--space-2); }
dd { margin: 0 0 var(--space-4); }

/* A tick-marked feature list */
.list-check { list-style: none; margin-inline: 0; }
.list-check li {
  position: relative;
  padding-inline-start: var(--space-7);
}
/* The tick is masked rather than drawn: the glyph is a shape and the colour is
   the deployment's, so a brand that is not green does not get a green tick.
   A hard-coded #1b8057 inside the data-URI is what this replaces. */
.list-check li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 0.55em;
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
}
.list-check li::after {
  content: "";
  position: absolute;
  inset-inline-start: 3.5px; top: calc(0.55em + 3.5px);
  width: 11px; height: 11px;
  background: var(--color-primary);
  -webkit-mask: center / contain no-repeat var(--tick-glyph);
  mask: center / contain no-repeat var(--tick-glyph);
}

blockquote {
  margin: 0 0 var(--space-6);
  padding: var(--space-6) var(--space-7);
  background: var(--color-surface-alt);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: var(--fs-xl);
  line-height: 1.6;
  color: var(--color-heading);
}
blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-base);
  color: var(--color-muted);
}
blockquote p:last-of-type { margin-bottom: 0; }

code, kbd, samp, pre, tt, var {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  padding: 0.15em 0.4em;
  background: var(--color-surface-alt);
  border-radius: var(--radius-xs);
  color: var(--color-heading);
}
pre {
  margin: 0 0 var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  overflow: auto;
  line-height: 1.6;
}
pre code { padding: 0; background: none; }
kbd {
  padding: 0.15em 0.45em;
  background: var(--color-inverse-surface);
  color: var(--color-inverse-heading);
  border-radius: var(--radius-xs);
  font-size: 0.8em;
}

/* --------------------------------------------------------------------------
   SECTION HEADING — the signature "eyebrow + title" pattern
   -------------------------------------------------------------------------- */
.section-head { margin-bottom: var(--space-8); }
.section-head--center { text-align: center; margin-inline: auto; max-width: 620px; }

.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.section-head__title { margin-bottom: var(--space-3); }
.section-head__text { margin-bottom: 0; color: var(--color-body); }

/* Title with a rule running to the edge of the row */
.section-head--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.section-head--inline .section-head__title { margin-bottom: 0; }