/* GreenHostingGo — additions to the Onum theme.
   ------------------------------------------------------------------------
   Onum supplies the header, footer, typography, buttons, pricing tables and
   icon boxes. This file only adds the few things it has no component for:
   the per-plan spec list, the note and "coming soon" boxes, the hero fact
   list and the comparison table.

   Colours are deliberately borrowed rather than declared — currentColor and
   transparent black/white — so these blocks follow whatever palette the theme
   is set to instead of fighting it. */

/* ---------- hero ---------- */
.ghg-hero .ot-heading .main-heading { margin-bottom: 0; }
.ghg-hero-sm { padding-bottom: 20px; }
.ghg-lede { font-size: 18px; line-height: 1.7; margin-top: 18px; opacity: .85; }
.ghg-lede-c { max-width: 62ch; margin-left: auto; margin-right: auto; }
.ghg-hero-btns { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.ghg-hero-btns.text-center { justify-content: center; }
.ghg-sub { max-width: 66ch; margin: -10px auto 34px; opacity: .8; }
.ghg-more { margin-top: 26px; }
.ghg-pt0 { padding-top: 0; }
.ghg-alt { background: rgba(127, 127, 127, .06); }

/* facts beside the hero */
.ghg-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 576px) { .ghg-facts { grid-template-columns: 1fr 1fr; } }
.ghg-facts li {
  border: 1px solid rgba(127, 127, 127, .25);
  border-radius: 12px; padding: 15px 17px;
}
.ghg-facts span {
  display: block; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; opacity: .6; font-weight: 600;
}
.ghg-facts b { display: block; font-size: 20px; font-weight: 700; margin-top: 5px; line-height: 1.25; }
.ghg-facts small { display: block; font-size: 12.5px; opacity: .65; margin-top: 3px; line-height: 1.45; }

/* ---------- plan cards ---------- */
/* The theme hangs the button 26px below the card, so rows need clearance. */
.ghg-plan-row {
  display: flex; flex-wrap: wrap; align-items: stretch;
  row-gap: 70px;   /* the theme hangs each button 26px below its card */
}
.ghg-plan-row > [class*="col-"] { float: none; display: flex; flex-direction: column; }
.ghg-plan { height: 100%; display: flex; flex-direction: column; }
.ghg-plan .inner-table { flex: 1; }
/* The ribbon is absolutely positioned by the theme and was landing 34px over
   the plan name. Lifted onto the card's top edge, where it reads as a label on
   the card rather than a sticker over its title. */
.ghg-plan { position: relative; }
.ghg-plan .title-table {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; padding: 5px 16px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
/* Every card gets the same clearance, so names line up whether or not the card
   carries a ribbon. */
.ghg-plan .inner-table { padding-top: 34px; }

.ghg-plan-name {
  font-size: 19px; font-weight: 700; margin: 0 0 6px;
  /* Leaves room for the theme's absolutely positioned "Most chosen" ribbon,
     so a card with one and a card without still line their rows up. */
  padding-top: 26px;
}
.ghg-plan .inner-table h2 { margin: 0; line-height: 1.1; }
.ghg-plan .inner-table > p { margin: 6px 0 0; font-size: 13.5px; opacity: .7; }
.ghg-plan .details { margin-top: 20px; }

.ghg-spec { list-style: none; margin: 0; padding: 0; text-align: left; }
.ghg-spec li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 2px; font-size: 14px;
  border-bottom: 1px solid rgba(127, 127, 127, .18);
}
.ghg-spec li:last-child { border-bottom: 0; }
.ghg-spec span { opacity: .75; }
.ghg-spec b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- icon boxes ----------
   Boxes in a row hold different amounts of text, so without an explicit equal
   height and a row gap the grid reads as a ragged stack rather than a grid.
   The row carries .ghg-grid so the rule applies without relying on :has(). */
.ghg-grid {
  /* Onum ships a float-based grid: .row is display:block and its columns are
     floated, so cards in a row never match heights. Switching just these rows
     to flex fixes that without touching the theme's own layout. */
  display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 28px;
}
/* flex-direction matters more than it looks. Without it a column holding a
   heading and a list laid them out side by side, which is how the FAQ ended up
   as a 180px-wide heading reading one word per line next to a squeezed mosaic
   of questions. Column keeps the equal-height behaviour and stacks properly. */
.ghg-grid > [class*="col-"] { float: none; display: flex; flex-direction: column; }

