/* =========================================================

   GLOBEXUS SEO SERVICE PAGE

   Namespace: gx-seo-

   No global selectors used

========================================================= */

.gx-seo-page {

  --gx-seo-navy: #050c18;

  --gx-seo-navy-900: #081222;

  --gx-seo-ink: #101827;

  --gx-seo-ink-soft: #263142;

  --gx-seo-muted: #667080;

  --gx-seo-muted-light: #8a93a1;

  --gx-seo-white: #ffffff;

  --gx-seo-off-white: #fffdfb;

  --gx-seo-section: #fbfaf8;

  --gx-seo-line: #e7e6e3;

  --gx-seo-coral: #ff786f;

  --gx-seo-coral-dark: #f26158;

  --gx-seo-coral-soft: #fff0ec;

  --gx-seo-coral-pale: #fff6f3;

  --gx-seo-lavender: #9b8be8;

  --gx-seo-lavender-soft: #f1edff;

  --gx-seo-green: #43a85d;

  --gx-seo-green-soft: #eff9f0;

  --gx-seo-shadow-sm:

    0 5px 20px rgba(12, 23, 41, 0.06);

  --gx-seo-shadow-md:

    0 18px 50px rgba(12, 23, 41, 0.10);

  --gx-seo-radius-md: 14px;

  --gx-seo-radius-lg: 18px;

  --gx-seo-radius-xl: 24px;

  --gx-seo-container: 1160px;

}

/* =========================================================

   CONTAINER

========================================================= */

.gx-seo-container {

  width: min(

    var(--gx-seo-container),

    calc(100% - 48px)

  );

  margin-left: auto;

  margin-right: auto;

}

/* =========================================================

   BUTTONS

========================================================= */

.gx-seo-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 48px;

  padding: 0 21px;

  border-radius: 999px;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  transition:

    transform 220ms ease,

    background 220ms ease,

    border-color 220ms ease;

}

.gx-seo-btn:hover {

  transform: translateY(-2px);

}

.gx-seo-btn-coral {

  background: var(--gx-seo-coral);

  color: var(--gx-seo-navy);

}

.gx-seo-btn-dark {

  background: var(--gx-seo-navy);

  color: var(--gx-seo-white);

}

.gx-seo-btn-outline {

  background: transparent;

  color: var(--gx-seo-ink);

  border: 1px solid var(--gx-seo-line);

}

.gx-seo-btn span {

  font-size: 17px;

  line-height: 1;

}

/* =========================================================

   EYEBROW

========================================================= */

.gx-seo-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--gx-seo-coral-dark);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .14em;

  text-transform: uppercase;

}

.gx-seo-eyebrow::before {

  content: "";

  width: 22px;

  height: 2px;

  background: var(--gx-seo-coral);

}

/* =========================================================

   HERO

========================================================= */

.gx-seo-hero {

  padding: 80px 0 85px;

}

.gx-seo-hero-grid {

  display: grid;

  grid-template-columns:

    minmax(0, 1fr)

    minmax(420px, .9fr);

  gap: 70px;

  align-items: center;

}

.gx-seo-hero-title {

  max-width: 700px;

  margin-top: 18px;

  color: var(--gx-seo-ink);

  font-size: 50px;

  font-weight: 600;

  line-height: 1.02;

  letter-spacing: -.055em;

}

.gx-seo-hero-title span {

  color: var(--gx-seo-coral-dark);

}

.gx-seo-hero-text {

  max-width: 590px;

  margin-top: 27px;

  color: var(--gx-seo-muted);

  font-size: 17px;

  line-height: 1.7;

}

.gx-seo-hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 34px;

}

.gx-seo-hero-notes {

  display: flex;

  flex-wrap: wrap;

  gap: 18px;

  margin-top: 24px;

  color: var(--gx-seo-muted);

  font-size: 12px;

}

.gx-seo-hero-notes span::before {

  content: "✓";

  margin-right: 7px;

  color: var(--gx-seo-green);

  font-weight: 700;

}

/* =========================================================

   SEO DASHBOARD

========================================================= */

.gx-seo-dashboard-wrap {

  position: relative;

}

