.on-page-seo-page {
  --op-orange: #ff8418;
  --op-dark: #272525;
  --op-deep: #151515;
  --op-cream: #fff6ec;
  --op-line: #f0dfce;
  color: var(--op-dark);
  background: #fff
}

.on-page-seo-page main h2 {
  font: 800 36px/1.15 'Manrope', Arial, sans-serif !important;
  letter-spacing: -.03em !important
}

.on-page-seo-page main h3 {
  font-family: 'Manrope', Arial, sans-serif !important
}

.on-page-seo-page .eyebrow {
  color: var(--op-orange) !important
}

.on-page-seo-page .eyebrow:before {
  background: var(--op-orange) !important
}

.on-page-seo-page main p {
  color: #66636a;
  line-height: 1.7
}

.on-page-seo-page .inner-page-banner {
  background: linear-gradient(118deg, #111 0%, #29231f 58%, #9c3f00 100%) !important
}

.onpage-hero {
  position: relative;
  padding: 70px 0;
  background: linear-gradient(135deg, #fff 0%, #fff9f3 100%);
  overflow: hidden
}

.onpage-hero:after {
  content: "";
  position: absolute;
  right: -160px;
  top: -230px;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background: #ffe6cf
}

.onpage-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center
}

.onpage-hero-copy h2 {
  margin: 12px 0 22px
}

.onpage-hero-copy p {
  margin: 0 0 12px;
  font-size: 14px
}

.onpage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px
}

.onpage-btn {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 14px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: .3s
}

.onpage-btn.primary {
  background: linear-gradient(90deg, var(--op-dark), var(--op-orange));
  color: #fff;
  box-shadow: 0 13px 25px rgba(175, 80, 0, .18)
}

.onpage-btn.outline {
  border: 1px solid var(--op-orange);
  color: var(--op-dark);
  background: #fff
}

.onpage-btn:hover {
  transform: translateY(-4px);
  color: inherit
}

.onpage-btn.primary:hover {
  color: #fff
}

.onpage-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 500px
}

.onpage-hero-visual:before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffd09f, #ff9a3b)
}

.audit-orbit {
  position: absolute;
  width: 455px;
  height: 455px;
  border: 1px dashed rgba(255, 132, 24, .35);
  border-radius: 50%;
  animation: opSpin 24s linear infinite
}

.audit-window {
  position: relative;
  z-index: 2;
  width: min(430px, 94%);
  padding: 22px;
  border: 1px solid #f2dfce;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 28px 60px rgba(55, 35, 20, .18);
  transform: rotate(1.5deg)
}

.audit-top {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee
}

.audit-top i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff8418
}

.audit-top i:nth-child(2) {
  opacity: .65
}

.audit-top i:nth-child(3) {
  opacity: .35
}

.audit-top b {
  margin-left: 8px;
  color: #777;
  font-size: 10px
}

.audit-score {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 23px 0
}

.audit-score strong {
  display: grid;
  place-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #fff2e5;
  border: 9px solid var(--op-orange);
  color: var(--op-dark);
  font-size: 32px
}

.audit-score span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em
}

.audit-bars {
  display: grid;
  gap: 13px
}

.audit-bars span {
  position: relative;
  display: block;
  height: 32px;
  border-radius: 9px;
  background: #f5f1ed;
  overflow: hidden
}

.audit-bars span:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: linear-gradient(90deg, #ffb160, #ff8418);
  opacity: .75
}

.audit-bars b {
  position: relative;
  z-index: 1;
  display: block;
  padding: 7px 11px;
  font-size: 11px
}

.audit-window>small {
  display: inline-block;
  margin-top: 18px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #202020;
  color: #fff;
  font-weight: 700
}

.onpage-approach {
  padding: 55px 0;
  background: var(--op-dark);
  color: #fff
}

.approach-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 65px;
  align-items: center
}

.approach-grid h2 {
  margin: 12px 0 0;
  color: #fff !important
}

.approach-copy {
  padding-left: 30px;
  border-left: 3px solid var(--op-orange)
}

.approach-copy p {
  margin: 0 0 13px;
  color: #d6d3d1
}

.approach-copy strong {
  color: #ffb16b
}

.onpage-elements {
  padding: 65px 0;
  background: #fff
}

.onpage-heading {
  max-width: 800px;
  margin: 0 auto 34px;
  text-align: center
}

.onpage-heading h2 {
  margin: 10px 0 12px
}

.onpage-heading p {
  margin: 0
}

.element-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px
}

