/* ==========================================================================
   GPH V-M4C BUSINESS_SERVICES
   Scoped presentation layer for the six approved Business Services surfaces.
   Content, links, prices, metadata, schema, forms, and runtime behavior remain
   owned by the existing page source.
   ========================================================================== */

body.gph-vm4c-business {
  --vm4c-violet: #1a1728;
  --vm4c-violet-soft: #282238;
  --vm4c-bone: #f2ede3;
  --vm4c-ivory: #faf6ee;
  --vm4c-bone-low: #e6ded1;
  --vm4c-gold: #d9ba62;
  --vm4c-gold-hi: #e3c978;
  --vm4c-purple: #735da5;
  --vm4c-blue: #4f75c8;
  --vm4c-teal: #3ea99f;
  --vm4c-ink: #211d2c;
  --vm4c-muted: #686173;
  --vm4c-line: rgba(26, 23, 40, 0.12);
  --vm4c-shadow: 0 24px 70px rgba(26, 23, 40, 0.12);
  --vm4c-shadow-soft: 0 14px 42px rgba(26, 23, 40, 0.09);
  background:
    radial-gradient(circle at 12% 4%, rgba(115, 93, 165, 0.08), transparent 30rem),
    linear-gradient(180deg, var(--vm4c-ivory) 0%, var(--vm4c-bone) 100%);
  color: var(--vm4c-ink);
}

body.gph-vm4c-business main {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

body.gph-vm4c-business main *,
body.gph-vm4c-business main *::before,
body.gph-vm4c-business main *::after {
  box-sizing: border-box;
}

body.gph-vm4c-business main :where(h1, h2, h3, p, li, a, span, summary) {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

body.gph-vm4c-business .page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(5.25rem, 10vw, 8.75rem) 0 clamp(4.3rem, 8vw, 7rem);
  color: var(--vm4c-bone);
  background:
    radial-gradient(circle at 18% 16%, rgba(227, 201, 120, 0.14), transparent 23rem),
    radial-gradient(circle at 82% 20%, rgba(115, 93, 165, 0.34), transparent 31rem),
    linear-gradient(145deg, #171320 0%, var(--vm4c-violet) 52%, #221c32 100%);
  border-bottom: 1px solid rgba(217, 186, 98, 0.2);
}

body.gph-vm4c-business .page-hero::before {
  content: "";
  position: absolute;
  width: min(44rem, 70vw);
  aspect-ratio: 1;
  right: -14rem;
  top: -23rem;
  border: 1px solid rgba(227, 201, 120, 0.16);
  border-radius: 50%;
  box-shadow:
    0 0 0 4rem rgba(115, 93, 165, 0.035),
    0 0 0 8rem rgba(79, 117, 200, 0.025);
  pointer-events: none;
}

body.gph-vm4c-business .page-hero::after {
  content: "";
  position: absolute;
  left: clamp(1rem, 6vw, 6rem);
  right: clamp(1rem, 6vw, 6rem);
  bottom: 1.4rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(217, 186, 98, 0.62),
    rgba(115, 93, 165, 0.38),
    transparent
  );
  pointer-events: none;
}

body.gph-vm4c-business .page-hero .shell.narrow {
  position: relative;
  z-index: 1;
  width: min(100% - 2.25rem, 58rem);
  margin-inline: auto;
}

body.gph-vm4c-business .page-hero h1 {
  max-width: 15ch;
  margin: 0;
  color: var(--vm4c-ivory);
  font-family: "Sora", "Inter", system-ui, sans-serif;
  font-size: clamp(2.5rem, 6.4vw, 5.35rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

body.gph-vm4c-business .page-hero .shell.narrow > p:last-child {
  max-width: 47rem;
  margin: clamp(1.5rem, 3vw, 2.1rem) 0 0;
  color: rgba(242, 237, 227, 0.78);
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  line-height: 1.72;
}

/* Eyebrows outside cards stay suppressed by the global canon. */
body.gph-vm4c-business .page-hero > .shell > .eyebrow,
body.gph-vm4c-business .section > .shell > .eyebrow,
body.gph-vm4c-business .section > .shell > div > .eyebrow {
  display: none !important;
}

/* --------------------------------------------------------------------------
   SECTION RHYTHM
   -------------------------------------------------------------------------- */

body.gph-vm4c-business .section {
  position: relative;
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  background: transparent;
}

body.gph-vm4c-business .section + .section {
  border-top: 1px solid rgba(26, 23, 40, 0.07);
}

body.gph-vm4c-business .section .shell {
  min-width: 0;
}

body.gph-vm4c-business .section h2,
body.gph-vm4c-business .section h3 {
  color: var(--vm4c-ink);
  font-family: "Sora", "Inter", system-ui, sans-serif;
  letter-spacing: -0.035em;
}

body.gph-vm4c-business .section h2 {
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.08;
}

body.gph-vm4c-business .section p,
body.gph-vm4c-business .section li {
  color: var(--vm4c-muted);
  line-height: 1.72;
}

/* --------------------------------------------------------------------------
   BUSINESS SERVICES HUB
   -------------------------------------------------------------------------- */

body.gph-vm4c-business-hub .service-detail-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.55rem);
  align-items: stretch;
}

body.gph-vm4c-business-hub .service-detail-grid > article {
  position: relative;
  grid-column: span 4;
  min-width: 0;
  min-height: 19rem;
  display: flex;
  flex-direction: column;
  padding: clamp(1.55rem, 2.7vw, 2.25rem);
  border: 1px solid var(--vm4c-line);
  border-radius: clamp(1.25rem, 2vw, 1.75rem);
  background:
    linear-gradient(155deg, rgba(250, 246, 238, 0.98), rgba(242, 237, 227, 0.91));
  box-shadow: var(--vm4c-shadow-soft);
}

body.gph-vm4c-business-hub .service-detail-grid > article::after {
  content: "";
  position: absolute;
  inset: auto 1.4rem 1.1rem 1.4rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 186, 98, 0.62), transparent);
  opacity: 0.55;
}

