:root {
  --off-orange: #ff7613;
  --off-dark: #201e1d;
  --off-ink: #17191f;
  --off-muted: #626875;
  --off-cream: #fff7ee;
  --off-line: #f0d8c3
}

/* 2026 cohesive Off-Page SEO section refresh */

/* 1. Remove circular artwork decoration */
.off-page-seo-page .hero-orbit,.off-page-seo-page .hero-art:before,.off-page-seo-page .hero-art:after{display:none!important;content:none!important}
.off-page-seo-page .hero-art{background:transparent!important}

/* 2. Why it matters: tighter, neutral and structured */
.off-page-seo-page .off-matters{padding:80px 0!important;background:#f5f3f0!important;background-image:linear-gradient(rgba(225,216,208,.38) 1px,transparent 1px),linear-gradient(90deg,rgba(225,216,208,.38) 1px,transparent 1px)!important;background-size:42px 42px!important}
.off-page-seo-page .off-matters:before,.off-page-seo-page .off-matters:after{display:none!important;content:none!important}
.off-page-seo-page .off-matters .matters-layout{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)!important;gap:55px!important;align-items:center!important}
.off-page-seo-page .off-matters .matters-layout>div:first-child{padding:38px!important;border:1px solid #e5ddd6!important;border-radius:22px!important;background:#fff!important;box-shadow:none!important}
.off-page-seo-page .off-matters .matters-layout>div:first-child:after{display:none!important}
.off-page-seo-page .off-matters p{font-size:15.5px!important;line-height:1.75!important}
.off-page-seo-page .authority-cards{gap:14px!important}
.off-page-seo-page .authority-cards article,.off-page-seo-page .authority-cards article:nth-child(2),.off-page-seo-page .authority-cards article:nth-child(3){min-height:0!important;padding:22px 25px 22px 90px!important;border:1px solid #e5ddd6!important;border-radius:16px!important;background:#fff!important;box-shadow:none!important;transform:none!important;color:#201c19!important}
.off-page-seo-page .authority-cards article:before{left:22px!important;top:50%!important;width:50px!important;height:50px!important;transform:translateY(-50%)!important;border-radius:13px!important;background:#fff0e4!important;color:#f06c0b!important}
.off-page-seo-page .authority-cards b{top:16px!important;right:18px!important;font-size:28px!important;color:#eee7e1!important}
.off-page-seo-page .authority-cards strong{font-size:20px!important;color:#201c19!important}.off-page-seo-page .authority-cards span{font-size:13.5px!important;color:#716a64!important}

/* 3. Link profile: reduced vertical space */
.off-page-seo-page .profile-section{padding:78px 0!important;background:#fff!important}
.off-page-seo-page .profile-layout{gap:60px!important;align-items:center!important}
.off-page-seo-page .profile-factors{gap:10px!important}.off-page-seo-page .profile-factors span{min-height:58px!important;padding:15px 18px 15px 48px!important}
.off-page-seo-page .profile-note{margin-top:22px!important;padding:20px 22px!important}
.off-page-seo-page .profile-meter{padding:38px 42px!important;border-radius:22px!important;box-shadow:none!important}
.off-page-seo-page .meter{width:180px!important;height:180px!important;margin-bottom:28px!important}

/* 4. Benefits: dark full-width outcome panel with compact cards */
.off-page-seo-page .off-benefits{padding:78px 0!important;background:linear-gradient(125deg,#181513,#382219)!important;color:#fff!important}
.off-page-seo-page .off-benefits:before,.off-page-seo-page .off-benefits:after{display:none!important;content:none!important}
.off-page-seo-page .off-benefits .benefit-layout{grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr)!important;gap:55px!important;align-items:center!important}
.off-page-seo-page .off-benefits .benefit-layout>div:first-child{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.off-page-seo-page .off-benefits .benefit-layout>div:first-child:before,.off-page-seo-page .off-benefits .benefit-layout>div:first-child:after{display:none!important;content:none!important}
.off-page-seo-page .off-benefits h2{color:#fff!important}.off-page-seo-page .off-benefits p{color:#d8cec8!important;font-size:15px!important}
.off-page-seo-page .off-benefits .benefit-list{grid-template-columns:1fr 1fr!important;gap:12px!important}
.off-page-seo-page .off-benefits .benefit-list span,.off-page-seo-page .off-benefits .benefit-list span:nth-child(even),.off-page-seo-page .off-benefits .benefit-list span:last-child{min-height:68px!important;padding:17px 18px 17px 54px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:13px!important;background:rgba(255,255,255,.07)!important;box-shadow:none!important;color:#fff!important}
.off-page-seo-page .off-benefits .benefit-list span:before{left:17px!important;width:25px!important;height:25px!important;background:#ff811a!important;color:#181513!important}
.off-page-seo-page .off-benefits .benefit-list span:last-child{grid-column:1/-1!important}

/* 5. Process: clean connected steps */
.off-page-seo-page .process-section{padding:82px 0!important;background:#fff!important}
.off-page-seo-page .process-section:before,.off-page-seo-page .process-section:after{display:none!important;content:none!important}
.off-page-seo-page .process-flow{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:14px!important;align-items:stretch!important;margin-top:42px!important}
.off-page-seo-page .process-flow:before{left:7%!important;right:7%!important;top:35px!important;height:2px!important;background:#f47a16!important}
.off-page-seo-page .process-flow article,.off-page-seo-page .process-flow article:nth-child(even){min-height:300px!important;margin:0!important;padding:72px 22px 24px!important;border:1px solid #e6ded7!important;border-radius:17px!important;background:#fff!important;box-shadow:none!important;transform:none!important}
.off-page-seo-page .process-flow article:before{left:20px!important;top:18px!important;width:42px!important;height:42px!important;border-radius:12px!important;background:#fff0e4!important;color:#f06c0b!important}
.off-page-seo-page .process-flow article:after{display:none!important}
.off-page-seo-page .process-flow b{top:20px!important;right:18px!important;color:#eee7e1!important;font-size:24px!important}
.off-page-seo-page .process-flow h3{font-size:18px!important;line-height:1.35!important}.off-page-seo-page .process-flow p{font-size:13.5px!important;line-height:1.7!important}

/* 6. Why choose: less padding, richer feature grid */
.off-page-seo-page .off-choose{padding:78px 0!important;background-color:#f7f5f2!important;background-image:linear-gradient(rgba(227,219,211,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(227,219,211,.42) 1px,transparent 1px)!important;background-size:42px 42px!important}
.off-page-seo-page .choose-list{grid-template-columns:repeat(4,1fr)!important;gap:12px!important;margin-top:36px!important}
.off-page-seo-page .choose-list span{position:relative;min-height:92px!important;padding:20px 18px 20px 54px!important;border:1px solid #e3dbd4!important;border-radius:14px!important;background:rgba(255,255,255,.94)!important;box-shadow:none!important;font-size:14px!important;line-height:1.45!important}
.off-page-seo-page .choose-list span:before{left:19px!important;top:50%!important;transform:translateY(-50%)!important;color:#f06c0b!important;font-size:20px!important}
.off-page-seo-page .choose-list span:hover{transform:translateY(-3px)!important;border-color:rgba(240,108,11,.35)!important;box-shadow:0 12px 25px rgba(45,33,24,.06)!important}
.off-page-seo-page .off-choose>.container>p{max-width:980px!important;margin:34px auto 0!important;padding:0!important;color:#665f59!important;font-size:15.5px!important;line-height:1.75!important}

@media(max-width:1050px){.off-page-seo-page .process-flow{grid-template-columns:repeat(3,1fr)!important}.off-page-seo-page .process-flow:before{display:none!important}.off-page-seo-page .choose-list{grid-template-columns:1fr 1fr!important}}
@media(max-width:820px){.off-page-seo-page .off-matters .matters-layout,.off-page-seo-page .profile-layout,.off-page-seo-page .off-benefits .benefit-layout{grid-template-columns:1fr!important;gap:35px!important}.off-page-seo-page .process-flow{grid-template-columns:1fr 1fr!important}}
@media(max-width:580px){.off-page-seo-page .off-matters,.off-page-seo-page .profile-section,.off-page-seo-page .off-benefits,.off-page-seo-page .process-section,.off-page-seo-page .off-choose{padding:60px 0!important}.off-page-seo-page .off-matters .matters-layout>div:first-child{padding:26px 22px!important}.off-page-seo-page .off-benefits .benefit-list,.off-page-seo-page .process-flow,.off-page-seo-page .choose-list{grid-template-columns:1fr!important}.off-page-seo-page .process-flow article,.off-page-seo-page .process-flow article:nth-child(even){min-height:0!important}.off-page-seo-page .choose-list span{min-height:76px!important}}

.off-page-seo-page {
  overflow-x: hidden
}

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

.off-page-seo-page .container {
  width: min(1180px, calc(100% - 40px));
  margin: auto
}

.off-page-seo-page main section:not(.page-hero) {
  padding: 78px 0
}

.off-page-seo-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--off-orange);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.2px;
  margin-bottom: 16px
}

.off-page-seo-page .eyebrow:before {
  content: "";
  width: 30px;
  height: 2px;
  background: currentColor
}

.off-page-seo-page .eyebrow.light {
  color: #ffb474
}

.off-page-seo-page main h2 {
  margin: 0 0 20px;
  color: var(--off-ink);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 850;
  letter-spacing: -1.3px
}

.off-page-seo-page main h3 {
  font-weight: 800
}

.off-page-seo-page main p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--off-muted);
  margin: 0 0 16px
}

.off-hero-grid,
.strategy-layout,
.profile-layout,
.benefit-layout,
.matters-layout,
.cta-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 75px
}

.off-copy h2 {
  max-width: 650px
}

.off-actions {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap
}

.off-actions a,
.off-cta a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border: 2px solid var(--off-orange);
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 800;
  color: var(--off-ink);
  transition: .3s
}

.off-actions a:first-child,
.off-cta a {
  background: var(--off-orange);
  color: #fff
}

.off-actions a:hover,
.off-cta a:hover {
  transform: translateY(-4px);
  box-shadow: 0 13px 28px #ff761335
}

.off-hero {
  position: relative;
  background: linear-gradient(135deg, #fff 0%, #fff9f3 62%, #fff0df 100%)
}

.off-hero:before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border: 80px solid #fff3e7;
  border-radius: 50%;
  right: -150px;
  top: -200px
}

.hero-art {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: flex-end;
  justify-content: center
}

.hero-art:before {
  content: "";
  position: absolute;
  inset: 60px 15px 20px;
  border-radius: 48% 48% 38% 38%;
  /* background: linear-gradient(145deg, #ffb96f, #ff7613);
  box-shadow: 0 35px 70px #ff761334 */
}

.hero-orbit {
  position: absolute;
  width: 410px;
  height: 410px;
  border: 1px dashed #2e2a4f55;
  border-radius: 50%;
  animation: off-spin 24s linear infinite
}

.hero-orbit:before,
.hero-orbit:after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #29233f;
  box-shadow: 0 0 0 8px #fff
}

.hero-orbit:before {
  left: 16px;
  top: 90px
}

.hero-orbit:after {
  right: 25px;
  bottom: 72px;
  background: #ff7613
}

.hero-art img {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 540px);
  max-height: 540px;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px #39231532);
  transition: .45s
}

.hero-art:hover img {
  transform: translateY(-10px)
}

.hero-stat {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-width: 145px;
  padding: 16px 19px;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 17px 42px #32261d29;
  border: 1px solid #ffdec1
}

.hero-stat b {
  font-size: 27px;
  color: var(--off-orange)
}

.hero-stat small {
  font-weight: 700;
  color: #5e626a
}

.stat-one {
  left: -12px;
  top: 80px
}

.stat-two {
  right: -8px;
  bottom: 35px
}

@keyframes off-spin {
  to {
    transform: rotate(360deg)
  }
}

.link-visual {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center
}

.network-ring {
  position: absolute;
  width: 350px;
  height: 350px;
  border: 1px dashed #ff761366;
  border-radius: 50%;
  box-shadow: 0 0 0 55px #fff6ed, 0 0 0 56px #ffd7b4
}

.domain-core {
  position: relative;
  z-index: 2;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: var(--off-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 25px 60px #27201a3a
}

.domain-core b {
  color: var(--off-orange);
  letter-spacing: 3px
}

.domain-core strong {
  font-size: 20px;
  margin: 4px
}

.domain-core small {
  color: #c7c3c0
}

.node {
  position: absolute;
  z-index: 3;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--off-orange);
  font-style: normal;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 12px 32px #2c241c24;
  border: 1px solid #ffe0c4
}

.n1 {
  top: 26px;
  left: 88px
}

.n2 {
  top: 65px;
  right: 42px
}

.n3 {
  left: 24px;
  bottom: 92px
}

.n4 {
  right: 34px;
  bottom: 76px
}

.n5 {
  bottom: 15px;
  left: 190px
}

.link-line {
  position: absolute;
  width: 2px;
  height: 120px;
  background: linear-gradient(var(--off-orange), transparent);
  transform-origin: bottom;
  left: 50%;
  top: 110px
}

.l1 {
  transform: rotate(-48deg)
}

.l2 {
  transform: rotate(52deg)
}

.l3 {
  top: 245px;
  transform: rotate(44deg)
}

.l4 {
  top: 248px;
  transform: rotate(-45deg)
}

.l5 {
  top: 270px;
  height: 100px;
  transform: rotate(0)
}

.off-matters {
  position: relative;
  background: linear-gradient(135deg, #fff8f1 0%, #fff0df 100%)
}

.off-matters:before {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: #ff761314;
  left: -130px;
  top: -150px
}

.off-matters:after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border: 55px solid #fff8f0;
  border-radius: 50%;
  right: -80px;
  bottom: -105px
}

body#top.off-page-seo-page main .off-benefits h2,
body#top.off-page-seo-page main .off-cta h2 {
  color: #fff !important
}

.off-matters .matters-layout {
  position: relative;
  z-index: 1;
  grid-template-columns: .9fr 1.1fr
}

.off-matters .matters-layout>div:first-child {
  position: relative;
  padding: 42px 44px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 60px #5b30151a;
  border: 1px solid #f2d7be
}

.off-matters .matters-layout>div:first-child:after {
  content: "LINK AUTHORITY";
  display: block;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #f3dfce;
  color: #d9c3af;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 3px
}

.off-matters p {
  color: var(--off-muted) !important
}

.authority-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px
}

.authority-cards article {
  position: relative;
  min-height: 118px;
  padding: 24px 28px 24px 116px;
  background: #fff;
  border: 1px solid #f0d4bc;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: .35s;
  box-shadow: 0 14px 34px #5431170d
}

.authority-cards article:nth-child(2) {
  margin-left: 42px
}

.authority-cards article:before {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 66px;
  height: 66px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #fff0e3;
  color: #ff7613;
  font-size: 27px;
  font-weight: 900
}

.authority-cards article:nth-child(1):before {
  content: "↗"
}

.authority-cards article:nth-child(2):before {
  content: "◎"
}

.authority-cards article:nth-child(3):before {
  content: "✦"
}

.authority-cards article:hover {
  background: linear-gradient(135deg, #252036, #4b2a15);
  border-color: transparent;
  transform: translateX(10px);
  box-shadow: 0 24px 44px #3020182c
}

.authority-cards article:nth-child(2):hover {
  transform: translateX(52px)
}

.authority-cards b {
  position: absolute;
  right: 22px;
  top: 13px;
  font-size: 38px;
  color: #f5e5d8
}

.authority-cards article:hover b {
  color: #ffffff12
}

.authority-cards strong {
  font-size: 21px;
  color: var(--off-ink);
  margin: 0 0 6px
}

.authority-cards span {
  font-size: 14px;
  color: var(--off-muted)
}

.authority-cards article:hover strong,
.authority-cards article:hover span {
  color: #fff
}

.off-strategy {
  background: linear-gradient(135deg, #fff2e370, #fff7fb);
  position: relative
}

.strategy-art {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  justify-content: center
}

.strategy-glow {
  position: absolute;
  inset: 25px 10px 30px;
  border-radius: 34px;
  /* background: linear-gradient(135deg, #c9f5ff, #e7d8ff 58%, #ffe0f1);
  box-shadow: 0 24px 60px #745a9a1c */
}

.strategy-art img {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 590px);
  max-height: 500px;
  object-fit: contain;
  filter: drop-shadow(0 24px 20px #4d34732a);
  transition: .4s
}

.strategy-art:hover img {
  transform: scale(1.025)
}

.strategy-art article {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 17px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 35px #4c3a6530;
  font-size: 13px;
  font-weight: 800
}

.strategy-art article b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff0e2;
  color: var(--off-orange)
}

.strategy-art article:nth-of-type(1) {
  top: 48px;
  left: -8px
}

.strategy-art article:nth-of-type(2) {
  top: 134px;
  right: -54px
}

.strategy-art article:nth-of-type(3) {
  bottom: 76px;
  left: -54px
}

.strategy-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px
}

.strategy-pills span {
  padding: 11px 17px;
  border: 1px solid #ffba80;
  border-radius: 999px;
  background: #fff;
  color: #4b3a2f;
  font-size: 13px;
  font-weight: 800;
  transition: .25s
}

.strategy-pills span:hover {
  color: #fff;
  background: var(--off-orange);
  transform: translateY(-3px)
}

.off-heading {
  text-align: center;
  max-width: 790px;
  margin: 0 auto 42px
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px
}

.feature-grid article {
  grid-column: span 2;
  position: relative;
  padding: 32px 28px;
  border: 1px solid #f1dfcf;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 42px #3323190c;
  transition: .35s
}

.feature-grid article:nth-child(4) {
  grid-column: 2/span 2
}

.feature-grid article:nth-child(5) {
  grid-column: 4/span 2
}

.feature-grid article:hover {
  transform: translateY(-10px);
  border-color: transparent;
  background: linear-gradient(145deg, #252036, #4b2a15);
  box-shadow: 0 24px 48px #261c1738
}

.feature-grid article:hover h3,
.feature-grid article:hover p {
  color: #fff !important
}

.feature-grid article:hover i {
  color: #ffffff16
}

.feature-grid article:hover em {
  background: var(--off-orange);
  color: #fff
}

.feature-grid i {
  position: absolute;
  right: 22px;
  top: 16px;
  font-size: 42px;
  font-style: normal;
  font-weight: 900;
  color: #f7e7d9;
  transition: .3s
}

.feature-grid em {
  display: grid;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  place-items: center;
  background: #fff0e3;
  color: #ff7613;
  font-style: normal;
  font-size: 25px;
  transition: .3s
}

.feature-grid h3 {
  font-size: 21px;
  margin: 22px 0 12px;
  transition: .3s
}

.feature-grid p {
  font-size: 15px !important;
  line-height: 1.7 !important;
  transition: .3s
}

.profile-section {
  background: var(--off-cream)
}

.profile-factors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin: 25px 0
}

.profile-factors span,
.choose-list span,
.benefit-list span {
  position: relative;
  padding: 16px 18px 16px 46px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--off-line);
  font-weight: 750
}

.profile-factors span {
  overflow: hidden;
  transition: transform .35s, box-shadow .35s, color .35s, border-color .35s, background .35s
}

.profile-factors span:after {
  content: "";
  position: absolute;
  left: -120%;
  top: 0;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #ffffff35, transparent);
  transform: skewX(-22deg);
  transition: left .55s
}

.profile-factors span:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #252036, #4b2a15);
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 16px 32px #2d201a27
}

.profile-factors span:hover:after {
  left: 150%
}

.profile-factors span:before,
.choose-list span:before,
.benefit-list span:before {
  content: "✓";
  position: absolute;
  left: 18px;
  color: var(--off-orange);
  font-weight: 900;
  transition: transform .35s, color .35s
}

.profile-factors span:hover:before {
  color: #ff9a4b;
  transform: scale(1.35) rotate(-12deg)
}

.profile-note {
  padding: 17px 20px;
  border-left: 4px solid var(--off-orange);
  background: #fff;
  transition: .35s
}

.profile-note:hover {
  transform: translateX(8px);
  box-shadow: 0 14px 30px #6d351018
}

.profile-meter {
  padding: 40px;
  border: 1px solid var(--off-line);
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 22px 50px #5e381315;
  transition: transform .4s, box-shadow .4s, border-color .4s
}

.profile-meter:hover {
  transform: translateY(-9px);
  border-color: #ffb474;
  box-shadow: 0 32px 68px #5e38132a
}

.meter {
  width: 200px;
  height: 200px;
  margin: 0 auto 34px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--off-orange) 0 342deg, #f3e6da 342deg);
  position: relative;
  transition: transform .45s, filter .45s
}

.meter:before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: #fff
}

.meter:after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 2px dashed #ff761355;
  border-radius: 50%;
  opacity: 0;
  transition: .35s
}

.profile-meter:hover .meter {
  transform: scale(1.055);
  filter: drop-shadow(0 15px 18px #ff76132b)
}

.profile-meter:hover .meter:after {
  opacity: 1;
  animation: profile-orbit 12s linear infinite
}

.meter>* {
  position: relative
}

.meter strong {
  font-size: 12px;
  letter-spacing: 2px
}

.meter b {
  font-size: 58px;
  line-height: 1;
  color: var(--off-ink);
  transition: color .35s, transform .35s
}

.profile-meter:hover .meter b {
  color: var(--off-orange);
  transform: scale(1.08)
}

.meter small {
  font-size: 10px
}

.profile-meter>span {
  display: block;
  font-weight: 800;
  margin: 18px 0;
  transition: color .3s, transform .3s
}

.profile-meter>span:hover {
  color: var(--off-orange);
  transform: translateX(5px)
}

.profile-meter span i {
  display: block;
  height: 7px;
  background: #f2e7de;
  border-radius: 10px;
  margin-top: 8px;
  overflow: hidden
}

.profile-meter span i:before {
  content: "";
  display: block;
  width: var(--v);
  height: 100%;
  background: linear-gradient(90deg, #ff7613, #ffb25e, #ff7613);
  background-size: 200% 100%;
  border-radius: inherit
}

.profile-meter:hover span i:before {
  animation: profile-shine 1.5s linear infinite
}

@keyframes profile-orbit {
  to {
    transform: rotate(360deg)
  }
}

@keyframes profile-shine {
  to {
    background-position: -200% 0
  }
}

.off-benefits {
  position: relative;
  background: linear-gradient(135deg, #fff8f1, #fff0df)
}

.off-benefits:before {
  content: "";
  position: absolute;
  right: -90px;
  top: -110px;
  width: 300px;
  height: 300px;
  border: 65px solid #ffffff90;
  border-radius: 50%
}

.off-benefits .benefit-layout {
  position: relative;
  z-index: 1;
  grid-template-columns: .82fr 1.18fr
}

.off-benefits .benefit-layout>div:first-child {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px;
  border-radius: 30px;
  background: linear-gradient(145deg, #211e22, #4b2816);
  box-shadow: 0 26px 60px #3822172a;
  overflow: hidden
}

.off-benefits .benefit-layout>div:first-child:before {
  content: "07";
  position: absolute;
  right: 18px;
  bottom: -35px;
  color: #ffffff0b;
  font-size: 160px;
  font-weight: 900;
  line-height: 1
}

.off-benefits .benefit-layout>div:first-child:after {
  content: "PROVEN BENEFITS";
  position: relative;
  display: inline-flex;
  width: max-content;
  margin-top: 28px;
  padding: 11px 16px;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  color: #ffad67;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px
}

.off-benefits p {
  position: relative;
  color: #d6d0cc !important
}

.benefit-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.benefit-list span {
  min-height: 94px;
  display: flex;
  align-items: center;
  padding: 20px 22px 20px 72px;
  background: #fff;
  border: 1px solid #f0d4bc;
  color: var(--off-ink);
  box-shadow: 0 13px 30px #5f34130d;
  overflow: hidden;
  transition: transform .35s, box-shadow .35s, color .35s, background .35s, border-color .35s
}

.benefit-list span:before {
  left: 20px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #fff0e3;
  color: #ff7613;
  transition: transform .35s, background .35s, color .35s
}

.benefit-list span:after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -32px;
  width: 80px;
  height: 80px;
  border: 18px solid #fff2e6;
  border-radius: 50%;
  transition: .35s
}

.benefit-list span:nth-child(even) {
  transform: translateY(16px)
}

.benefit-list span:last-child {
  grid-column: 1/-1;
  transform: none
}

.benefit-list span:hover {
  z-index: 2;
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #252036, #4b2a15);
  transform: translateY(-7px);
  box-shadow: 0 22px 45px #2c1e1830
}

.benefit-list span:nth-child(even):hover {
  transform: translateY(8px)
}

.benefit-list span:hover:before {
  background: var(--off-orange);
  color: #fff;
  transform: scale(1.12) rotate(-8deg)
}

.benefit-list span:hover:after {
  border-color: #ffffff0c;
  transform: scale(1.35)
}

body#top.off-page-seo-page main .off-benefits .benefit-list span {
  color: var(--off-ink) !important
}

body#top.off-page-seo-page main .off-benefits .benefit-list span:hover {
  color: #fff !important
}

body#top.off-page-seo-page main .off-benefits .benefit-list span {
  background-image: linear-gradient(115deg, #fff 0%, #fff 46%, #252036 54%, #4b2a15 100%);
  background-size: 230% 100%;
  background-position: 0 0;
  transition: background-position .55s cubic-bezier(.2, .7, .2, 1), transform .35s, box-shadow .35s, color .3s, border-color .3s
}

body#top.off-page-seo-page main .off-benefits .benefit-list span:hover {
  background-position: 100% 0;
  border-color: transparent;
  box-shadow: 0 24px 48px #2c1e1835;
  letter-spacing: .1px
}

body#top.off-page-seo-page main .off-benefits .benefit-list span:before {
  box-shadow: 0 8px 20px #ff761323
}

body#top.off-page-seo-page main .off-benefits .benefit-list span:hover:before {
  box-shadow: 0 10px 24px #ff76134a;
  animation: benefit-check-pop .55s ease
}

.off-benefits .benefit-list {
  column-gap: 22px;
  row-gap: 18px;
  align-items: stretch
}

.off-benefits .benefit-list span,
.off-benefits .benefit-list span:nth-child(even),
.off-benefits .benefit-list span:last-child {
  transform: none;
  margin: 0;
  min-height: 104px
}

.off-benefits .benefit-list span:hover,
.off-benefits .benefit-list span:nth-child(even):hover,
.off-benefits .benefit-list span:last-child:hover {
  transform: translateY(-6px)
}

@keyframes benefit-check-pop {
  0% {
    transform: scale(.75) rotate(0)
  }

  55% {
    transform: scale(1.24) rotate(-14deg)
  }

  100% {
    transform: scale(1.12) rotate(-8deg)
  }
}

.process-section {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #fff8f1 100%)
}

.process-section:before {
  content: "";
  position: absolute;
  left: -100px;
  bottom: -120px;
  width: 300px;
  height: 300px;
  border: 65px solid #fff0e2;
  border-radius: 50%
}

.process-section .container {
  position: relative;
  z-index: 1
}

.process-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
  padding: 22px 0 40px
}

.process-flow:before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 91px;
  height: 3px;
  background: linear-gradient(90deg, #ff7613 40%, transparent 40%);
  background-size: 16px 3px
}

.process-flow article {
  position: relative;
  min-height: 310px;
  padding: 92px 22px 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--off-line);
  text-align: left;
  box-shadow: 0 16px 38px #5931150d;
  overflow: hidden;
  transition: transform .4s, box-shadow .4s, background .4s, border-color .4s
}

.process-flow article:nth-child(even) {
  transform: translateY(32px)
}

.process-flow article:before {
  position: absolute;
  z-index: 2;
  top: 25px;
  left: 24px;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #fff0e3;
  color: var(--off-orange);
  font-size: 24px;
  font-weight: 900;
  transition: .35s
}

.process-flow article:nth-child(1):before {
  content: "⌕"
}

.process-flow article:nth-child(2):before {
  content: "◎"
}

.process-flow article:nth-child(3):before {
  content: "✦"
}

.process-flow article:nth-child(4):before {
  content: "↗"
}

.process-flow article:nth-child(5):before {
  content: "▥"
}

.process-flow article:after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -45px;
  width: 125px;
  height: 125px;
  border: 26px solid #fff2e6;
  border-radius: 50%;
  transition: .4s
}

