/* =========================================================
   GM Alternative Provision Ltd — Shared stylesheet
   Design tokens, base styles, and shared components.
   Mobile-first. Loaded on every page.
   ========================================================= */

:root {
  /* Brand colour tokens */
  --color-blue: #2547B8;
  --color-blue-hover: #1B3690;
  --color-blue-light: #6E9CF0;
  --color-grey-dark: #3A4250;
  --color-grey-mid: #5B6472;
  --color-grey-border: #D7DCE5;
  --color-border-interactive: #8891A0;
  --color-grey-light: #EEF1F5;
  --color-white: #FFFFFF;

  /* Semantic tokens */
  --color-text: var(--color-grey-dark);
  --color-text-muted: var(--color-grey-mid);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-grey-light);
  --color-link: var(--color-blue);
  --color-focus: #1B3690;
  --color-error: #B3261E;
  --color-error-bg: #FBEAE9;

  /* Typography */
  --font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --container-max: 1200px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(58, 66, 80, 0.08), 0 1px 2px rgba(58, 66, 80, 0.06);
  --shadow-md: 0 6px 20px rgba(58, 66, 80, 0.10);
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* =========================================================
   Reset
   ========================================================= */

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

* {
  margin: 0;
}

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

body {
  min-height: 100vh;
  overflow-x: hidden;
}

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

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

button {
  cursor: pointer;
}

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

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Base typography
   ========================================================= */

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-grey-dark);
}

h1 {
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.05rem;
}

p {
  max-width: 68ch;
}

p + p {
  margin-top: var(--space-4);
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-blue-hover);
}

strong {
  font-weight: 600;
}

/* =========================================================
   Accessibility helpers
   ========================================================= */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--space-4);
  z-index: 1000;
  background: var(--color-blue);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

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

/* =========================================================
   Layout
   ========================================================= */

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

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

.section-alt {
  background-color: var(--color-bg-alt);
}

.section-heading {
  max-width: 44rem;
  margin-bottom: var(--space-6);
}

.section-heading p {
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--space-3);
}

.eyebrow--on-dark {
  color: #C9D6FA;
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--align-center {
  align-items: center;
}

@media (min-width: 900px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast);
  min-height: 44px;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover {
    transform: none;
  }
}

.btn-primary {
  background-color: var(--color-blue);
  color: var(--color-white);
  border-color: var(--color-blue);
}

.btn-primary:hover {
  background-color: var(--color-blue-hover);
  border-color: var(--color-blue-hover);
  color: var(--color-white);
}

.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-blue);
  border-color: var(--color-blue);
}

.btn-secondary:hover {
  background-color: var(--color-grey-light);
  color: var(--color-blue-hover);
  border-color: var(--color-blue-hover);
}

.btn-on-dark {
  background-color: var(--color-white);
  color: var(--color-blue);
  border-color: var(--color-white);
}

.btn-on-dark:hover {
  background-color: var(--color-grey-light);
  color: var(--color-blue-hover);
}

.btn-on-dark.btn-outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-on-dark.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* =========================================================
   Header & navigation
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-grey-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.logo {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  max-width: 11rem;
  text-decoration: none;
  line-height: 1.15;
}

.logo:hover {
  color: inherit;
}

.logo__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-grey-dark);
}

.logo__name span {
  color: var(--color-blue);
}

.logo__tagline {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

@media (min-width: 480px) {
  .logo {
    max-width: 14rem;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 2px solid var(--color-border-interactive);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.9rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-grey-dark);
  min-height: 44px;
}

.nav-toggle:hover {
  border-color: var(--color-blue);
}

.nav-toggle__icon {
  position: relative;
  width: 20px;
  height: 2px;
  background: var(--color-grey-dark);
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--color-grey-dark);
  transition: transform var(--transition-fast);
}

.nav-toggle__icon::before {
  top: -6px;
}

.nav-toggle__icon::after {
  top: 6px;
}

.primary-nav {
  display: none;
}

.primary-nav.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-grey-border);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.primary-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.primary-nav__list a {
  display: block;
  padding: 0.75rem 0.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-grey-dark);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.primary-nav__list a:hover {
  background-color: var(--color-grey-light);
  color: var(--color-blue);
}