.element-grid article {
  position: relative;
  padding: 25px 22px 23px;
  border: 1px solid var(--op-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 13px 30px rgba(45, 30, 18, .06);
  transition: .3s;
  overflow: hidden
}

.element-grid article:last-child {
  grid-column: 2
}

.element-grid article:hover {
  transform: translateY(-6px);
  border-color: #ffb06a;
  box-shadow: 0 22px 38px rgba(73, 37, 10, .12)
}

.element-grid article>i {
  position: absolute;
  right: 16px;
  top: 12px;
  color: #f4e8dc;
  font: 800 34px/1 'Manrope', sans-serif
}

.element-grid article>span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #fff0e1;
  color: #d95b00;
  font-size: 23px;
  font-weight: 800
}

.element-grid h3 {
  margin: 18px 0 10px;
  font-size: 19px
}

.element-grid p {
  margin: 0 0 8px;
  font-size: 12.5px
}

.element-grid p:last-child {
  margin-bottom: 0
}

.onpage-technical {
  padding: 65px 0;
  background: var(--op-cream)
}

.technical-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items: center
}

.technical-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 470px;
  border-radius: 32px;
  /* background: linear-gradient(145deg, #ffd9b2, #ff9b3c); */
  overflow: hidden
}

.technical-visual:before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border: 1px dashed rgba(39, 37, 37, .25);
  border-radius: 50%
}

.technical-visual img {
  position: relative;
  z-index: 2;
  max-height: 450px;
  max-width: 95%;
  object-fit: contain;
  filter: drop-shadow(0 20px 25px rgba(40, 25, 12, .18))
}

.technical-visual>span {
  position: absolute;
  right: 22px;
  top: 22px;
  padding: 10px 13px;
  border-radius: 12px;
  background: #272525;
  color: #fff;
  font-weight: 900;
  letter-spacing: .1em
}

.technical-grid h2 {
  margin: 10px 0 15px
}

.technical-grid>div:last-child>p {
  margin: 0 0 22px
}

.technical-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.technical-list span {
  position: relative;
  padding: 15px 15px 15px 44px;
  border: 1px solid #f1d9c2;
  border-radius: 13px;
  background: #fff;
  color: var(--op-dark);
  font-size: 13px;
  font-weight: 700
}

.technical-list span:before {
  content: "✓";
  position: absolute;
  left: 14px;
  color: var(--op-orange);
  font-weight: 900
}

.onpage-choose {
  padding: 65px 0;
  background: #fff
}

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

.choose-grid span {
  position: relative;
  min-height: 95px;
  padding: 22px 18px 18px 52px;
  border: 1px solid var(--op-line);
  border-radius: 17px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  transition: .3s
}

.choose-grid span:before {
  content: "✓";
  position: absolute;
  left: 18px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #fff0e1;
  color: #d95b00
}

.choose-grid span:hover {
  transform: translateY(-5px);
  border-color: #ffad62;
  box-shadow: 0 16px 28px rgba(57, 34, 17, .1)
}

.choose-note {
  max-width: 900px;
  margin: 24px auto 0 !important;
  padding: 18px 22px;
  border-left: 4px solid var(--op-orange);
  background: #fff8f1;
  text-align: center;
  font-size: 14px
}

.onpage-benefits {
  position: relative;
  padding: 65px 0;
  background: linear-gradient(120deg, #111, #29231f 58%, #6d2c00);
  color: #fff;
  overflow: hidden
}

.benefit-layout {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 60px;
  align-items: center
}

.benefit-layout h2 {
  margin: 12px 0 16px;
  color: #fff !important
}

.benefit-layout>div:first-child p {
  color: #d4d1d0
}

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

.onpage-benefit-list span {
  position: relative;
  padding: 16px 15px 16px 50px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 15px;
  background: rgba(255, 255, 255, .08);
  font-size: 13px;
  font-weight: 700
}

.onpage-benefit-list span:before {
  content: "✓";
  position: absolute;
  left: 15px;
  color: #ff9d43;
  font-size: 17px
}

.onpage-benefit-list span:last-child {
  grid-column: 1/-1
}

.onpage-cta {
  padding: 65px 0;
  background: #fff4e9
}

.cta-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 60px;
  align-items: center
}

.cta-grid h2 {
  margin: 12px 0 0
}

.cta-card {
  padding: 28px;
  border: 1px solid #efcfb2;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 35px rgba(64, 36, 14, .09)
}

.cta-card p {
  margin: 0 0 19px;
  font-size: 14px
}

.cta-card a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 17px 14px 22px;
  border-radius: 30px;
  background: linear-gradient(90deg, var(--op-dark), var(--op-orange));
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800
}

.cta-card a b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #d95b00
}