.process-flow article:hover {
  z-index: 3;
  transform: translateY(-10px);
  border-color: transparent;
  background: linear-gradient(145deg, #252036, #4b2a15);
  box-shadow: 0 25px 48px #2f211b32
}

.process-flow article:nth-child(even):hover {
  transform: translateY(20px)
}

.process-flow article:hover:before {
  color: #fff;
  background: var(--off-orange);
  transform: rotate(-8deg) scale(1.12)
}

.process-flow article:hover:after {
  border-color: #ffffff0b;
  transform: scale(1.35)
}

.process-flow b {
  position: absolute;
  z-index: 3;
  top: 31px;
  right: 22px;
  color: #f2ddcc;
  font-size: 34px;
  line-height: 1
}

.process-flow article:hover b {
  color: #ffffff16
}

.process-flow h3 {
  position: relative;
  z-index: 2;
  font-size: 19px;
  line-height: 1.35;
  margin: 0 0 13px;
  color: var(--off-ink);
  transition: .3s
}

.process-flow p {
  position: relative;
  z-index: 2;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  transition: .3s
}

.process-flow article:hover h3,
.process-flow article:hover p {
  color: #fff !important
}

.off-choose {
  background: var(--off-cream)
}

.choose-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.choose-list span {
  min-height: 88px;
  display: flex;
  align-items: center;
  transition: .3s
}

.choose-list span:hover {
  transform: translateY(-5px);
  border-color: var(--off-orange);
  box-shadow: 0 14px 30px #ff76131a
}

.off-choose>.container>p {
  max-width: 850px;
  text-align: center;
  margin: 34px auto 0 !important
}

.off-cta {
  position: relative;
  background: linear-gradient(180deg, #fff8f1, #fff);
  padding: 88px 0 !important
}

.off-cta:before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border: 58px solid #ffead7;
  border-radius: 50%;
  left: -105px;
  top: -115px
}

.off-cta:after {
  content: "LET'S GROW";
  position: absolute;
  right: 2%;
  bottom: -34px;
  font-size: 120px;
  font-weight: 900;
  color: #ff761309
}

.off-cta .cta-layout {
  position: relative;
  z-index: 1;
  grid-template-columns: .72fr 1.28fr;
  gap: 45px;
  padding: 52px 58px;
  border-radius: 34px;
  background: linear-gradient(120deg, #211e22 0%, #35201a 56%, #9a3f08 100%);
  box-shadow: 0 30px 70px #4a291b2b;
  overflow: hidden
}

.off-cta .cta-layout:before {
  content: "";
  position: absolute;
  right: -75px;
  top: -110px;
  width: 290px;
  height: 290px;
  border: 58px solid #ffffff0b;
  border-radius: 50%
}

.off-cta .cta-layout:after {
  content: "↗";
  position: absolute;
  left: 47%;
  bottom: -48px;
  color: #ffffff09;
  font-size: 180px;
  font-weight: 900;
  transform: rotate(-15deg)
}

.off-cta .cta-layout>div:first-child,
.cta-box {
  position: relative;
  z-index: 2
}

.off-cta .eyebrow.light {
  color: #ffb474
}

.cta-box {
  border-radius: 0;
  background: transparent;
  padding: 0 0 0 42px;
  border-left: 1px solid #ffffff28
}

.cta-box p {
  font-size: 16px !important;
  color: #f1eae5 !important;
  margin-bottom: 24px !important
}

.off-cta a {
  margin-top: 0;
  background: #fff;
  color: #2a201c;
  border-color: #fff;
  padding: 15px 24px;
  box-shadow: 0 12px 28px #1a100d2b
}

.off-cta a b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--off-orange);
  color: #fff;
  transition: .35s
}