.gx-seo-dashboard {

  position: relative;

  padding: 14px;

  background: var(--gx-seo-white);

  border: 1px solid var(--gx-seo-line);

  border-radius: var(--gx-seo-radius-xl);

  box-shadow: var(--gx-seo-shadow-md);

  transform: rotate(1deg);

}

.gx-seo-browser-bar {

  height: 35px;

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 0 8px 8px;

}

.gx-seo-browser-bar > span {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #d8d6d0;

}

.gx-seo-browser-url {

  width: 42%;

  height: 20px;

  margin: 0 auto;

  border: 1px solid var(--gx-seo-line);

  border-radius: 6px;

}

.gx-seo-dashboard-inner {

  padding: 18px;

  background: var(--gx-seo-section);

  border: 1px solid var(--gx-seo-line);

  border-radius: 14px;

}

.gx-seo-dashboard-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 18px;

}

.gx-seo-dashboard-head small {

  display: block;

  color: var(--gx-seo-muted-light);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .12em;

}

.gx-seo-dashboard-head strong {

  display: block;

  margin-top: 3px;

  color: var(--gx-seo-ink);

  font-size: 13px;

}

.gx-seo-status {

  padding: 5px 8px;

  background: var(--gx-seo-green-soft);

  color: var(--gx-seo-green);

  border-radius: 999px;

  font-size: 9px;

  font-weight: 700;

  white-space: nowrap;

}

/* Metrics */

.gx-seo-metrics {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 9px;

}

.gx-seo-metric {

  padding: 13px;

  background: var(--gx-seo-white);

  border: 1px solid var(--gx-seo-line);

  border-radius: 10px;

}

.gx-seo-metric small {

  display: block;

  color: var(--gx-seo-muted);

  font-size: 9px;

}

.gx-seo-metric strong {

  display: block;

  margin-top: 3px;

  color: var(--gx-seo-ink);

  font-size: 21px;

  line-height: 1.1;

}

.gx-seo-metric span {

  display: block;

  margin-top: 3px;

  color: var(--gx-seo-green);

  font-size: 9px;

}

/* Chart */

.gx-seo-chart {

  position: relative;

  height: 160px;

  margin-top: 10px;

  padding: 14px;

  overflow: hidden;

  background: var(--gx-seo-white);

  border: 1px solid var(--gx-seo-line);

  border-radius: 10px;

}

.gx-seo-chart-head {

  position: relative;

  z-index: 2;

  display: flex;

  justify-content: space-between;

  font-size: 10px;

}

.gx-seo-chart-head span {

  color: var(--gx-seo-ink);

  font-weight: 600;

}

.gx-seo-chart-head strong {

  color: var(--gx-seo-muted-light);

  font-size: 9px;

  font-weight: 500;

}

.gx-seo-chart-svg {

  position: absolute;

  left: 12px;

  right: 12px;

  bottom: 8px;

  width: calc(100% - 24px);

  height: 105px;

  color: var(--gx-seo-coral);

}

.gx-seo-chart-fill {

  fill: var(--gx-seo-coral-soft);

  stroke: none;

}

/* Keywords */

.gx-seo-keywords {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 9px;

  margin-top: 10px;

}

.gx-seo-keyword {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  padding: 11px;

  background: var(--gx-seo-white);

  border: 1px solid var(--gx-seo-line);

  border-radius: 10px;

  font-size: 10px;

}

.gx-seo-keyword span {

  color: var(--gx-seo-muted);

}

.gx-seo-keyword strong {

  color: var(--gx-seo-ink);

  font-size: 11px;

}

.gx-seo-keyword em {

  color: var(--gx-seo-green);

  font-style: normal;

}

/* Floating stat */

.gx-seo-floating-stat {

  position: absolute;

  left: -25px;

  bottom: 35px;

  padding: 13px 16px;

  background: var(--gx-seo-navy);

  border-radius: 12px;

  box-shadow: var(--gx-seo-shadow-md);

  color: var(--gx-seo-white);

}

.gx-seo-floating-stat strong {

  display: block;

  color: var(--gx-seo-coral);

  font-size: 18px;

}