@keyframes opSpin {
  to {
    transform: rotate(360deg)
  }
}

@media(max-width:1000px) {

  .onpage-hero-grid,
  .technical-grid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .onpage-hero-visual {
    min-height: 470px
  }

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

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

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

  .benefit-layout,
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 35px
  }
}

@media(max-width:700px) {

  .onpage-hero,
  .onpage-elements,
  .onpage-technical,
  .onpage-choose,
  .onpage-benefits,
  .onpage-cta {
    padding: 48px 0
  }

  .onpage-hero-grid {
    gap: 25px
  }

  .onpage-hero-visual {
    min-height: 390px
  }

  .onpage-hero-visual:before {
    width: 300px;
    height: 300px
  }

  .audit-orbit {
    width: 340px;
    height: 340px
  }

  .audit-window {
    padding: 17px
  }

  .approach-grid {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .approach-copy {
    padding-left: 18px
  }

  .element-grid,
  .technical-list,
  .choose-grid,
  .onpage-benefit-list {
    grid-template-columns: 1fr
  }

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

  .technical-visual {
    min-height: 390px
  }

  .technical-visual img {
    max-height: 380px
  }

  .onpage-actions {
    display: grid
  }

  .onpage-btn {
    justify-content: center
  }

  .cta-card {
    padding: 22px
  }
}

@media(prefers-reduced-motion:reduce) {
  .audit-orbit {
    animation: none
  }

  .onpage-btn,
  .element-grid article,
  .choose-grid span {
    transition: none
  }
}

/* Attractive visual polish */
.onpage-hero:before {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -170px;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  border: 1px solid rgba(255, 132, 24, .14);
  box-shadow: 0 0 0 55px rgba(255, 132, 24, .035), 0 0 0 110px rgba(255, 132, 24, .02)
}

.audit-window {
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease
}

.onpage-hero-visual:hover .audit-window {
  transform: rotate(0) translateY(-8px);
  box-shadow: 0 36px 75px rgba(55, 35, 20, .24)
}

.hero-float {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid #f0ddca;
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 26px rgba(58, 34, 15, .12);
  color: #d95b00;
  font-size: 19px;
  animation: opFloat 3.4s ease-in-out infinite
}

.hero-float b {
  color: #292522;
  font-size: 10px;
  letter-spacing: .03em
}

.float-keyword {
  left: 0;
  top: 18%
}

.float-content {
  right: -1%;
  top: 31%;
  animation-delay: -1.1s
}

.float-url {
  left: 6%;
  bottom: 15%;
  animation-delay: -2.1s
}

.approach-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px
}

.approach-tags span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 153, 61, .38);
  border-radius: 20px;
  background: rgba(255, 132, 24, .09);
  color: #ffc187;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase
}

.onpage-elements {
  position: relative;
  overflow: hidden
}

.onpage-elements:before {
  content: "";
  position: absolute;
  right: -150px;
  top: 50px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff0df, transparent 70%)
}

.element-grid {
  position: relative;
  z-index: 1
}

.element-grid article:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #272525, #ff8418);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease
}

.element-grid article:hover:after {
  transform: scaleX(1)
}

.element-grid article:nth-child(3n+2)>span {
  background: #272525;
  color: #fff
}

.element-grid article:nth-child(3n)>span {
  background: #ff8418;
  color: #fff
}

.technical-list span {
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease
}

.technical-list span:hover {
  transform: translateX(6px);
  border-color: #ffab61;
  box-shadow: 0 10px 22px rgba(87, 46, 13, .09)
}

.onpage-choose {
  position: relative;
  overflow: hidden
}

.onpage-choose:before {
  content: "";
  position: absolute;
  left: -130px;
  bottom: -180px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 132, 24, .2)
}

.onpage-benefit-list span {
  transition: transform .3s ease, border-color .3s ease, background .3s ease
}

.onpage-benefit-list span:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 157, 67, .55);
  background: rgba(255, 132, 24, .13)
}

.onpage-cta {
  position: relative;
  overflow: hidden
}

.onpage-cta:after {
  content: "ON PAGE";
  position: absolute;
  right: -20px;
  bottom: -34px;
  color: rgba(255, 132, 24, .06);
  font: 900 100px/1 'Manrope', sans-serif;
  letter-spacing: -.05em
}

.cta-grid {
  position: relative;
  z-index: 1
}

.cta-card {
  transition: transform .35s ease, box-shadow .35s ease
}

.cta-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 48px rgba(64, 36, 14, .15)
}

@keyframes opFloat {
  50% {
    transform: translateY(-9px)
  }
}