body.gph-vm4c-business-hub .service-detail-grid > article.large-service {
  grid-column: span 8;
  min-height: 26rem;
  color: var(--vm4c-bone);
  background:
    radial-gradient(circle at 86% 10%, rgba(115, 93, 165, 0.35), transparent 20rem),
    linear-gradient(145deg, #181421, #272037);
  border-color: rgba(217, 186, 98, 0.22);
  box-shadow: 0 28px 80px rgba(26, 23, 40, 0.2);
}

body.gph-vm4c-business-hub .service-detail-grid > article > span {
  width: fit-content;
  margin-bottom: 1.15rem;
  padding: 0.42rem 0.68rem;
  border: 1px solid rgba(217, 186, 98, 0.35);
  border-radius: 999px;
  color: #7a641e;
  background: rgba(217, 186, 98, 0.12);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

body.gph-vm4c-business-hub .service-detail-grid > article.large-service > span {
  color: var(--vm4c-gold-hi);
  background: rgba(217, 186, 98, 0.08);
}

body.gph-vm4c-business-hub .service-detail-grid > article h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.45rem, 2vw, 2.15rem);
}

body.gph-vm4c-business-hub .service-detail-grid > article.large-service h2 {
  max-width: 16ch;
  color: var(--vm4c-ivory);
  font-size: clamp(2rem, 3.8vw, 3.65rem);
}

body.gph-vm4c-business-hub .service-detail-grid > article.large-service p,
body.gph-vm4c-business-hub .service-detail-grid > article.large-service li {
  color: rgba(242, 237, 227, 0.76);
}

body.gph-vm4c-business-hub .service-detail-grid > article ul {
  margin: 0.4rem 0 1.5rem;
  padding-left: 1.15rem;
}

body.gph-vm4c-business-hub .service-detail-grid > article > a {
  width: fit-content;
  margin-top: auto;
  position: relative;
  z-index: 1;
  color: #4d3d0d;
  font-weight: 800;
  text-decoration: none;
}

body.gph-vm4c-business-hub .service-detail-grid > article > a:not(.btn) {
  padding: 0.72rem 0.9rem;
  margin-left: -0.9rem;
  border-radius: 0.85rem;
  transition:
    transform 180ms ease,
    background 180ms ease;
}

body.gph-vm4c-business-hub .service-detail-grid > article > a:not(.btn):hover,
body.gph-vm4c-business-hub .service-detail-grid > article > a:not(.btn):focus-visible {
  background: rgba(217, 186, 98, 0.18);
  transform: translateX(0.18rem);
}

/* --------------------------------------------------------------------------
   CONSULTING
   -------------------------------------------------------------------------- */

body.gph-vm4c-consulting .consult-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

body.gph-vm4c-consulting .consult-grid > article {
  min-width: 0;
  min-height: 16rem;
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.35rem);
  border: 1px solid var(--vm4c-line);
  border-radius: clamp(1.25rem, 2vw, 1.75rem);
  background:
    linear-gradient(160deg, rgba(250, 246, 238, 0.98), rgba(242, 237, 227, 0.88));
  box-shadow: var(--vm4c-shadow-soft);
}

body.gph-vm4c-consulting .consult-grid > article > span {
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(217, 186, 98, 0.4);
  border-radius: 0.85rem;
  color: #6f5712;
  background: rgba(217, 186, 98, 0.14);
  font-weight: 800;
}