.off-cta a:hover {
  color: #fff;
  background: var(--off-orange);
  border-color: var(--off-orange);
  box-shadow: 0 16px 34px #130c0938
}

.off-cta a:hover b {
  background: #fff;
  color: var(--off-orange);
  transform: translateX(4px) rotate(-20deg)
}

@media(max-width:991px) {

  .off-hero-grid,
  .strategy-layout,
  .profile-layout,
  .benefit-layout,
  .matters-layout,
  .cta-layout,
  .off-matters .matters-layout,
  .off-cta .cta-layout {
    grid-template-columns: 1fr;
    gap: 42px
  }

  .hero-art {
    min-height: 470px
  }

  .strategy-art {
    order: 2;
    margin: auto;
    width: min(100%, 650px)
  }

  .feature-grid {
    grid-template-columns: 1fr 1fr
  }

  .feature-grid article,
  .feature-grid article:nth-child(4),
  .feature-grid article:nth-child(5) {
    grid-column: auto
  }

  .feature-grid article:last-child {
    grid-column: 1/-1
  }

  .process-flow {
    grid-template-columns: 1fr 1fr
  }

  .process-flow:before {
    display: none
  }

  .process-flow article,
  .process-flow article:nth-child(even) {
    min-height: 270px;
    transform: none
  }

  .process-flow article:hover,
  .process-flow article:nth-child(even):hover {
    transform: translateY(-8px)
  }

  .cta-box {
    padding: 30px 0 0;
    border-left: 0;
    border-top: 1px solid #ffffff28
  }

  .choose-list {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:600px) {
  .off-page-seo-page main section:not(.page-hero) {
    padding: 52px 0
  }

  .off-page-seo-page .container {
    width: min(100% - 28px, 1180px)
  }

  .off-page-seo-page main h2 {
    font-size: 31px
  }

  .off-page-seo-page main p {
    font-size: 15px
  }

  .hero-art {
    min-height: 365px
  }

  .hero-orbit {
    width: 290px;
    height: 290px
  }

  .hero-stat {
    min-width: 116px;
    padding: 11px 13px
  }

  .hero-stat b {
    font-size: 21px
  }

  .stat-one {
    left: 0;
    top: 65px
  }

  .stat-two {
    right: 0;
    bottom: 15px
  }

  .strategy-art {
    min-height: 430px
  }

  .strategy-art article {
    padding: 9px
  }

  .strategy-art article:nth-of-type(1) {
    top: 35px
  }

  .strategy-art article:nth-of-type(2) {
    top: 150px
  }

  .strategy-art article:nth-of-type(3) {
    bottom: 20px
  }

  .off-matters .matters-layout>div:first-child,
  .off-benefits .benefit-layout>div:first-child {
    padding: 28px 24px
  }

  .authority-cards article,
  .authority-cards article:nth-child(2) {
    margin-left: 0;
    padding: 22px 18px 22px 96px
  }

  .authority-cards article:before {
    left: 18px;
    width: 58px;
    height: 58px
  }

  .authority-cards article:nth-child(2):hover {
    transform: translateX(10px)
  }

  .authority-cards,
  .feature-grid,
  .profile-factors,
  .benefit-list,
  .process-flow,
  .choose-list {
    grid-template-columns: 1fr
  }

  .feature-grid article:last-child,
  .benefit-list span:last-child {
    grid-column: auto
  }

  .benefit-list span:nth-child(even),
  .benefit-list span:nth-child(even):hover {
    transform: none
  }

  .profile-meter {
    padding: 28px 22px
  }

  .off-actions {
    display: grid
  }

  .off-actions a {
    justify-content: center
  }

  .off-cta {
    padding: 55px 0 !important
  }

  .off-cta .cta-layout {
    padding: 34px 24px;
    border-radius: 25px
  }

  .off-cta a {
    width: 100%;
    justify-content: center
  }

  .off-cta:after {
    font-size: 60px
  }
}

/* Final contrast lock after legacy rules */
body#top.off-page-seo-page main .off-benefits .benefit-list span,
body#top.off-page-seo-page main .off-benefits .benefit-list span:nth-child(even),
body#top.off-page-seo-page main .off-benefits .benefit-list span:last-child{color:#fff!important}
body#top.off-page-seo-page main .off-benefits h2{color:#fff!important}

/* Page-wide alignment and polished process hover */
body#top.off-page-seo-page main>section>.container{width:min(1240px,calc(100% - 64px))!important;max-width:1240px!important;margin-left:auto!important;margin-right:auto!important}
body#top.off-page-seo-page main .off-hero-grid,
body#top.off-page-seo-page main .matters-layout,
body#top.off-page-seo-page main .strategy-layout,
body#top.off-page-seo-page main .profile-layout,
body#top.off-page-seo-page main .benefit-layout,
body#top.off-page-seo-page main .cta-layout{width:100%!important;max-width:1240px!important}
body#top.off-page-seo-page main .off-heading{max-width:780px!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important}
body#top.off-page-seo-page main .process-flow{width:100%!important;margin-left:auto!important;margin-right:auto!important}
body#top.off-page-seo-page main .process-flow article{transition:transform .28s ease,border-color .28s ease,background-color .28s ease,box-shadow .28s ease!important}
body#top.off-page-seo-page main .process-flow article:hover{z-index:2!important;transform:translateY(-8px)!important;border-color:#231c18!important;background:#231c18!important;box-shadow:0 18px 36px rgba(38,25,17,.16)!important}
body#top.off-page-seo-page main .process-flow article:hover:before{transform:none!important;background:#ff7a12!important;color:#fff!important;box-shadow:none!important}
body#top.off-page-seo-page main .process-flow article:hover b{color:rgba(255,255,255,.16)!important}
body#top.off-page-seo-page main .process-flow article:hover h3{color:#fff!important}
body#top.off-page-seo-page main .process-flow article:hover p{color:#d8cdc6!important}
body#top.off-page-seo-page main .off-cta.service-cta-reference{width:min(1450px,calc(100% - 64px))!important;max-width:1450px!important;margin:64px auto!important;padding-left:0!important;padding-right:0!important;border-radius:30px!important;overflow:hidden!important}
@media(max-width:900px){body#top.off-page-seo-page main>section>.container{width:min(100% - 40px,1240px)!important}}
@media(max-width:580px){body#top.off-page-seo-page main>section>.container{width:min(100% - 28px,1240px)!important}body#top.off-page-seo-page main .process-flow article:hover{transform:translateY(-4px)!important}}
@media(max-width:580px){body#top.off-page-seo-page main .off-cta.service-cta-reference{width:calc(100% - 28px)!important;margin:40px auto!important;border-radius:22px!important}}

/* Compact section rhythm consistent with the On-Page SEO page. */
body#top.off-page-seo-page main > section:not(.page-hero) { padding-top: 28px !important; padding-bottom: 28px !important; }
body#top.off-page-seo-page main > section:not(.page-hero) .eyebrow { margin-bottom: 10px !important; }
body#top.off-page-seo-page main > section:not(.page-hero) h2 { margin-top: 0 !important; margin-bottom: 14px !important; line-height: 1.2 !important; }
body#top.off-page-seo-page .off-heading { margin-bottom: 22px !important; }
body#top.off-page-seo-page .off-copy p { margin-bottom: 12px !important; line-height: 1.65 !important; }
body#top.off-page-seo-page .off-actions { margin-top: 18px !important; }
body#top.off-page-seo-page :is(.off-hero-grid,.strategy-layout,.profile-layout,.benefit-layout,.matters-layout,.cta-layout) { gap: 32px !important; }
body#top.off-page-seo-page :is(.off-copy,.hero-art) { min-width: 0; }
body#top.off-page-seo-page .hero-art { min-height: 0 !important; }
body#top.off-page-seo-page .hero-art img { max-width: 100% !important; height: auto !important; }
body#top.off-page-seo-page .feature-grid article { padding: 20px !important; }
body#top.off-page-seo-page .feature-grid h3 { margin-top: 12px !important; margin-bottom: 8px !important; line-height: 1.25 !important; }
body#top.off-page-seo-page .authority-cards { gap: 12px !important; }
body#top.off-page-seo-page .authority-cards article { padding: 16px 22px 16px 84px !important; margin-left: 0 !important; }
body#top.off-page-seo-page .authority-cards article:before { left: 18px !important; }
body#top.off-page-seo-page .choose-list span { min-height: 68px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
body#top.off-page-seo-page .off-benefits .benefit-list span { min-height: 64px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
body#top.off-page-seo-page main .off-cta.service-cta-reference { margin-top: 28px !important; margin-bottom: 28px !important; }
@media(max-width:900px) {
  body#top.off-page-seo-page :is(.off-hero-grid,.strategy-layout,.profile-layout,.benefit-layout,.matters-layout,.cta-layout) { gap: 24px !important; }
}
@media(max-width:600px) {
  body#top.off-page-seo-page main > section:not(.page-hero) { padding-top: 20px !important; padding-bottom: 20px !important; }
  body#top.off-page-seo-page .off-heading { margin-bottom: 18px !important; }
  body#top.off-page-seo-page .feature-grid article { padding: 18px !important; }
  body#top.off-page-seo-page main .off-cta.service-cta-reference { margin-top: 20px !important; margin-bottom: 20px !important; }
}

/* Give the Why It Matters copy more room than the supporting cards. */
body#top.off-page-seo-page .off-matters .matters-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important;
}
body#top.off-page-seo-page .off-matters .matters-layout > div { min-width: 0; }
@media (max-width: 900px) {
  body#top.off-page-seo-page .off-matters .matters-layout { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Keep floating strategy labels inside the artwork column. */
body#top.off-page-seo-page .strategy-layout > div { min-width: 0; }
body#top.off-page-seo-page .strategy-art article { max-width: calc(100% - 24px); }
body#top.off-page-seo-page .strategy-art article b { flex-shrink: 0; }
body#top.off-page-seo-page .strategy-art article:nth-of-type(1),
body#top.off-page-seo-page .strategy-art article:nth-of-type(3) { left: 12px; }
body#top.off-page-seo-page .strategy-art article:nth-of-type(2) { right: 12px; }

/* Align each process icon with its heading; keep copy full-width below. */
body#top.off-page-seo-page main .process-flow article {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 10px;
  row-gap: 14px;
  align-content: start;
  padding: 20px 16px 38px !important;
}
body#top.off-page-seo-page main .process-flow article:before {
  position: static !important;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 34px !important;
  height: 34px !important;
  font-size: 21px;
  transform: none !important;
}
body#top.off-page-seo-page main .process-flow h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0 !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere;
}
body#top.off-page-seo-page main .process-flow p { grid-column: 1 / -1; grid-row: 2; margin: 0 !important; }
body#top.off-page-seo-page main .process-flow article > b { top: auto !important; bottom: 10px; right: 16px !important; font-size: 20px !important; }
@layer papa-content-typography {
  body#top.off-page-seo-page .process-flow h3:not(#masthead *, footer *, #colophon *) { font-size: 18px !important; }
}

/* Feature card icons and headings share the first row. */
body#top.off-page-seo-page .feature-grid article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 14px;
  align-content: start;
  padding-bottom: 40px !important;
}
body#top.off-page-seo-page .feature-grid article > em {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 44px;
  height: 44px;
  margin: 0;
}
body#top.off-page-seo-page .feature-grid h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0 !important;
  min-width: 0;
}
body#top.off-page-seo-page .feature-grid p { grid-column: 1 / -1; grid-row: 2; margin: 0; }
body#top.off-page-seo-page .feature-grid article > i { top: auto; bottom: 10px; right: 18px; font-size: 24px; line-height: 1; }