@media(max-width:1000px) {
  .hero-float {
    display: none
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-float {
    animation: none
  }

  .audit-window,
  .element-grid article:after,
  .technical-list span,
  .onpage-benefit-list span,
  .cta-card {
    transition: none
  }
}

/* Section rework: stronger hierarchy and cleaner content density */
.on-page-seo-page .onpage-approach {
  position: relative;
  padding: 62px 0;
  background: linear-gradient(115deg, #151515 0%, #28231f 65%, #4b2207 100%);
  overflow: hidden
}

.onpage-approach:after {
  content: "01";
  position: absolute;
  left: 4%;
  bottom: -48px;
  color: rgba(255, 132, 24, .07);
  font: 900 170px/1 'Manrope', sans-serif
}

.on-page-seo-page .approach-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: .75fr 1.25fr;
  gap: 55px
}

.on-page-seo-page .approach-grid h2 {
  display: block !important;
  margin: 12px 0 0 !important;
  color: #fff !important;
  font-size: 36px !important
}

.on-page-seo-page .approach-copy {
  padding: 28px 30px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 4px solid #ff8418;
  border-radius: 0 20px 20px 0;
  background: rgba(255, 255, 255, .055)
}

.on-page-seo-page .approach-copy p {
  color: #d5d1ce !important;
  font-size: 14px
}

.on-page-seo-page .approach-copy strong {
  display: block;
  color: #ffae62
}

.approach-tags span {
  background: rgba(255, 132, 24, .14);
  border-color: rgba(255, 153, 61, .5);
  color: #ffbd7f
}

.on-page-seo-page .onpage-elements {
  padding: 58px 0;
  background: linear-gradient(180deg, #fff, #fffaf5)
}

.on-page-seo-page .element-grid {
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.on-page-seo-page .element-grid article {
  min-height: 0;
  padding: 23px 23px 21px;
  border-radius: 18px
}

.on-page-seo-page .element-grid article:last-child {
  grid-column: 1/-1
}

.on-page-seo-page .element-grid h3 {
  margin: 14px 0 8px;
  font-size: 18px
}

.on-page-seo-page .element-grid p {
  font-size: 12px;
  line-height: 1.58
}

.on-page-seo-page .element-grid article>span {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 20px
}

.on-page-seo-page .element-grid article>i {
  font-size: 29px
}

.on-page-seo-page .element-grid article:nth-child(odd) {
  background: #fff
}

.on-page-seo-page .element-grid article:nth-child(even) {
  background: #fffdf9
}

.on-page-seo-page .onpage-technical {
  padding: 58px 0;
  background: #fff5ea
}

.on-page-seo-page .technical-grid {
  gap: 55px
}

.on-page-seo-page .technical-visual {
  min-height: 430px;
  /* border: 1px solid #f2c99f;
  box-shadow: 0 20px 45px rgba(92, 48, 13, .12) */
}

.on-page-seo-page .technical-visual img {
  max-height: 475px
}

.on-page-seo-page .technical-grid h2 {
  margin: 11px 0 13px;
  font-size: 34px !important
}

.on-page-seo-page .technical-list {
  gap: 9px
}

.on-page-seo-page .technical-list span {
  padding: 13px 14px 13px 42px;
  border-radius: 12px
}

.on-page-seo-page .technical-list span:before {
  display: grid;
  place-items: center;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 7px;
  background: #fff0e1
}

.on-page-seo-page .onpage-benefits {
  padding: 62px 0;
  background: linear-gradient(115deg, #121212, #29231f 58%, #682a00)
}

.on-page-seo-page .benefit-layout {
  grid-template-columns: .7fr 1.3fr;
  gap: 52px
}

.on-page-seo-page .benefit-layout>div:first-child {
  padding-left: 24px;
  border-left: 4px solid #ff8418
}

.on-page-seo-page .benefit-layout h2 {
  display: block !important;
  margin: 12px 0 16px !important;
  color: #fff !important;
  font-size: 36px !important
}

.on-page-seo-page .benefit-layout>div:first-child p {
  color: #ddd8d5 !important;
  font-size: 14px
}

.on-page-seo-page .onpage-benefit-list {
  gap: 10px
}

.on-page-seo-page .onpage-benefit-list span {
  min-height: 64px;
  padding: 15px 15px 15px 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .09)
}

.on-page-seo-page .onpage-cta {
  padding: 58px 0;
  background: linear-gradient(135deg, #fff4e9, #fffaf6)
}

.on-page-seo-page .cta-grid {
  gap: 50px
}

.on-page-seo-page .cta-grid h2 {
  margin-top: 12px !important;
  color: #272525 !important;
  font-size: 36px !important
}

.on-page-seo-page .cta-card {
  position: relative;
  padding: 30px 32px;
  border-color: #efc79e
}

.on-page-seo-page .cta-card:before {
  display: none !important;
  content: "↗";
  position: absolute;
  right: 25px;
  top: -25px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #ff8418;
  box-shadow: 0 12px 24px rgba(255, 132, 24, .25);
  color: #fff;
  font-size: 24px;
  font-weight: 900
}

.on-page-seo-page .cta-card p {
  padding-right: 35px
}

@media(max-width:850px) {

  .on-page-seo-page .approach-grid,
  .on-page-seo-page .benefit-layout {
    grid-template-columns: 1fr
  }

  .on-page-seo-page .element-grid {
    grid-template-columns: 1fr
  }

  .on-page-seo-page .element-grid article:last-child {
    grid-column: auto
  }

  .on-page-seo-page .approach-copy {
    padding: 23px 20px
  }
}

@media(max-width:600px) {

  .on-page-seo-page .approach-grid h2,
  .on-page-seo-page .benefit-layout h2,
  .on-page-seo-page .cta-grid h2 {
    font-size: 30px !important
  }

  .on-page-seo-page .technical-grid h2 {
    font-size: 30px !important
  }

  .on-page-seo-page .technical-visual {
    min-height: 370px
  }

  .on-page-seo-page .technical-visual img {
    max-height: 360px
  }

  .on-page-seo-page .cta-card {
    padding: 27px 20px
  }

  .on-page-seo-page .cta-card p {
    padding-right: 0
  }
}

body#top.on-page-seo-page main .onpage-approach .approach-grid h2,
body#top.on-page-seo-page main .onpage-benefits .benefit-layout h2 {
  color: #fff !important
}

/* Larger headings and card numbers */
body#top.on-page-seo-page main h2 {
  font-size: 42px !important;
  line-height: 1.12 !important
}

body#top.on-page-seo-page main .element-grid h3 {
  font-size: 22px !important;
  line-height: 1.25 !important
}

body#top.on-page-seo-page main .element-grid article>i {
  right: 18px;
  top: 14px;
  font-size: 42px !important;
  color: #f0dfcf !important
}

