/* Lucid — documentation theme for SSG.
 *
 * Colour is expressed only through the tokens below. Every pair the theme
 * actually renders is asserted at WCAG AAA (7:1 text, 3:1 non-text) by
 * scripts/contrast.py, so a colour change that breaks contrast fails the
 * build rather than reaching a reader. Nothing here hard-codes a hex value
 * outside the three blocks that follow.
 *
 * Three, not two: an explicit light choice, an explicit dark choice, and the
 * prefers-color-scheme block that serves everyone who has expressed no
 * preference at all — which is most readers. The gate checks each of them
 * independently, because the third is the one a recolour forgets.
 *
 * The palette is corralctl's own: the coral gradient from assets/logo.svg
 * (#F87171 → #F56B5E → #9F1239). It was the Lucid theme's default blue until
 * the site was checked against the logo it sits beside.
 */

:root,
:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #faf6f6;
  --surface-soft: #f2e7e8;
  --ink: #17100f;
  --ink-soft: #2c2124;
  --ink-muted: #47383b;
  --accent: #9f1239;
  --accent-hover: #881337;
  --accent-ink: #ffffff;
  --accent-soft: #fce4e6;
  --on-accent-soft: #881337;
  --focus: #9f1239;
  --line: #6b5a5e;
}

:root[data-theme="dark"] {
  --bg: #0e0b0c;
  --surface: #191315;
  --surface-soft: #241a1d;
  --ink: #f7f2f3;
  --ink-soft: #ded2d5;
  --ink-muted: #b6a6aa;
  --accent: #fca5a5;
  --accent-hover: #fecdd3;
  --accent-ink: #160a0d;
  --accent-soft: #3a1620;
  --on-accent-soft: #fbd5d5;
  --focus: #fca5a5;
  --line: #8d7a7e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0b0c;
    --surface: #191315;
    --surface-soft: #241a1d;
    --ink: #f7f2f3;
    --ink-soft: #ded2d5;
    --ink-muted: #b6a6aa;
    --accent: #fca5a5;
    --accent-hover: #fecdd3;
    --accent-ink: #160a0d;
    --accent-soft: #3a1620;
    --on-accent-soft: #fbd5d5;
    --focus: #fca5a5;
    --line: #8d7a7e;
  }
}

:root {
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --r: 8px;
  --gap: 1.5rem;
  --shell: 76rem;
  --read: 42rem;
  /* Both are fallbacks. main.js measures the real masthead and the
   * generator's injected search button and overwrites them, so the offsets
   * stay correct when a translation makes a label longer or the generator
   * changes its button. Nothing here depends on JavaScript for correctness:
   * these defaults are sized for the widest case. */
  --search-gutter: 10rem;
  --masthead-h: 4rem;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  /* 1.5 line-height and 0.12em paragraph spacing are WCAG 1.4.12; the
   * body size is 17px so the reading column lands near 66 characters
   * without the reader needing to zoom. */
  font-size: 106.25%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  /* 2.4.11/2.4.12: anything scrolled to - an anchor, a TOC click, or a
   * focus ring - must clear the sticky masthead. Setting it on the scroll
   * container covers every such scroll at once. */
  scroll-padding-top: calc(var(--masthead-h) + 1rem);
}

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* Focus is never removed, only restyled, and the ring clears 3:1 against
 * both grounds — checked as --focus in the contrast gate. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 20;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 0.5rem; }

.lu-shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 1.25rem; }
.lu-shell-narrow { max-width: var(--read); }

/* ---------- masthead ---------- */
.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  /* main.js drops this to static when the masthead wraps tall enough that
   * sticking it would cost more viewport than it saves. */
  position: var(--masthead-pos, sticky);
  top: 0;
  z-index: 10;
}
/* The masthead is full-bleed rather than held to the content shell. The
 * generator injects its search control as position:fixed at the viewport's
 * top-right, so a header stopping at the shell edge left an unbalanced gap
 * beside it and read as left-aligned. --search-gutter reserves that strip so
 * the two never collide. */
