/* ==========================================================================
   Components — Microsoft-adjacent UI library
   ========================================================================== */


/* ==========================================================================
   COMPONENT PRIMITIVES
   eyebrow, numeral-marker, rule, pullquote, callout. Bare names only.
   ========================================================================== */

/* Eyebrow — 12px semibold Communication Blue with 24px hairline rule prefix */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-brand-primary);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background-color: currentColor;
  flex-shrink: 0;
}

.eyebrow--quiet {
  color: var(--color-ink-soft);
}
.eyebrow--quiet::before {
  background-color: var(--color-border-strong);
}

/* Numeral marker — Segoe Light, replaces serif numerals */
.numeral-marker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(2rem, 3vw, 2.25rem);
  line-height: 1;
  color: var(--color-brand-primary);
  letter-spacing: var(--tracking-tight);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
}

.numeral-marker--current {
  color: var(--color-cn-accent);
}

/* Inline hairline rule — 48px divider, used as <hr class="rule"> */
.rule {
  display: block;
  width: 48px;
  height: 1px;
  background-color: var(--color-border-strong);
  margin: var(--space-5) 0;
  border: none;
}

.rule--center {
  margin-left: auto;
  margin-right: auto;
}

/* Pull-quote — border-TOP only, never border-left */
.pullquote {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--fw-semibold);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--color-ink);
  max-width: 56ch;
  margin: var(--space-8) 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-brand-primary);
}

.pullquote--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.pullquote__cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink-soft);
}

/* Callout — light gray fill, NO side stripe, NO border-left */
.callout {
  background: var(--color-surface-alt);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
  color: var(--color-ink);
  max-width: 60ch;
}

.callout p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}

.callout--accent {
  background-color: var(--color-brand-primary-light-10);
  border: 1px solid var(--color-brand-primary-light-20);
}

/* Links inside callouts sit on Surface-Alt or accent backgrounds; Communication
   Blue at body size measures 4.15:1 on #F5F5F5 (fails AA). Shift to the pressed
   shade (#005A9E ~ 7.5:1) to clear AA across all callout contexts. */
.callout a {
  color: var(--color-brand-pressed);
}
.callout a:hover {
  color: var(--color-brand-primary);
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn--lg {
  min-height: 44px;
  padding: 0 var(--space-6);
  font-size: var(--text-body);
}

.btn--sm {
  min-height: 32px;
  padding: 0 var(--space-4);
}

@media (max-width: 768px) {
  .btn {
    min-height: 44px;
  }
}

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

/* Primary */
.btn--primary {
  background-color: var(--color-brand-primary);
  color: var(--color-paper);
  border-color: var(--color-brand-primary);
}
.btn--primary:hover {
  background-color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-paper);
}
.btn--primary:active {
  background-color: var(--color-brand-pressed);
  border-color: var(--color-brand-pressed);
}
.cta-primary {
  /* legacy class — alias to btn--primary */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0;
  background-color: var(--color-brand-primary);
  color: var(--color-paper);
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.cta-primary:hover {
  background-color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-paper);
}
.cta-primary--inverse {
  background-color: var(--color-paper);
  color: var(--color-brand-primary);
  border-color: var(--color-paper);
}
.cta-primary--inverse:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-brand-primary);
  border-color: var(--color-surface-alt);
}

/* Secondary */
.btn--secondary {
  background-color: transparent;
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}
.btn--secondary:hover {
  background-color: var(--color-brand-primary);
  color: var(--color-paper);
  border-color: var(--color-brand-primary);
}

/* Ghost / outline */
.btn--ghost,
.btn--outline {
  background-color: transparent;
  color: var(--color-brand-primary);
  border: 0;
}
.btn--ghost:hover,
.btn--outline:hover {
  color: var(--color-brand-hover);
  text-decoration: underline;
}

.cta-ghost,
.cta-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: var(--color-brand-primary);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  cursor: pointer;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.cta-ghost:hover,
.cta-arrow:hover {
  color: var(--color-brand-hover);
  text-decoration-color: currentColor;
}

/* Dark-band placements: secondary buttons sitting on navy heroes/sections */
.page-hero .btn--secondary,
.home-hero .btn--secondary,
.home-section--navy .btn--secondary,
.hero .btn--secondary {
  background-color: transparent;
  color: var(--color-on-dark);
  border-color: var(--color-on-dark);
}
.page-hero .btn--secondary:hover,
.home-hero .btn--secondary:hover,
.home-section--navy .btn--secondary:hover,
.hero .btn--secondary:hover {
  background-color: var(--color-on-dark);
  color: var(--color-brand-primary);
}


