/* Fortified Networks, Option 3: inner-page banner.

   The split-screen scroll hero on the home page is a one-off — it earns its
   complexity by being the first thing a visitor sees. Every other page needs
   a simple, honest "you are here" band instead: dark ground, breadcrumb,
   eyebrow, title, one line of dek. No pin, no runway, no SVG. Reuses
   .site-header, .eyebrow and .section-title as-is rather than redefining
   header or type rules that already exist. */

.page-hero {
  background: var(--o3-hero-ground);
  color: var(--o3-heading-ink);
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
}

.page-hero-inner {
  padding-top: clamp(2.5rem, 7vh, 5rem);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6em;
  row-gap: .3em;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--o3-nav-muted);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.breadcrumb a { position: relative; transition: color 160ms var(--ease-out); white-space: nowrap; }
.breadcrumb a:hover { color: var(--o3-nav-hover); }
.breadcrumb span[aria-current] { color: var(--o3-heading-ink); flex-basis: 100%; min-width: 0; }
@media (min-width: 480px) {
  .breadcrumb span[aria-current] { flex-basis: auto; }
}

/* Vertical-only: breadcrumb items sit in a row with a tight .6em gap, so
   growing sideways would collide with the "/" separator or the next link.
   Growing up/down doesn't, since nothing else occupies that space. Real tap
   target was 14px tall against a 44px minimum. */
@media (pointer: coarse) {
  .breadcrumb a::before {
    content: "";
    position: absolute;
    inset: -14px 0;
  }
}

.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--o3-heading-ink);
  max-width: 18ch;
  margin: 0 0 clamp(1rem, 2.5vh, 1.5rem);
  text-wrap: balance;
}

.page-hero .page-dek {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--o3-subhead-ink);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

/* A light-ground variant for pages whose first section after the banner is
   already dark (services detail pages sit banner-then-svc-section, both
   dark, and need the hairline to tell them apart). */
.page-hero--divider { border-bottom: 1px solid var(--o3-dark-rule); }

/* ---------- simple content page body ---------- */
.page-section {
  background: var(--cream-soft);
  padding-block: var(--o3-pad-secondary);
}
.page-section + .page-section { border-top: 1px solid var(--o3-rule); }
.page-section--dark {
  background: var(--o3-svc-bg);
  color: var(--o3-heading-ink);
}
.page-section--dark + .page-section--dark { border-top: 1px solid var(--o3-dark-rule); }

/* Reading rhythm for detail-page body copy.

   This used to hang off `.page-prose` alone -- a class only *some*
   .detail-sections carried, because a section holding a wide child (the
   step track, a comparison list) couldn't take the 68ch max-width the
   class also set on the section box. The cost was invisible in review and
   glaring on the page: those sections' paragraphs fell all the way back to
   UA defaults, 16px / line-height:normal / zero margins, sitting directly
   under 17.5px / 1.65 paragraphs from the section above. Two consecutive
   <p>s in one of them rendered with no gap between them at all.

   Fixed by inverting it: the typography is keyed off `.detail-section`, so
   every section on these pages gets it whether or not it also opted into
   .page-prose. The 68ch measure stays on `.page-prose` where it already
   was -- it constrains more than paragraphs there (the Technologies FAQ
   list reads at that measure too) -- and is applied to the paragraphs
   themselves only in the sections that never had it, so their wide
   children stay free to span the full column. */
.page-prose { max-width: 68ch; }
.page-prose p,
.detail-section > p {
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.65;
  color: var(--o3-body);
  text-wrap: pretty;
}
/* Deliberately rem, not `68ch` like the rule above. `ch` resolves against
   the element's own font, and these paragraphs run at 17.28px while
   .page-prose's measure is set on the section at the inherited 16px --
   so `68ch` here would come out 741px against the prose sections' 686px
   and leave a 55px ragged step in the right edge between one section and
   the next on the same page. 42.875rem is that same 686px, held steady. */