.gx-seo-floating-stat span {

  display: block;

  margin-top: 1px;

  color: #aeb6c4;

  font-size: 10px;

}

/* =========================================================

   GENERIC SECTION

========================================================= */

.gx-seo-section {

  padding: 50px 0;

}

.gx-seo-section-soft {

  background: var(--gx-seo-section);

}

.gx-seo-section-heading {

  /* max-width: 720px; */

}

.gx-seo-section-title {

  margin-top: 16px;

  color: var(--gx-seo-ink);

  font-size: 48px;

  font-weight: 600;

  line-height: 1.06;

  letter-spacing: -.05em;

}

.gx-seo-section-description {

  max-width: 800px;

  margin-top: 18px;

  color: var(--gx-seo-muted);

  font-size: 15px;

  line-height: 1.7;

}

/* =========================================================

   PROBLEM

========================================================= */

.gx-seo-problem-grid {

  display: grid;

  grid-template-columns:

    minmax(300px, .85fr)

    minmax(0, 1.25fr);

  gap: 80px;

  margin-top: 55px;

}

.gx-seo-problem-statement {

  max-width: 440px;

  color: var(--gx-seo-ink);

  font-size: 48px;

  line-height: 1.08;

  letter-spacing: -.05em;

  position: sticky;

  top: 30px;

  height: max-content;

}

.gx-seo-problem-statement span {

  color: var(--gx-seo-coral-dark);

}

.gx-seo-problem-statement small {

  display: block;

  max-width: 380px;

  margin-top: 20px;

  color: var(--gx-seo-muted);

  font-size: 13px;

  line-height: 1.6;

  letter-spacing: 0;

}

.gx-seo-problem-list {

  border-top: 1px solid var(--gx-seo-line);

}

.gx-seo-problem-item {

  display: grid;

  grid-template-columns: 44px 1fr;

  gap: 18px;

  padding: 25px 0;

  border-bottom: 1px solid var(--gx-seo-line);

}

.gx-seo-problem-number {

  width: 32px;

  height: 32px;

  display: grid;

  place-items: center;

  background: var(--gx-seo-coral-soft);

  border-radius: 9px;

  color: var(--gx-seo-coral-dark);

  font-size: 11px;

  font-weight: 700;

}

.gx-seo-problem-item h3 {

  color: var(--gx-seo-ink);

  font-size: 18px;

  font-weight: 600;

  letter-spacing: -.025em;

}

.gx-seo-problem-item p {

  max-width: 580px;

  margin-top: 6px;

  color: var(--gx-seo-muted);

  font-size: 14px;

  line-height: 1.6;

}

/* =========================================================

   APPROACH / COMPARISON

========================================================= */

.gx-seo-approach-grid {

  display: grid;

  grid-template-columns:

    .9fr

    1.1fr;

  gap: 80px;

  align-items: center;

}

.gx-seo-approach-grid

.gx-seo-section-heading

.gx-seo-btn {

  margin-top: 28px;

}

.gx-seo-compare {

  overflow: hidden;

  background: var(--gx-seo-white);

  border: 1px solid var(--gx-seo-line);

  border-radius: var(--gx-seo-radius-xl);

  box-shadow: var(--gx-seo-shadow-sm);

}

.gx-seo-compare-head,

.gx-seo-compare-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

}

.gx-seo-compare-head div {

  padding: 16px 20px;

  background: var(--gx-seo-section);

  color: var(--gx-seo-ink);

  font-size: 12px;

  font-weight: 700;

}

.gx-seo-compare-row div {

  padding: 16px 20px;

  border-top: 1px solid var(--gx-seo-line);

  font-size: 14px;

}

.gx-seo-compare-row div:first-child {

  border-right: 1px solid var(--gx-seo-line);

  color: var(--gx-seo-muted);

}

.gx-seo-compare-row div:last-child {

  color: var(--gx-seo-ink);

}

.gx-seo-compare-row b {

  margin-right: 6px;

  color: var(--gx-seo-green);

}

/* =========================================================

   SERVICES

========================================================= */