/* Tight, consistent process cards with a subtle orange accent. */
body#top.off-page-seo-page main .process-section .off-heading { margin-bottom: 16px !important; }
body#top.off-page-seo-page main .process-flow { margin-top: 0 !important; padding: 0 !important; gap: 14px !important; }
body#top.off-page-seo-page main .process-flow:before { display: none !important; }
body#top.off-page-seo-page main .process-flow article {
  min-height: 0 !important;
  padding: 18px 16px 36px !important;
  border-radius: 14px !important;
  border-top: 3px solid #ff8418 !important;
  box-shadow: 0 5px 18px rgba(45,31,20,.045) !important;
  row-gap: 12px;
}
body#top.off-page-seo-page main .process-flow article:hover {
  transform: translateY(-3px) !important;
  background: #fff8f1 !important;
  border-color: #ffb77e !important;
  box-shadow: 0 10px 24px rgba(45,31,20,.09) !important;
}
body#top.off-page-seo-page main .process-flow article:hover h3 { color: #231c18 !important; }
body#top.off-page-seo-page main .process-flow article p,
body#top.off-page-seo-page main .process-flow article:hover p { color: #68615c !important; line-height: 1.6 !important; }
body#top.off-page-seo-page main .process-flow article > b,
body#top.off-page-seo-page main .process-flow article:hover > b { color: #b5a395 !important; font-size: 16px !important; }

