/* ==========================================================================
   Simple pages — Microsoft-adjacent Fluent system
   Pages: about.html, contact.html, resources.html, privacy.html

   Tokens only. No raw hex. No side-stripe borders. No translateY on card
   hover. No serif display axes. No font-variation-settings.

   Shared primitives (.eyebrow, .numeral-marker, .rule, .pullquote, .callout,
   .page-hero, .btn--*, .card, .chip, .form__*) live in components.css and
   are referenced here, not redefined.

   See DESIGN.md and .impeccable/design.json for the named rules this file
   honors. The Flat-at-Rest, Hover-via-Shadow-Not-Translation, No-Glow,
   Microsoft-600, No-Tracking, One-Voice, and 65ch rules all apply.
   ========================================================================== */


/* ==========================================================================
   PAGE HERO — simple-page sizing overrides on the .page-hero base
   ========================================================================== */

.simple-hero .page-hero__inner {
  max-width: 880px;
}

.simple-hero h1 {
  max-width: 28ch;
}

.simple-hero .page-hero__subtitle {
  max-width: 60ch;
  font-size: var(--text-body-lg);
}


/* ==========================================================================
   SECTION HEADER — matches the pattern shared with solutions/services/industries
   ========================================================================== */

.section__header {
  margin-bottom: var(--space-10);
}

.section__header h2 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  max-width: 28ch;
  text-wrap: balance;
}

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

.section__header--center h2,
.section__header--center p {
  margin-inline: auto;
}

.section__header p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  max-width: 60ch;
  margin: 0;
}


/* ==========================================================================
   CARDS — about / resources share .card with title + body conventions.
   .card base lives in components.css. These rules style its slot elements.
   ========================================================================== */

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}

.card__text {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: 0;
}

.card__text + .card__text,
.card__title + .card__text {
  margin-top: 0;
}


/* ==========================================================================
   ABOUT — story prose, capability grid (.card grid--3/4), conversion block
   ========================================================================== */

/* Story callout — a quiet paper panel containing two prose paragraphs.
   The .callout base lives in components.css; we widen the measure here
   because the story passage is the primary read of the section. */
.about-story.callout {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding: var(--space-8);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
}

.about-story__h2 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  text-align: center;
  margin: 0 0 var(--space-6);
  letter-spacing: var(--tracking-tight);
}

.about-story__lead {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  max-width: 65ch;
  margin: 0 auto var(--space-5);
}

.about-story__lead:last-child {
  margin-bottom: 0;
}

/* Mission pull-quote — uses .pullquote from components.css. Center alignment
   for the centered Mission section. */
.about-mission .pullquote--center {
  margin-inline: auto;
}

/* Badge strip — Microsoft partner designations. Reuses .badge-inline shape
   from solutions/services (flex-wrap row of badge images). */
.partner-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: 0 auto;
  max-width: var(--container-narrow);
}

.partner-badges img {
  height: 56px;
  width: auto;
}


/* ==========================================================================
   CONVERSION BLOCK — lead-capture pattern used on about.html bottom
   Mirrors the conversion block in services.css so simple pages render the
   same surface without depending on services.css being loaded.
   ========================================================================== */

.conversion {
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  max-width: var(--container-max);
  margin-inline: auto;
}

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

.conversion__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.conversion__text h2 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  max-width: 22ch;
  text-wrap: balance;
}

.conversion__text p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 56ch;
}

.form-wrapper {
  position: relative;
}

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

.form--2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}

/* Width helpers — replace inline width / max-width / display style attributes
   on submit buttons (audit P2 fix). */
.btn--block {
  width: 100%;
}

.btn--constrained {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.form__submit-row {
  text-align: center;
  margin-top: var(--space-4);
}

/* Success panel — keeps the contract used by form-validation.js
   (`.form__success` + `.is-visible`). Replaces the inline display:none,
   text-align:center, margin-top combo from contact.html. */
.form__success {
  display: none;
  text-align: center;
  margin-top: var(--space-6);
}

.form__success.is-visible {
  display: block;
}

.form__success h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-3);
}

.form__success p {
  font-family: var(--font-body);
  color: var(--color-ink-soft);
  margin: 0;
}

@media (max-width: 960px) {
  .conversion__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .conversion {
    padding: var(--space-6);
  }
}


/* ==========================================================================
   CONTACT — contact form panel + contact-cards info grid
   ========================================================================== */

/* The contact form sits inside a paper panel, replacing the prior callout
   wrapper without a side-stripe accent. */
.contact-panel {
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  max-width: var(--container-editorial);
  margin-inline: auto;
}

@media (max-width: 768px) {
  .contact-panel {
    padding: var(--space-5);
  }
}