.primary-nav__list a[aria-current="page"] {
  color: var(--color-blue);
  background-color: var(--color-grey-light);
}

.primary-nav .header-cta {
  margin-top: var(--space-4);
  width: 100%;
}

/* Nine nav items plus the header CTA need real room to sit on one
   line. At 1440px, even with every reasonable tightening applied,
   the row is still ~49px short -- closing that gap would mean nav
   padding tight enough to feel cramped, so 1440px keeps the toggle
   menu. 1600px has enough width to earn full horizontal nav with
   only modest spacing adjustments (verified: at 1600px the original,
   untightened spacing overflows by 94px; this tightened version
   fits with room to spare). */
@media (min-width: 1600px) {
  .site-header__inner {
    max-width: 1900px;
  }

  .nav-toggle {
    display: none;
  }

  .primary-nav {
    display: block;
  }

  .primary-nav.is-open,
  .primary-nav {
    position: static;
    border-bottom: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }

  .primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 0.15rem;
  }

  .primary-nav__list a {
    padding: 0.55rem 0.55rem;
    font-size: 0.88rem;
    white-space: nowrap;
  }

  .primary-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .primary-nav .header-cta {
    margin-top: 0;
    width: auto;
    padding: 0.65rem 1.1rem;
    font-size: 0.88rem;
    white-space: nowrap;
  }
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  background: linear-gradient(135deg, var(--color-blue) 0%, #1d3a94 100%);
  color: var(--color-white);
  padding-block: var(--space-8) var(--space-9);
}

.hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero__mission {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: var(--space-4);
  /* The global h1 rule sets a dark colour for light backgrounds; this
     heading sits on the blue hero and must stay white to stay legible. */
  color: var(--color-white);
}

.hero__tagline {
  font-size: 1.15rem;
  font-weight: 500;
  color: #E4EAFC;
  margin-bottom: var(--space-6);
}

.hero p {
  max-width: 46ch;
}

.hero__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, #6E9CF0 0%, #2547B8 60%, #17307A 100%);
  position: relative;
  box-shadow: var(--shadow-md);
}

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

/* =========================================================
   Page header (non-home pages)
   ========================================================= */

.page-header {
  background-color: var(--color-blue);
  color: var(--color-white);
  padding-block: var(--space-7);
}

.page-header h1 {
  /* Same override as .hero__mission: the global h1 rule is dark by
     default and would otherwise win over this blue background. */
  color: var(--color-white);
}

.page-header p {
  color: #E4EAFC;
  max-width: 52ch;
}

.breadcrumb {
  font-size: 0.85rem;
  margin-bottom: var(--space-3);
}

.breadcrumb a {
  color: #E4EAFC;
}

.breadcrumb span {
  color: rgba(255, 255, 255, 0.7);
}

/* =========================================================
   Cards
   ========================================================= */

.card {
  background: var(--color-white);
  border: 1px solid var(--color-grey-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  height: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .card:hover {
    transform: none;
  }
}

.card h2,
.card h3 {
  margin-bottom: var(--space-3);
}

.card h2 {
  font-size: 1.25rem;
}

.card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  color: var(--color-blue);
}

.card--muted {
  background-color: var(--color-bg-alt);
  border-color: var(--color-grey-border);
}

/* A quieter way to signal "this content is the credible, official
   one" than a whole new card style -- used sparingly, not on every
   card, so it still reads as a deliberate signal rather than decor. */
.card--accent {
  border-top: 3px solid var(--color-blue);
}

/* =========================================================
   TO CONFIRM WITH GM flag
   ========================================================= */

.to-confirm {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-grey-dark);
  background-color: var(--color-grey-light);
  border: 1px dashed var(--color-grey-mid);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

.to-confirm-block {
  border: 1px dashed var(--color-grey-mid);
  background-color: var(--color-grey-light);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: 0.95rem;
  color: var(--color-text);
}

.to-confirm-block strong {
  color: var(--color-grey-dark);
}

/* =========================================================
   Process steps (referral journey)
   ========================================================= */