.detail-section:not(.page-prose) > p { max-width: 42.875rem; }
.page-prose p + p,
.detail-section > p + p { margin-top: 1.25em; }
.page-section--dark .page-prose p,
.page-section--dark .detail-section > p { color: var(--o3-subhead-ink); }

/* Subheads inside a long-form article. Lived as a duplicated inline <style>
   block on all three resource pages; identical in each, so it belongs here.
   The `:first-child` (not `:first-of-type`) matters -- `:first-of-type`
   matched the first h3 *anywhere* in the section, including one that opens
   after an intro paragraph, so that subhead collapsed onto the paragraph
   above it while every later subhead in the same section kept a 1.85em
   gap. Only an h3 that genuinely opens the section should lose it. */
.post-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 1.85em 0 .5em;
}
.post-h3:first-child { margin-top: 0; }
.post-h3 + p { margin-top: 0; }

/* Simple bullet list for "what's included" style content — deliberately not
   the numbered .cap-grid/.svc treatment, so a detail page's own list doesn't
   read as a fourth instance of a pattern already used three times above it. */
.page-list {
  margin-top: clamp(1.5rem, 4vh, 2.25rem);
  display: grid;
  gap: clamp(1rem, 2.5vh, 1.5rem);
}
.page-list li {
  padding-left: 1.4em;
  position: relative;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--o3-body);
  max-width: 56ch;
}
.page-section--dark .page-list li { color: var(--o3-subhead-ink); }
.page-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
/* The list only ever declared a margin-*top*, so whatever followed it ran
   straight into the last bullet -- most visibly the "Service models split
   into..." paragraph sitting flush against "Service level agreements (SLAs)"
   on the MDR page. Matches the list's own leading gap so the block reads
   as evenly inset on both sides. .post-h3 is deliberately not in here: its
   own 1.85em top margin already clears the list, and one rule owning
   subhead spacing beats two. */
.page-list + p,
.page-list + .step-process { margin-top: clamp(1.5rem, 4vh, 2.25rem); }

/* Cross-links to the other two services at the foot of a detail page. */
.related-services {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid var(--o3-rule-strong);
}
.related-services h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--o3-meta);
  margin-bottom: clamp(1rem, 2.5vh, 1.5rem);
}
.related-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.related-list a {
  display: block;
  padding-top: clamp(1rem, 2.5vh, 1.5rem);
  border-top: 1px solid var(--o3-rule);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  color: var(--ink);
  transition: color 160ms var(--ease-out);
}
.related-list a:hover { color: var(--accent-deep); }

@media (max-width: 719px) {
  .related-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- hero proof stat ----------
   One concrete number pulled up into the banner itself, so the page opens
   on a fact rather than only a claim. Optional — pages that don't have a
   number this strong (Technology Sourcing) skip it rather than pad one in. */
/* Plain running text (a text node plus one <strong>), not icon+label — an
   inline-flex container was splitting the two into separate flex items, so
   narrow widths wrapped them independently and orphaned "is" alone on its
   own line while "retested..." started a fresh visual row. inline-block
   keeps the border/padding chip but lets the sentence wrap as one block of
   text like any other paragraph. */
.hero-stat {
  display: inline-block;
  margin-top: clamp(1.25rem, 3vh, 1.75rem);
  padding: .55em .95em;
  border: 1px solid var(--o3-dark-rule-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--o3-nav-hover);
}
.hero-stat strong { color: var(--accent); font-weight: 600; }

/* ---------- detail page: docs layout, not marketing layout ----------
   A service detail page is reference material someone lands on from a
   search result, not a scroll story someone arrives at cold — so it gets a
   sticky table of contents next to one calm reading column, instead of the
   home page's alternating light/dark chapter rhythm. Same sticky mechanic
   as .svc-head (sections.css), reused for navigation instead of a heading. */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr);
  column-gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.page-toc { position: sticky; top: clamp(4rem, 10vh, 7rem); }
.page-toc-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--o3-meta);
  margin-bottom: 1rem;
}
/* Wraps just the indicator + list, not the "ON THIS PAGE" label above it,
   so the indicator's top:0 lines up with the list's first item rather than
   the label. */