/* Two-up contact info cards — Direct Email and Schedule Directly.
   Replaces the inline grid-style + max-width-900px style attributes. */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  max-width: 900px;
  margin-inline: auto;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-7);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--motion-medium), border-color var(--motion-medium);
}

.contact-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.contact-card__glyph {
  font-size: 2rem;
  line-height: 1;
  color: var(--color-brand-primary);
  margin-bottom: var(--space-2);
}

.contact-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0;
  letter-spacing: 0;
}

.contact-card p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: var(--space-2) 0 0;
}

/* Contact email link — the inline `text-decoration: none` is removed; default
   link styling now applies, plus we bump weight + size for the email line. */
.contact-card__email {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.contact-card__email:hover {
  color: var(--color-brand-hover);
  text-decoration-thickness: 2px;
}


/* ==========================================================================
   RESOURCES — case-study cards (use base .card), badges, whitepaper rows,
   blog placeholder, FAQ accordion
   ========================================================================== */

/* Sector / status badge above case-study card title. Sober paper chip with
   hairline border, sentence case, label typography. Replaces the prior
   .badge.badge--dark with inline display attribute. */
.resource-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-brand-primary);
  background-color: var(--color-paper);
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-full);
  letter-spacing: 0;
}

.resource-badge--quiet {
  color: var(--color-ink-soft);
  border-color: var(--color-border-strong);
}

.resource-card .card__text {
  margin-bottom: var(--space-6);
}

.resource-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

.resource-card .btn--block {
  align-self: stretch;
  width: 100%;
}

/* Whitepaper / guide row — single line title + lede, right-side action.
   Replaces the inline flex/space-between/gap style attributes on the
   .deliverable-card markup in resources.html. */
.whitepaper-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--motion-medium), border-color var(--motion-medium);
}

.whitepaper-row:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.whitepaper-row__body {
  flex: 1 1 320px;
  min-width: 0;
}

.whitepaper-row__title {
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.whitepaper-row__lede {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
  margin: 0;
}

.whitepaper-row .btn {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .whitepaper-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Blog placeholder — a quiet paper panel announcing the newsletter is
   coming. Replaces inline-styled margin/size attributes. */
.blog-placeholder {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding: var(--space-8);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: left;
}

.blog-placeholder h2 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

.blog-placeholder p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 65ch;
}

/* FAQ accordion — uses native <details>/<summary>. Replaces inline-styled
   summary attributes (font-weight, font-size, cursor). */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
}

.faq-item {
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-medium), box-shadow var(--motion-medium);
}

.faq-item[open],
.faq-item:hover {
  border-color: var(--color-border-strong);
}

.faq-item[open] {
  box-shadow: var(--shadow-md);
}

.faq-item__summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.faq-item__summary::-webkit-details-marker {
  display: none;
}

.faq-item__summary::after {
  content: "+";
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-regular);
  color: var(--color-brand-primary);
  transition: transform var(--motion-fast);
}

.faq-item[open] .faq-item__summary::after {
  content: "−";
}

.faq-item__summary:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.faq-item__body {
  padding: 0 var(--space-6) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 65ch;
}

/* Resources CTA block — bottom-of-page conversion. Replaces inline-styled
   conversion__inner attributes (display, text-align, padding). */
.resources-cta .conversion__inner {
  display: block;
  text-align: center;
  padding: var(--space-10) var(--space-6);
}

.resources-cta .conversion__inner h2 {
  margin: 0 auto var(--space-4);
  max-width: 28ch;
}

.resources-cta .conversion__inner p {
  margin: 0 auto var(--space-7);
  max-width: 60ch;
}

@media (max-width: 768px) {
  .resources-cta .conversion__inner {
    padding: var(--space-7) var(--space-4);
  }
}


/* ==========================================================================
   PRIVACY — long-form policy. Reading-optimized typography (65ch),
   section H2 with hairline bottom border, arrow-marker list.
   ========================================================================== */

/* Container — narrow editorial measure for sustained reading. */
.policy {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-8);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.policy-section + .policy-section {
  margin-top: var(--space-8);
}

/* Section heading — hairline bottom border, no side stripe. */
.policy-section h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.policy-section p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  max-width: 70ch;
  margin: 0 0 var(--space-5);
}

.policy-section p:last-child {
  margin-bottom: 0;
}

.policy-section a {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--motion-fast);
}

.policy-section a:hover {
  color: var(--color-brand-hover);
  text-decoration-thickness: 2px;
}

/* Arrow-marker list — replaces inline-styled <ul>/<li>/<span> arrow markup.
   Communication Blue arrow set in a CSS ::before pseudo-element so the HTML
   stays clean. */
.policy-arrow-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  max-width: 70ch;
}

.policy-arrow-list li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
}

.policy-arrow-list li::before {
  content: "\2192"; /* → arrow */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-brand-primary);
  font-weight: var(--fw-semibold);
}