/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}
.card--compact {
  padding: var(--space-5);
}
.card--feature {
  padding: var(--space-8);
}


/* ==========================================================================
   CHIPS / TAGS
   ========================================================================== */

.chip,
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  white-space: nowrap;
}


/* ==========================================================================
   PAGE HERO
   ========================================================================== */

.page-hero {
  position: relative;
  padding: var(--section-y-lg) 0;
  background:
    radial-gradient(900px 460px at 78% 12%, rgba(0, 120, 212, 0.15), transparent 65%),
    var(--color-deep-navy);
  color: var(--color-on-dark);
  overflow: hidden;
}

/* Faint structural grid — quiet engineered texture on the navy hero.
   Sits above the navy + radial background, below .page-hero__inner content.
   Drifts extremely slowly (living hero, motion spec Part 6): the inset bleed
   gives the translate loop room so no edge is ever exposed. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: -64px;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--color-hero-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-hero-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  animation: hero-grid-drift var(--dur-ambient) linear infinite;
}

/* Soft ambient light — barely-perceptible slow shift on the navy hero. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(620px 360px at 80% 14%, rgba(0, 120, 212, 0.18), transparent 70%);
  pointer-events: none;
  animation: hero-light-shift calc(var(--dur-ambient) * 1.4) ease-in-out infinite alternate;
}

@keyframes hero-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(64px, 64px, 0); }
}

@keyframes hero-light-shift {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
  to   { transform: translate3d(-3%, 2.5%, 0) scale(1.1); opacity: 1; }
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0;
}

/* Hero entrance choreography — staggered ease-out fade + rise on the direct
   children of .page-hero__inner. Pure CSS, no per-page markup. No-JS-safe:
   keyframe resolves to the visible state. */
@keyframes page-hero-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-hero__inner > * {
  animation: page-hero-step-in var(--dur-entrance) var(--ease-out-expo) both;
}
.page-hero__inner > *:nth-child(1) { animation-delay: calc(var(--stagger-hero) * 0); }
.page-hero__inner > *:nth-child(2) { animation-delay: calc(var(--stagger-hero) * 1); }
.page-hero__inner > *:nth-child(3) { animation-delay: calc(var(--stagger-hero) * 2); }
.page-hero__inner > *:nth-child(4) { animation-delay: calc(var(--stagger-hero) * 3); }
.page-hero__inner > *:nth-child(5) { animation-delay: calc(var(--stagger-hero) * 4); }
.page-hero__inner > *:nth-child(n+6) { animation-delay: calc(var(--stagger-hero) * 5); }

@media (prefers-reduced-motion: reduce) {
  .page-hero::before,
  .page-hero::after {
    animation: none;
  }
  .page-hero__inner > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.page-hero--center .page-hero__inner {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.page-hero h1,
.page-hero__h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-on-dark);
  margin: 0 0 var(--space-5);
  max-width: 28ch;
}

.page-hero--center h1,
.page-hero--center .page-hero__h1 {
  margin-left: auto;
  margin-right: auto;
}

.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-on-dark-soft);
  margin: 0 0 var(--space-4);
}

.page-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.page-hero__subtitle,
.page-hero .hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-on-dark-soft);
  margin: 0 0 var(--space-5);
  max-width: 64ch;
  opacity: 1;
}

.page-hero__proof,
.page-hero .hero__proof {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-on-dark-soft);
  margin: 0 0 var(--space-6);
  max-width: 64ch;
  opacity: 1;
}

.page-hero--center .page-hero__subtitle,
.page-hero--center .hero__subtitle {
  margin-left: auto;
  margin-right: auto;
}

.page-hero__actions,
.page-hero .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
}

.page-hero--center .page-hero__actions {
  justify-content: center;
}

.page-hero__caption {
  margin: var(--space-5) 0 0;
  font-size: var(--text-small);
  color: var(--color-on-dark-soft);
}

.page-hero__caption a {
  color: var(--color-on-dark-link);
  text-decoration: underline;
}

.page-hero__caption a:hover {
  color: var(--color-on-dark);
}

@media (max-width: 768px) {
  .page-hero {
    padding: var(--section-y) 0;
    min-height: auto;
  }
  .page-hero__actions,
  .page-hero .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .page-hero--center .page-hero__actions {
    align-items: center;
  }
}


/* ==========================================================================
   HEADER + NAVIGATION
   ========================================================================== */

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

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 100%;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-brand-primary);
  color: var(--color-paper);
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: var(--z-modal);
  transition: top var(--transition-fast);
}

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

.header__logo img {
  height: 32px;
  width: auto;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav__link:hover,
.nav__link[aria-expanded="true"] {
  color: var(--color-brand-primary);
}

.nav__arrow {
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition-fast);
}