.page-toc-body { position: relative; }
.page-toc ol {
  display: grid;
  gap: .65rem;
  border-left: 1px solid var(--o3-rule-strong);
}
/* The moving piece: a 2px accent bar that slides to sit beside whichever
   link is current, driven by toc.js writing transform+height every tick
   the active section changes. transform/height only (no top/left) so the
   move stays off the main thread. Starts invisible — nothing is "active"
   until JS has actually measured a section against real scroll position. */
.page-toc-indicator {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: transform 260ms var(--ease-out), height 260ms var(--ease-out), opacity 160ms var(--ease-out);
}
.page-toc a {
  position: relative;
  display: block;
  padding-left: 1rem;
  font-size: 14px;
  color: var(--o3-body);
  transition: color 160ms var(--ease-out);
}

/* A pseudo-element expansion, not padding: toc.js reads this exact element's
   offsetTop/offsetHeight to size and position the sliding indicator bar
   (page-toc-indicator), so growing the real box would grow and shift that
   bar along with it. A ::before leaves offsetHeight/offsetTop untouched and
   still grows the actual tappable area — each link measured 17px tall before
   this, well under the 44px minimum, at .65rem gaps. Coarse-pointer only,
   matching the same convention as the hero's touch targets. Adjacent links'
   expanded areas touching in that gap is harmless here: every item does the
   same non-destructive thing (jump to a section). */
@media (pointer: coarse) {
  .page-toc a::before {
    content: "";
    position: absolute;
    inset: -13px 0;
  }
}
.page-toc a:hover { color: var(--ink); }
.page-toc a.is-active { color: var(--ink); font-weight: 600; }

.detail-section + .detail-section {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  padding-top: clamp(2.5rem, 6vh, 3.5rem);
  border-top: 1px solid var(--o3-rule);
}

/* The sentence an answer engine actually lifts: stated plainly, first,
   before any of the supporting detail below it. Deliberately heavier than
   regular body copy so it reads as the answer, not just the opening line.

   The extra `p` in the selector isn't decorative: every place this class is
   used, the paragraph also matches a sibling rule of equal specificity
   (.page-prose p on the nine detail pages and About, .tech-body p on
   Technologies) that sets its own font-size and color. `.direct-answer`
   alone tied at (0,1,0) and lost on source order to whichever of those
   loaded later, so the "heavier than body copy" sentence was silently
   rendering at the same 16px o3-body gray as the paragraph under it —
   verified via computed style on the Technologies page (16px / #3a3f4c,
   not the 17-19.5px / --ink this rule declares). `p.direct-answer` ties
   those rules at (0,1,1) instead, where page.css's later position in every
   page's <link> order (after sections.css) decides it. */
p.direct-answer {
  font-size: clamp(17px, 1.3vw, 19.5px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  max-width: 64ch;
}

/* ---------- how it works: a process, not a bullet list ----------
   Numbered circles sitting on a through-line, the same "index number +
   connector" grammar as .svc-idx and the blueprint's bp-connector lines,
   applied to a left-to-right sequence instead of a stacked list.

   The track was hard-wired to four columns with the through-line drawn as
   a single border on the container -- which works for exactly the four-step
   case every service page uses, and breaks for anything else. The
   six-step process on External Penetration Testing wrapped to 4 + 2 with
   no row-gap and no line on the second row, so steps 5 and 6 had their
   numbered circles (top: -14px) punched through the tail of step 2's
   paragraph, floating with nothing under them.

   Now the line belongs to each .step and the grid carries a real row-gap,
   so every step sits on its own rule at every row and wrap point. That is
   also the pattern .diff and .partner already use elsewhere on the site
   (bordered row item, column gaps between), so the segmented track reads
   as the same grammar rather than a new one. Column count follows the step
   count: 4 stays 4, anything longer balances onto 3 x 2 instead of
   stranding two steps in a short second row. */
.step-process {
  --step-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--step-cols), minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: clamp(2.75rem, 6vh, 3.75rem);
  margin-top: clamp(2rem, 5vh, 3rem);
}
.step-process:has(.step:nth-child(5)) { --step-cols: 3; }