/* The icon sits above the text rather than beside it. Beside it, a 60px icon
   and the gap took a third of the card and left the copy in a 210px ribbon
   where three-word headings wrapped to three lines. */
.ghg-inc {
  height: 100%; width: 100%;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  padding: 26px 26px 28px;
  border: 1px solid rgba(127, 127, 127, .2);
  border-radius: 14px;
  margin-bottom: 0;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ghg-inc:hover {
  border-color: rgba(18, 103, 242, .35);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(16, 24, 40, .07);
}
.ghg-inc .icon-main { flex: 0 0 auto; margin: 0; }
.ghg-inc .content-box { flex: 1; width: 100%; }
.ghg-inc h5, .ghg-inc .box-title { margin: 0 0 8px; font-size: 17px; line-height: 1.35; }
.ghg-inc p { margin: 0; font-size: 14.5px; line-height: 1.65; opacity: .82; }
.ghg-inc p a { text-decoration: underline; }

/* ---------- note ---------- */
.ghg-note {
  border: 1px solid rgba(127, 127, 127, .25);
  border-left-width: 4px;
  border-radius: 12px; padding: 22px 26px;
}
.ghg-note h4 { font-size: 17px; font-weight: 700; margin: 0 0 9px; }
.ghg-note p { margin: 0; font-size: 14.5px; line-height: 1.7; opacity: .85; }
.ghg-note p + p { margin-top: 11px; }
.ghg-note-warn { border-left-color: #c8922f; }
.ghg-note-warn h4 { color: #a9761c; }

/* ---------- coming soon ---------- */
.ghg-soon {
  border: 1px solid rgba(127, 127, 127, .25);
  border-radius: 14px; padding: 42px 34px; text-align: center;
  max-width: 720px; margin: 0 auto;
}
.ghg-soon h3 { font-size: 24px; font-weight: 700; margin: 0 0 12px; }
.ghg-soon p { max-width: 54ch; margin: 0 auto 12px; font-size: 15.5px; line-height: 1.7; opacity: .85; }
.ghg-soon .octf-btn { margin-top: 14px; }

/* ---------- comparison table ---------- */
.ghg-table-wrap {
  overflow-x: auto; border: 1px solid rgba(127, 127, 127, .25); border-radius: 12px;
}
.ghg-table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14.5px; margin: 0; }
.ghg-table th, .ghg-table td {
  text-align: left; padding: 13px 18px;
  border-bottom: 1px solid rgba(127, 127, 127, .18);
}
.ghg-table th {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; opacity: .65; background: rgba(127, 127, 127, .07); white-space: nowrap;
}
.ghg-table td { opacity: .85; }
.ghg-table tbody tr:last-child td { border-bottom: 0; }
.ghg-table td.us { font-weight: 700; opacity: 1; }
.ghg-table td.m { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ghg-caption { padding: 12px 18px 0; margin: 0 0 12px; font-size: 12.5px; opacity: .6; line-height: 1.55; }

/* ---------- faq ---------- */
.ghg-faq { display: block; width: 100%; }
.ghg-faq .accordion-item { border: 1px solid rgba(127, 127, 127, .25); border-radius: 12px; margin-bottom: 12px; }
.ghg-faq .accordion-title { padding: 15px 20px; margin: 0; cursor: pointer; font-size: 16px; font-weight: 600; }
.ghg-faq .accordion-content { padding: 0 20px 16px; display: none; }
.ghg-faq .accordion-item.active .accordion-content { display: block; }
.ghg-faq .accordion-content p { margin: 0; font-size: 14.5px; line-height: 1.7; opacity: .85; }
.ghg-faq .accordion-icon { float: right; font-weight: 400; opacity: .6; }
.ghg-faq .accordion-icon::before { content: "+"; }
.ghg-faq .accordion-item.active .accordion-icon::before { content: "\2013"; }

/* ---------- closing cta ----------
   Painted dark on purpose. The theme sets a CTA heading to white for its own
   dark band; without one here the last line of every page was white on white. */
.ghg-cta {
  background: linear-gradient(120deg, #0e4f2b 0%, #14713c 55%, #1b8c48 100%);
  color: #fff;
  border-radius: 0;
}
.ghg-cta h2 { font-size: 30px; font-weight: 700; margin: 0 0 10px; color: #fff; }
.ghg-cta p { margin: 0; font-size: 16px; color: rgba(255, 255, 255, .86); max-width: 60ch; }
.ghg-cta .octf-btn { background: #fff; color: #10502c; border-color: #fff; }
.ghg-cta .octf-btn:hover { background: rgba(255, 255, 255, .9); color: #0b3d21; }
@media (max-width: 991px) { .ghg-cta .text-lg-end { margin-top: 20px; } }

/* ---------- reconciling with the theme's pricing table ----------
   Onum decorates list items inside the card with a bullet, which suits a
   checklist but not the label/value rows used here. The button is also
   absolutely positioned below the card, so the card needs room for it. */
.ghg-plan .details ul.ghg-spec > li::before,
.ghg-plan .details ul.ghg-spec > li::marker {
  content: none !important;
  display: none !important;
}
.ghg-plan .details ul.ghg-spec > li {
  padding-left: 0 !important;
  background: none !important;
  line-height: 1.5;
}
.ghg-plan .inner-table .details { line-height: 1.5; padding-bottom: 8px; }
.ghg-plan { padding-bottom: 54px; }
.ghg-plan-row { margin-bottom: 40px; }

/* Usage services have no resource table, so their points render as a plain
   list rather than label/value rows. */
.ghg-spec-plain li { justify-content: flex-start; }
.ghg-spec-plain span { opacity: .9; }

/* Region list: a count sits beside each continent name. */
.ghg-region .box-title { display: flex; align-items: center; gap: 10px; }
.ghg-region .ghg-count {
  font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px;
  background: rgba(127, 127, 127, .16); opacity: .8;
}
.ghg-region p { font-size: 13.5px; line-height: 1.7; }

/* ---------- numbered steps ---------- */
.ghg-steps-intro { max-width: 66ch; margin: 0 auto 30px; text-align: center; opacity: .82; font-size: 16px; }
.ghg-steps ol {
  list-style: none; counter-reset: ghgstep; margin: 0; padding: 0;
  display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .ghg-steps ol { grid-template-columns: 1fr; } }
.ghg-steps li {
  counter-increment: ghgstep; position: relative;
  padding: 26px 24px 24px; border: 1px solid rgba(127,127,127,.2); border-radius: 14px;
}
.ghg-steps li::before {
  content: counter(ghgstep);
  position: absolute; top: -14px; left: 24px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  background: var(--ghg-accent, #1267f2); color: #fff;
}
.ghg-steps h5 { margin: 6px 0 8px; font-size: 16.5px; }
/* Scoped to the cards. As ".ghg-steps p" this also matched the intro
   paragraph above them — and, being one point more specific than
   ".ghg-steps-intro", won — so the intro lost its bottom margin and the
   numbered badges, which sit 14px above each card, landed on its text. */
.ghg-steps li p { margin: 0; font-size: 14.5px; line-height: 1.7; opacity: .84; }

/* ---------- plan picker ---------- */
.ghg-picker { display: grid; gap: 1px; background: rgba(127,127,127,.2); border: 1px solid rgba(127,127,127,.2); border-radius: 14px; overflow: hidden; }
.ghg-pick {
  background: rgba(255,255,255,.02); display: grid; gap: 6px 22px; padding: 20px 24px;
  grid-template-columns: 1.1fr .7fr 2fr; align-items: baseline;
}
@media (max-width: 860px) { .ghg-pick { grid-template-columns: 1fr; } }
.ghg-pick-who { font-weight: 600; font-size: 15.5px; }
.ghg-pick-plan { font-weight: 700; font-size: 15.5px; opacity: .95; }
.ghg-pick-why { font-size: 14.5px; line-height: 1.65; opacity: .8; }

/* ---------- explainer ---------- */
.ghg-explain { max-width: 74ch; margin: 0 auto 26px; }
.ghg-explain h4 { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.ghg-explain p { font-size: 15.5px; line-height: 1.75; opacity: .85; margin: 0 0 12px; }
.ghg-explain ul { margin: 0; padding-left: 20px; }
.ghg-explain li { font-size: 14.5px; line-height: 1.7; opacity: .84; margin-bottom: 7px; }

/* ---------- edge platform sub-navigation ---------- */
.ghg-subnav { border-bottom: 1px solid rgba(127,127,127,.2); background: rgba(127,127,127,.04); }
.ghg-subnav ul {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: thin;
}
.ghg-subnav li { flex: 0 0 auto; }
.ghg-subnav a {
  display: block; padding: 15px 16px; font-size: 14.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap; opacity: .72;
  border-bottom: 2px solid transparent;
}
.ghg-subnav a:hover { opacity: 1; }
.ghg-subnav a.on { opacity: 1; font-weight: 600; border-bottom-color: currentColor; }

.ghg-feat-group {
  font-size: 17px; font-weight: 700; margin: 30px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(127,127,127,.2);
}
.ghg-feat-group:first-child { margin-top: 0; }

.ghg-region-list {
  font-size: 14.5px; line-height: 1.9; opacity: .82;
  margin: 0 0 22px; max-width: none;
}

/* ---------- sign in, in the header ----------
   Set apart from the product links: those are for people deciding, this is for
   someone who has already decided and is coming back. */
/* Only in the desktop bar. In the mobile drawer every item is already a full
   row, and a pill there just looks like one link that failed to line up. */
@media (min-width: 992px) {
  .ghg-menu-signin > a {
    border: 1px solid rgba(127, 127, 127, .32);
    border-radius: 999px;
    padding: 7px 18px !important;
    font-weight: 600;
  }
  .ghg-menu-signin > a:hover { border-color: currentColor; }
}

/* ---------- footer ----------
   The parent theme's footer builder has nothing configured, so pages simply
   stopped. This is also where a hesitant buyer looks for evidence of a real
   business, which is why it carries contact routes and policies rather than a
   copyright line on its own. */
.ghg-footer {
  background: #0f1720;
  color: rgba(255, 255, 255, .72);
  padding: 66px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
}
.ghg-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.ghg-footer a:hover { color: #fff; text-decoration: underline; }

.ghg-footer-top {
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) 3fr;
  gap: 48px;
  padding-bottom: 48px;
}
@media (max-width: 991px) { .ghg-footer-top { grid-template-columns: 1fr; gap: 38px; } }

.ghg-footer-logo { display: inline-block; margin-bottom: 18px; }
.ghg-footer-logo img {
  width: 180px; height: auto; display: block;
  /* The wordmark is drawn for a light ground; this keeps it legible on a dark
     one without needing a second file. */
  background: #fff; padding: 8px 12px; border-radius: 10px;
}
.ghg-footer-brand p { margin: 0 0 20px; max-width: 46ch; color: rgba(255, 255, 255, .62); }

.ghg-footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ghg-footer-contact li { display: flex; flex-direction: column; gap: 1px; }
.ghg-footer-contact span {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: rgba(255, 255, 255, .42);
}

.ghg-footer-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 767px) { .ghg-footer-nav { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
.ghg-footer-col h4 {
  color: #fff; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 16px;
}
.ghg-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.ghg-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 22px 0 28px;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: space-between; align-items: center;
  font-size: 13px; color: rgba(255, 255, 255, .5);
}
.ghg-footer-bottom p { margin: 0; }

/* ---------- long-form policy documents ----------
   Two jobs at once: read start to finish before signing up, or skimmed for one
   clause. Hence a contents list that sticks, and a measured column rather than
   text running the full width of the container. */
.ghg-doc-updated {
  text-align: center; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; opacity: .55; margin: 14px 0 0;
}
.ghg-doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; }
@media (max-width: 991px) { .ghg-doc { grid-template-columns: 1fr; gap: 32px; } }

.ghg-doc-toc { position: sticky; top: 110px; align-self: start; }
@media (max-width: 991px) {
  .ghg-doc-toc {
    position: static;
    border: 1px solid rgba(127, 127, 127, .2); border-radius: 14px; padding: 20px 22px;
  }
}
.ghg-doc-toc h2 {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  opacity: .55; margin: 0 0 14px;
}
.ghg-doc-toc ol {
  list-style: none; counter-reset: ghgtoc; margin: 0; padding: 0;
  display: grid; gap: 9px; font-size: 14px; line-height: 1.45;
}
.ghg-doc-toc li { counter-increment: ghgtoc; }
.ghg-doc-toc a { opacity: .82; }
.ghg-doc-toc a::before {
  content: counter(ghgtoc) ".";
  display: inline-block; width: 20px; opacity: .5; font-variant-numeric: tabular-nums;
}
.ghg-doc-toc a:hover { opacity: 1; }

.ghg-doc-body { max-width: 68ch; }
.ghg-doc-section + .ghg-doc-section { margin-top: 42px; }
.ghg-doc-section h2 {
  font-size: 21px; font-weight: 700; margin: 0 0 14px;
  display: flex; align-items: baseline; gap: 12px;
}
.ghg-doc-num {
  flex: 0 0 auto;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-grid; place-items: center;
  background: rgba(18, 103, 242, .1); color: #1267f2;
  transform: translateY(-2px);
}
.ghg-doc-section p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; }
.ghg-doc-section p:last-child { margin-bottom: 0; }
.ghg-doc-section ul { margin: 0 0 14px; padding-left: 20px; }
.ghg-doc-section li { margin-bottom: 7px; font-size: 15.5px; line-height: 1.7; }
.ghg-doc-section a { text-decoration: underline; }

.ghg-doc-contact { margin-top: 48px; padding-top: 34px; border-top: 1px solid rgba(127, 127, 127, .22); }
.ghg-doc-entity {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; gap: 1px;
  background: rgba(127, 127, 127, .18);
  border: 1px solid rgba(127, 127, 127, .18); border-radius: 12px; overflow: hidden;
}
.ghg-doc-entity li {
  margin: 0; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px;
  padding: 13px 18px; background: var(--ghg-surface, #fff); font-size: 14.5px;
}
@media (max-width: 575px) { .ghg-doc-entity li { grid-template-columns: 1fr; gap: 2px; } }
.ghg-doc-entity span { opacity: .6; }
.ghg-doc-entity b { font-weight: 600; }

/* ---------- forms ----------
   Generous targets, a visible focus ring, and errors that say what to do.
   The label sits above the field so nothing is lost when a browser widens the
   input, and required is marked in words as well as with an asterisk. */
.ghg-form-wrap { max-width: 640px; }
.ghg-form { display: grid; gap: 18px; }
.ghg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .ghg-form-row { grid-template-columns: 1fr; } }

.ghg-field { display: grid; gap: 7px; }
.ghg-field label { font-size: 13.5px; font-weight: 600; letter-spacing: .01em; }
.ghg-field .req { color: #e2502f; margin-left: 2px; }
.ghg-field .opt { font-weight: 400; opacity: .5; margin-left: 5px; font-size: 12.5px; }

.ghg-field input,
.ghg-field select,
.ghg-field textarea {
  width: 100%;
  font: inherit; font-size: 15px;
  padding: 12px 14px;
  color: inherit;
  background: var(--ghg-surface, #fff);
  border: 1px solid rgba(127, 127, 127, .32);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ghg-field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.ghg-field input:hover,
.ghg-field select:hover,
.ghg-field textarea:hover { border-color: rgba(127, 127, 127, .5); }
.ghg-field input:focus,
.ghg-field select:focus,
.ghg-field textarea:focus {
  outline: none;
  border-color: #1267f2;
  box-shadow: 0 0 0 3px rgba(18, 103, 242, .16);
}
.ghg-field ::placeholder { opacity: .45; }

.ghg-form-actions { display: grid; gap: 12px; justify-items: start; margin-top: 4px; }
.ghg-form-small { margin: 0; font-size: 13px; opacity: .65; line-height: 1.6; max-width: 52ch; }
.ghg-form-small a { text-decoration: underline; }

/* Visible to a bot reading the markup, gone for everyone else. */
.ghg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ghg-form-note {
  display: grid; gap: 4px;
  margin: 0 0 24px; padding: 16px 18px;
  border: 1px solid; border-radius: 12px;
  line-height: 1.6;
}
.ghg-form-note strong { font-size: 15px; }
.ghg-form-note span { font-size: 14px; opacity: .9; }
.ghg-form-note a { text-decoration: underline; color: inherit; }
.ghg-form-note.is-good { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.ghg-form-note.is-warn { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }

/* ---------- 404 ----------
   A dead end should still offer the way out, so the page lists what we sell
   rather than apologising and stopping. */
.ghg-404-links {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 940px; margin: 0 auto;
}
@media (max-width: 900px) { .ghg-404-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ghg-404-links { grid-template-columns: 1fr; } }
.ghg-404-links a {
  display: grid; gap: 4px; align-content: start;
  padding: 20px 22px;
  border: 1px solid rgba(127, 127, 127, .2); border-radius: 14px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ghg-404-links a:hover {
  border-color: rgba(18, 103, 242, .38);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16, 24, 40, .07);
}
.ghg-404-links strong { font-size: 16px; }
.ghg-404-links span { font-size: 13.5px; opacity: .72; line-height: 1.5; }

/* ---------- drawings ----------
   Every illustration is inline vector, so it costs no request and stays sharp.
   They sit beside the copy on wide screens and above it on narrow ones — never
   shrunk into a stamp, which is how a drawing stops being worth its space. */
.ghg-art { display: block; width: 100%; height: auto; max-width: 520px; }
.ghg-art-wrap { display: flex; justify-content: center; align-items: center; padding: 8px 0; }
@media (max-width: 991px) { .ghg-art-wrap { margin-top: 26px; } }

/* two-up: words one side, drawing the other */
.ghg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.ghg-split.is-reverse .ghg-art-wrap { order: -1; }
@media (max-width: 991px) {
  .ghg-split { grid-template-columns: 1fr; gap: 24px; }
  .ghg-split.is-reverse .ghg-art-wrap { order: 0; }
}
.ghg-split .ot-heading { margin-bottom: 14px; }
.ghg-split p { font-size: 16px; line-height: 1.75; }

/* ---------- the delivery map ----------
   Real coordinates, real locations. There is no drawn coastline on purpose —
   an invented one would be the only untrue thing on the page. */
.ghg-map { margin: 0; }
.ghg-map svg {
  display: block; width: 100%; height: auto;
  background: linear-gradient(160deg, #f2f8f4 0%, #eef3fb 100%);
  border: 1px solid rgba(127, 127, 127, .16);
  border-radius: 16px;
}
.ghg-grid line { stroke: rgba(90, 120, 105, .17); stroke-width: 1; }
.ghg-equator { stroke: rgba(90, 120, 105, .3); stroke-width: 1.2; stroke-dasharray: 6 7; }

.ghg-pop { fill: #2f8f58; opacity: .7; }
.ghg-pop.is-india { fill: #e2502f; opacity: 1; }

/* A slow wash across the network, left to right. It runs once and settles, so
   the page is complete in a screenshot and readable before it finishes. */
@media (prefers-reduced-motion: no-preference) {
  .ghg-pop { animation: ghg-pop-in .5s ease-out both; }
  .ghg-map svg { --d: 0s; }
  .ghg-pop:nth-child(3n)   { animation-delay: .10s; }
  .ghg-pop:nth-child(3n+1) { animation-delay: .22s; }
  .ghg-pop:nth-child(3n+2) { animation-delay: .34s; }
  .ghg-pop.is-india        { animation-delay: .5s; }
}
@keyframes ghg-pop-in {
  from { opacity: 0; transform: scale(.4); transform-origin: center; transform-box: fill-box; }
}

.ghg-map figcaption {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 18px; font-size: 13.5px; color: inherit;
}
.ghg-map figcaption span { opacity: .72; }
.ghg-map figcaption b { font-weight: 700; font-variant-numeric: tabular-nums; opacity: 1; }
.ghg-map-total { opacity: 1 !important; }
.ghg-map-total strong { font-size: 16px; }
.ghg-map-india { color: #c2431f; opacity: 1 !important; }

/* ---------- what it runs on ----------
   The parts of the stack a technical buyer recognises and checks for. Set as
   type rather than borrowed logos: honest, and it never renders as a row of
   broken images. */
.ghg-stack { display: grid; gap: 14px; }
.ghg-stack-row {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.ghg-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(127, 127, 127, .22);
  border-radius: 999px;
  background: var(--ghg-surface, #fff);
  font-size: 14px; font-weight: 600;
  white-space: nowrap;
}
.ghg-chip small { font-weight: 400; font-size: 12.5px; opacity: .6; }
.ghg-stack-note { text-align: center; font-size: 13.5px; opacity: .65; margin: 0; }

/* The soft shapes behind the network dots: the same points, blurred. Nothing
   is drawn that is not in the data. */
.ghg-landmass { filter: url(#ghgLand); opacity: .3; }
.ghg-landmass circle { fill: #4e8f6b; }

/* ---------- line icons ----------
   One 24-grid set, inheriting colour, used on cards, in table cells and on the
   dark footer. The reference sites carry a mark on every repeated element; this
   is what makes a list of specifications read as a product rather than a table. */
.ghg-i { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; }

.ghg-i-spec { margin-right: 9px; opacity: .55; }
.ghg-plan .ghg-spec > li > span { display: inline-flex; align-items: center; }
.ghg-plan .ghg-spec > li > span .ghg-i { color: #1267f2; opacity: .5; }

.ghg-i-pick { margin-right: 10px; color: #17703c; width: 20px; height: 20px; }
.ghg-pick-who { display: flex; align-items: center; }

.ghg-i-q { margin-right: 10px; opacity: .4; }
.ghg-faq .accordion-title { display: flex; align-items: center; }
.ghg-faq .accordion-title .accordion-icon { margin-left: auto; float: none; }

.ghg-step-mark {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(18, 103, 242, .09); color: #1267f2;
  margin-bottom: 12px;
}
.ghg-step-mark .ghg-i { width: 20px; height: 20px; }

/* ---------- numbers band ----------
   Four figures, no prose. Both reference sites break their text up with one of
   these; it gives the eye somewhere to land between sections. */
.ghg-figures {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(127, 127, 127, .18);
  border: 1px solid rgba(127, 127, 127, .18);
  border-radius: 16px; overflow: hidden;
}
@media (max-width: 860px) { .ghg-figures { grid-template-columns: repeat(2, 1fr); } }
.ghg-figure {
  background: var(--ghg-surface, #fff);
  padding: 26px 22px 24px;
  text-align: center;
}
.ghg-figure .ghg-i { width: 22px; height: 22px; color: #17703c; margin-bottom: 10px; }
.ghg-figure b {
  display: block; font-size: 30px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.ghg-figure span { display: block; margin-top: 5px; font-size: 13.5px; opacity: .7; line-height: 1.45; }

/* ---------- four-up blocks ----------
   Used for the security and support sections. A mark, a short heading and
   three lines — the unit both reference sites repeat down their front page. */
.ghg-quad { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 44px; }
@media (max-width: 767px) { .ghg-quad { grid-template-columns: 1fr; gap: 26px; } }
.ghg-quad-item h4 { font-size: 17.5px; font-weight: 700; margin: 0 0 8px; line-height: 1.35; }
.ghg-quad-item p { margin: 0; font-size: 15px; line-height: 1.7; opacity: .82; }
.ghg-quad-mark {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(23, 112, 60, .09); color: #17703c;
  margin-bottom: 14px;
}
.ghg-quad-mark .ghg-i { width: 22px; height: 22px; }
.ghg-support-band .ghg-quad-mark { background: rgba(18, 103, 242, .09); color: #1267f2; }

/* =======================================================================
   SECTION RHYTHM

   The page was fourteen sections and eleven of them were pure white, the
   other three a six-percent grey. Stacked up that reads as one long flat
   document however many drawings are added to it — which is exactly the
   difference between this page and the ones it was measured against.

   Three grounds now alternate: plain, tinted, and dark. Dark is the one that
   does the work, and it is spent on the two sections that deserve the weight
   — the opening, and the network.
   ======================================================================= */

/* ---------- the dark ground ---------- */
.ghg-dark {
  background: linear-gradient(155deg, #0c2a1a 0%, #10362198 35%, #0b2b3d 100%), #0c2418;
  color: #e6efe9;
  position: relative;
  overflow: hidden;
}
/* a soft light behind the content, so the band is not a flat rectangle */
.ghg-dark::before {
  content: "";
  position: absolute; inset: -40% 30% 40% -20%;
  background: radial-gradient(closest-side, rgba(52, 168, 104, .22), transparent 70%);
  pointer-events: none;
}
.ghg-dark::after {
  content: "";
  position: absolute; inset: 30% -20% -40% 45%;
  background: radial-gradient(closest-side, rgba(38, 118, 214, .2), transparent 70%);
  pointer-events: none;
}
.ghg-dark > .container { position: relative; z-index: 1; }

.ghg-dark .main-heading,
.ghg-dark h1, .ghg-dark h2, .ghg-dark h3, .ghg-dark h4, .ghg-dark h5 { color: #fff; }
.ghg-dark .sub-heading { color: #7fd3a1; }
.ghg-dark p, .ghg-dark li, .ghg-dark span { color: #cadbd1; }
.ghg-dark .ghg-lede { color: #d5e6db; opacity: 1; }
.ghg-dark a { color: #9fe4bb; }

.ghg-dark .ghg-quad-mark { background: rgba(255, 255, 255, .1); color: #8fdcae; }
.ghg-dark .ghg-quad-item h4 { color: #fff; }
.ghg-dark .ghg-quad-item p { opacity: .82; }

.ghg-dark .ghg-figures { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .14); }
.ghg-dark .ghg-figure { background: rgba(255, 255, 255, .04); }
.ghg-dark .ghg-figure b { color: #fff; }
.ghg-dark .ghg-figure .ghg-i { color: #8fdcae; }

.ghg-dark .ghg-chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #eaf3ee; }
.ghg-dark .ghg-chip small { color: #a9c2b5; }

/* the map, on dark */
.ghg-dark .ghg-map svg {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .12);
}
.ghg-dark .ghg-grid line { stroke: rgba(255, 255, 255, .1); }
.ghg-dark .ghg-equator { stroke: rgba(255, 255, 255, .2); }
.ghg-dark .ghg-pop { fill: #57c98a; opacity: .85; }
.ghg-dark .ghg-pop.is-india { fill: #ff7a4d; opacity: 1; }
.ghg-dark .ghg-landmass circle { fill: #3f9c6d; }
.ghg-dark .ghg-landmass { opacity: .34; }
.ghg-dark .ghg-map figcaption span { color: #b9cec3; }
.ghg-dark .ghg-map figcaption b, .ghg-dark .ghg-map-total strong { color: #fff; }
.ghg-dark .ghg-map-india { color: #ffa583 !important; }

/* buttons on dark */
.ghg-dark .octf-btn-secondary {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.ghg-dark .octf-btn-secondary:hover { background: rgba(255, 255, 255, .18); }

/* ---------- the opening ----------
   Bigger than the rest of the page by a clear step: it is the only section a
   visitor is guaranteed to look at. */
.ghg-hero.ghg-dark { padding-top: 84px; padding-bottom: 92px; }
.ghg-hero.ghg-dark .main-heading {
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: -.025em;
}
.ghg-hero.ghg-dark .ghg-lede { font-size: 19px; max-width: 54ch; }

.ghg-dark .ghg-facts li {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 13px;
  padding: 15px 18px;
}
.ghg-dark .ghg-facts span { color: #8fdcae; }
.ghg-dark .ghg-facts b { color: #fff; }
.ghg-dark .ghg-facts small { color: #a9c2b5; }

/* The drawings carry their own pale backing circle, which is right on a light
   ground and wrong on a dark one. */
.ghg-dark .ghg-art > circle:first-of-type { fill: rgba(255, 255, 255, .06); }
.ghg-dark .ghg-art text { fill: #cadbd1; }

/* ---------- a firmer type scale ----------
   Section headings were the same weight as body copy at a glance. */
.main-heading { font-size: clamp(27px, 3.2vw, 40px); letter-spacing: -.018em; line-height: 1.16; }
.sub-heading { letter-spacing: .14em; }

/* ---------- the header, on the dark opening ----------
   A white bar sitting on top of a dark hero cuts the page in two before the
   visitor has read a word. The header takes the same ground as the section
   under it, and the wordmark — drawn for a light background — keeps one. */
.site-header.header-style-1 {
  background: #0c2a1a;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header .logo-header img,
.site-header .site-logo img,
.site-header img[alt="GreenHostingGo"] {
  background: #fff;
  padding: 6px 11px;
  border-radius: 9px;
}
.site-header .octf-main-menu > ul > li > a,
.site-header nav a,
.site-header .menu-item > a { color: #e6efe9; }
.site-header .octf-main-menu > ul > li > a:hover,
.site-header nav a:hover { color: #fff; }
.site-header .menu-item.current-menu-item > a { color: #7fd3a1; }

/* the sign-in pill, on dark */
@media (min-width: 992px) {
  .ghg-menu-signin > a {
    border-color: rgba(255, 255, 255, .3) !important;
    color: #fff !important;
  }
  .ghg-menu-signin > a:hover { background: rgba(255, 255, 255, .12); border-color: #fff !important; }
}

/* the mobile toggle */
.site-header .octf-btn-cta .octf-menu-mobile-toggle-button,
.site-header .mobile-menu-toggle,
.site-header button[class*="toggle"] { color: #fff; }
.site-header button[class*="toggle"] span,
.site-header button[class*="toggle"] i { color: #fff; }

/* the drawer itself stays light, which is right for a full-height panel */
.site-header .mobile-menu-container,
.site-header .oct-mobile-menu { background: #fff; }
.site-header .mobile-menu-container a { color: #14201a; }

/* the words column of a split, when it holds more than a paragraph */
.ghg-split-words > .ghg-quad { grid-template-columns: 1fr; gap: 22px; }
.ghg-split-lede { font-size: 16.5px; line-height: 1.75; opacity: .85; margin: 0 0 22px; }
.ghg-split-words .ghg-picker { margin-top: 4px; }
.ghg-split-words .ghg-steps ol { grid-template-columns: 1fr; gap: 14px; }

/* the explain block, when it is one half of a split */
.ghg-explain.is-split { max-width: none; }
.ghg-explain ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; }
.ghg-explain li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.ghg-i-li { color: #17703c; margin-top: 3px; width: 17px; height: 17px; }