.gx-seo-service-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-top: 50px;

}

.gx-seo-service-card {

  min-height: 275px;

  display: flex;

  flex-direction: column;

  padding: 28px;

  background: var(--gx-seo-white);

  border: 1px solid var(--gx-seo-line);

  border-radius: var(--gx-seo-radius-lg);

  transition:

    transform 220ms ease,

    box-shadow 220ms ease;

}

.gx-seo-service-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--gx-seo-shadow-md);

}

.gx-seo-service-featured {

  background: var(--gx-seo-navy);

  border-color: var(--gx-seo-navy);

}

.gx-seo-service-icon {

  width: 40px;

  height: 40px;

  display: grid;

  place-items: center;

  background: var(--gx-seo-coral-soft);

  border-radius: 12px;

  color: var(--gx-seo-coral-dark);

  font-size: 11px;

  font-weight: 700;

}

.gx-seo-service-featured

.gx-seo-service-icon {

  background: rgba(255, 120, 111, .14);

  color: var(--gx-seo-coral);

}

.gx-seo-service-card h3 {

  margin-top: 27px;

  color: var(--gx-seo-ink);

  font-size: 22px;

  font-weight: 600;

  letter-spacing: -.04em;

}

.gx-seo-service-featured h3 {

  color: var(--gx-seo-white);

}

.gx-seo-service-card p {

  margin-top: 10px;

  color: var(--gx-seo-muted);

  font-size: 14px;

  line-height: 1.65;

}

.gx-seo-service-featured p {

  color: #aeb6c4;

}

.gx-seo-service-card a {

  margin-top: auto;

  padding-top: 25px;

  color: var(--gx-seo-ink);

  font-size: 13px;

  font-weight: 600;

}

.gx-seo-service-featured a {

  color: var(--gx-seo-white);

}

.gx-seo-service-card a span {

  margin-left: 6px;

  color: var(--gx-seo-coral-dark);

}

.gx-seo-service-featured a span {

  color: var(--gx-seo-coral);

}

/* =========================================================

   OUTCOMES

========================================================= */

.gx-seo-outcome-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  margin-top: 55px;

  border-top: 1px solid var(--gx-seo-line);

}

.gx-seo-outcome {

  padding: 32px 30px 30px 0;

  border-right: 1px solid var(--gx-seo-line);

}

.gx-seo-outcome + .gx-seo-outcome {

  padding-left: 30px;

}

.gx-seo-outcome:last-child {

  border-right: 0;

}

.gx-seo-outcome > span {

  color: var(--gx-seo-coral-dark);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .08em;

}

.gx-seo-outcome h3 {

  margin-top: 18px;

  color: var(--gx-seo-ink);

  font-size: 21px;

}

.gx-seo-outcome p {

  max-width: 300px;

  margin-top: 9px;

  color: var(--gx-seo-muted);

  font-size: 13px;

  line-height: 1.6;

}

/* =========================================================

   PACKAGES

========================================================= */

.gx-seo-package-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-top: 52px;

}

.gx-seo-package {

  display: flex;

  flex-direction: column;

  padding: 28px;

  background: var(--gx-seo-white);

  border: 1px solid var(--gx-seo-line);

  border-radius: var(--gx-seo-radius-lg);

}

.gx-seo-package-featured {

  border: 1.5px solid var(--gx-seo-coral);

  box-shadow:

    0 10px 35px rgba(255, 120, 111, .10);

}

.gx-seo-package-title {

  color: var(--gx-seo-ink);

  font-size: 20px;

  font-weight: 600;

}

.gx-seo-package-top {

  display: flex;

  justify-content: space-between;

  gap: 10px;

}

.gx-seo-package-top > span {

  padding: 6px 8px;

  background: var(--gx-seo-coral-soft);

  border-radius: 999px;

  color: var(--gx-seo-coral-dark);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .1em;

  text-transform: uppercase;

}

.gx-seo-package > p {

  margin-top: 7px;

  color: var(--gx-seo-muted);

  font-size: 12px;

}

.gx-seo-package ul {

  margin-top: 25px;

  padding: 0;

  list-style: none;

}