.masthead-in {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  min-height: 4rem;
  max-width: none;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  padding-inline-end: calc(clamp(1rem, 2.5vw, 2rem) + var(--search-gutter));
}
/* The generator injects its search control as position:fixed at the top-right
 * of the viewport, where it floats above whatever happens to be scrolled
 * under it. Measured at 320 and 390 wide, that covered the focused "Next"
 * pager link and the criteria table - a 2.4.12 failure a keyboard user meets
 * on the second tab. A viewport-fixed control can always cover something, so
 * the fix is to move it into the masthead's tool row, which is where a
 * search control belongs. Once it is in normal flow it cannot cover anything,
 * and the reserved --search-gutter strip is no longer needed either - main.js
 * zeroes it after the move, which also stops the header wrapping to a second
 * row at around 900px wide.
 *
 * !important is needed and is scoped to these three declarations: the
 * generator's stylesheet is injected at the end of <body>, so it wins on
 * source order against an equally specific id selector. */
#ssg-search-btn,
#ssg-search-btn * {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  /* Now that it sits among the header controls it must be one of them, in
   * both palettes. The generator's own label colour measures 6.95:1 against
   * its ground - below the 7:1 that 1.4.6 requires, and invisible until the
   * button moved into the header where the suite could see it. */
  color: var(--ink-soft) !important;
}
#ssg-search-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.9rem !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  background: var(--surface) !important;
  font: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 600;
  cursor: pointer;
}
#ssg-search-btn svg { color: var(--ink-soft) !important; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.0625rem;
  padding: 0.6rem 0;
  min-height: 44px;
}
.brand-mark { display: block; color: var(--accent); flex: none; }
.site-nav { margin-inline-end: auto; }
.nav-list, .lang-list { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.nav-list a, .lang-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.7rem;
  border-radius: var(--r);
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}
.nav-list a:hover, .lang-list a:hover { background: var(--surface); color: var(--accent-hover); text-decoration: underline; }
.nav-list a[aria-current], .lang-list a[aria-current] {
  background: var(--accent-soft);
  color: var(--on-accent-soft);
  font-weight: 700;
}
.masthead-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.nav-btn, .mode-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.nav-btn:hover, .mode-btn:hover { background: var(--surface-soft); color: var(--accent-hover); }
.nav-btn { display: none; }
.mode-btn-state { color: var(--ink-muted); font-weight: 400; }
.mode-btn-state::before { content: " — "; }

/* ---------- hero ---------- */
.hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); }
/* The hero keeps the shell's width and centring so its left edge lines up
 * with every band below; the measure is narrowed on the children instead.
 * Overriding the container's max-width pinned it to the viewport edge and
 * put the hero on a different left edge from the rest of the page. */
.hero-in > * { max-width: 54rem; }
.eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.eyebrow-tag {
  background: var(--accent-soft);
  color: var(--on-accent-soft);
  border-radius: 2rem;
  padding: 0.2rem 0.7rem;
  font-weight: 700;
  font-size: 0.8125rem;
}
.hero-h {
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
}
.hero-lead {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--ink-soft);
  margin-top: 1.1rem;
  max-width: 40rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.4rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9375rem;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: var(--surface-soft); color: var(--ink); }

/* ---------- bands ---------- */
.band { padding: clamp(2.5rem, 6vw, 4rem) 0; border-top: 1px solid var(--line); }
.band-soft { background: var(--surface); }
.band-h { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.015em; text-wrap: balance; }
.band-lead { color: var(--ink-soft); margin-top: 0.75rem; max-width: var(--read); }
.band-cta { margin-top: 2rem; }

.snippet { margin-top: 1.75rem; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.snippet-h {
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.8125rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--line);
}
.snippet-body { margin: 0; padding: 1.1rem; overflow-x: auto; background: var(--surface); }
.snippet-body code { font-family: var(--mono); font-size: 0.875rem; color: var(--ink); white-space: pre; }

.cards { display: grid; gap: var(--gap); margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; }
.card-h { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); font-size: 0.9375rem; }

