:root {
  --op-ink: #07101c;
  --op-muted: #33465b;
  --op-paper: #f7f5f1;
  --op-peach: #f4d6cd;
  --op-blue: #0a5cff;
  --op-rule: #b9c3cc;
}

.off-page-seo-page {
  background: #fff;
  color: var(--op-ink);
}

body.analytics-page.off-page-seo-page .site-header,
body.analytics-page.off-page-seo-page .site-header.is-scrolled {
  border-color: #dce1e5 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 28px rgba(7, 16, 28, 0.1) !important;
}

body.analytics-page.off-page-seo-page .site-header:not(.is-scrolled),
body.analytics-page.off-page-seo-page .site-header:not(.is-scrolled) .site-brand,
body.analytics-page.off-page-seo-page .site-header:not(.is-scrolled) .nav-link,
body.analytics-page.off-page-seo-page .site-header:not(.is-scrolled) .nav-toggle {
  color: var(--op-ink);
}

body.analytics-page.off-page-seo-page .site-header:not(.is-scrolled) .site-header__cta {
  background: var(--op-ink);
  color: #fff;
}

.off-page-seo-page ::selection {
  background: var(--op-blue);
  color: #fff;
}

.off-page-canvas {
  overflow: clip;
}

.off-page-canvas :is(h1, h2, h3) {
  color: inherit;
  font-family: 'AGF Inter', Inter, sans-serif;
  font-weight: 760;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.off-page-canvas :is(h2, h3) {
  scroll-margin-top: 7rem;
}

.off-page-canvas :is(a, summary):focus-visible {
  outline: 3px solid var(--op-blue);
  outline-offset: 5px;
}

.off-page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.65fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
  min-height: min(940px, 100svh);
  padding: clamp(9rem, 14vw, 13rem) max(2rem, calc((100vw - 1320px) / 2)) clamp(6rem, 8vw, 9rem);
  background: var(--op-paper);
}

.off-page-intro__content {
  position: relative;
  z-index: 1;
}

.off-page-intro h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(2.55rem, 3.55vw, 3.6rem);
  line-height: 1.01;
}

.off-page-intro__title-line,
.off-page-intro__title-roll {
  display: block;
}

.off-page-intro__title-line {
  white-space: nowrap;
}

.off-page-intro__title-roll .text-roll__word {
  display: inline-block;
  white-space: nowrap;
}

.off-page-intro__title-roll .text-roll__letter {
  position: relative;
  display: inline-block;
  width: auto;
  perspective: 10000px;
  transform-style: preserve-3d;
}

.off-page-intro__title-roll .text-roll__face {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  backface-visibility: hidden;
}

.off-page-intro__title-roll .text-roll__face--enter { transform-origin: 50% 25%; }
.off-page-intro__title-roll .text-roll__face--exit { transform-origin: 50% 100%; }
.off-page-intro__title-roll .text-roll__spacer { visibility: hidden; }

.off-page-intro__title-roll .text-roll__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#off-page-intro-title-animation {
  display: none;
}

#off-page-intro-title.is-animated .off-page-intro__title-fallback {
  display: none;
}

#off-page-intro-title.is-animated #off-page-intro-title-animation {
  display: block;
}

.off-page-intro__graphic {
  position: relative;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding: 0;
}

.off-page-intro__graphic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 1rem;
  object-fit: cover;
}

.off-page-intro__graphic svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.off-page-map__path {
  fill: none;
  stroke: #a14559;
  stroke-width: 2;
  stroke-dasharray: 5 7;
}

.off-page-map__node {
  fill: #a14559;
}

.off-page-map__center {
  fill: var(--op-ink);
}