.gx-seo-package li {

  padding: 10px 0;

  border-top: 1px solid var(--gx-seo-line);

  color: var(--gx-seo-ink);

  font-size: 12px;

}

.gx-seo-package li::before {

  content: "✓";

  margin-right: 9px;

  color: var(--gx-seo-green);

  font-weight: 700;

}

.gx-seo-package .gx-seo-btn {

  margin-top: 25px;

}

/* =========================================================

   PROCESS

========================================================= */

.gx-seo-process-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  margin-top: 55px;

  border-top: 1px solid var(--gx-seo-line);

}

.gx-seo-process-step {

  padding: 28px 24px 0 0;

  border-right: 1px solid var(--gx-seo-line);

}

.gx-seo-process-step + .gx-seo-process-step {

  padding-left: 24px;

}

.gx-seo-process-step:last-child {

  border-right: 0;

}

.gx-seo-process-step > span {

  color: var(--gx-seo-coral-dark);

  font-size: 13px;

  font-weight: 700;

}

.gx-seo-process-step h3 {

  margin-top: 25px;

  color: var(--gx-seo-ink);

  font-size: 19px;

}

.gx-seo-process-step p {

  max-width: 230px;

  margin-top: 8px;

  color: var(--gx-seo-muted);

  font-size: 14px;

  line-height: 1.6;

}

/* =========================================================

   PROOF

========================================================= */

.gx-seo-proof-heading {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 40px;

}

.gx-seo-proof-heading > p {

  max-width: 480px;

  color: var(--gx-seo-muted);

  font-size: 14px;

  line-height: 1.65;

}

.gx-seo-proof-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-top: 48px;

}

.gx-seo-proof-card {

  overflow: hidden;

  background: var(--gx-seo-white);

  border: 1px solid var(--gx-seo-line);

  border-radius: var(--gx-seo-radius-lg);

}

.gx-seo-proof-screen {

  height: 190px;

  padding: 20px;

  background: var(--gx-seo-section);

  border-bottom: 1px solid var(--gx-seo-line);

}

.gx-seo-proof-screen small {

  color: var(--gx-seo-muted);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .08em;

}

.gx-seo-proof-screen strong {

  display: block;

  margin-top: 18px;

  color: var(--gx-seo-ink);

  font-size: 27px;

}

.gx-seo-proof-screen > span {

  display: block;

  margin-top: 2px;

  color: var(--gx-seo-muted-light);

  font-size: 9px;

}

.gx-seo-bars {

  height: 65px;

  display: flex;

  align-items: flex-end;

  gap: 5px;

  margin-top: 10px;

}

.gx-seo-bars i {

  flex: 1;

  display: block;

  background: var(--gx-seo-lavender);

  border-radius: 4px 4px 0 0;

  opacity: .65;

}

.gx-seo-bars i:nth-child(1) {

  height: 25%;

}

.gx-seo-bars i:nth-child(2) {

  height: 32%;

}

.gx-seo-bars i:nth-child(3) {

  height: 39%;

}

.gx-seo-bars i:nth-child(4) {

  height: 48%;

}

.gx-seo-bars i:nth-child(5) {

  height: 55%;

}

.gx-seo-bars i:nth-child(6) {

  height: 65%;

}

.gx-seo-bars i:nth-child(7) {

  height: 77%;

}

.gx-seo-bars i:nth-child(8) {

  height: 90%;

}

.gx-seo-proof-content {

  padding: 20px;

}

.gx-seo-proof-content h3 {

  color: var(--gx-seo-ink);

  font-size: 16px;

}

.gx-seo-proof-content p {

  margin-top: 7px;

  color: var(--gx-seo-muted);

  font-size: 14px;

  line-height: 1.6;

}

/* =========================================================

   FAQ

========================================================= */

.gx-seo-faq-container {

  max-width: 850px;

}

.gx-seo-faq {

  margin-top: 45px;

  border-top: 1px solid var(--gx-seo-line);

}

.gx-seo-faq details {

  border-bottom: 1px solid var(--gx-seo-line);

}

