/* Cool mint, blue, and lilac wash shared by the marketing editor sections. */
.advanced-editor-section {
  --editor-section-space: 6rem;
  position: relative;
  background: linear-gradient(135deg, #e0f2fe 0%, #ede9fe 30%, #d1fae5 65%, #d9f3f0 100%);
  background-size: 150% 150%;
  padding-bottom: var(--editor-section-space);
  color: #030712;
  isolation: isolate;
}

.advanced-editor-stage {
  position: relative;
  overflow: clip;
  background: transparent;
}

.advanced-editor-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--editor-section-space) 2rem 0;
}

.advanced-editor-copy { max-width: 1200px; margin: 0 auto; }
.advanced-editor-heading { max-width: 800px; margin: 0 auto 1.75rem; text-align: center; }
.advanced-editor-eyebrow { color: #765071; font-size: 0.75rem; font-weight: 600; }
.advanced-editor-label { color: var(--editor-label-color); font-size: 1rem; font-weight: 600; line-height: 1.4; }
/* One color progression across the grid, not a gradient repeated in each label. */
.advanced-editor-feature:nth-child(3n + 1) { --editor-label-color: #345b96; }
.advanced-editor-feature:nth-child(3n + 2) { --editor-label-color: #70519a; }
.advanced-editor-feature:nth-child(3n) { --editor-label-color: #236d60; }
.advanced-editor-eyebrow { margin: 0 0 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.advanced-editor-heading h2 {
  margin: 0 0 1rem;
  color: #030712;
  font-family: 'Newsreader', serif;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
}
.advanced-editor-heading > p:last-child,
.advanced-editor-feature p { margin: 0; color: #374151; font-size: 0.9375rem; line-height: 1.5; }
.advanced-editor-heading > p:last-child { max-width: 650px; margin: auto; }
.advanced-editor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.advanced-editor-feature {
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px rgba(77, 61, 100, 0.04);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.advanced-editor-feature h3 { margin: 0.35rem 0 0.5rem; color: #111827; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.advanced-editor-feature p { font-size: 0.8125rem; }
.advanced-editor-preview {
  position: relative;
  margin: 2rem auto 0;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(17, 24, 39, 0.2);
  border-radius: 1rem;
  background: transparent;
  aspect-ratio: 1638 / 924;
  overflow: hidden;

}
/* The supplied JPG has a dark surround baked into its pixels. Frame only the
   browser window (x=78, y=40, 1638×924) without modifying the source asset. */
.advanced-editor-preview img {
  position: absolute;
  display: block;
  width: 109.40171%;
  max-width: none;
  height: auto;
  left: -4.7619%;
  top: -4.329%;
}

/* JS enables the reveal only when there is room for both the copy and image.
   Without JS (or with reduced motion), the full screenshot stays in normal flow. */
@media (min-width: 1080px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .advanced-editor-section.is-scroll-reveal .advanced-editor-scroll { height: calc(100svh - 100px + var(--editor-travel, 800px)); }
  .advanced-editor-section.is-scroll-reveal .advanced-editor-stage { position: sticky; top: 100px; height: calc(100svh - 100px); }
  .advanced-editor-section.is-scroll-reveal .advanced-editor-copy {
    opacity: var(--editor-copy-opacity, 1);
    transform: translateY(var(--editor-copy-y, 0px)) scale(var(--editor-copy-scale, 1));
    transform-origin: center top;
    will-change: transform, opacity;
  }
  .advanced-editor-section.is-scroll-reveal .advanced-editor-preview {
    width: min(100%, calc((100svh - 210px) * 1.77273));
    transform: translateY(var(--editor-image-y, 0px)) scale(var(--editor-image-scale, 0.88));
    transform-origin: center top;
    will-change: transform;
  }
}
@media (max-width: 1079px) {
  .advanced-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advanced-editor-feature:nth-child(odd) { --editor-label-color: #345b96; }
  .advanced-editor-feature:nth-child(even) { --editor-label-color: #236d60; }
}
@media (max-width: 767px) {
  .advanced-editor-inner { padding: var(--editor-section-space) 1.25rem 0; display: flex; flex-direction: column; }
  .advanced-editor-copy { display: contents; }
  .advanced-editor-heading { order: 0; margin-bottom: 0; }
  .advanced-editor-preview { order: 1; margin: 1.75rem 0; padding: 0; border-radius: 0.625rem; }
  .advanced-editor-grid { order: 2; grid-template-columns: 1fr; }
  .advanced-editor-feature { padding: 1.25rem; }
  .advanced-editor-feature:nth-child(3n + 1) { --editor-label-color: #345b96; }
  .advanced-editor-feature:nth-child(3n + 2) { --editor-label-color: #70519a; }
  .advanced-editor-feature:nth-child(3n) { --editor-label-color: #236d60; }
  .advanced-editor-feature p { font-size: 0.9375rem; }
}

/* Match the adjacent marketing sections at each page's breakpoints. */
@media (max-width: 767px) {
  .advanced-editor-section { --editor-section-space: 3rem; }
}
@media (max-width: 768px) {
  .page-compare .advanced-editor-section { --editor-section-space: 3rem; }
}
@media (max-width: 480px) {
  .page-compare .advanced-editor-section { --editor-section-space: 2.5rem; }
}