.off-page-map__center-text {
  fill: #fff;
  font-family: 'AGF Inter', Inter, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.off-page-map__label {
  fill: var(--op-ink);
  font-family: 'AGF Inter', Inter, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.off-page-intro__signals {
  display: none;
}

.off-page-definition,
.off-page-comparison,
.off-page-benefits,
.off-page-strategy,
.off-page-backlinks,
.off-page-faq {
  padding: clamp(5.5rem, 10vw, 10rem) max(2rem, calc((100vw - 1320px) / 2));
}

.off-page-definition { background: #fff; }
.off-page-comparison { background: #dceaf0; }
.off-page-benefits { background: #f3e5a8; }
.off-page-strategy { background: var(--op-ink); color: #fff; }
.off-page-backlinks { background: var(--op-paper); }
.off-page-faq { background: #fff; }

.off-page-definition__inner,
.off-page-benefits__inner,
.off-page-strategy__inner,
.off-page-backlinks__inner,
.off-page-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 8vw, 8rem);
  max-width: 1320px;
  margin-inline: auto;
}

.off-page-comparison__inner {
  max-width: 1320px;
  margin-inline: auto;
}

.off-page-canvas h2 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.65rem, 4.7vw, 5.15rem);
  line-height: 1.06;
}

.off-page-comparison h2 {
  max-width: 16ch;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.off-page-definition__copy,
.off-page-comparison__copy,
.off-page-benefits__copy,
.off-page-strategy__copy,
.off-page-backlinks__copy {
  max-width: 70ch;
  color: var(--op-muted);
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.65;
}

.off-page-strategy__copy { color: #e2ebf5; }

.off-page-canvas :is(.off-page-definition__copy, .off-page-comparison__copy, .off-page-benefits__copy, .off-page-strategy__copy, .off-page-backlinks__copy) p {
  margin: 0 0 1.5rem;
}

.off-page-canvas :is(.off-page-definition__copy, .off-page-comparison__copy, .off-page-benefits__copy, .off-page-strategy__copy, .off-page-backlinks__copy) p:last-child {
  margin-bottom: 0;
}

.off-page-definition__copy ul,
.off-page-benefits__copy ul {
  margin: 2rem 0 2.2rem;
  padding: 0;
  list-style: none;
}

.off-page-definition__copy li,
.off-page-benefits__copy li {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid currentColor;
  line-height: 1.45;
}

.off-page-definition__copy li {
  display: block;
  font-size: 1.25rem;
}

.off-page-benefits__copy li:last-child,
.off-page-definition__copy li:last-child {
  border-bottom: 1px solid currentColor;
}

.off-page-benefits__copy li strong { color: var(--op-ink); }

.off-page-comparison__copy {
  max-width: 900px;
  margin-left: auto;
}

.off-page-comparison h3 {
  margin: 3rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #9daeba;
  color: var(--op-ink);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.off-page-canvas :is(.off-page-comparison__copy, .off-page-backlinks__copy) a {
  color: #0755d9;
  font-weight: 700;
  text-underline-offset: 0.22em;
}

.off-page-comparison__takeaways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 2.5rem;
  border-top: 2px solid var(--op-ink);
  border-bottom: 2px solid var(--op-ink);
}

.off-page-comparison__takeaways p {
  margin: 0 !important;
  padding: 1.5rem 1.5rem 1.5rem 0;
  color: var(--op-ink);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.3;
}

.off-page-comparison__takeaways p + p {
  padding-left: 1.5rem;
  border-left: 1px solid #9daeba;
}

.off-page-strategy__copy p:first-child {
  padding-bottom: 1.8rem;
  border-bottom: 1px solid #6d8194;
  color: #fff;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.42;
}

.off-page-strategy__copy p:last-child {
  padding-top: 1.8rem;
  border-top: 1px solid #6d8194;
}

.off-page-faq__items { border-top: 1px solid var(--op-rule); }
.off-page-faq details { border-bottom: 1px solid var(--op-rule); }

.off-page-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.45rem 0;
  color: var(--op-ink);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.off-page-faq summary::-webkit-details-marker { display: none; }
.off-page-faq summary::after { content: '+'; flex: none; font-size: 1.6rem; font-weight: 400; line-height: 1; }
.off-page-faq details[open] summary::after { content: '−'; }
.off-page-faq details p { max-width: 65ch; margin: 0 0 1.6rem; color: var(--op-muted); font-size: 1.07rem; line-height: 1.65; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .off-page-map__path {
      animation: off-page-path-draw 1s linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 55%;
    }
  }
}

@keyframes off-page-path-draw {
  from { stroke-dashoffset: 100; opacity: 0.45; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@media (max-width: 980px) {
  .off-page-intro {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 9rem;
  }

  .off-page-intro h1 { font-size: clamp(2.55rem, 5vw, 3.6rem); }
  .off-page-intro__title-line { white-space: normal; }
  .off-page-intro__graphic { max-width: 630px; }
  .off-page-definition__inner,
  .off-page-benefits__inner,
  .off-page-strategy__inner,
  .off-page-backlinks__inner,
  .off-page-faq__inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .off-page-canvas h2 { max-width: 20ch; }
}

@media (max-width: 620px) {
  .off-page-intro,
  .off-page-definition,
  .off-page-comparison,
  .off-page-benefits,
  .off-page-strategy,
  .off-page-backlinks,
  .off-page-faq { padding-left: 1.25rem; padding-right: 1.25rem; }
  .off-page-intro { gap: 2.5rem; padding-top: 8.5rem; padding-bottom: 4.5rem; }
  .off-page-intro h1 { font-size: clamp(2.5rem, 9vw, 4.4rem); }
  .off-page-map__label { display: none; }
  .off-page-intro__signals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
    margin: 0 0 1rem;
    padding: 0;
    color: var(--op-ink);
    font-size: 0.88rem;
    font-weight: 760;
    list-style: none;
  }
  .off-page-intro__signals li { padding: 0.7rem 0; border-top: 1px solid #a14559; }
  .off-page-canvas h2 { font-size: clamp(2.45rem, 9vw, 3.5rem); }
  .off-page-comparison__takeaways { grid-template-columns: 1fr; }
  .off-page-comparison__takeaways p { padding-right: 0; }
  .off-page-comparison__takeaways p + p { padding: 1.5rem 0; border-top: 1px solid #9daeba; border-left: 0; }
  .off-page-benefits__copy li { grid-template-columns: 1fr; gap: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .off-page-map__path { animation: none; }
}

/* Feature showcase: scoped to the definition island. */
.off-page-definition__inner[hidden] { display: none; }
#off-page-definition-showcase:empty { display: none; }
#off-page-definition-showcase { max-width: 1320px; margin-inline: auto; }
#off-page-definition-showcase .op-fix-showcase { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,5rem); align-items: start; }
#off-page-definition-showcase h2 { max-width: 12ch; }
#off-page-definition-showcase :is(.op-fix-showcase__description,.off-page-showcase__context,.off-page-showcase__ongoing) { color: var(--op-muted); font-size: 1.05rem; line-height: 1.7; }
#off-page-definition-showcase .op-fix-showcase__description { margin: 1.8rem 0 1rem; }
#off-page-definition-showcase .off-page-showcase__context { margin: 0 0 2rem; }
#off-page-definition-showcase .custom-build__item { border: 0; border-bottom: 1px solid #ccd2d7; background: transparent; border-radius: 0; }
#off-page-definition-showcase .custom-build__item-heading { margin: 0; }
#off-page-definition-showcase .custom-build__trigger { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: 1.2rem 0; border: 0; background: transparent; color: var(--op-ink); font: inherit; font-size: 1.1rem; font-weight: 650; text-align: left; cursor: pointer; }
#off-page-definition-showcase .custom-build__trigger:hover { color: var(--op-blue); }
#off-page-definition-showcase .custom-build__chevron { width: 20px; height: 20px; flex-shrink: 0; transition: transform .2s; }
#off-page-definition-showcase [data-state="open"] > .custom-build__chevron { transform: rotate(180deg); }
#off-page-definition-showcase .custom-build__content-inner { padding: 0 0 1.3rem; color: var(--op-muted); font-size: 1rem; line-height: 1.65; }
#off-page-definition-showcase .op-fix-showcase__media { position: sticky; top: 8rem; height: 720px; max-height: 85svh; min-height: 420px; overflow: hidden; border: 1px solid #d5dce0; border-radius: 16px; background: #edf2f7; }
#off-page-definition-showcase .op-fix-showcase__image { position: absolute; inset: 0; }
#off-page-definition-showcase .op-fix-showcase__image[data-state="inactive"] { display: none; }
#off-page-definition-showcase .op-fix-showcase__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
#off-page-definition-showcase .op-fix-showcase__tabs { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); display: flex; padding: 5px; gap: 4px; border: 1px solid #c6cdd5; border-radius: 12px; background: #fff; }
#off-page-definition-showcase .op-fix-showcase__tabs button { padding: .8rem 1rem; border: 0; border-radius: 8px; background: transparent; color: var(--op-ink); font: inherit; font-size: .9rem; cursor: pointer; }
#off-page-definition-showcase .op-fix-showcase__tabs button[data-state="active"] { background: var(--op-ink); color: #fff; }
#off-page-definition-showcase :is(button,a):focus-visible { outline: 3px solid var(--op-blue); outline-offset: 4px; }
#off-page-definition-showcase .op-fix-showcase__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.3rem; margin-top: 2rem; }
#off-page-definition-showcase .op-button { display: inline-flex; padding: 1rem 1.2rem; background: var(--op-blue); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; }
#off-page-definition-showcase .op-button:hover { background: #0647c8; }
#off-page-definition-showcase .off-page-showcase__ongoing { margin: 1.8rem 0 0; font-size: .95rem; }
@media(max-width: 850px) {
  #off-page-definition-showcase .op-fix-showcase { grid-template-columns: 1fr; }
  #off-page-definition-showcase .op-fix-showcase__media { position: relative; top: auto; height: 560px; min-height: 0; max-height: none; }
}
@media(max-width: 480px) {
  #off-page-definition-showcase .op-fix-showcase__media { height: 440px; }
  #off-page-definition-showcase .op-fix-showcase__tabs button { padding: .75rem; }
}
@media(prefers-reduced-motion: reduce) {
  #off-page-definition-showcase * { transition: none !important; animation: none !important; }
}

/* Paired explanations and examples for the on-page / off-page comparison. */
.off-page-comparison__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(3rem, 5vw, 5rem);
}
.off-page-comparison__heading h2 { max-width: 20ch; margin: 0; }
.off-page-comparison__heading > p {
  max-width: 32ch;
  margin: 0;
  color: var(--op-muted);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.6;
}
.off-page-comparison__visual {
  max-width: 960px;
  margin: 0 auto clamp(3rem, 5vw, 5rem);
}
.off-page-comparison__visual figcaption {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 0.9rem;
  color: var(--op-ink);
  font-size: clamp(0.82rem, 1.15vw, 1rem);
  font-weight: 750;
  line-height: 1.3;
}
.off-page-comparison__visual figcaption span:last-child { text-align: right; }
.off-page-comparison__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
}
.off-page-comparison__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(3rem, 7vw, 7rem);
}
.off-page-comparison__column {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  min-width: 0;
  border-top: 2px solid var(--op-ink);
  padding-top: 1.75rem;
  color: var(--op-muted);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.65;
}
.off-page-comparison__column h3 {
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--op-ink);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.15;
}
.off-page-comparison__column p { margin: 0 0 1rem; }
.off-page-comparison__column .off-page-comparison__scope {
  margin: .5rem 0 1.75rem;
  color: #0755d9;
  font-weight: 650;
}
.off-page-comparison__elements { margin: .25rem 0 2rem; padding-left: 1.2rem; }
.off-page-comparison__elements li { padding-left: .25rem; margin-bottom: .4rem; }
.off-page-comparison__elements li::marker { color: #0755d9; }
.off-page-comparison__example { border-top: 1px solid #a8bdc7; padding-top: 1.5rem; }
.off-page-comparison__example h4 {
  margin: 0 0 1.5rem;
  color: var(--op-ink);
  font-family: 'AGF Inter', Inter, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
}
.off-page-comparison__connection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  margin-bottom: 1.5rem;
  color: var(--op-ink);
  font-weight: 700;
  line-height: 1.4;
}
.off-page-comparison__connection > :last-child { text-align: right; }
.off-page-comparison__connection > :is(a, span) > span {
  display: block;
  margin-top: .4rem;
  color: var(--op-muted);
  font-size: .85rem;
  font-weight: 400;
}
.off-page-comparison__connection a { color: #0755d9; text-underline-offset: .2em; }
.off-page-comparison__arrow { color: #0755d9; font-size: 1.8rem; font-weight: 400; }
.off-page-comparison__example p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .off-page-comparison__heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .off-page-comparison__heading > p { max-width: 45ch; }
  .off-page-comparison__columns { grid-template-columns: 1fr; gap: 3rem; }
  .off-page-comparison__column { display: block; }
}

/* Full-width supplied sticky benefits component; its utilities live in Shadow DOM. */
.off-page-benefits { padding-inline: 0; }
.off-page-benefits__inner { display: block; padding-inline: max(2rem, calc((100vw - 1320px) / 2)); }
.off-page-benefits__inner h2 { max-width: 18ch; }
.off-page-benefits__intro { color: var(--op-muted); font-size: 1.15rem; line-height: 1.65; }
.off-page-benefits__intro { max-width: 62ch; margin-top: 1.75rem; }
.off-page-benefits__copy[hidden] { display: none; }
#off-page-benefits-showcase { display: block; margin-top: 3rem; }


.off-page-strategy__inner { display: block; }
.off-page-strategy__inner > h2 { max-width: 20ch; }
.off-page-strategy__copy[hidden] { display: none; }
#off-page-strategy-showcase { width: 100%; }

/* Feature197 uses a light canvas and a full-width accordion/image row. */
.off-page-canvas .off-page-strategy { background: #e4eff8; color: var(--op-ink); padding-bottom: 0; }
.off-page-canvas .off-page-strategy__inner { display: block; width: 100%; max-width: 1320px; margin-inline: auto; }
.off-page-canvas .off-page-strategy__inner > h2 { max-width: 20ch; }

.off-page-canvas .off-page-backlinks { padding: 0; }
.off-page-backlinks__inner[data-backlinks-fallback] { padding: clamp(4rem, 8vw, 8rem) 2rem; }
.off-page-backlinks__inner[hidden] { display: none; }

.off-page-canvas .off-page-faq { padding: 0; background: #fff; color: var(--op-ink); }
.off-page-faq__inner[data-off-page-faq-fallback] { padding: 5rem 2rem; }
.off-page-faq__inner[hidden] { display: none; }

/* Full hero artwork: independent connections converge around a shared authority. */
.off-page-canvas .off-page-intro {
 display: flex;
 position: relative;
 align-items: center;
 min-height: min(940px, 100svh);
 background: #f7f5f1 url('/assets/off-page-authority-background-v3.png') center center / cover no-repeat;
 background-image: image-set(url('/assets/off-page-authority-background-v3.avif') type('image/avif'), url('/assets/off-page-authority-background-v3.png') type('image/png'));
 padding-top: 11rem;
 padding-bottom: 15rem;
}
.off-page-intro__content { width: 68%; max-width: 880px; }
.off-page-intro__subtext { max-width: 52ch; margin: 1.75rem 0 0; color: #33465b; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.65; }
@media (max-width: 760px) {
 .off-page-canvas .off-page-intro { min-height: 850px; align-items: flex-start; padding: 10rem 1.5rem 24rem; background-size: auto 62%; background-position: right bottom; }
 .off-page-intro__content { width: 100%; }
 .off-page-intro__title-line { white-space: normal; }
 .off-page-intro__subtext { font-size: 1.05rem; margin-top: 1.25rem; }
}

@media (min-width: 761px) { .off-page-intro__content { width: 54%; } .off-page-intro__title-line { white-space: normal; } }

/* Preserve the full illustration and keep view controls outside the artwork. */
#off-page-definition-showcase .op-fix-showcase__media { height: auto; min-height: 0; max-height: none; align-self: start; background: #f7f5f1; }
#off-page-definition-showcase .op-fix-showcase__image { position: relative; inset: auto; aspect-ratio: 3 / 2; }
#off-page-definition-showcase .op-fix-showcase__image img { width: 100%; height: 100%; object-fit: contain; }
#off-page-definition-showcase .op-fix-showcase__tabs { position: relative; bottom: auto; left: auto; transform: none; width: fit-content; margin: 1rem auto; }

.off-page-canvas .off-page-comparison { background: #fff; }
.off-page-canvas .off-page-backlinks { background: #e4eff8; }
.seo-comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4rem; margin-top:3rem; }
.seo-comparison-grid article { display:grid; grid-template-rows:subgrid; grid-row:span 4; gap:0; min-width:0; }
.seo-comparison-grid header { padding:0 0 1.75rem; }
.off-page-comparison .seo-comparison-grid h3 { border:0; padding:0; margin:0 0 .5rem; font-size:clamp(1.8rem,2.5vw,2.5rem); }
.seo-comparison-grid header p { margin:0; color:#0755d9; font-weight:600; }
.seo-comparison-grid__detail { padding:1.5rem 0; border-top:1px solid #dce1e5; }
.seo-comparison-grid h4 { margin:0 0 .6rem; color:#07101c; font-size:1rem; font-weight:700; }
.seo-comparison-grid__detail p { margin:0; max-width:52ch; color:#33465b; font-size:1.05rem; line-height:1.65; }
.seo-comparison-grid__detail .seo-comparison-grid__note { margin-top:1rem; font-size:.95rem; color:#526372; }
.seo-comparison-grid a { color:#0755d9; text-underline-offset:.2em; }
@media(max-width:700px) { .seo-comparison-grid { grid-template-columns:1fr; gap:2.5rem; } .seo-comparison-grid article { display:block; } }

/* Hold the hero while the definition section scrolls over it. */
.off-page-opening-stack { position: relative; isolation: isolate; }
.off-page-opening-stack > .off-page-intro { position: sticky; top: 0; z-index: 0; min-height: 100svh; }
.off-page-opening-stack > .off-page-definition { position: relative; z-index: 1; background: #fff; box-shadow: 0 -20px 50px rgba(7,16,28,.06); }
@media (max-width: 760px) { .off-page-opening-stack > .off-page-intro { min-height: max(850px, 100svh); } }
@media (prefers-reduced-motion: reduce) { .off-page-opening-stack > .off-page-intro { position: relative; } }


/* Continuous section colors with smooth, single-sweep boundaries. */
.off-page-canvas .off-page-comparison {
 position: relative;
 isolation: isolate;
 background-color: #ffffff;
 background-image:
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H1440V280C800 280 640 30 0 30Z'/%3E%3C/svg%3E"),
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath fill='%23f3e5a8' d='M0 30C640 30 800 280 1440 280V300H0Z'/%3E%3C/svg%3E");
 background-position: top, bottom;
 background-size: 100% 260px, 100% 240px;
 background-repeat: no-repeat;
}
.off-page-comparison::before, .off-page-benefits::before { content: none; }
.off-page-canvas .off-page-benefits { position: relative; background: #f3e5a8; padding-bottom: 0; }
.off-page-comparison__inner { position: relative; }
@media (max-width: 700px) {
 .off-page-canvas .off-page-comparison { background-size: 100% 180px, 100% 100px; }
}

/* Definition artwork stays centered in its column instead of tracking scroll. */
#off-page-definition-showcase .op-fix-showcase__media {
  position: relative;
  top: auto;
  align-self: center;
}
#off-page-definition-showcase .op-fix-showcase__accordion {
  margin-top: 2.75rem;
  border-top: 1px solid #ccd2d7;
}
#off-page-definition-showcase .custom-build__trigger {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
  padding: 1.5rem 0;
  color: var(--op-navy, #0b214d);
}
@media (max-width: 850px) {
  #off-page-definition-showcase .op-fix-showcase__media { align-self: start; }
}

.off-page-comparison__heading { grid-template-columns: 1fr; }

/* Two complete explanations beneath one centered comparison heading. */
.off-page-comparison__heading { display: block; text-align: center; }
.off-page-canvas .off-page-comparison__heading h2 {
  max-width: none;
  margin-inline: auto;
  font-size: clamp(2rem, 4.3vw, 4.5rem);
  line-height: 1.08;
}
.seo-comparison-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 5vw, 5rem);
}
.seo-comparison-panel {
  padding: clamp(1.75rem, 3.5vw, 3.5rem);
  background: #f7f5f1;
  border-radius: 16px;
}
.seo-comparison-panel:nth-child(2) { background: #e4eff8; }
.off-page-canvas .seo-comparison-panel h3 {
  margin: 0 0 .65rem;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #0b214d;
}
.seo-comparison-panel p { margin: 0 0 1.5rem; color: #33465b; font-size: 1.075rem; line-height: 1.75; }
.seo-comparison-panel .seo-comparison-panel__scope { margin-bottom: 2.5rem; color: #0755d9; font-weight: 600; }
.seo-comparison-panel p:last-child { margin-bottom: 0; }
.seo-comparison-panel a { color: #0755d9; text-underline-offset: .2em; }
@media (max-width: 700px) {
  .seo-comparison-panels {
    display: block;
    padding-bottom: clamp(9rem, 35svh, 22rem);
  }
  .seo-comparison-panel {
    position: sticky;
    top: calc(5.6rem + env(safe-area-inset-top, 0px));
    z-index: 1;
  }
  .seo-comparison-panel + .seo-comparison-panel {
    z-index: 2;
    margin-top: 1.25rem;
    box-shadow: 0 -12px 28px rgba(7, 16, 28, .1);
  }
  .off-page-canvas .off-page-comparison__heading h2 { font-size: clamp(1.7rem, 5.5vw, 2.4rem); }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .seo-comparison-panels { padding-bottom: 0; }
  .seo-comparison-panel { position: static; }
  .seo-comparison-panel + .seo-comparison-panel { margin-top: 1.25rem; box-shadow: none; }
}