.step {
  position: relative;
  padding-top: clamp(1.5rem, 3.5vh, 2rem);
  border-top: 2px solid var(--o3-rule-strong);
}
.step-num {
  position: absolute;
  top: -14px;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.008em;
  color: var(--ink);
  margin: 0 0 .4rem;
}
.step p {
  font-size: 14px;
  line-height: 1.58;
  color: var(--o3-body);
}

/* ---------- FAQs: native disclosure, marked up for FAQPage schema ---------- */
.faq-list { margin-top: clamp(1.5rem, 4vh, 2.25rem); border-top: 1px solid var(--o3-rule); }
.faq-item { border-bottom: 1px solid var(--o3-rule); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.6vh, 1.5rem);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(16px, 1.1vw, 17px);
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--accent);
  transition: transform 160ms var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer {
  padding-bottom: clamp(1.1rem, 2.6vh, 1.5rem);
  font-size: clamp(16px, 1vw, 17px);
  line-height: 1.62;
  color: var(--o3-body);
  max-width: 62ch;
  text-wrap: pretty;
}

@media (max-width: 999px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2rem, 5vh, 3rem); }
  .page-toc { position: static; }
  /* Four ~150px columns of 14px copy is not a readable step; two is. The
     six-step page lands on 2 x 3 here, the four-step ones on 2 x 2. */
  .step-process,
  .step-process:has(.step:nth-child(5)) { --step-cols: 2; }
}
@media (max-width: 719px) {
  /* One stacked column: the normal vertical numbered-list pattern, each
     step on its own rule with its circle sitting on that rule. (The
     per-.step border this used to have to declare here is now the default
     at every width, so only the column count and gap change.) */
  .step-process,
  .step-process:has(.step:nth-child(5)) { --step-cols: 1; }
  .step-process { row-gap: clamp(1.75rem, 4vh, 2.25rem); }
}

/* ---------- technology partners: why we partner, one line each ---------- */
.partner-grid {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
}
.partner {
  border-top: 1px solid var(--o3-rule-strong);
  padding-top: clamp(1.1rem, 2.4vh, 1.5rem);
}
/* Same "bordered row, heading + one-line rationale" role as .diff
   (sections.css) and .diff-section--why .diff (above) — matched to their
   already-fixed sizes rather than the flat, sub-floor values this used to
   carry (h3 15px, p 14px: the same "flat and below 16px" drift .diff p's
   own comment already called out and corrected for that exact pattern). */
.partner h3 {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .55rem;
}
.partner p {
  font-size: clamp(16px, 1vw, 17px);
  line-height: 1.6;
  color: var(--o3-body);
  text-wrap: pretty;
}

@media (max-width: 719px) {
  .partner-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .partner { padding-block: clamp(1.1rem, 2.4vh, 1.5rem); }
  .partner:last-child { border-bottom: 1px solid var(--o3-rule-strong); }
}

/* ---------- mid-page conversion prompt ----------
   These are the pages someone lands on already close to a decision, so the
   only CTA in the closing band shouldn't be the first one they see: a
   punchier, page-specific prompt sits mid-read too, right where the reader
   has enough context to recognize their own situation in it. */
.punch-cta {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding: clamp(1.75rem, 4vh, 2.5rem);
  background: var(--ink);
  color: var(--cream-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.punch-cta p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.2;
  max-width: 32ch;
  text-wrap: balance;
}
.punch-cta .cta-solid { flex-shrink: 0; }

/* ---------- resources landing: eBooks/reports note ---------- */
.resource-note {
  margin-top: clamp(2rem, 5vh, 3rem);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--o3-meta);
  max-width: 56ch;
}
.resource-note--flush { margin-top: clamp(1rem, 2.5vh, 1.5rem); }