.nav__link[aria-expanded="true"] .nav__arrow {
  transform: rotate(-135deg) translateY(-2px);
}

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  /* Animated open/close — opacity + slight rise. visibility keeps a closed
     menu out of the a11y tree and pointer flow between states. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility 0s linear var(--dur-base);
}

.nav__dropdown[aria-hidden="false"],
.nav__dropdown.is-open,
.nav__item:hover > .nav__dropdown,
.nav__link[aria-expanded="true"] + .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility 0s;
}

.nav__dropdown a {
  padding: var(--space-3) var(--space-4);
  color: var(--color-ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav__dropdown a:hover {
  background: var(--color-surface-alt);
  color: var(--color-brand-primary);
}

.header__actions {
  display: flex;
  align-items: center;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.hamburger__line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-ink);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  position: fixed;
  inset: var(--header-height-mobile) 0 0 0;
  z-index: var(--z-overlay);
  background: var(--color-paper);
  padding: var(--space-6) var(--space-4);
  overflow-y: auto;
  /* Animated open/close — fade + slight rise. Keyed off .is-open (set by
     nav-dropdown.js). Closed state stays out of the a11y tree + pointer flow. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility 0s linear var(--dur-base);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility 0s;
}

.mobile-nav__cta-wrap {
  padding: var(--space-4);
}

.mobile-nav__cta {
  width: 100%;
  text-align: center;
}

@media (max-width: 1023px) {
  .header__nav,
  .header__actions {
    display: none;
  }
  .hamburger {
    display: flex;
    /* 44×44 minimum touch target — P3 a11y nit from the post-pivot audit. */
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  .site-header {
    height: var(--header-height-mobile);
  }
  /* Mobile-nav participates in layout at this breakpoint; the .is-open
     class drives the animated open/close (visibility + opacity). */
  .mobile-nav {
    display: flex;
  }
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-deep-navy);
  color: var(--color-on-dark-soft);
  padding: var(--section-y) 0 var(--space-6);
}

.site-footer a {
  color: var(--color-on-dark-soft);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.footer__col h4 {
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: var(--color-on-dark);
  margin-bottom: var(--space-4);
  letter-spacing: 0;
  text-transform: none;
}

.footer__col ul {
  margin: 0;
  list-style: none;
  padding-left: 0;
}

.footer__col li {
  padding: 0;
  margin-bottom: var(--space-2);
  color: var(--color-on-dark-soft);
  line-height: var(--leading-normal);
}

.footer__col li::before {
  content: none;
}

.footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  color: var(--color-on-dark-soft);
}

.footer__social a:hover {
  border-color: var(--color-on-dark);
  color: var(--color-on-dark);
}

.footer__badges {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.footer__badges h4 {
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: var(--color-on-dark);
  margin-bottom: var(--space-4);
}

.footer__badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.footer__badges-grid img {
  width: auto;
  height: 56px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.footer__bottom {
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--text-small);
  color: var(--color-on-dark-soft);
}

.footer__bottom p {
  margin-bottom: var(--space-2);
  color: var(--color-on-dark-soft);
}


/* ==========================================================================
   FORMS
   ========================================================================== */

.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form__group--full {
  grid-column: 1 / -1;
}

.form__label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.form__input,
.form__select,
.form__textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

.form__textarea {
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  line-height: var(--leading-normal);
  resize: vertical;
}

.form__input:focus-visible,
.form__select:focus-visible,
.form__textarea:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 0;
  border-color: var(--color-brand-primary);
}

.form__input[aria-invalid="true"],
.form__select[aria-invalid="true"],
.form__textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form__error {
  display: none;
  font-size: var(--text-small);
  color: var(--color-error);
  margin-top: var(--space-1);
}

.form__group.has-error .form__error,
[data-validate] .form__group.has-error .form__error {
  display: block;
}


/* ==========================================================================
   PILLAR HERO DETAIL — Microsoft product UI screenshot sitting below the
   hero CTA row. Frames a real product surface (Copilot Work tab, Sentinel
   MITRE coverage, etc.) so the page reads as "we deploy what Microsoft
   ships" rather than as abstract claims. Hairline border, no glow, no
   translate, no drop shadow. Cross-page-family component: used by the
   solutions pillar pages and the Managed SOC service page.
   ========================================================================== */

.pillar-hero__detail {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
}

.pillar-hero__detail img {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-on-dark-border);
  background-color: var(--color-paper);
}

@media (max-width: 768px) {
  .pillar-hero__detail {
    margin-top: var(--space-6);
  }
}