.policy-arrow-list li:last-child {
  margin-bottom: 0;
}

/* Contact list at end of policy — bold label + link. Replaces inline-styled
   <ul>/<li>/<a color: var(--color-accent)> markup. */
.policy-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.policy-contact-list li {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
}

.policy-contact-list li strong {
  display: inline-block;
  min-width: 8rem;
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}


/* ==========================================================================
   CASE STUDY — resources/national-mall-gateway.html

   The National Mall Gateway is the single strongest proof asset on the site.
   The screenshot is the visual anchor; the surrounding chrome stays quiet so
   the proof carries the read. Tokens only. No raw hex. No side stripes. No
   translateY on hover.
   ========================================================================== */

/* Hero: long subtitle measure, both CTAs visible above the fold. */
.case-study-hero .page-hero__inner {
  max-width: var(--container-editorial);
}

.case-study-hero h1 {
  max-width: 18ch;
}

.case-study-hero .page-hero__subtitle {
  max-width: 60ch;
}

/* Featured image surface: the screenshot lands directly under the hero with
   no full-bleed background, framed as a clickable preview card. Mirrors the
   home page .proof__preview pattern so the asset reads consistently across
   surfaces. */
.case-study-feature {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.case-study-preview {
  display: flex;
  flex-direction: column;
  max-width: var(--container-max);
  margin-inline: auto;
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--motion-medium),
    border-color var(--motion-medium);
}

.case-study-preview:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.case-study-preview:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.case-study-preview__frame {
  display: block;
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface-card);
  overflow: hidden;
}

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

.case-study-preview__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-soft);
  border-top: 1px solid var(--color-border);
}

.case-study-preview__domain {
  font-weight: var(--fw-semibold);
  color: var(--color-brand-primary);
}

/* At-a-glance meta grid: client, platform, AI, launch, scale, recognition.
   Sober dl, hairline top + bottom borders, three columns desktop, two on
   tablet, one on phone. Not a hero-metric template: no big numbers, no
   gradient accents, no supporting-stats triplets. */
.case-study-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-7) 0;
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
}

.case-study-meta > div {
  margin: 0;
}

.case-study-meta dt {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-2);
}

.case-study-meta dd {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin: 0;
}

@media (max-width: 768px) {
  .case-study-meta {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-6);
  }
}

@media (max-width: 480px) {
  .case-study-meta {
    grid-template-columns: 1fr;
  }
}

/* Long-form story container: editorial measure for sustained reading. */
.case-study-container {
  max-width: var(--container-editorial);
  margin-inline: auto;
}

.case-study-container--space {
  margin-top: var(--space-10);
}

/* Body prose: 65ch cap, body-large size, relaxed leading. */
.case-study-prose {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  max-width: 65ch;
}

.case-study-prose p {
  margin: 0 0 var(--space-5);
}

.case-study-prose p:last-child {
  margin-bottom: 0;
}

/* H3 inside the long-form sections. */
.case-study-h3 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--color-ink);
  margin: var(--space-10) 0 var(--space-5);
  max-width: 28ch;
}

.case-study-h3--first {
  margin-top: 0;
}

.case-study-prose .case-study-h3 {
  margin-top: var(--space-10);
}

/* Platform features list: arrow-marker bullets in Communication Blue. */
.case-study-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  max-width: 65ch;
}

.case-study-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
}

.case-study-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-brand-primary);
  font-weight: var(--fw-semibold);
}

.case-study-list li strong {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}

/* Pullquote spacing in the case-study flow. The .pullquote base in
   components.css already provides the border-top in Communication Blue,
   Display 600 weight, 56ch cap. */
.case-study-pullquote {
  margin: var(--space-8) 0;
  max-width: 56ch;
}

.case-study-pullquote--feature {
  margin: var(--space-8) auto;
  text-align: center;
  max-width: 36ch;
}

.case-study-pullquote--feature blockquote {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-inline: auto;
}

/* Quotes grid: two-column on desktop, single column on mobile, with
   consistent pullquote spacing. */
.case-study-quotes .pullquote {
  margin: 0;
}

/* Bottom CTA: reuses .conversion shell but stacks vertically (single column,
   centered) since there is no form here. */
.case-study-cta .conversion__inner {
  display: block;
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.case-study-cta .conversion__text {
  max-width: 60ch;
  margin-inline: auto;
}

.case-study-cta .conversion__text .eyebrow {
  justify-content: center;
}

.case-study-cta .conversion__text h2 {
  margin: 0 auto var(--space-4);
  max-width: 28ch;
}

.case-study-cta .conversion__text p {
  margin: 0 auto var(--space-7);
  max-width: 60ch;
}

.case-study-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .case-study-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
}