.gx-seo-faq summary {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 22px 0;

  cursor: pointer;

  list-style: none;

  color: var(--gx-seo-ink);

  font-size: 16px;

  font-weight: 600;

}

.gx-seo-faq summary::-webkit-details-marker {

  display: none;

}

.gx-seo-faq summary::after {

  content: "+";

  color: var(--gx-seo-muted);

  font-size: 24px;

  font-weight: 300;

}

.gx-seo-faq details[open] summary::after {

  content: "−";

}

.gx-seo-faq details p {

  max-width: 700px;

  padding: 0 45px 23px 0;

  color: var(--gx-seo-muted);

  font-size: 14px;

  line-height: 1.7;

}

/* =========================================================

   FINAL CTA

========================================================= */

.gx-seo-cta-section {

  padding: 0 24px 100px;

}

.gx-seo-cta {

  position: relative;

  overflow: hidden;

  padding: 85px 30px;

  background: var(--gx-seo-navy);

  border-radius: var(--gx-seo-radius-xl);

  text-align: center;

}

.gx-seo-cta::before,

.gx-seo-cta::after {

  content: "";

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

}

.gx-seo-cta::before {

  width: 300px;

  height: 300px;

  top: -170px;

  left: -90px;

  background: rgba(255, 120, 111, .10);

}

.gx-seo-cta::after {

  width: 260px;

  height: 260px;

  right: -80px;

  bottom: -160px;

  background: rgba(155, 139, 232, .10);

}

.gx-seo-cta .gx-seo-eyebrow {

  position: relative;

  z-index: 2;

}

.gx-seo-cta h2 {

  position: relative;

  z-index: 2;

  max-width: 700px;

  margin: 17px auto 0;

  color: var(--gx-seo-white);

  font-size: 64px;

  line-height: 1.04;

  letter-spacing: -1.5px;

}

.gx-seo-cta p {

  position: relative;

  z-index: 2;

  max-width: 560px;

  margin: 18px auto 0;

  color: #aeb6c4;

  font-size: 15px;

  line-height: 1.65;

}

.gx-seo-cta .gx-seo-btn {

  position: relative;

  z-index: 2;

  margin-top: 30px;

}

/* =========================================================

   TABLET

========================================================= */

@media (max-width: 980px) {

  .gx-seo-hero-grid,

  .gx-seo-problem-grid,

  .gx-seo-approach-grid {

    grid-template-columns: 1fr;

    gap: 50px;

  }

  .gx-seo-hero {

    padding-top: 65px;

  }

  .gx-seo-dashboard {

    max-width: 700px;

    margin: 0 auto;

  }

  .gx-seo-service-grid,

  .gx-seo-package-grid,

  .gx-seo-proof-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  .gx-seo-process-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  .gx-seo-process-step:nth-child(2) {

    border-right: 0;

  }

  .gx-seo-process-step:nth-child(3),

  .gx-seo-process-step:nth-child(4) {

    padding-top: 28px;

    border-top: 1px solid var(--gx-seo-line);

  }

  .gx-seo-outcome-grid {

    grid-template-columns: 1fr;

  }

  .gx-seo-outcome,

  .gx-seo-outcome + .gx-seo-outcome {

    padding: 25px 0;

    border-right: 0;

    border-bottom: 1px solid var(--gx-seo-line);

  }

  .gx-seo-outcome:last-child {

    border-bottom: 0;

  }

  .gx-seo-proof-heading {

    align-items: flex-start;

    flex-direction: column;

    gap: 15px;

  }

}

/* =========================================================

   MOBILE

========================================================= */