body.gph-vm4c-consulting .consult-grid > article h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.55rem, 2.8vw, 2.25rem);
}

body.gph-vm4c-consulting .dark-band {
  overflow: hidden;
  color: var(--vm4c-bone);
  background:
    radial-gradient(circle at 85% 20%, rgba(115, 93, 165, 0.34), transparent 28rem),
    linear-gradient(145deg, #171320, #272036);
  border-top: 1px solid rgba(217, 186, 98, 0.16);
  border-bottom: 1px solid rgba(217, 186, 98, 0.16);
}

body.gph-vm4c-consulting .dark-band .split {
  gap: clamp(2rem, 6vw, 6rem);
}

body.gph-vm4c-consulting .dark-band h2,
body.gph-vm4c-consulting .dark-band h3 {
  color: var(--vm4c-ivory);
}

body.gph-vm4c-consulting .dark-band p,
body.gph-vm4c-consulting .dark-band li {
  color: rgba(242, 237, 227, 0.76);
}

/* --------------------------------------------------------------------------
   DETAIL/SERVICE OFFER PAGES
   -------------------------------------------------------------------------- */

body.gph-vm4c-business .split {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(20rem, 0.94fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
}

body.gph-vm4c-business .split > * {
  min-width: 0;
}

body.gph-vm4c-business .section .split > div:not(:has(.service-offer-card)) {
  padding-top: clamp(0.3rem, 1vw, 0.8rem);
}

body.gph-vm4c-business .check-list {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.2rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.78rem;
}

body.gph-vm4c-business .check-list li {
  position: relative;
  min-height: 2rem;
  padding: 0.62rem 0 0.62rem 2.4rem;
  border-bottom: 1px solid rgba(26, 23, 40, 0.08);
}

body.gph-vm4c-business .check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.54rem;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  color: #4d3d0d;
  background: rgba(217, 186, 98, 0.22);
  border: 1px solid rgba(217, 186, 98, 0.38);
  font-size: 0.78rem;
  font-weight: 900;
}

body.gph-vm4c-business .service-offer-card {
  position: sticky;
  top: 6.75rem;
  min-width: 0;
  padding: clamp(1.6rem, 3vw, 2.45rem);
  border: 1px solid rgba(217, 186, 98, 0.28);
  border-radius: clamp(1.35rem, 2.2vw, 1.9rem);
  color: var(--vm4c-bone);
  background:
    radial-gradient(circle at 100% 0%, rgba(115, 93, 165, 0.35), transparent 20rem),
    linear-gradient(150deg, #171320 0%, #29213a 100%);
  box-shadow: var(--vm4c-shadow);
}

body.gph-vm4c-business .service-offer-card > span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 1.3rem;
  padding: 0.42rem 0.68rem;
  border: 1px solid rgba(217, 186, 98, 0.32);
  border-radius: 999px;
  color: var(--vm4c-gold-hi);
  background: rgba(217, 186, 98, 0.08);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

body.gph-vm4c-business .service-offer-card h2 {
  margin: 0 0 1rem;
  color: var(--vm4c-ivory);
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  line-height: 1.06;
}

body.gph-vm4c-business .service-offer-card p {
  color: rgba(242, 237, 227, 0.72);
}

body.gph-vm4c-business .service-offer-card .btn {
  width: 100%;
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

body.gph-vm4c-business .faq-section {
  background: rgba(250, 246, 238, 0.46);
}

body.gph-vm4c-business .faq-section .section-title {
  margin-top: 0;
}

body.gph-vm4c-business .faq {
  display: grid;
  gap: 0.8rem;
  margin-top: clamp(1.6rem, 3vw, 2.5rem);
}

body.gph-vm4c-business .faq details {
  border: 1px solid var(--vm4c-line);
  border-radius: 1.15rem;
  background: rgba(250, 246, 238, 0.92);
  box-shadow: 0 10px 30px rgba(26, 23, 40, 0.06);
}

body.gph-vm4c-business .faq summary {
  position: relative;
  padding: 1.2rem 3.25rem 1.2rem 1.25rem;
  cursor: pointer;
  color: var(--vm4c-ink);
  font-family: "Sora", "Inter", system-ui, sans-serif;
  font-weight: 700;
  list-style: none;
}

body.gph-vm4c-business .faq summary::-webkit-details-marker {
  display: none;
}

body.gph-vm4c-business .faq summary::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  translate: 0 -50%;
  color: #6d5717;
  font-size: 1.35rem;
}

body.gph-vm4c-business .faq details[open] summary::after {
  content: "−";
}

body.gph-vm4c-business .faq details p {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
}

/* --------------------------------------------------------------------------
   FINAL CTA PANELS
   -------------------------------------------------------------------------- */

body.gph-vm4c-business main > .section:last-child .shell.narrow.center {
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgba(217, 186, 98, 0.24);
  border-radius: clamp(1.35rem, 2.4vw, 2rem);
  color: var(--vm4c-bone);
  background:
    radial-gradient(circle at 10% 0%, rgba(217, 186, 98, 0.1), transparent 20rem),
    linear-gradient(145deg, #181421, #29213a);
  box-shadow: var(--vm4c-shadow);
}

body.gph-vm4c-business main > .section:last-child .shell.narrow.center h2 {
  color: var(--vm4c-ivory);
}

body.gph-vm4c-business main > .section:last-child .shell.narrow.center p {
  max-width: 42rem;
  margin-inline: auto;
  color: rgba(242, 237, 227, 0.74);
}

/* --------------------------------------------------------------------------
   BUTTON NORMALIZATION
   -------------------------------------------------------------------------- */

body.gph-vm4c-business main .btn.primary {
  min-height: 3.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.84rem 1.18rem;
  border: 1px solid rgba(217, 186, 98, 0.65);
  border-radius: 0.95rem;
  color: #332905;
  background: linear-gradient(135deg, var(--vm4c-gold-hi), var(--vm4c-gold));
  box-shadow: 0 10px 28px rgba(140, 112, 30, 0.2);
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

body.gph-vm4c-business main .btn.primary:hover,
body.gph-vm4c-business main .btn.primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(140, 112, 30, 0.24);
  filter: brightness(1.03);
}

/* --------------------------------------------------------------------------
   PAGE-SPECIFIC ENERGY TINTS - same canon, different identity
   -------------------------------------------------------------------------- */

body.gph-vm4c-email-domain .page-hero {
  background:
    radial-gradient(circle at 18% 16%, rgba(217, 186, 98, 0.16), transparent 24rem),
    radial-gradient(circle at 82% 20%, rgba(79, 117, 200, 0.28), transparent 30rem),
    linear-gradient(145deg, #171320 0%, #1c1b31 56%, #24223b 100%);
}

body.gph-vm4c-google-profile .page-hero {
  background:
    radial-gradient(circle at 18% 16%, rgba(217, 186, 98, 0.13), transparent 24rem),
    radial-gradient(circle at 82% 20%, rgba(62, 169, 159, 0.22), transparent 30rem),
    linear-gradient(145deg, #171320 0%, #1a282d 58%, #20273a 100%);
}

body.gph-vm4c-analytics .page-hero {
  background:
    radial-gradient(circle at 18% 16%, rgba(217, 186, 98, 0.12), transparent 24rem),
    radial-gradient(circle at 82% 20%, rgba(79, 117, 200, 0.3), transparent 30rem),
    linear-gradient(145deg, #171320 0%, #1a2135 58%, #24203a 100%);
}

body.gph-vm4c-integrations .page-hero {
  background:
    radial-gradient(circle at 18% 16%, rgba(217, 186, 98, 0.12), transparent 24rem),
    radial-gradient(circle at 82% 20%, rgba(115, 93, 165, 0.32), transparent 30rem),
    linear-gradient(145deg, #171320 0%, #251d36 58%, #1c2930 100%);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  body.gph-vm4c-business-hub .service-detail-grid > article,
  body.gph-vm4c-business-hub .service-detail-grid > article.large-service {
    grid-column: span 6;
  }

  body.gph-vm4c-business-hub .service-detail-grid > article.large-service {
    min-height: 23rem;
  }
}

@media (max-width: 900px) {
  body.gph-vm4c-business .split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  body.gph-vm4c-business .service-offer-card {
    position: relative;
    top: auto;
  }
}

@media (max-width: 760px) {
  body.gph-vm4c-business main {
    overflow: hidden;
  }

  body.gph-vm4c-business .page-hero {
    padding: 4.25rem 0 3.8rem;
  }

  body.gph-vm4c-business .page-hero .shell.narrow {
    width: min(100% - 2.25rem, 58rem);
  }

  body.gph-vm4c-business .page-hero h1 {
    max-width: 18ch;
    font-size: clamp(2.25rem, 10vw, 3.75rem);
  }

  body.gph-vm4c-business .section {
    padding: 3.65rem 0;
  }

  body.gph-vm4c-business-hub .service-detail-grid {
    grid-template-columns: 1fr;
  }

  body.gph-vm4c-business-hub .service-detail-grid > article,
  body.gph-vm4c-business-hub .service-detail-grid > article.large-service {
    grid-column: 1;
    min-height: auto;
  }

  body.gph-vm4c-consulting .consult-grid {
    grid-template-columns: 1fr;
  }

  body.gph-vm4c-consulting .consult-grid > article {
    min-height: auto;
  }

  body.gph-vm4c-business main .btn.primary {
    width: 100%;
  }

  body.gph-vm4c-business main > .section:last-child .shell.narrow.center {
    text-align: left;
  }
}

@media (max-width: 430px) {
  body.gph-vm4c-business .page-hero .shell.narrow {
    width: min(100% - 2rem, 58rem);
  }

  body.gph-vm4c-business .page-hero {
    padding-top: 3.7rem;
  }

  body.gph-vm4c-business .service-offer-card,
  body.gph-vm4c-business-hub .service-detail-grid > article,
  body.gph-vm4c-consulting .consult-grid > article {
    padding: 1.35rem;
    border-radius: 1.2rem;
  }

  body.gph-vm4c-business main > .section:last-child .shell.narrow.center {
    padding: 1.45rem;
    border-radius: 1.2rem;
  }
}

@media (max-width: 390px) {
  body.gph-vm4c-business .page-hero .shell.narrow {
    width: min(100% - 2rem, 58rem);
  }

  body.gph-vm4c-business .section {
    padding-block: 3.2rem;
  }

  body.gph-vm4c-business .service-offer-card h2,
  body.gph-vm4c-business-hub .service-detail-grid > article.large-service h2 {
    font-size: clamp(1.75rem, 9vw, 2.4rem);
  }
}

@media (max-width: 320px) {
  body.gph-vm4c-business .page-hero .shell.narrow {
    width: min(100% - 1.75rem, 58rem);
  }

  body.gph-vm4c-business .page-hero h1 {
    font-size: 2.05rem;
  }

  body.gph-vm4c-business .service-offer-card,
  body.gph-vm4c-business-hub .service-detail-grid > article,
  body.gph-vm4c-consulting .consult-grid > article,
  body.gph-vm4c-business main > .section:last-child .shell.narrow.center {
    padding: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.gph-vm4c-business main *,
  body.gph-vm4c-business main *::before,
  body.gph-vm4c-business main *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* GPH_VM4C_V8_HOMEPAGE_CANON_BEGIN
   Cross-family convergence authority.
   Website Core + Business Services must read as one system with the homepage.
   Major surfaces follow the V2-H R6/R7 homepage roles exactly.
*/

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business) main {
  --gph-home-violet: #1A1728;
  --gph-home-violet-soft: #262039;
  --gph-home-bone: #F2EDE3;
  --gph-home-ivory: #FAF6EE;
  --gph-home-gold: #D9BA62;
  --gph-home-gold-hi: #E3C978;
  --gph-home-purple: #735DA5;
  --gph-home-blue: #4F75C8;
  --gph-home-teal: #3EA99F;
  --gph-home-ink: #1A1728;
  --gph-home-muted: rgba(26, 23, 40, .68);
  --gph-home-line: rgba(26, 23, 40, .12);
  --gph-home-glass-line: rgba(255, 255, 255, .15);
  --gph-home-light-glass:
    linear-gradient(
      145deg,
      rgba(250, 246, 238, .72),
      rgba(242, 237, 227, .48)
    );
  --gph-home-dark-glass: rgba(250, 246, 238, .075);
  --gph-home-shadow:
    0 26px 70px rgba(45, 37, 65, .10),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  --gph-home-dark-shadow:
    0 28px 82px rgba(4, 3, 12, .30),
    inset 0 1px 0 rgba(255, 255, 255, .18);

  background: var(--gph-home-bone) !important;
  background-color: var(--gph-home-bone) !important;
  background-image: none !important;
  color: var(--gph-home-ink) !important;
  font-family: var(--gph-body, "Inter", "Segoe UI", system-ui, sans-serif) !important;
}

/* SAME TYPOGRAPHY AUTHORITY AS HOME */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(h1, h2, h3, h4) {
  font-family: var(--gph-display, "Sora", "Segoe UI", system-ui, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: -.052em !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-wrap: balance;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(p, li) {
  line-height: 1.68 !important;
}

/* SAME EXACT MAJOR DARK SURFACE AS HOME: NO PAGE-SPECIFIC TINTS */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main > .page-hero,
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main .dark-band {
  background: var(--gph-home-violet) !important;
  background-color: var(--gph-home-violet) !important;
  background-image: none !important;
  color: var(--gph-home-ivory) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

/* HOMEPAGE LIGHTING LANGUAGE.
   The old partial-circle outline is forbidden. Heroes use a diffuse, soft
   violet/blue light field with no visible geometric edge. */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main > .page-hero::before {
  content: "" !important;
  position: absolute !important;
  width: clamp(34rem, 58vw, 62rem) !important;
  height: clamp(34rem, 58vw, 62rem) !important;
  right: clamp(-24rem, -15vw, -9rem) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(
      circle at center,
      rgba(79, 117, 200, .16) 0%,
      rgba(115, 93, 165, .11) 34%,
      rgba(115, 93, 165, .045) 50%,
      rgba(115, 93, 165, 0) 72%
    ) !important;
  box-shadow: none !important;
  filter: blur(14px) !important;
  opacity: .9 !important;
  pointer-events: none !important;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main > .page-hero::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* SAME EXACT MAJOR LIGHT SURFACE AS HOME */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main > .section:not(.dark-band),
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main > .section:nth-of-type(odd):not(.dark-band),
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main .faq-section:not(.dark-band) {
  background: var(--gph-home-bone) !important;
  background-color: var(--gph-home-bone) !important;
  background-image: none !important;
}

/* HOME-CANON LIGHT GLASS: same border/radius/shadow language everywhere. */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(
  .sales-card,
  .hosting-grid > article,
  .dynamic-hosting-grid > article,
  .annual-only-card,
  .education-card,
  .addon-item,
  .faq details,
  .timeline article,
  .process-grid > div,
  .content-explainer,
  .service-detail-grid > article,
  .consult-grid > article
) {
  border: 1px solid var(--gph-home-line) !important;
  border-radius: 22px !important;
  background: var(--gph-home-light-glass) !important;
  background-color: rgba(250, 246, 238, .72) !important;
  box-shadow: var(--gph-home-shadow) !important;
  color: var(--gph-home-ink) !important;
  backdrop-filter: blur(24px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(115%) !important;
}

/* Featured cards stay same DNA; distinction is a restrained purple top signal. */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(
  .sales-card.featured,
  .hosting-grid > article.featured,
  .dynamic-hosting-grid > article.featured,
  .hosting-grid > article.host-pop,
  .dynamic-hosting-grid > article.host-pop
) {
  border-color: rgba(115, 93, 165, .26) !important;
  box-shadow:
    inset 0 3px 0 rgba(115, 93, 165, .68),
    var(--gph-home-shadow) !important;
}

/* HOME-CANON DARK FEATURE / OFFER INSTRUMENT */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main .service-offer-card {
  border: 1px solid var(--gph-home-glass-line) !important;
  border-radius: 28px !important;
  background: var(--gph-home-violet) !important;
  background-color: var(--gph-home-violet) !important;
  background-image: none !important;
  color: var(--gph-home-ivory) !important;
  box-shadow: var(--gph-home-dark-shadow) !important;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main .service-offer-card :is(h2, h3) {
  color: var(--gph-home-ivory) !important;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main .service-offer-card :is(p, li) {
  color: rgba(250, 246, 238, .78) !important;
}

/* LIQUID GLASS INSIDE DARK BANDS */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main .dark-band :is(
  .sales-card,
  .hosting-grid > article,
  .dynamic-hosting-grid > article,
  .annual-only-card,
  .education-card,
  .addon-item,
  .faq details,
  .timeline article,
  .process-grid > div,
  .content-explainer,
  .service-detail-grid > article,
  .consult-grid > article
) {
  border: 1px solid var(--gph-home-glass-line) !important;
  background: var(--gph-home-dark-glass) !important;
  background-color: rgba(250, 246, 238, .075) !important;
  background-image: none !important;
  color: var(--gph-home-ivory) !important;
  box-shadow: var(--gph-home-dark-shadow) !important;
  backdrop-filter: blur(22px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(125%) !important;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main .dark-band :is(h1, h2, h3, h4) {
  color: var(--gph-home-ivory) !important;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main .dark-band :is(p, li) {
  color: rgba(250, 246, 238, .78) !important;
}

/* SAME GOLD ACTION LANGUAGE AS HOME: FLAT GOLD, NOT FAMILY-SPECIFIC GRADIENTS */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(
  .btn.primary,
  .btn.light,
  .mini-add,
  .mini-quote
) {
  background: var(--gph-home-gold) !important;
  background-color: var(--gph-home-gold) !important;
  background-image: none !important;
  border-color: var(--gph-home-gold) !important;
  color: var(--gph-home-violet) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 10px 28px rgba(26, 23, 40, .10) !important;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(
  .btn.primary,
  .btn.light,
  .mini-add,
  .mini-quote
):is(:hover, :focus-visible) {
  background: var(--gph-home-gold-hi) !important;
  background-color: var(--gph-home-gold-hi) !important;
  background-image: none !important;
  border-color: var(--gph-home-gold-hi) !important;
  color: var(--gph-home-violet) !important;
}

/* Secondary actions are quiet glass, same everywhere. */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main .btn.secondary {
  border-color: rgba(26, 23, 40, .14) !important;
  background: rgba(250, 246, 238, .66) !important;
  background-image: none !important;
  color: var(--gph-home-violet) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(.page-hero, .dark-band) .btn.secondary {
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(250, 246, 238, .075) !important;
  color: var(--gph-home-ivory) !important;
}

/* Purple is secondary detail only. No giant purple fields. */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(
  .sales-kicker,
  .sales-grid > article > span:first-child,
  .hosting-grid > article > span:first-child,
  .dynamic-hosting-grid > article > span:first-child,
  .service-detail-grid > article > span,
  .consult-grid > article > span
) {
  color: var(--gph-home-purple) !important;
}

/* Price hierarchy uses authoritative deep violet on light glass, gold on dark glass. */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(.sales-price, .host-price, .host-rate) {
  color: var(--gph-home-violet) !important;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main .dark-band :is(.sales-price, .host-price, .host-rate) {
  color: var(--gph-home-gold) !important;
}

/* The V-M4C V1 final CTA was another dark object. Homepage authority says final CTA returns to Bone. */
body.gph-unified-shell.gph-vm4c-business
main > .section:last-child .shell.narrow.center {
  border: 1px solid var(--gph-home-line) !important;
  background: var(--gph-home-light-glass) !important;
  background-color: rgba(250, 246, 238, .72) !important;
  background-image: none !important;
  color: var(--gph-home-violet) !important;
  box-shadow: var(--gph-home-shadow) !important;
  backdrop-filter: blur(24px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(115%) !important;
}

body.gph-unified-shell.gph-vm4c-business
main > .section:last-child .shell.narrow.center :is(h2, h3, p) {
  color: var(--gph-home-violet) !important;
}

/* V1 page-specific tint classes intentionally have NO different color output now. */
body.gph-unified-shell.gph-vm4c-email-domain .page-hero,
body.gph-unified-shell.gph-vm4c-google-profile .page-hero,
body.gph-unified-shell.gph-vm4c-analytics .page-hero,
body.gph-unified-shell.gph-vm4c-integrations .page-hero {
  background: var(--gph-home-violet) !important;
  background-color: var(--gph-home-violet) !important;
  background-image: none !important;
}

/* No large blue/teal/purple decorative color fields. Signals may still use these colors in tiny UI. */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(.page-hero, .section, .dark-band, .service-offer-card) {
  --large-surface-blue: transparent;
  --large-surface-teal: transparent;
}

/* CONTRAST / FONT-BLEED LOCK.
   Light surfaces always get dark type. Dark surfaces always get Ivory type.
   This intentionally repeats color roles at the end of the material section
   so legacy page selectors cannot bleed through. */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(
  .sales-card,
  .hosting-grid > article,
  .dynamic-hosting-grid > article,
  .annual-only-card,
  .education-card,
  .addon-item,
  .faq details,
  .timeline article,
  .process-grid > div,
  .content-explainer,
  .service-detail-grid > article,
  .consult-grid > article
):not(.service-offer-card)
:is(h1, h2, h3, h4) {
  color: var(--gph-home-violet) !important;
  -webkit-text-fill-color: var(--gph-home-violet) !important;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(
  .sales-card,
  .hosting-grid > article,
  .dynamic-hosting-grid > article,
  .annual-only-card,
  .education-card,
  .addon-item,
  .faq details,
  .timeline article,
  .process-grid > div,
  .content-explainer,
  .service-detail-grid > article,
  .consult-grid > article
):not(.service-offer-card)
:is(p, li, summary) {
  color: var(--gph-home-muted) !important;
  -webkit-text-fill-color: var(--gph-home-muted) !important;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(.page-hero, .dark-band, .service-offer-card)
:is(h1, h2, h3, h4) {
  color: var(--gph-home-ivory) !important;
  -webkit-text-fill-color: var(--gph-home-ivory) !important;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main :is(.page-hero, .dark-band, .service-offer-card)
:is(p, li, summary) {
  color: rgba(250, 246, 238, .78) !important;
  -webkit-text-fill-color: rgba(250, 246, 238, .78) !important;
}

/* Cards inside a dark band are dark glass, therefore their type stays Ivory. */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main .dark-band
:is(
  .sales-card,
  .hosting-grid > article,
  .dynamic-hosting-grid > article,
  .annual-only-card,
  .education-card,
  .addon-item,
  .faq details,
  .timeline article,
  .process-grid > div,
  .content-explainer,
  .service-detail-grid > article,
  .consult-grid > article
)
:is(h1, h2, h3, h4) {
  color: var(--gph-home-ivory) !important;
  -webkit-text-fill-color: var(--gph-home-ivory) !important;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main .dark-band
:is(
  .sales-card,
  .hosting-grid > article,
  .dynamic-hosting-grid > article,
  .annual-only-card,
  .education-card,
  .addon-item,
  .faq details,
  .timeline article,
  .process-grid > div,
  .content-explainer,
  .service-detail-grid > article,
  .consult-grid > article
)
:is(p, li, summary) {
  color: rgba(250, 246, 238, .78) !important;
  -webkit-text-fill-color: rgba(250, 246, 238, .78) !important;
}

/* FINAL CONTRAST CLOSURE.
   Do not recolor every descendant merely because it lives in a light section.
   Dark offer instruments retain their own dark-surface typography. */
:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main > .section:not(.dark-band) .service-offer-card :is(h1, h2, h3, h4) {
  color: var(--gph-home-ivory) !important;
  -webkit-text-fill-color: var(--gph-home-ivory) !important;
}

:is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
main > .section:not(.dark-band) .service-offer-card :is(p, li, summary) {
  color: rgba(250, 246, 238, .78) !important;
  -webkit-text-fill-color: rgba(250, 246, 238, .78) !important;
}

/* Website Core's legacy .cta is a final CTA. Homepage authority says final
   CTAs return to Bone, with dark type and Gold action. */
body.gph-unified-shell.gph-vm4-service main > .cta {
  background: var(--gph-home-bone) !important;
  background-color: var(--gph-home-bone) !important;
  background-image: none !important;
  border-top: 1px solid var(--gph-home-line) !important;
  border-bottom: 0 !important;
  color: var(--gph-home-violet) !important;
}

body.gph-unified-shell.gph-vm4-service main > .cta :is(h1, h2, h3, h4) {
  color: var(--gph-home-violet) !important;
  -webkit-text-fill-color: var(--gph-home-violet) !important;
}

body.gph-unified-shell.gph-vm4-service main > .cta :is(p, li) {
  color: var(--gph-home-muted) !important;
  -webkit-text-fill-color: var(--gph-home-muted) !important;
}

body.gph-unified-shell.gph-vm4-service main > .cta .eyebrow {
  color: var(--gph-home-purple) !important;
  -webkit-text-fill-color: var(--gph-home-purple) !important;
}

/* The older Website Core card-footer selector is more specific than the
   generic canon button rule. Beat it deliberately so primary package/hosting
   actions are a REAL flat Gold background-color, not a transparent color
   underneath a gradient image. */
body.gph-unified-shell.gph-vm4-service
main :is(.sales-grid, .hosting-grid, .dynamic-hosting-grid)
> article > :is(.btn.primary, button.btn.primary) {
  background: var(--gph-home-gold) !important;
  background-color: var(--gph-home-gold) !important;
  background-image: none !important;
  border-color: var(--gph-home-gold) !important;
  color: var(--gph-home-violet) !important;
  -webkit-text-fill-color: var(--gph-home-violet) !important;
}

body.gph-unified-shell.gph-vm4-service
main :is(.sales-grid, .hosting-grid, .dynamic-hosting-grid)
> article > :is(.btn.primary, button.btn.primary):is(:hover, :focus-visible) {
  background: var(--gph-home-gold-hi) !important;
  background-color: var(--gph-home-gold-hi) !important;
  background-image: none !important;
  border-color: var(--gph-home-gold-hi) !important;
}

/* ADD-ONS SUBTITLE CONTRAST CLOSURE.
   Legacy .category-subtitle used muted lavender (#BCB7C9) on Bone at 1.67:1.
   Use homepage dark-muted role instead. */
body.gph-unified-shell.gph-vm4-service
main .category-subtitle {
  color: var(--gph-home-muted) !important;
  -webkit-text-fill-color: var(--gph-home-muted) !important;
}

/* Consistent compact mobile geometry */
@media (max-width: 760px) {
  :is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
  main > .page-hero {
    padding-top: 64px !important;
    padding-bottom: 58px !important;
  }

  :is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
  main > .section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  :is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
  main :is(
    .sales-card,
    .hosting-grid > article,
    .dynamic-hosting-grid > article,
    .annual-only-card,
    .education-card,
    .addon-item,
    .faq details,
    .timeline article,
    .process-grid > div,
    .content-explainer,
    .service-detail-grid > article,
    .consult-grid > article,
    .service-offer-card
  ) {
    border-radius: 22px !important;
  }
}

@media (max-width: 390px) {
  :is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
  main > .page-hero {
    padding-top: 54px !important;
    padding-bottom: 50px !important;
  }

  :is(body.gph-unified-shell.gph-vm4-service, body.gph-unified-shell.gph-vm4c-business)
  main > .section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* GPH_VM4C_V8_HOMEPAGE_CANON_END */