:root {
  --content-xl: 1200px;
}

body {
	font-family: 'PSPrompt', -apple-system, BlinkMacSystemFont, sans-serif;
}

.statement-banner-point {
  max-width: none;
}

/* EssentialContentProse — give it a subtle tint so the section reads as a
   distinct band against the white sections above and below, and widen the
   text column (the default --content-narrow / 640px is too cramped). */
.content-prose {
  background: #f4f7fb;
}

.content-prose-container {
  max-width: var(--content-md);
}

/* EssentialContentProse banner variant — opt-in only. Add `banner` (plus a
   per-instance hook class) to an EssentialContentProse's classNames to render
   it as a polished, self-contained banner card instead of a plain text block.
   It reuses the theme's signature gradient (.statement-banner / .cta-section)
   so it reads as a deliberate "moment" that matches the rest of the site, and
   the surrounding light band lets the card float above it. Plain (non-banner)
   EssentialContentProse instances are unaffected. */
.content-prose.banner .content-prose-container {
  position: relative;
  overflow: hidden;
  padding: var(--space-9) var(--space-8);
  border-radius: 22px;
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 26px 60px -24px rgba(3, 143, 229, 0.5);
}

/* Soft brand glow bleeding in from the top-right corner for depth. */
.content-prose.banner .content-prose-container::after {
  content: '';
  position: absolute;
  top: -45%;
  right: -12%;
  width: 55%;
  height: 170%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 70%, transparent), transparent 70%);
  opacity: 0.4;
  pointer-events: none;
}

/* The headline + body sit above the glow and switch to light text on the
   gradient (main.css colours them dark for the default white-band treatment). */
.content-prose.banner h2 {
  position: relative;
  z-index: 1;
  color: var(--color-surface);
}

.content-prose.banner .content-prose-body {
  position: relative;
  z-index: 1;
  max-width: 46em;
  margin: 0 auto;
  color: var(--color-surface);
  opacity: 0.92;
}

@media (max-width: 768px) {
  .content-prose.banner .content-prose-container {
    padding: var(--space-8) var(--space-6);
    border-radius: 18px;
  }
}

/* The hero screenshot is nearly square, so filling the full column width made
   it dominate the section vertically. Cap its height (keeping aspect ratio via
   width:auto) and pin it to the right of its column on desktop. The .artwork
   wrapper is the full-width flex parent of the <img> (.artwork in main.css sets
   width:100%; justify-content:center), so the right-alignment override goes
   there, not on .split-hero-artwork-container. */
.split-hero-artwork-container .artwork-media {
  justify-content: flex-end;
}

.split-hero-artwork-container .artwork-media img {
  width: auto;
  max-width: 100%;
  max-height: 26em;
}

/* On mobile the columns stack, so center the screenshot under the text. */
@media (max-width: 768px) {
  .split-hero-artwork-container .artwork-media {
    justify-content: center;
  }
}

/* Dial the hero headline down from --text-4xl to --text-3xl. */
.split-hero-content h1 {
  font-size: var(--text-3xl);
}

/* Keep the hero subheadline at its desktop size on mobile. main.css shrinks
   .split-hero-subtext to --text-base (16px) below 768px, which reads too small
   against the large headline; hold it at --text-lg (20px) instead. */
@media (max-width: 768px) {
  .split-hero-subtext {
    font-size: var(--text-lg);
  }
}

/* EssentialStepGuide — rounded badges, softer depth, roomier spacing.
   Overrides the square 2px badges and tighter gaps from main.css. */
.process-step {
  gap: var(--space-7);
  margin-bottom: var(--space-9);
}

.step-number {
  border-radius: 14px;
  background: linear-gradient(135deg, #1aa3f0 0%, var(--color-primary) 100%);
  box-shadow: 0 6px 16px rgba(3, 143, 229, 0.28);
}

.step-content {
  padding-top: var(--space-1);
}

.step-title {
  margin-bottom: var(--space-2);
}

.step-description {
  max-width: 46em;
}

@media (max-width: 768px) {
  .process-step {
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }
  .step-number {
    border-radius: 12px;
  }
}

/* EssentialLinkCardGrid — align the CTA links at the bottom of every card,
   regardless of how many lines the description wraps to. The grid already
   stretches cards to equal height; making each card a flex column and
   letting the CTA take the leftover space pins it to the bottom. */
.link-card {
  display: flex;
  flex-direction: column;
}

.link-card-cta {
  margin-top: auto;
}

/* EssentialFeatureGrid — soften the cards' square corners (main.css leaves
   .feature-card with no border-radius). */
.feature-card {
  border-radius: 8px;
}