.steps {
  display: grid;
  gap: var(--space-5);
  counter-reset: step;
}

@media (min-width: 720px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Modifier for step sequences with a step count that tiles evenly into
   3 columns (not 4) -- avoids a lone orphan step in the last row on wide
   screens. Used by the 9-step referral journey on the Schools &
   Commissioners page. */
@media (min-width: 1100px) {
  .steps--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-grey-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: var(--space-3);
}

.step h3 {
  font-size: 1rem;
  margin-bottom: var(--space-2);
}

.step p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* =========================================================
   Lists with check icons
   ========================================================= */

.check-list {
  display: grid;
  gap: var(--space-3);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.check-list li svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  color: var(--color-blue);
}

/* =========================================================
   Stat / area chips
   ========================================================= */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.chip-list--center {
  justify-content: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-grey-border);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-grey-dark);
}

.chip svg {
  width: 18px;
  height: 18px;
  color: var(--color-blue);
}

/* =========================================================
   CTA band
   ========================================================= */

.cta-band {
  background: linear-gradient(135deg, var(--color-blue) 0%, #1d3a94 100%);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}

.cta-band h2 {
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.cta-band p {
  color: #E4EAFC;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.cta-band .btn-group {
  justify-content: center;
}

/* =========================================================
   Forms
   ========================================================= */

.form-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .form-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid--2col .form-field--full {
    grid-column: 1 / -1;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-grey-dark);
}

.form-field .hint {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  border: 2px solid var(--color-border-interactive);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  font-size: 1rem;
  background-color: var(--color-white);
  color: var(--color-text);
  min-height: 44px;
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-blue);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--color-error);
}

.form-error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-error);
}

.form-field.has-error .form-error {
  display: flex;
}

.form-notice {
  background-color: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  color: #7A1D18;
  font-size: 0.92rem;
}

.form-confidential-notice {
  background-color: var(--color-grey-light);
  border-left: 4px solid var(--color-blue);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-size: 0.92rem;
  margin-bottom: var(--space-6);
}

/* Slightly stronger emphasis for the pre-form privacy instruction on
   the public contact form, without introducing a new colour or an
   alert/error pattern -- reuses the same component as the safeguarding
   page's urgent-concern notice, so the extra weight is scoped here only. */
.form-confidential-notice--emphasis {
  border-left-width: 6px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.form-status {
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
}

.form-status[data-state="success"] {
  background-color: #E5F3EA;
  color: #1E5A32;
  border: 1px solid #2F8F4E;
}

.form-status[data-state="error"] {
  background-color: var(--color-error-bg);
  color: #7A1D18;
  border: 1px solid var(--color-error);
}

fieldset {
  border: none;
  padding: 0;
}

fieldset legend {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-grey-dark);
  padding: 0;
  margin-bottom: var(--space-3);
}

.radio-group {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .radio-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

.radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 2px solid var(--color-border-interactive);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}

.radio-option input {
  width: 18px;
  height: 18px;
  min-height: auto;
  accent-color: var(--color-blue);
}

.radio-option label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.92rem;
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  background-color: var(--color-grey-dark);
  color: #D5D9E2;
  padding-block: var(--space-8) var(--space-6);
}

.site-footer a {
  color: #D5D9E2;
}

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

.footer-grid {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

.footer-brand__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.footer-brand__tagline {
  font-size: 0.9rem;
  color: #AEB4C2;
  max-width: 32ch;
}

.footer-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.footer-links {
  display: grid;
  gap: var(--space-2);
  font-size: 0.9rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: 0.82rem;
  color: #B7BECC;
}

/* =========================================================
   404 page
   ========================================================= */

.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-9);
}

.error-page__code {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(3rem, 2rem + 5vw, 5rem);
  color: var(--color-blue);
  line-height: 1;
  margin-bottom: var(--space-4);
}

/* =========================================================
   Utility
   ========================================================= */

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

.mt-6 {
  margin-top: var(--space-6);
}

.mt-7 {
  margin-top: var(--space-7);
}

.center-text {
  text-align: center;
  margin-inline: auto;
}