@media (max-width: 650px) {

  .gx-seo-problem-statement {

    position: relative;

    top: auto;

  }

  .gx-seo-container {

    width: calc(100% - 32px);

  }

  .gx-seo-section {

    padding: 25px 0;

  }

  .gx-seo-hero {

    padding: 50px 0 65px;

  }

  .gx-seo-hero-title {

    font-size: 40px;

  }

  .gx-seo-hero-text {

    font-size: 15px;

  }

  .gx-seo-hero-actions {

    flex-direction: column;

  }

  .gx-seo-hero-actions .gx-seo-btn {

    width: 100%;

  }

  .gx-seo-hero-notes {

    gap: 10px 16px;

  }

  .gx-seo-dashboard {

    transform: none;

  }

  .gx-seo-dashboard-inner {

    padding: 13px;

  }

  .gx-seo-metrics {

    gap: 6px;

  }

  .gx-seo-metric {

    padding: 10px;

  }

  .gx-seo-metric strong {

    font-size: 17px;

  }

  .gx-seo-keywords {

    grid-template-columns: 1fr;

  }

  .gx-seo-floating-stat {

    left: 10px;

    bottom: -18px;

  }

  .gx-seo-problem-grid {

    gap: 35px;

  }

  .gx-seo-compare-head div,

  .gx-seo-compare-row div {

    padding: 13px 12px;

    font-size: 10px;

  }

  .gx-seo-service-grid,

  .gx-seo-package-grid,

  .gx-seo-proof-grid,

  .gx-seo-process-grid {

    grid-template-columns: 1fr;

  }

  .gx-seo-process-step,

  .gx-seo-process-step + .gx-seo-process-step {

    padding: 25px 0;

    border-right: 0;

    border-bottom: 1px solid var(--gx-seo-line);

  }

  .gx-seo-process-step:last-child {

    border-bottom: 0;

  }

  .gx-seo-outcome-grid {

    margin-top: 40px;

  }

  .gx-seo-cta-section {

    padding: 0 16px 65px;

  }

  .gx-seo-cta {

    padding: 65px 22px;

  }

  .gx-seo-cta h2 {

    font-size: 42px;

  }

  .gx-seo-cta p {

    font-size: 13px;

  }

}

/* =========================================================
   HEADING TYPOGRAPHY UPDATE — INTER
   Fixed sizes with breakpoint adjustments (no clamp)
========================================================= */

.gx-seo-page .gx-seo-hero-title,
.gx-seo-page .gx-seo-section-title,
.gx-seo-page .gx-seo-problem-statement,
.gx-seo-page .gx-seo-problem-item h3,
.gx-seo-page .gx-seo-service-card h3,
.gx-seo-page .gx-seo-outcome h3,
.gx-seo-page .gx-seo-process-step h3,
.gx-seo-page .gx-seo-proof-content h3,
.gx-seo-page .gx-seo-cta h2 {
  font-family: "Inter", sans-serif;
}

.gx-seo-page .gx-seo-hero-title {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.2px;
}

.gx-seo-page .gx-seo-section-title,
.gx-seo-page .gx-seo-problem-statement {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1.2px;
}

.gx-seo-page .gx-seo-problem-item h3,
.gx-seo-page .gx-seo-service-card h3,
.gx-seo-page .gx-seo-outcome h3,
.gx-seo-page .gx-seo-proof-content h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.6px;
}

.gx-seo-page .gx-seo-process-step h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.4px;
}

.gx-seo-page .gx-seo-cta h2 {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -2px;
}

@media (max-width: 1024px) {
  .gx-seo-page .gx-seo-hero-title {
    font-size: 48px;
    letter-spacing: -2px;
  }

  .gx-seo-page .gx-seo-section-title,
  .gx-seo-page .gx-seo-problem-statement {
    font-size: 40px;
    letter-spacing: -1.4px;
  }

  .gx-seo-page .gx-seo-cta h2 {
    font-size: 44px;
  }
}

@media (max-width: 767px) {
  .gx-seo-page .gx-seo-hero-title {
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: -1.3px;
  }

  .gx-seo-page .gx-seo-section-title,
  .gx-seo-page .gx-seo-problem-statement {
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -1px;
  }

  .gx-seo-page .gx-seo-problem-item h3,
  .gx-seo-page .gx-seo-service-card h3,
  .gx-seo-page .gx-seo-outcome h3,
  .gx-seo-page .gx-seo-proof-content h3 {
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -0.4px;
  }

  .gx-seo-page .gx-seo-process-step h3 {
    font-size: 20px;
  }

  .gx-seo-page .gx-seo-cta h2 {
    font-size: 36px;
    letter-spacing: -1px;
  }
}