.facts { display: grid; gap: var(--gap); margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.fact { border-inline-start: 3px solid var(--accent); padding-inline-start: 1rem; }
.fact-t { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.fact-d { color: var(--ink-soft); font-size: 0.9375rem; margin-top: 0.25rem; }

/* ---------- documentation layout (USWDS documentation page) ---------- */
.doc-shell {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: 2.5rem;
  padding-bottom: 4rem;
  grid-template-columns: 14rem minmax(0, 1fr) 13rem;
}
.doc-side, .doc-toc { align-self: start; position: sticky; top: 5rem; }
.side-h {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}
.side-list, .toc-list { display: flex; flex-direction: column; }
.side-list a, .toc-list a {
  display: block;
  padding: 0.6rem 0.75rem;
  min-height: 44px;
  color: var(--ink-soft);
  text-decoration: none;
  border-inline-start: 2px solid var(--line);
  font-size: 0.9375rem;
}
.side-list a:hover, .toc-list a:hover { background: var(--surface); color: var(--accent-hover); text-decoration: underline; }
.side-list a[aria-current] {
  background: var(--accent-soft);
  color: var(--on-accent-soft);
  border-inline-start-color: var(--accent);
  font-weight: 700;
}

.crumbs { font-size: 0.875rem; margin-bottom: 1.25rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.crumbs li + li::before { content: "/"; color: var(--ink-muted); margin-inline-end: 0.5rem; }
/* Navigation, not a sentence, so WCAG 2.5.5's inline exception does not
 * apply: these need the full 44px target like every other control. */
.crumbs a, .crumbs [aria-current] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.15rem;
}
.crumbs a { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink-muted); }
.crumbs li + li::before { align-self: center; }

.doc-h { font-size: clamp(1.85rem, 4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.doc-lead { font-size: 1.125rem; color: var(--ink-soft); margin-top: 0.85rem; }

.prose { margin-top: 2rem; max-width: var(--read); }
/* 1.4.8 Visual Presentation (AAA): paragraph spacing at least 1.5x the line
 * spacing. Line-height is 1.6, so the gap must clear 2.4em; 2.5em leaves a
 * margin for rounding.
 *
 * Matched on descendants rather than direct children: the generator wraps
 * rendered Markdown in its own element, so `.prose > * + *` matched the
 * wrapper and left every paragraph inside it at 0. The rule looked right in
 * the stylesheet and did nothing on the page. :where() keeps specificity at
 * zero so the heading rules below still win. */
.prose :where(p, ul, ol, pre, blockquote, table, dl, figure)
  + :where(p, ul, ol, pre, blockquote, table, dl, figure) {
  margin-top: 2.5em;
}
.prose li + li { margin-top: 0.4rem; }
.prose h2 { font-size: 1.4rem; margin-top: 2.5rem; letter-spacing: -0.01em; scroll-margin-top: calc(var(--masthead-h) + 1rem); }
.prose h3 { font-size: 1.125rem; margin-top: 1.75rem; scroll-margin-top: calc(var(--masthead-h) + 1rem); }
/* A heading introduces the block beneath it, so the gap below is smaller than
 * the gap between paragraphs — but it is not zero, which is what the
 * sibling rule above left it at. */
.prose :where(h2, h3, h4) + * { margin-top: 0.9em; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-inline-start: 1.4rem; }
.prose li + li { margin-top: 0.4rem; }
.prose code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface-soft);
  color: var(--ink);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.prose pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.1rem;
  /* A scrolling code block is a scrollable region, and a scrollable region
   * that is not focusable cannot be reached from a keyboard at all - axe
   * reports it as serious, and it is 2.1.1. The French accessibility page
   * tripped it, because its comments are longer than the English ones, which
   * is exactly the kind of difference a theme claiming to work in any
   * language must not be sensitive to.
   *
   * Adding tabindex from script would satisfy the checker while leaving a
   * reader without JavaScript unable to reach the same content. Wrapping
   * removes the scrollable region instead, so there is nothing to reach: it
   * holds with scripting off, and it means no sample can ever scroll
   * sideways, which is 1.4.10 as well.
   *
   * overflow-x stays as a backstop for content that cannot wrap at all. */
  overflow-x: auto;
}
.prose pre code,
.prose pre code span,
.snippet-body code {
  /* break-spaces rather than pre-wrap: both preserve indentation, but
   * pre-wrap lets a run of trailing spaces hang outside the content box, and
   * the aligned comments in these samples have plenty. That measured 385px
   * inside a 414px viewport, reaching x=426, while the pre itself reported
   * scrollWidth equal to clientWidth - so nothing was clipped, and a check
   * comparing width against the viewport saw nothing wrong. */
  white-space: break-spaces;
  overflow-wrap: anywhere;
}
.prose pre code { background: none; padding: 0; font-size: 0.875rem; }
/* The syntax highlighter labels tokens with scope names — "shell", "source",
 * "meta", "variable" — and any of them may collide with a layout class. One
 * did: `.shell` gave every token in a bash block 21px of horizontal padding,
 * so `ssg --version` rendered as `ssg  --  version`. Token spans carry colour
 * and weight, never geometry, so neutralising box properties here makes the
 * whole class of collision impossible rather than fixing the instance. */
.prose pre code span {
  padding: 0;
  margin: 0;
  border: 0;
  display: inline;
  max-width: none;
  letter-spacing: inherit;
  word-spacing: inherit;
}
.prose blockquote {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 1rem;
  color: var(--ink-soft);
}
/* 1.4.10 Reflow: a table's min-content width is the longest unbreakable run
 * in its cells, which pushed the French criteria table past a 320px
 * viewport. Allowing breaks anywhere lets the columns shrink to the
 * container instead of forcing the page to scroll sideways. */
.ssg-table-scroll, .table-wrap, .snippet-body, [tabindex]:not([tabindex="-1"]) {
  scroll-margin-top: calc(var(--masthead-h) + 1rem);
}
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { overflow-wrap: anywhere; min-width: 0; }
.prose th, .prose td { text-align: start; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.prose th { color: var(--ink); font-weight: 700; background: var(--surface); }
.prose td { color: var(--ink-soft); }

.pager { display: grid; gap: 1rem; margin-top: 3.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 44px;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  background: var(--bg);
}
.pager-link:hover { background: var(--surface); }
.pager-next { text-align: end; }
.pager-dir { font-size: 0.8125rem; color: var(--ink-muted); }
.pager-name { color: var(--accent); font-weight: 700; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--surface); padding: 3rem 0 1.5rem; }
.footer-in { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; }
.footer-name { font-weight: 800; }
.footer-note { color: var(--ink-soft); font-size: 0.9375rem; margin-top: 0.4rem; max-width: 32rem; }
.footer-h { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: 0.6rem; }
.footer-nav ul { list-style: none; padding: 0; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.footer-nav a:hover { color: var(--accent-hover); }
.footer-legal { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.footer-legal p { color: var(--ink-muted); font-size: 0.875rem; }

/* ---------- narrow viewports ---------- *
 * The sidebar and contents collapse into the reading order rather than
 * disappearing: at 320px and at 200% zoom the page reflows to one column
 * with no horizontal scrolling (WCAG 1.4.10). */
@media (max-width: 64rem) {
  .doc-shell { grid-template-columns: minmax(0, 1fr); }
  .doc-side, .doc-toc { position: static; }
  .doc-toc { order: -1; border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; }
}

/* Below the reading width a code block wraps rather than scrolls. Sideways
 * scrolling inside a paragraph of shell commands is exactly the interaction
 * 1.4.10 exists to remove, and these samples are short enough to wrap
 * without losing their shape. */
@media (max-width: 30rem) {
  .prose pre { overflow-x: visible; }
}

@media (max-width: 48rem) {
  .masthead-in { padding-inline-end: clamp(1rem, 2.5vw, 2rem); }
  .masthead-tools { padding-inline-end: var(--search-gutter); }
  .nav-btn { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav { display: none; width: 100%; }
  .site-nav.is-open { display: block; }
  .nav-list { flex-direction: column; }
  .masthead-in { padding-bottom: 0.5rem; }
  /* Fallback for the no-JavaScript case, where --masthead-pos is never set:
   * below this width the masthead wraps to several rows and is not worth
   * sticking. */
  .masthead { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .masthead, .footer, .pager, .doc-side, .doc-toc, .skip-link { display: none; }
  .doc-shell { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* Search & Hero Enhancements */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}
.hero-badges img {
  height: 28px;
  border-radius: 4px;
}
.search-btn-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card, #f4f4f5);
  border: 1px solid var(--border-color, #e4e4e7);
  color: var(--text-color, #27272a);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-right: 8px;
  transition: all 0.2s ease;
}
.search-btn-trigger:hover {
  background: var(--bg-card-hover, #e4e4e7);
  border-color: var(--border-color-hover, #d4d4d8);
}
.search-kbd {
  background: var(--bg, #ffffff);
  border: 1px solid var(--border-color, #d4d4d8);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.75rem;
  font-family: monospace;
}
.prose-band {
  padding-top: 2rem;
  padding-bottom: 3rem;
}
.faq-section {
  margin-top: 3rem;
}
.faq-item {
  border-bottom: 1px solid var(--border-color, #e4e4e7);
  padding: 1.25rem 0;
}
.faq-item h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}