body#top.on-page-seo-page main .element-grid article>span {
  width: 48px;
  height: 48px;
  font-size: 23px
}

@media(max-width:700px) {
  body#top.on-page-seo-page main h2 {
    font-size: 34px !important
  }

  body#top.on-page-seo-page main .element-grid h3 {
    font-size: 20px !important
  }

  body#top.on-page-seo-page main .element-grid article>i {
    font-size: 35px !important
  }
}

body#top.on-page-seo-page main h1,
body#top.on-page-seo-page main h2,
body#top.on-page-seo-page main h3 {
  font-family: 'Manrope', Arial, sans-serif !important;
  font-weight: 800 !important
}

body#top.on-page-seo-page main .element-grid h3,
body#top.on-page-seo-page main .technical-grid h2,
body#top.on-page-seo-page main .cta-grid h2 {
  font-weight: 800 !important
}

/* Refined On-Page audit visual */
.on-page-seo-page .onpage-hero-visual{position:relative;display:grid;place-items:center;min-height:610px;padding:55px 45px;border:1px solid #eee3d9;border-radius:30px;background-color:#fbf9f6;background-image:linear-gradient(rgba(232,222,213,.52) 1px,transparent 1px),linear-gradient(90deg,rgba(232,222,213,.52) 1px,transparent 1px);background-size:38px 38px;overflow:hidden}
.on-page-seo-page .onpage-hero-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.96),rgba(255,255,255,.58) 56%,transparent 82%);pointer-events:none}
.on-page-seo-page .audit-orbit{display:none!important}
.on-page-seo-page .audit-window{position:relative;z-index:2;width:min(500px,100%);padding:27px 28px 25px;border:1px solid #eaded3;border-radius:22px;background:#fff;box-shadow:0 18px 45px rgba(50,35,24,.1);transform:none!important}
.on-page-seo-page .onpage-hero-visual:hover .audit-window{transform:translateY(-4px)!important;box-shadow:0 22px 48px rgba(50,35,24,.12)}
.on-page-seo-page .audit-top{padding-bottom:18px}.on-page-seo-page .audit-top b{font-size:11px;color:#68615b}
.on-page-seo-page .audit-score{gap:22px;padding:25px 0 22px}
.on-page-seo-page .audit-score strong{width:86px;height:86px;border-width:8px;font-size:31px}
.on-page-seo-page .audit-score span{color:#221e1b;font-size:13px;letter-spacing:.14em}
.on-page-seo-page .audit-bars{gap:11px}
.on-page-seo-page .audit-bars span{height:36px;border-radius:9px;background:#f1ede9}
.on-page-seo-page .audit-bars span:before{opacity:1;background:linear-gradient(90deg,#ffbd7d,#ff861d)}
.on-page-seo-page .audit-bars b{padding:9px 13px;color:#241f1b;font-size:11.5px}
.on-page-seo-page .audit-window>small{margin-top:16px;padding:10px 14px;border-radius:9px;background:#211e1b;font-size:12px}
.on-page-seo-page .hero-float{z-index:4;padding:10px 13px;border-color:#efd9c5;border-radius:12px;box-shadow:0 8px 20px rgba(55,35,20,.09);font-size:17px;animation:none}
.on-page-seo-page .hero-float b{font-size:10.5px}
.on-page-seo-page .float-keyword{left:18px;top:25%}.on-page-seo-page .float-content{right:18px;top:31%}.on-page-seo-page .float-url{left:28px;bottom:18%}

/* CTA heading contrast */
body#top.on-page-seo-page main .onpage-cta .cta-grid h2{color:#fff!important}
@media(max-width:850px){.on-page-seo-page .onpage-hero-visual{min-height:560px;padding:45px 35px}.on-page-seo-page .float-keyword{left:8px}.on-page-seo-page .float-content{right:8px}.on-page-seo-page .float-url{left:14px}}
@media(max-width:600px){.on-page-seo-page .onpage-hero-visual{min-height:500px;padding:30px 16px;border-radius:22px}.on-page-seo-page .audit-window{padding:20px 18px}.on-page-seo-page .hero-float{display:none}.on-page-seo-page .audit-score strong{width:72px;height:72px;font-size:27px}.on-page-seo-page .audit-score span{font-size:11px}.on-page-seo-page .audit-bars span{height:34px}}

/* Professional, distraction-free audit dashboard */
.on-page-seo-page .onpage-hero-visual{min-height:600px;padding:58px;border:0;border-radius:28px;background:#f6f3ef;background-image:none;isolation:isolate}
.on-page-seo-page .onpage-hero-visual:before{content:"";position:absolute;z-index:-1;right:-105px;top:-105px;width:280px;height:280px;border-radius:50%;background:rgba(255,132,24,.12)}
.on-page-seo-page .onpage-hero-visual:after{content:"";position:absolute;z-index:-1;left:34px;bottom:34px;width:105px;height:105px;background-image:radial-gradient(rgba(255,132,24,.28) 2px,transparent 2px);background-size:15px 15px;opacity:.7}
.on-page-seo-page .hero-float{display:none!important}
.on-page-seo-page .audit-window{width:min(540px,100%);padding:0 32px 30px;border:0;border-top:4px solid #ff7a12;border-radius:18px;background:#fff;box-shadow:0 24px 60px rgba(45,31,20,.12);overflow:hidden}
.on-page-seo-page .onpage-hero-visual:hover .audit-window{transform:translateY(-3px)!important;box-shadow:0 28px 64px rgba(45,31,20,.14)}
.on-page-seo-page .audit-top{min-height:64px;padding:0;border-bottom:1px solid #eee9e4}
.on-page-seo-page .audit-top i{width:8px;height:8px}.on-page-seo-page .audit-top b{margin-left:10px;color:#5e5751;font-size:11px;letter-spacing:.02em}
.on-page-seo-page .audit-score{position:relative;gap:24px;padding:26px 0 24px;border-bottom:1px solid #f0ebe7}
.on-page-seo-page .audit-score strong{width:82px;height:82px;border:7px solid #ff7a12;background:#fff7f0;color:#191613;font-size:30px;box-shadow:inset 0 0 0 5px #fff}
.on-page-seo-page .audit-score span{color:#2a2521;font-size:12px;letter-spacing:.15em}
.on-page-seo-page .audit-score:after{content:"Optimized";margin-left:auto;padding:7px 11px;border-radius:20px;background:#ecf8ef;color:#278143;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.on-page-seo-page .audit-bars{gap:12px;padding-top:23px}
.on-page-seo-page .audit-bars span{height:39px;border-radius:8px;background:#f0ece8}
.on-page-seo-page .audit-bars span:before{background:linear-gradient(90deg,#ffb46c,#ff7912)}
.on-page-seo-page .audit-bars b{padding:10px 13px;color:#211d19;font-size:11.5px}
.on-page-seo-page .audit-window>small{display:flex;align-items:center;justify-content:center;width:fit-content;margin:18px 0 0 auto;padding:9px 13px;border-radius:8px;background:#221f1c;color:#fff;font-size:11px;letter-spacing:.02em}
@media(max-width:850px){.on-page-seo-page .onpage-hero-visual{min-height:560px;padding:42px}.on-page-seo-page .audit-window{width:min(520px,100%)}}
@media(max-width:600px){.on-page-seo-page .onpage-hero-visual{min-height:480px;padding:26px 15px}.on-page-seo-page .audit-window{padding:0 18px 22px}.on-page-seo-page .audit-score{gap:15px}.on-page-seo-page .audit-score:after{display:none}.on-page-seo-page .audit-bars span{height:36px}}

/* Remove outer visual box and decorative circles */
.on-page-seo-page .onpage-hero:before,.on-page-seo-page .onpage-hero:after,.on-page-seo-page .onpage-hero-visual:before,.on-page-seo-page .onpage-hero-visual:after{content:none!important;display:none!important}
.on-page-seo-page .onpage-hero-visual{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
@media(max-width:600px){.on-page-seo-page .onpage-hero-visual{padding:0!important}}

/* Compact spacing and balanced layouts for On-Page SEO. */
body#top.on-page-seo-page main > section:not(.page-hero) { padding-top: 28px !important; padding-bottom: 28px !important; }
body#top.on-page-seo-page main > section:not(.page-hero) .eyebrow { margin-bottom: 10px !important; }
body#top.on-page-seo-page main > section:not(.page-hero) h2 { margin-top: 0 !important; margin-bottom: 14px !important; line-height: 1.2 !important; }
body#top.on-page-seo-page .onpage-heading { margin-bottom: 22px !important; }
body#top.on-page-seo-page .onpage-hero-copy p { margin-bottom: 12px !important; line-height: 1.65 !important; }
body#top.on-page-seo-page .onpage-actions { margin-top: 18px !important; }
body#top.on-page-seo-page :is(.onpage-hero-grid,.approach-grid,.technical-grid,.benefit-layout,.cta-grid) { gap: 32px !important; }
body#top.on-page-seo-page .onpage-hero-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
body#top.on-page-seo-page .onpage-hero-visual { min-height: 0 !important; }
body#top.on-page-seo-page .audit-window { width: 100%; max-width: 500px; }
body#top.on-page-seo-page .audit-score { gap: 14px; flex-wrap: wrap; }
body#top.on-page-seo-page .element-grid article { padding: 20px !important; }
body#top.on-page-seo-page .element-grid h3 { margin: 12px 0 8px !important; line-height: 1.25 !important; }
body#top.on-page-seo-page .technical-visual { min-height: 0 !important; padding: 0 !important; }
body#top.on-page-seo-page .technical-visual img { max-width: 100% !important; height: auto !important; transform: none !important; }
body#top.on-page-seo-page .choose-grid span { min-height: 72px !important; padding: 16px 16px 16px 50px !important; }
body#top.on-page-seo-page .choose-note { margin-top: 18px !important; margin-bottom: 0 !important; }
body#top.on-page-seo-page .onpage-benefit-list span { min-height: 64px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
body#top.on-page-seo-page .cta-card { padding: 22px !important; }
@media(max-width:950px) {
  body#top.on-page-seo-page .onpage-hero-grid { grid-template-columns: minmax(0,1fr); }
  body#top.on-page-seo-page :is(.onpage-hero-grid,.approach-grid,.technical-grid,.benefit-layout,.cta-grid) { gap: 24px !important; }
}
@media(max-width:600px) {
  body#top.on-page-seo-page main > section:not(.page-hero) { padding-top: 20px !important; padding-bottom: 20px !important; }
  body#top.on-page-seo-page .element-grid article { padding: 18px !important; }
  body#top.on-page-seo-page .onpage-heading { margin-bottom: 18px !important; }
  body#top.on-page-seo-page .cta-card { padding: 18px !important; }
}

/* Keep the On-Page SEO CTA heading close to its supporting paragraph. */
body#top.on-page-seo-page main .onpage-cta .cta-grid { gap: 10px !important; }
body#top.on-page-seo-page main .onpage-cta h2 { margin-bottom: 0 !important; }
body#top.on-page-seo-page main .onpage-cta .cta-card { padding-top: 0 !important; }
body#top.on-page-seo-page main .onpage-cta .cta-card p { margin-top: 0 !important; }

/* Align On-Page SEO element icons and headings on one row. */
body#top.on-page-seo-page main .element-grid article {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 14px;
  row-gap: 12px;
  align-content: start;
}
body#top.on-page-seo-page main .element-grid article > span {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0;
}
body#top.on-page-seo-page main .element-grid h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0 !important;
  min-width: 0;
  line-height: 1.3 !important;
}
body#top.on-page-seo-page main .element-grid p {
  grid-column: 1 / -1;
  grid-row: auto;
  margin: 0 0 8px;
}

/* Keep multiple card paragraphs together instead of stretching them apart. */
body#top.on-page-seo-page main .element-grid article {
  grid-template-rows: auto auto;
  align-content: start;
}
body#top.on-page-seo-page main .element-grid article p + p {
  margin-top: 6px !important;
}

/* Remove the remaining vertical gap between paragraphs in element cards. */
body#top.on-page-seo-page main .element-grid article {
  row-gap: 0 !important;
}
body#top.on-page-seo-page main .element-grid article p,
body#top.on-page-seo-page main .element-grid article p + p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body#top.on-page-seo-page main .element-grid article p + p {
  padding-top: 0 !important;
}

/* Refined on-page score preview. */
body#top.on-page-seo-page .audit-window {
  padding: 0 22px 18px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  border: 1px solid #ffe0c6;
  border-top: 4px solid #ff7912;
  border-radius: 24px;
  background: linear-gradient(155deg, #fff8f1, #fff 38%);
  box-shadow: 0 24px 55px rgba(74, 41, 15, .12), 0 4px 12px rgba(255, 121, 18, .06);
}
body#top.on-page-seo-page .audit-top { min-height: 46px; }
body#top.on-page-seo-page .audit-score { padding: 16px 0; }
body#top.on-page-seo-page .audit-score strong {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 78%, transparent 80%), conic-gradient(#ff7912 92%, #ffead9 0);
  box-shadow: 0 8px 22px rgba(255, 121, 18, .15);
  font-size: 32px;
}
body#top.on-page-seo-page .audit-bars { gap: 12px; padding-top: 16px; }
body#top.on-page-seo-page .audit-bars > span {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  height: 36px;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
body#top.on-page-seo-page .audit-bars > span::after,
body#top.on-page-seo-page .audit-bars > span::before {
  content: '';
  position: absolute;
  inset: auto auto 0 0;
  height: 8px;
  border-radius: 999px;
}
body#top.on-page-seo-page .audit-bars > span::after { width: 100%; background: #f3eee9; z-index: 0; }
body#top.on-page-seo-page .audit-bars > span::before {
  width: var(--w);
  background: linear-gradient(90deg, #ffb16c, #ff7410);
  box-shadow: 0 3px 7px rgba(255, 116, 16, .15);
  z-index: 1;
}
body#top.on-page-seo-page .audit-bars b { padding: 0; font-size: 13px; color: #42372f; }
body#top.on-page-seo-page .audit-bars em { font-size: 12px; font-style: normal; font-weight: 800; color: #b94c00; }
body#top.on-page-seo-page .audit-window > small {
  width: 100%;
  margin-top: 16px;
  padding: 9px;
  border: 1px solid #dceee2;
  border-radius: 12px;
  color: #237344;
  background: #f0f9f3;
}
@media (max-width: 600px) {
  body#top.on-page-seo-page .audit-window { padding: 0 16px 16px; }
  body#top.on-page-seo-page .audit-score strong { width: 76px; height: 76px; font-size: 28px; }
  body#top.on-page-seo-page .audit-top b { font-size: 10px; overflow-wrap: anywhere; }
}

@keyframes audit-bar-reveal {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
body#top.on-page-seo-page .audit-bars > span::before {
  transform-origin: left;
  animation: audit-bar-reveal .8s ease-out both;
}
body#top.on-page-seo-page .audit-bars > span:nth-child(2)::before { animation-delay: .1s; }
body#top.on-page-seo-page .audit-bars > span:nth-child(3)::before { animation-delay: .2s; }
body#top.on-page-seo-page .audit-bars > span:nth-child(4)::before { animation-delay: .3s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body#top.on-page-seo-page .onpage-hero-visual:hover .audit-window {
    transform: translateY(-5px) !important;
    border-color: #ffb579;
    box-shadow: 0 28px 55px rgba(255, 121, 18, .18);
  }
  body#top.on-page-seo-page .audit-bars > span { transition: transform .2s ease; }
  body#top.on-page-seo-page .audit-bars > span:hover { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  body#top.on-page-seo-page .audit-bars > span::before { animation: none; }
  body#top.on-page-seo-page .audit-window { transition: none; }
  body#top.on-page-seo-page .onpage-hero-visual:hover .audit-window { transform: none !important; }
}