/* Keep CTA heading and supporting copy close together. */
body#top.off-page-seo-page main .off-cta .cta-layout { gap: 10px !important; }
body#top.off-page-seo-page main .off-cta h2 { margin-bottom: 0 !important; }
body#top.off-page-seo-page main .off-cta .cta-box { padding: 0 !important; border: 0 !important; }
body#top.off-page-seo-page main .off-cta .cta-box p { margin-top: 0 !important; }

/* Borderless cards with restrained motion in the importance section. */
body#top.off-page-seo-page .off-matters .matters-layout > div:first-child,
body#top.off-page-seo-page .off-matters .authority-cards article {
  border: 0 !important;
  box-shadow: 0 8px 26px rgba(58, 39, 24, .055) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}
body#top.off-page-seo-page .off-matters .authority-cards article::before {
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body#top.off-page-seo-page .off-matters .matters-layout > div:first-child:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(58, 39, 24, .09) !important;
  }
  body#top.off-page-seo-page .off-matters .authority-cards article:hover {
    transform: translateY(-4px) !important;
    background: #fff8f1 !important;
    box-shadow: 0 12px 28px rgba(255, 112, 16, .12) !important;
  }
  body#top.off-page-seo-page .off-matters .authority-cards article:hover::before {
    background: #ff7912 !important;
    color: #fff !important;
    transform: translateY(-50%) rotate(-5deg);
  }
}
body#top.off-page-seo-page .off-matters .authority-cards article:hover strong { color: #211d19 !important; }
body#top.off-page-seo-page .off-matters .authority-cards article:hover span { color: #665b52 !important; }
body#top.off-page-seo-page .off-matters .authority-cards article:hover b { color: #edb88e !important; }
@media (prefers-reduced-motion: reduce), (hover: none) {
  body#top.off-page-seo-page .off-matters .authority-cards article:hover {
    transform: none !important;
    background: #fff !important;
  }
  body#top.off-page-seo-page .off-matters .matters-layout > div:first-child,
  body#top.off-page-seo-page .off-matters .authority-cards article,
  body#top.off-page-seo-page .off-matters .authority-cards article::before { transition: none !important; }
}