/* GPH V-M4B WEBSITE_CORE - V4 CONSOLIDATED CARD/LAYOUT SYSTEM
   Replaces layered V1/V2/V3 service CSS. Presentation-only. */

body.gph-unified-shell.gph-vm4-service main {
  --vm4-ink: var(--gph-ink, #1A1728);
  --vm4-ink-soft: var(--gph-ink-soft, #262039);
  --vm4-bone: var(--gph-bone, #F2EDE3);
  --vm4-ivory: var(--gph-ivory, #FAF6EE);
  --vm4-bone-low: var(--gph-bone-low, #E6DED1);
  --vm4-gold: var(--gph-gold, #D9BA62);
  --vm4-gold-hi: var(--gph-gold-hi, #E3C978);
  --vm4-purple: var(--gph-purple, #735DA5);
  --vm4-blue: var(--gph-blue, #4F75C8);
  --vm4-teal: var(--gph-teal, #3EA99F);
  --vm4-line: rgba(26, 23, 40, .12);
  --vm4-line-dark: rgba(250, 246, 238, .15);
  --vm4-copy: rgba(26, 23, 40, .82);
  --vm4-muted: rgba(26, 23, 40, .68);
  --vm4-dark-copy: rgba(250, 246, 238, .80);
  --vm4-card-pad: clamp(26px, 2.25vw, 32px);
  --vm4-card-radius: 22px;
  --vm4-card-shadow: 0 22px 54px rgba(45, 37, 65, .085), inset 0 1px 0 rgba(255, 255, 255, .84);
  --vm4-card-light: linear-gradient(150deg, rgba(250, 246, 238, .99), rgba(242, 237, 227, .86));
  --vm4-card-dark: linear-gradient(150deg, rgba(250, 246, 238, .11), rgba(250, 246, 238, .045));
  --vm4-price-major: clamp(2.3rem, 3vw, 2.72rem);
  --vm4-price-compact: 1.05rem;
  --vm4-action-height: 50px;
  --vm4-action-radius: 12px;
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--vm4-bone);
  color: var(--vm4-ink);
  font-family: var(--gph-body, "Inter", "Segoe UI", system-ui, sans-serif);
}

body.gph-unified-shell.gph-vm4-service main *,
body.gph-unified-shell.gph-vm4-service main *::before,
body.gph-unified-shell.gph-vm4-service main *::after { box-sizing: border-box; }

body.gph-unified-shell.gph-vm4-service main h1,
body.gph-unified-shell.gph-vm4-service main h2,
body.gph-unified-shell.gph-vm4-service main h3 {
  font-family: var(--gph-display, "Sora", "Segoe UI", system-ui, sans-serif);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

body.gph-unified-shell.gph-vm4-service main p,
body.gph-unified-shell.gph-vm4-service main li { text-wrap: pretty; }

body.gph-unified-shell.gph-vm4-service main > section { scroll-margin-top: 88px; }

/* --- Hero / page rhythm ------------------------------------------------ */
body.gph-unified-shell.gph-vm4-service main > .page-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(82px, 8.5vw, 128px) 0 clamp(72px, 7.5vw, 108px);
  color: var(--vm4-ivory);
  background:
    radial-gradient(circle at 82% 14%, rgba(115, 93, 165, .48), transparent 31%),
    radial-gradient(circle at 12% 88%, rgba(79, 117, 200, .15), transparent 30%),
    linear-gradient(145deg, #171426, var(--vm4-ink) 58%, #211B38);
  border-bottom: 1px solid rgba(217, 186, 98, .18);
}

body.gph-unified-shell.gph-vm4-service main > .page-hero::after {
  content: "";
  position: absolute;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  right: -13vw;
  top: -38%;
  z-index: -1;
  border: 1px solid rgba(217, 186, 98, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(217, 186, 98, .025), 0 0 0 144px rgba(79, 117, 200, .02);
  pointer-events: none;
}

body.gph-unified-shell.gph-vm4-service main > .page-hero .shell { position: relative; z-index: 1; }
body.gph-unified-shell.gph-vm4-service main > .page-hero h1 {
  max-width: 940px;
  margin: 0 0 22px;
  color: var(--vm4-ivory);
  font-size: clamp(2.75rem, 5.7vw, 5.25rem);
  line-height: .99;
  letter-spacing: -.052em;
}
body.gph-unified-shell.gph-vm4-service main > .page-hero p:last-of-type {
  max-width: 760px;
  margin-bottom: 0;
  color: rgba(250, 246, 238, .76);
  font-size: clamp(1rem, 1.45vw, 1.16rem);
  line-height: 1.7;
}

body.gph-unified-shell.gph-vm4-service main > .section {
  position: relative;
  overflow: visible;
  padding: clamp(70px, 7.4vw, 106px) 0;
  background: var(--vm4-bone);
}
body.gph-unified-shell.gph-vm4-service main > .section:nth-of-type(odd):not(.dark-band) {
  background: radial-gradient(circle at 94% 8%, rgba(115, 93, 165, .055), transparent 24%), var(--vm4-ivory);
}
body.gph-unified-shell.gph-vm4-service main .section-title {
  max-width: 900px;
  margin: 0 auto 42px;
  color: var(--vm4-ink);
  font-size: clamp(2rem, 3.8vw, 3.45rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}
body.gph-unified-shell.gph-vm4-service main .section-intro {
  max-width: 760px;
  margin: -24px auto 34px;
  color: var(--vm4-muted) !important;
  line-height: 1.7;
}
body.gph-unified-shell.gph-vm4-service main .center { text-align: center; }
body.gph-unified-shell.gph-vm4-service main .mt { margin-top: 30px; }

/* --- Buttons ----------------------------------------------------------- */
body.gph-unified-shell.gph-vm4-service main .btn,
body.gph-unified-shell.gph-vm4-service main .mini-add,
body.gph-unified-shell.gph-vm4-service main .mini-quote {
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
body.gph-unified-shell.gph-vm4-service main .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
body.gph-unified-shell.gph-vm4-service main .button-row.center { justify-content: center; }
body.gph-unified-shell.gph-vm4-service main .btn.primary,
body.gph-unified-shell.gph-vm4-service main .btn.light {
  border-color: transparent;
  background: linear-gradient(180deg, var(--vm4-gold-hi), var(--vm4-gold));
  color: var(--vm4-ink);
}
body.gph-unified-shell.gph-vm4-service main .btn.secondary {
  border-color: rgba(26, 23, 40, .16);
  background: rgba(250, 246, 238, .74);
  color: var(--vm4-ink);
}
body.gph-unified-shell.gph-vm4-service main .page-hero .btn.secondary,
body.gph-unified-shell.gph-vm4-service main .dark-band .btn.secondary {
  border-color: rgba(250, 246, 238, .19);
  background: rgba(250, 246, 238, .08);
  color: var(--vm4-ivory);
}
body.gph-unified-shell.gph-vm4-service main .btn:hover,
body.gph-unified-shell.gph-vm4-service main .mini-add:hover,
body.gph-unified-shell.gph-vm4-service main .mini-quote:hover { transform: translateY(-2px); }
body.gph-unified-shell.gph-vm4-service main :is(.btn,.mini-add,.mini-quote,.hosting-billing-toggle button):focus-visible {
  outline: 3px solid var(--vm4-gold);
  outline-offset: 3px;
}

/* --- Canonical grid / card reset ------------------------------------- */
body.gph-unified-shell.gph-vm4-service main :is(.sales-grid,.hosting-grid,.dynamic-hosting-grid,.addon-market-grid,.process-grid,.domain-choice-summary) > * { min-width: 0; }

body.gph-unified-shell.gph-vm4-service main :is(.sales-card,.hosting-grid > article,.dynamic-hosting-grid > article,.annual-only-card,.education-card,.service-offer-card,.addon-item,.faq details,.timeline article,.process-grid > div,.content-explainer) {
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
  border: 1px solid var(--vm4-line);
  border-radius: var(--vm4-card-radius);
  background: var(--vm4-card-light);
  box-shadow: var(--vm4-card-shadow);
}
body.gph-unified-shell.gph-vm4-service main :is(.sales-card,.host-dynamic)::before { content: none !important; display: none !important; }

/* Four columns are only allowed when each commercial card can breathe. */
body.gph-unified-shell.gph-vm4-service main :is(.sales-grid,.hosting-grid,.dynamic-hosting-grid) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
  align-items: stretch;
}

/* Package / hosting full cards share one DNA. */
body.gph-unified-shell.gph-vm4-service main :is(.sales-grid,.hosting-grid,.dynamic-hosting-grid) > article {
  display: flex !important;
  align-self: stretch;
  flex-direction: column;
  padding: var(--vm4-card-pad);
  color: var(--vm4-ink);
}
body.gph-unified-shell.gph-vm4-service main :is(.sales-grid,.hosting-grid,.dynamic-hosting-grid) > article.featured,
body.gph-unified-shell.gph-vm4-service main :is(.sales-grid,.hosting-grid,.dynamic-hosting-grid) > article.host-pop {
  border-color: rgba(115, 93, 165, .34);
  box-shadow: inset 0 3px 0 rgba(115, 93, 165, .72), var(--vm4-card-shadow);
}

/* Critical reset: host-pop is a card modifier, never a typography class. */
body.gph-unified-shell.gph-vm4-service main article.host-pop {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  line-height: inherit !important;
  text-transform: none !important;
}

body.gph-unified-shell.gph-vm4-service main :is(.sales-kicker,.sales-grid > article > span:first-child,.hosting-grid > article > span:first-child,.dynamic-hosting-grid > article > span:first-child) {
  min-height: 1.25em;
  color: var(--vm4-purple) !important;
  font-size: .68rem !important;
  font-weight: 850 !important;
  letter-spacing: .145em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
}
body.gph-unified-shell.gph-vm4-service main :is(.sales-grid,.hosting-grid,.dynamic-hosting-grid) > article h3 {
  margin: 13px 0 0 !important;
  color: var(--vm4-ink) !important;
  font-size: clamp(1.32rem, 1.75vw, 1.62rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em;
}
body.gph-unified-shell.gph-vm4-service main .sales-grid:not(.dynamic-hosting-grid) > article h3 { min-height: 2.25em !important; }
body.gph-unified-shell.gph-vm4-service main :is(.hosting-grid,.dynamic-hosting-grid) > article h3 { min-height: 3.3em !important; }

body.gph-unified-shell.gph-vm4-service main :is(.sales-price,.host-price,.host-rate) {
  display: flex !important;
  min-height: 0 !important;
  align-items: center;
  margin: 20px 0 17px !important;
  color: var(--vm4-purple) !important;
  font-family: var(--gph-display, "Sora", sans-serif) !important;
  font-size: var(--vm4-price-major) !important;
  font-weight: 850 !important;
  letter-spacing: -.045em !important;
  line-height: 1 !important;
  text-transform: none !important;
}
body.gph-unified-shell.gph-vm4-service main :is(.host-price,.host-rate) b,
body.gph-unified-shell.gph-vm4-service main .sales-price strong {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-transform: none !important;
}
body.gph-unified-shell.gph-vm4-service main .sales-sub {
  min-height: 0 !important;
  margin: -4px 0 12px !important;
  color: #65548A !important;
  font-size: .79rem !important;
  font-weight: 750;
  line-height: 1.5;
  opacity: 1 !important;
}
body.gph-unified-shell.gph-vm4-service main :is(.sales-grid,.hosting-grid,.dynamic-hosting-grid) > article > p:not(.sales-sub) {
  min-height: 0 !important;
  margin: 0 0 15px !important;
  color: var(--vm4-copy) !important;
  font-size: .93rem;
  line-height: 1.62 !important;
  opacity: 1 !important;
}
body.gph-unified-shell.gph-vm4-service main :is(.sales-grid,.hosting-grid,.dynamic-hosting-grid) > article > ul {
  display: grid;
  gap: 7px;
  min-height: 0 !important;
  margin: 1px 0 26px !important;
  padding-left: 18px;
  color: var(--vm4-copy) !important;
  font-size: .89rem;
  line-height: 1.45;
}
body.gph-unified-shell.gph-vm4-service main :is(.sales-grid,.hosting-grid,.dynamic-hosting-grid) > article > ul li::marker { color: var(--vm4-purple); }

/* Full-card actions are a card footer, not a floating legacy button. */
body.gph-unified-shell.gph-vm4-service main :is(.sales-grid,.hosting-grid,.dynamic-hosting-grid) > article > :is(.btn,button.btn) {
  display: inline-flex;
  width: 100%;
  min-height: var(--vm4-action-height);
  align-items: center;
  justify-content: center;
  margin-top: auto !important;
  padding: 0 16px !important;
  border: 1px solid rgba(217, 186, 98, .98) !important;
  border-radius: var(--vm4-action-radius) !important;
  background: linear-gradient(180deg, var(--vm4-gold-hi), var(--vm4-gold)) !important;
  color: var(--vm4-ink) !important;
  box-shadow: 0 10px 24px rgba(85, 68, 28, .13), inset 0 1px 0 rgba(255, 255, 255, .45);
  font-size: .88rem;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
}

/* Dark hosting family keeps the same geometry, with dark-context colors. */
body.gph-unified-shell.gph-vm4-service main .dark-band {
  color: var(--vm4-ivory);
  background: radial-gradient(circle at 78% 18%, rgba(115, 93, 165, .38), transparent 31%), linear-gradient(140deg, #171426, var(--vm4-ink) 62%, #211B38);
  border-block: 1px solid rgba(217, 186, 98, .14);
}
body.gph-unified-shell.gph-vm4-service main .dark-band :is(.section-title,h2,h3) { color: var(--vm4-ivory) !important; }
body.gph-unified-shell.gph-vm4-service main .dark-band :is(.section-intro,.billing-explainer,p,li) { color: var(--vm4-dark-copy) !important; }
body.gph-unified-shell.gph-vm4-service main .dark-band :is(.hosting-grid,.dynamic-hosting-grid) > article {
  border-color: var(--vm4-line-dark);
  background: var(--vm4-card-dark);
  box-shadow: 0 24px 58px rgba(4, 3, 12, .25), inset 0 1px 0 rgba(255,255,255,.12);
  color: var(--vm4-ivory);
}
body.gph-unified-shell.gph-vm4-service main .dark-band :is(.hosting-grid,.dynamic-hosting-grid) > article > span:first-child,
body.gph-unified-shell.gph-vm4-service main .dark-band :is(.host-price,.host-rate),
body.gph-unified-shell.gph-vm4-service main .dark-band :is(.hosting-grid,.dynamic-hosting-grid) > article > ul li::marker { color: var(--vm4-gold) !important; }
body.gph-unified-shell.gph-vm4-service main .dark-band :is(.hosting-grid,.dynamic-hosting-grid) > article h3 { color: var(--vm4-ivory) !important; }
body.gph-unified-shell.gph-vm4-service main .dark-band :is(.hosting-grid,.dynamic-hosting-grid) > article > :is(p,ul) { color: var(--vm4-dark-copy) !important; }

/* Billing toggle */
body.gph-unified-shell.gph-vm4-service main .hosting-billing-toggle {
  display: inline-flex;
  gap: 5px;
  max-width: 100%;
  padding: 5px;
  border: 1px solid rgba(26, 23, 40, .14);
  border-radius: 999px;
  background: rgba(250, 246, 238, .72);
}
body.gph-unified-shell.gph-vm4-service main .hosting-billing-toggle.centered { display: flex; width: max-content; margin: 18px auto 30px; }
body.gph-unified-shell.gph-vm4-service main .hosting-billing-toggle button {
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  background: transparent;
  color: var(--vm4-ink);
  font: inherit;
  font-size: .88rem;
  font-weight: 850;
  cursor: pointer;
}
body.gph-unified-shell.gph-vm4-service main .hosting-billing-toggle button.active { background: var(--vm4-gold); color: var(--vm4-ink); box-shadow: 0 8px 20px rgba(85,68,28,.16); }
body.gph-unified-shell.gph-vm4-service main .dark-band .hosting-billing-toggle { border-color: rgba(250,246,238,.16); background: rgba(250,246,238,.07); }
body.gph-unified-shell.gph-vm4-service main .dark-band .hosting-billing-toggle button { color: var(--vm4-ivory); }
body.gph-unified-shell.gph-vm4-service main .dark-band .hosting-billing-toggle button.active { color: var(--vm4-ink); }
body.gph-unified-shell.gph-vm4-service main .billing-explainer { margin: 12px auto 28px; font-size: .92rem; line-height: 1.55; opacity: 1 !important; }

/* Domain / SSL summary in dark band */
body.gph-unified-shell.gph-vm4-service main .domain-choice-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 24px; }
body.gph-unified-shell.gph-vm4-service main .domain-choice-summary > div {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--vm4-line-dark);
  border-radius: 15px;
  background: rgba(250,246,238,.07);
}
body.gph-unified-shell.gph-vm4-service main .domain-choice-summary b { color: var(--vm4-ivory); overflow-wrap:anywhere; }
body.gph-unified-shell.gph-vm4-service main .domain-choice-summary span { color: var(--vm4-gold); font-weight: 800; text-align:right; overflow-wrap:anywhere; }

/* Annual-only / managed subdomain cards */
body.gph-unified-shell.gph-vm4-service main .annual-only-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(180px,auto);
  gap: 28px;
  align-items: center;
  margin-top: 18px;
  padding: var(--vm4-card-pad);
}
body.gph-unified-shell.gph-vm4-service main .annual-only-card > div { min-width:0; }
body.gph-unified-shell.gph-vm4-service main .annual-only-card > div:first-child > span {
  color: var(--vm4-purple);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
body.gph-unified-shell.gph-vm4-service main .annual-only-card h3 { margin: 8px 0 8px; color: var(--vm4-ink); font-size: clamp(1.3rem,2vw,1.7rem); }
body.gph-unified-shell.gph-vm4-service main .annual-only-card :is(p,small) { color: var(--vm4-copy) !important; line-height:1.62; opacity:1 !important; }
body.gph-unified-shell.gph-vm4-service main .annual-only-card > div:last-child { display:grid; justify-items:end; gap:12px; }
body.gph-unified-shell.gph-vm4-service main .annual-only-card strong {
  color: var(--vm4-purple) !important;
  font-family: var(--gph-display,"Sora",sans-serif);
  font-size: clamp(1.8rem,2.4vw,2.2rem);
  font-weight:850;
  line-height:1;
  white-space:nowrap;
}
body.gph-unified-shell.gph-vm4-service main .annual-only-card .btn { min-height:46px; border-radius:var(--vm4-action-radius); }
body.gph-unified-shell.gph-vm4-service main .policy-callout {
  display:grid;
  grid-template-columns:minmax(120px,180px) 1fr;
  gap:20px;
  margin-top:18px;
  padding:20px 22px;
  border:1px solid var(--vm4-line);
  border-radius:16px;
  background:rgba(250,246,238,.72);
}
body.gph-unified-shell.gph-vm4-service main .policy-callout b { color:var(--vm4-purple); }
body.gph-unified-shell.gph-vm4-service main .policy-callout span { color:var(--vm4-copy) !important; }

/* Package inline notes */
body.gph-unified-shell.gph-vm4-service main .package-inline-notes {
  margin:28px auto 0;
  max-width:980px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 22px;
  color:var(--vm4-muted) !important;
  font-size:.91rem;
  line-height:1.55;
  text-align:center;
}
body.gph-unified-shell.gph-vm4-service main .package-inline-notes p { margin:0; }
body.gph-unified-shell.gph-vm4-service main .package-inline-notes strong { color:var(--vm4-ink); }
body.gph-unified-shell.gph-vm4-service main .package-inline-notes a { color:var(--vm4-purple); font-weight:800; }

/* Split + editing-service offer */
body.gph-unified-shell.gph-vm4-service main .split {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.82fr);
  gap:clamp(34px,5.5vw,72px);
  align-items:center;
}
body.gph-unified-shell.gph-vm4-service main .split > * { min-width:0; }
body.gph-unified-shell.gph-vm4-service main .split h2 { color:var(--vm4-ink); font-size:clamp(2rem,3.7vw,3.35rem); line-height:1.05; letter-spacing:-.04em; }
body.gph-unified-shell.gph-vm4-service main .check-list { display:grid; gap:4px; padding:0; list-style:none; }
body.gph-unified-shell.gph-vm4-service main .check-list li { position:relative; padding:8px 0 8px 29px; color:var(--vm4-copy); }
body.gph-unified-shell.gph-vm4-service main .check-list li::before { content:""; position:absolute; left:2px; top:14px; width:9px; height:5px; border-left:2px solid var(--vm4-purple); border-bottom:2px solid var(--vm4-purple); transform:rotate(-45deg); }
body.gph-unified-shell.gph-vm4-service main .service-offer-card { padding:var(--vm4-card-pad); }
body.gph-unified-shell.gph-vm4-service main .service-offer-card > span { color:var(--vm4-purple); font-size:.68rem; font-weight:850; letter-spacing:.13em; }
body.gph-unified-shell.gph-vm4-service main .service-offer-card h2 { margin:10px 0 14px; color:var(--vm4-ink); font-size:clamp(1.7rem,2.8vw,2.45rem); line-height:1.08; }
body.gph-unified-shell.gph-vm4-service main .service-offer-card p { color:var(--vm4-copy) !important; line-height:1.65; }
body.gph-unified-shell.gph-vm4-service main .service-offer-card .btn { width:100%; min-height:var(--vm4-action-height); border-radius:var(--vm4-action-radius); }

/* Process cards */
body.gph-unified-shell.gph-vm4-service main .process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
body.gph-unified-shell.gph-vm4-service main .dark-band .process-grid > div {
  padding:var(--vm4-card-pad);
  border-color:var(--vm4-line-dark);
  background:var(--vm4-card-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11);
}
body.gph-unified-shell.gph-vm4-service main .process-grid b { color:var(--vm4-gold); font-size:.72rem; letter-spacing:.15em; }
body.gph-unified-shell.gph-vm4-service main .process-grid h3 { margin:16px 0 8px; color:var(--vm4-ivory) !important; font-size:1.18rem; }
body.gph-unified-shell.gph-vm4-service main .process-grid p { margin:0; color:var(--vm4-dark-copy) !important; line-height:1.62; }

/* FAQ */
body.gph-unified-shell.gph-vm4-service main .faq { display:grid; gap:12px; margin-top:28px; }
body.gph-unified-shell.gph-vm4-service main .faq details { padding:0; overflow:clip !important; }
body.gph-unified-shell.gph-vm4-service main .faq summary { padding:20px 22px; color:var(--vm4-ink); font-weight:850; cursor:pointer; }
body.gph-unified-shell.gph-vm4-service main .faq summary::marker { color:var(--vm4-purple); }
body.gph-unified-shell.gph-vm4-service main .faq details[open] summary { border-bottom:1px solid var(--vm4-line); }
body.gph-unified-shell.gph-vm4-service main .faq details > p { margin:0; padding:18px 22px 22px; color:var(--vm4-copy) !important; line-height:1.65; }

/* Timeline */
body.gph-unified-shell.gph-vm4-service main .timeline { position:relative; display:grid; gap:16px; max-width:980px; margin:0 auto; }
body.gph-unified-shell.gph-vm4-service main .timeline::before { content:""; position:absolute; left:34px; top:32px; bottom:32px; width:1px; background:linear-gradient(var(--vm4-purple),rgba(115,93,165,.08)); }
body.gph-unified-shell.gph-vm4-service main .timeline article { position:relative; display:grid; grid-template-columns:68px minmax(0,1fr); gap:22px; align-items:start; padding:26px 28px; }
body.gph-unified-shell.gph-vm4-service main .timeline article > span { position:relative; z-index:1; display:grid; width:44px; height:44px; place-items:center; border-radius:50%; background:var(--vm4-purple); color:var(--vm4-ivory); font-weight:850; }
body.gph-unified-shell.gph-vm4-service main .timeline h2 { margin:2px 0 8px; color:var(--vm4-ink); font-size:clamp(1.25rem,2vw,1.6rem); }
body.gph-unified-shell.gph-vm4-service main .timeline p { margin:0; color:var(--vm4-copy) !important; line-height:1.65; }

/* Add-on marketplace */
body.gph-unified-shell.gph-vm4-service main .education-card { padding:var(--vm4-card-pad); }
body.gph-unified-shell.gph-vm4-service main .education-card > span { color:var(--vm4-purple); font-size:.68rem; font-weight:850; letter-spacing:.13em; }
body.gph-unified-shell.gph-vm4-service main .education-card h3 { margin:9px 0 10px; color:var(--vm4-ink); font-size:clamp(1.4rem,2.3vw,1.9rem); }
body.gph-unified-shell.gph-vm4-service main .education-card p { color:var(--vm4-copy) !important; line-height:1.65; }
body.gph-unified-shell.gph-vm4-service main .addon-category { padding:clamp(38px,4.5vw,62px) 0; border-top:1px solid var(--vm4-line); }
body.gph-unified-shell.gph-vm4-service main .addon-category:first-of-type { border-top:0; }
body.gph-unified-shell.gph-vm4-service main .section-head.mini { margin-bottom:22px; }
body.gph-unified-shell.gph-vm4-service main .section-head.mini h2 { margin:0; color:var(--vm4-ink); font-size:clamp(1.6rem,2.8vw,2.3rem); }
body.gph-unified-shell.gph-vm4-service main .addon-market-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
body.gph-unified-shell.gph-vm4-service main .addon-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) 126px;
  gap:20px;
  align-items:center;
  min-width:0;
  min-height:106px;
  padding:20px 22px;
}
body.gph-unified-shell.gph-vm4-service main .addon-item > * { min-width:0; }
body.gph-unified-shell.gph-vm4-service main .addon-item h3 { margin:0 0 6px; color:var(--vm4-ink); font-size:1.02rem; line-height:1.28; }
body.gph-unified-shell.gph-vm4-service main .addon-item p { margin:0; color:var(--vm4-copy) !important; font-size:.91rem; line-height:1.52; opacity:1 !important; }
body.gph-unified-shell.gph-vm4-service main .addon-buy { display:grid; justify-items:end; gap:8px; min-width:0; }
body.gph-unified-shell.gph-vm4-service main .addon-buy strong {
  color:var(--vm4-purple) !important;
  font-family:var(--gph-display,"Sora",sans-serif);
  font-size:var(--vm4-price-compact);
  font-weight:850;
  line-height:1.1;
  white-space:normal;
  text-align:right;
}
body.gph-unified-shell.gph-vm4-service main .addon-item :is(.mini-add,.mini-quote) {
  display:inline-flex;
  min-width:86px;
  min-height:40px;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border:1px solid rgba(217,186,98,.98);
  border-radius:10px;
  background:linear-gradient(180deg,var(--vm4-gold-hi),var(--vm4-gold));
  color:var(--vm4-ink);
  font:inherit;
  font-size:.79rem;
  font-weight:850;
  cursor:pointer;
}

/* Generic explainer */
body.gph-unified-shell.gph-vm4-service main .content-explainer { padding:clamp(24px,3vw,34px); }
body.gph-unified-shell.gph-vm4-service main .content-explainer p { color:var(--vm4-copy) !important; line-height:1.68; }
body.gph-unified-shell.gph-vm4-service main .content-explainer p:first-child { margin-top:0; }
body.gph-unified-shell.gph-vm4-service main .content-explainer p:last-child { margin-bottom:0; }

/* CTA */
body.gph-unified-shell.gph-vm4-service main > .cta {
  position:relative;
  overflow:clip;
  padding:clamp(68px,7vw,96px) 0;
  color:var(--vm4-ivory);
  background:radial-gradient(circle at 86% 18%,rgba(115,93,165,.45),transparent 30%),linear-gradient(135deg,#171426,var(--vm4-ink));
}
body.gph-unified-shell.gph-vm4-service main > .cta h2 { color:var(--vm4-ivory); font-size:clamp(2rem,3.7vw,3.4rem); line-height:1.05; letter-spacing:-.04em; }
body.gph-unified-shell.gph-vm4-service main > .cta p { color:var(--vm4-dark-copy); }

/* --- Responsive layout safety --------------------------------------- */
@media (max-width: 1180px) {
  body.gph-unified-shell.gph-vm4-service main :is(.sales-grid,.hosting-grid,.dynamic-hosting-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.gph-unified-shell.gph-vm4-service main .sales-grid:not(.dynamic-hosting-grid) > article h3,
  body.gph-unified-shell.gph-vm4-service main :is(.hosting-grid,.dynamic-hosting-grid) > article h3 { min-height:2.25em !important; }
}

@media (max-width: 900px) {
  body.gph-unified-shell.gph-vm4-service main .split { grid-template-columns:1fr; gap:30px; }
  body.gph-unified-shell.gph-vm4-service main .process-grid { grid-template-columns:1fr; }
  body.gph-unified-shell.gph-vm4-service main .process-grid > div { min-height:0; }
  body.gph-unified-shell.gph-vm4-service main .package-inline-notes { display:grid; justify-content:start; text-align:left; }
}

@media (max-width: 760px) {
  body.gph-unified-shell.gph-vm4-service main { --vm4-card-pad:24px; --vm4-price-major:2.3rem; }
  body.gph-unified-shell.gph-vm4-service main > .page-hero { padding:72px 0 68px; }
  body.gph-unified-shell.gph-vm4-service main > .page-hero::after { width:430px; right:-230px; top:-130px; }
  body.gph-unified-shell.gph-vm4-service main > .page-hero h1 { font-size:clamp(2.3rem,11vw,3.85rem); }
  body.gph-unified-shell.gph-vm4-service main > .section { padding:62px 0; }
  body.gph-unified-shell.gph-vm4-service main :is(.sales-grid,.hosting-grid,.dynamic-hosting-grid,.addon-market-grid,.domain-choice-summary) { grid-template-columns:1fr; }
  body.gph-unified-shell.gph-vm4-service main :is(.sales-grid,.hosting-grid,.dynamic-hosting-grid) > article h3 { min-height:0 !important; }
  body.gph-unified-shell.gph-vm4-service main .annual-only-card { grid-template-columns:1fr; gap:20px; }
  body.gph-unified-shell.gph-vm4-service main .annual-only-card > div:last-child { justify-items:start; }
  body.gph-unified-shell.gph-vm4-service main .policy-callout { grid-template-columns:1fr; gap:8px; }
  body.gph-unified-shell.gph-vm4-service main .hosting-billing-toggle { width:100%; }
  body.gph-unified-shell.gph-vm4-service main .hosting-billing-toggle.centered { width:min(100%,360px); }
  body.gph-unified-shell.gph-vm4-service main .hosting-billing-toggle button { flex:1; padding-inline:10px; }
  body.gph-unified-shell.gph-vm4-service main .domain-choice-summary > div { grid-template-columns:1fr; gap:5px; }
  body.gph-unified-shell.gph-vm4-service main .domain-choice-summary span { text-align:left; }
  body.gph-unified-shell.gph-vm4-service main .addon-item { grid-template-columns:1fr; min-height:0; }
  body.gph-unified-shell.gph-vm4-service main .addon-buy { grid-template-columns:1fr auto; align-items:center; justify-items:start; }
  body.gph-unified-shell.gph-vm4-service main .addon-buy strong { text-align:left; }
  body.gph-unified-shell.gph-vm4-service main .timeline::before { left:28px; }
  body.gph-unified-shell.gph-vm4-service main .timeline article { grid-template-columns:52px minmax(0,1fr); gap:14px; padding:22px 18px; }
  body.gph-unified-shell.gph-vm4-service main .timeline article > span { width:38px; height:38px; }
}

@media (max-width: 430px) {
  body.gph-unified-shell.gph-vm4-service main { --vm4-card-pad:20px; }
  body.gph-unified-shell.gph-vm4-service main > .page-hero h1 { font-size:2.25rem; }
  body.gph-unified-shell.gph-vm4-service main .section-title { font-size:2rem; margin-bottom:30px; }
  body.gph-unified-shell.gph-vm4-service main .addon-item { padding:18px; }
  body.gph-unified-shell.gph-vm4-service main .addon-buy { grid-template-columns:1fr; }
  body.gph-unified-shell.gph-vm4-service main .button-row > .btn { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  body.gph-unified-shell.gph-vm4-service main :is(.btn,.mini-add,.mini-quote) { transition:none; }
}


/* =====================================================================
   V-M4B V5 - MOBILE ADD-ON ACCORDION
   Category-level accordion only below 760px. Desktop remains expanded.
   ===================================================================== */

body.gph-unified-shell.gph-vm4-service main .addon-accordion-toggle {
  display: none;
}

@media (max-width: 760px) {
  body.gph-unified-shell.gph-vm4-service main .addon-category.is-accordion-ready {
    margin: 0 0 12px;
    padding: 0;
    border: 1px solid rgba(26, 23, 40, .12);
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(250,246,238,.98), rgba(242,237,227,.88));
    box-shadow: 0 14px 34px rgba(45,37,65,.07), inset 0 1px 0 rgba(255,255,255,.78);
  }

  body.gph-unified-shell.gph-vm4-service main .addon-category.is-accordion-ready + .addon-category.is-accordion-ready {
    border-top: 1px solid rgba(26, 23, 40, .12);
  }

  body.gph-unified-shell.gph-vm4-service main .addon-category.is-accordion-ready.is-open {
    border-color: rgba(115,93,165,.28);
    box-shadow: 0 18px 42px rgba(45,37,65,.10), inset 0 3px 0 rgba(115,93,165,.60);
  }

  body.gph-unified-shell.gph-vm4-service main .addon-category.is-accordion-ready .section-head.mini {
    margin: 0;
  }

  body.gph-unified-shell.gph-vm4-service main .addon-category.is-accordion-ready .addon-accordion-title {
    display: none;
  }

  body.gph-unified-shell.gph-vm4-service main .addon-accordion-toggle {
    display: flex;
    width: 100%;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: var(--vm4-ink);
    font-family: var(--gph-display, "Sora", "Segoe UI", system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
  }

  body.gph-unified-shell.gph-vm4-service main .addon-accordion-toggle::after {
    content: "+";
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 50%;
    background: rgba(115,93,165,.10);
    color: var(--vm4-purple);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
  }

  body.gph-unified-shell.gph-vm4-service main .addon-accordion-toggle[aria-expanded="true"]::after {
    content: "−";
    background: var(--vm4-purple);
    color: var(--vm4-ivory);
  }

  body.gph-unified-shell.gph-vm4-service main .addon-accordion-toggle:focus-visible {
    outline: 3px solid var(--vm4-gold);
    outline-offset: 3px;
  }

  body.gph-unified-shell.gph-vm4-service main .addon-category.is-accordion-ready .addon-market-grid {
    padding: 0 14px 14px;
    gap: 10px;
  }

  body.gph-unified-shell.gph-vm4-service main .addon-category.is-accordion-ready .addon-market-grid[hidden] {
    display: none !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 */