/* ---------- blog list ----------
   Reuses .svc/.svc-idx/.svc-body/.svc-more's row-with-index pattern from
   sections.css rather than inventing a card treatment, so a post here reads
   as the same family as a service row, not a fourth list shape on the page.
   .post-meta is the one addition: a date sits above the title the way an
   eyebrow would, but per-row rather than per-section. */
.post-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--o3-nav-muted);
  margin-bottom: clamp(.5rem, 1.2vh, .75rem);
}


/* ---------- about: "why fortified networks" ----------
   First pass reused .diff-grid's own 4-up column shape at bigger type --
   still four identical heading+paragraph blocks in a row underneath it,
   which is the "identical card grid" tell regardless of scale or the
   absence of a drawn border; bigger boxes are still boxes. Restructured
   entirely: full-width stacked rows, same border-top-rule grammar as
   .svc (sections.css, the homepage's 3-item service list) rather than
   .diff-grid's column grid, with the heading and its paragraph sitting
   side by side in each row instead of stacked -- an editorial reasons
   list, not four repeated tiles. */
.diff-section--why {
  padding-block: var(--o3-pad-primary);
}
.diff-section--why .diff-title {
  font-size: clamp(2rem, 4vw, 3rem);
}
.diff-section--why .diff-sub {
  font-size: clamp(16px, 1.2vw, 17.5px);
  max-width: 50ch;
}
.diff-section--why .diff-grid {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}
.diff-section--why .diff {
  padding-block: clamp(1.75rem, 4.5vh, 2.5rem);
}
.diff-section--why .diff:last-child {
  padding-bottom: 0;
}
/* .diff-grid's own 4-up rhythm (nth-child margin/offset, sections.css
   @media 1000px) targets any .diff -- reset it here since a single-column
   row list has no columns left to offset. */
.diff-section--why .diff:nth-child(3),
.diff-section--why .diff:nth-child(even) {
  margin: 0;
}
.diff-section--why .diff h3 {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.3;
  margin-bottom: clamp(.5rem, 1.2vh, .65rem);
}
.diff-section--why .diff p {
  font-size: 15px;
}
@media (min-width: 720px) {
  .diff-section--why .diff {
    display: grid;
    grid-template-columns: minmax(190px, 300px) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: baseline;
  }
  .diff-section--why .diff h3 { margin-bottom: 0; }
}

/* A .quiet-link that has to be a <button> (opens the booking drawer rather
   than navigating) — same underline-on-hover treatment, reset to look like
   inline text rather than a button by default. */
/* Same idle-affordance fix as .quiet-link (sections.css) — this is that
   same pattern rebuilt as a <button>, so it gets the identical treatment:
   35%-strength underline at rest, full-strength on hover/active, rather
   than relying on hover alone. */
.quiet-link-btn {
  all: unset;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .2em;
  transition: text-decoration-color 160ms var(--ease-out);
}
.quiet-link-btn:hover,
.quiet-link-btn:active { text-decoration-color: currentColor; }

/* ---------- about: "what working with us looks like" ----------
   Was three equal columns -- three identical heading+paragraph tiles in
   a row is the same "identical card grid" tell .diff-section--why had,
   just with three instead of four. Full-width rows instead, same
   grammar as .diff-section--why immediately above it and .svc
   (sections.css, the homepage's service list): border-top rule, heading
   and its line sitting side by side in the row rather than stacked. */
.proof-grid {
  margin-top: clamp(1.5rem, 4vh, 2.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}
.proof-item {
  border-top: 1px solid var(--o3-rule-strong);
  padding-block: clamp(1.5rem, 3.5vh, 2rem);
}
.proof-item:last-child {
  padding-bottom: 0;
}
.proof-item h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: .4rem;
}
.proof-item p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--o3-body);
}

@media (min-width: 720px) {
  .proof-item {
    display: grid;
    grid-template-columns: minmax(190px, 300px) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: baseline;
  }
  .proof-item h3 { margin-bottom: 0; }
}