/*!
 * Global Hosting: gh-core.css
 * Design tokens + all gh- prefixed components (header, mega menu, drawer, footer,
 * buttons, cards, pricing, domain search, FAQ, CTA, tables, cookie banner…).
 * Safe on top of Bootstrap 4.5 (WHMCS twenty-one): no bare element selectors
 * outside .gh- scopes; components set their own margins, colours and fonts.
 */

/* ==========================================================================
   0. Tokens
   ========================================================================== */
:root {
  --gh-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* brand */
  --gh-red: #BB3437;
  --gh-red-600: #A42B2E;
  --gh-red-700: #8C2427;
  --gh-red-50: #FDF3F3;
  --gh-red-100: #F9E1E1;
  --gh-red-soft: #F2787B;          /* red accent text on dark surfaces (AA on navy) */
  --gh-navy: #2A304A;              /* logo navy */
  --gh-navy-950: #060A1F;
  --gh-navy-900: #0A0F2A;
  --gh-navy-850: #0F1534;
  --gh-navy-800: #151C40;
  --gh-navy-700: #1F2752;
  --gh-navy-600: #2D3566;
  --gh-indigo: #7C8CFF;            /* cool highlight for dark visuals */

  /* neutrals (light UI) */
  --gh-ink: #0E1330;               /* headings */
  --gh-text: #383E58;              /* body */
  --gh-muted: #5C6380;             /* secondary text, 5.9:1 on white */
  --gh-subtle: #8A90A8;            /* decorative only */
  --gh-line: #E4E7F0;
  --gh-line-strong: #D2D7E4;
  --gh-bg: #FFFFFF;
  --gh-bg-alt: #F6F7FB;
  --gh-bg-soft: #EEF0F7;

  /* on dark */
  --gh-on-dark: #FFFFFF;
  --gh-on-dark-muted: #B6BCD6;     /* 9.8:1 on navy-900 */
  --gh-on-dark-subtle: #8D94B4;
  --gh-on-dark-line: rgba(255, 255, 255, .1);
  --gh-on-dark-fill: rgba(255, 255, 255, .06);

  /* status */
  --gh-success: #0F7A55;
  --gh-success-bg: #E6F5EE;
  --gh-success-on-dark: #4ADE9B;

  /* shape */
  --gh-radius-xs: 8px;
  --gh-radius-sm: 10px;
  --gh-radius: 14px;
  --gh-radius-lg: 18px;
  --gh-radius-xl: 24px;
  --gh-radius-pill: 999px;

  --gh-shadow-xs: 0 1px 2px rgba(14, 19, 48, .06);
  --gh-shadow-sm: 0 1px 2px rgba(14, 19, 48, .05), 0 2px 8px -2px rgba(14, 19, 48, .06);
  --gh-shadow: 0 2px 6px -1px rgba(14, 19, 48, .06), 0 14px 34px -10px rgba(14, 19, 48, .14);
  --gh-shadow-lg: 0 6px 16px -4px rgba(14, 19, 48, .1), 0 30px 70px -18px rgba(14, 19, 48, .32);
  --gh-shadow-red: 0 10px 26px -10px rgba(187, 52, 55, .65);

  --gh-focus: #5B7CFF;
  --gh-ease: cubic-bezier(.2, .7, .2, 1);
  --gh-dur: .2s;

  /* layout */
  --gh-container: 1240px;
  --gh-gutter: 24px;
  --gh-topbar-h: 40px;
  --gh-header-h: 76px;

  /* type scale */
  --gh-fs-xs: .8125rem;   /* 13 */
  --gh-fs-sm: .875rem;    /* 14 */
  --gh-fs-base: 1rem;     /* 16 */
  --gh-fs-md: 1.0625rem;  /* 17 */
  --gh-fs-lg: 1.25rem;    /* 20 */
  --gh-fs-xl: clamp(1.375rem, 1.2rem + .6vw, 1.625rem);
  --gh-fs-2xl: clamp(1.875rem, 1.35rem + 1.7vw, 2.75rem);
  --gh-fs-3xl: clamp(2.25rem, 1.45rem + 3.2vw, 4rem);
}
@media (max-width: 640px) {
  :root { --gh-gutter: 20px; --gh-header-h: 64px; }
}

/* ==========================================================================
   1. Utilities & primitives
   ========================================================================== */
.gh-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.gh-skip {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  padding: 12px 18px; border-radius: var(--gh-radius-sm);
  background: #fff; color: var(--gh-ink); font: 700 var(--gh-fs-sm)/1 var(--gh-font);
  text-decoration: none; box-shadow: var(--gh-shadow);
}
.gh-skip:focus { top: 12px; color: var(--gh-ink); text-decoration: none; outline: 3px solid var(--gh-focus); outline-offset: 2px; }

.gh-container {
  width: 100%; max-width: calc(var(--gh-container) + 2 * var(--gh-gutter));
  margin-left: auto; margin-right: auto; padding-left: var(--gh-gutter); padding-right: var(--gh-gutter);
  box-sizing: border-box;
}
/* max-width:none: site.css caps svg at 100%, which collapsed icons to 0 in shrink-to-fit cells and narrow buttons */
.gh-icon { display: inline-block; flex: none; vertical-align: middle; max-width: none; }

[class^="gh-"], [class*=" gh-"], [class^="gh-"]::before, [class*=" gh-"]::before, [class^="gh-"]::after, [class*=" gh-"]::after { box-sizing: border-box; }

/* Unified, visible focus for every gh component */
.gh-topbar a:focus-visible, .gh-header a:focus-visible, .gh-header button:focus-visible,
.gh-drawer a:focus-visible, .gh-drawer button:focus-visible, .gh-footer a:focus-visible, .gh-footer button:focus-visible,
.gh-btn:focus-visible, .gh-card--link:focus-visible, .gh-billing__btn:focus-visible, .gh-tlds__chip:focus-visible,
.gh-faq__q:focus-visible, .gh-cookie button:focus-visible, .gh-cookie a:focus-visible, .gh-breadcrumb a:focus-visible,
.gh-feature__link:focus-visible, .gh-proof__card:focus-visible, .gh-table-wrap:focus-visible, .gh-prose a:focus-visible {
  outline: 3px solid var(--gh-focus); outline-offset: 2px;
}

/* Dark surface with soft glow + grid texture (header, hero, CTA, footer). Needs position:relative content. */
.gh-surface-dark {
  position: relative; isolation: isolate;
  background-color: var(--gh-navy-900);
  background-image:
    radial-gradient(60% 70% at 85% -10%, rgba(124, 140, 255, .20), transparent 60%),
    radial-gradient(45% 60% at -5% 110%, rgba(187, 52, 55, .26), transparent 60%);
  color: var(--gh-on-dark-muted);
}
.gh-surface-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 75%);
}

/* Text highlight inside headings (red gradient on dark, red on light) */
.gh-hl { color: var(--gh-red); }
.gh-surface-dark .gh-hl {
  background: linear-gradient(92deg, #FF8C8F 0%, #F2575B 55%, #E0474B 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Eyebrow label */
.gh-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font: 700 var(--gh-fs-xs)/1.2 var(--gh-font); letter-spacing: .12em; text-transform: uppercase; color: var(--gh-red);
}
.gh-surface-dark .gh-eyebrow, .gh-section-head--dark .gh-eyebrow { color: var(--gh-red-soft); }

/* Pill (on dark heroes) */
.gh-pill {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 14px 7px 12px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--gh-radius-pill);
  background: rgba(255, 255, 255, .06); color: #E4E7F5;
  font: 600 var(--gh-fs-sm)/1.2 var(--gh-font);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.gh-pill .gh-icon { color: var(--gh-red-soft); }
.gh-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gh-success-on-dark); box-shadow: 0 0 0 4px rgba(74, 222, 155, .18); }

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.gh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; margin: 0;
  border: 1px solid transparent; border-radius: 12px;
  font: 700 var(--gh-fs-base)/1.2 var(--gh-font); letter-spacing: -.005em; text-align: center; white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none; -webkit-appearance: none; appearance: none;
  transition: background-color var(--gh-dur) var(--gh-ease), border-color var(--gh-dur) var(--gh-ease), color var(--gh-dur) var(--gh-ease), box-shadow var(--gh-dur) var(--gh-ease), transform var(--gh-dur) var(--gh-ease);
}
.gh-btn:hover, .gh-btn:focus { text-decoration: none; }
.gh-btn:active { transform: translateY(1px); }
.gh-btn .gh-icon { transition: transform var(--gh-dur) var(--gh-ease); }
.gh-btn:hover .gh-icon--arrow-right { transform: translateX(3px); }
.gh-btn:hover .gh-icon--arrow-up-right { transform: translate(2px, -2px); }

.gh-btn--primary { background: var(--gh-red); border-color: var(--gh-red); color: #fff; box-shadow: var(--gh-shadow-red); }
.gh-btn--primary:hover, .gh-btn--primary:focus { background: var(--gh-red-600); border-color: var(--gh-red-600); color: #fff; }

.gh-btn--dark { background: var(--gh-ink); border-color: var(--gh-ink); color: #fff; }
.gh-btn--dark:hover, .gh-btn--dark:focus { background: var(--gh-navy-700); border-color: var(--gh-navy-700); color: #fff; }

.gh-btn--light { background: #fff; border-color: #fff; color: var(--gh-ink); }
.gh-btn--light:hover, .gh-btn--light:focus { background: #EEF0F8; border-color: #EEF0F8; color: var(--gh-ink); }

.gh-btn--ghost { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .28); color: #fff; }
.gh-btn--ghost:hover, .gh-btn--ghost:focus { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); color: #fff; }

.gh-btn--outline { background: #fff; border-color: var(--gh-line-strong); color: var(--gh-ink); }
.gh-btn--outline:hover, .gh-btn--outline:focus { background: #fff; border-color: var(--gh-ink); color: var(--gh-ink); }

.gh-btn--link { min-height: 0; padding: 4px 0; background: none; border: 0; border-radius: 4px; color: var(--gh-red); }
.gh-btn--link:hover, .gh-btn--link:focus { color: var(--gh-red-600); text-decoration: underline; text-underline-offset: 3px; }

.gh-btn--sm { min-height: 40px; padding: 9px 16px; border-radius: 10px; font-size: var(--gh-fs-sm); gap: 8px; }
.gh-btn--lg { min-height: 54px; padding: 15px 26px; font-size: var(--gh-fs-md); border-radius: 14px; }
.gh-btn--block { display: flex; width: 100%; }

/* ==========================================================================
   3. Badges
   ========================================================================== */
.gh-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; margin: 0;
  border-radius: var(--gh-radius-pill); font: 700 var(--gh-fs-xs)/1.3 var(--gh-font); letter-spacing: .01em;
  background: var(--gh-bg-soft); color: var(--gh-ink); white-space: nowrap;
}
.gh-badge--red { background: var(--gh-red-50); color: var(--gh-red-700); }
.gh-badge--solid { background: var(--gh-red); color: #fff; }
.gh-badge--navy { background: var(--gh-navy-900); color: #fff; }
.gh-badge--success { background: var(--gh-success-bg); color: var(--gh-success); }
.gh-badge--on-dark { background: rgba(255, 255, 255, .1); color: #fff; }

/* ==========================================================================
   4. Top bar
   ========================================================================== */
.gh-topbar {
  background: var(--gh-navy-950); color: var(--gh-on-dark-muted);
  font: 500 var(--gh-fs-xs)/1.2 var(--gh-font); border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.gh-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--gh-topbar-h); }
.gh-topbar__list { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.gh-topbar__link { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--gh-on-dark-muted); text-decoration: none; transition: color var(--gh-dur); }
.gh-topbar__link:hover, .gh-topbar__link:focus { color: #fff; text-decoration: none; }
.gh-topbar__link .gh-icon { color: var(--gh-red-soft); }
.gh-topbar__link strong { color: #fff; font-weight: 700; }
.gh-topbar__muted { color: var(--gh-on-dark-muted); }
@media (max-width: 720px) {
  .gh-topbar__hide-sm, .gh-topbar__list--end li:first-child { display: none; }
  .gh-topbar__list { gap: 14px; }
}
@media (max-width: 380px) { .gh-topbar__muted { display: none; } }

/* ==========================================================================
   5. Header & primary navigation
   ========================================================================== */
.gh-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--gh-navy-900); color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--gh-font);
  transition: box-shadow var(--gh-dur) var(--gh-ease), background-color var(--gh-dur);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gh-header.is-scrolled { background: rgba(10, 15, 42, .95); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
}
.gh-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); }
.gh-header__inner { position: relative; display: flex; align-items: center; gap: 28px; height: var(--gh-header-h); }
.gh-header__brand { display: inline-flex; align-items: center; flex: none; padding: 4px 0; border-radius: 6px; }
.gh-header__brand img { display: block; width: auto; height: 42px; max-width: none; }

.gh-nav { flex: 1 1 auto; align-self: stretch; display: flex; justify-content: center; }
.gh-nav__list { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; }
.gh-nav__item { display: flex; align-items: center; position: static; }
.gh-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; margin: 0;
  border: 0; border-radius: 10px; background: transparent; color: #E6E9F7;
  font: 600 .9375rem/1 var(--gh-font); letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color var(--gh-dur), background-color var(--gh-dur);
}
.gh-nav__link:hover, .gh-nav__link:focus, .gh-nav__item.is-open > .gh-nav__link { color: #fff; background: rgba(255, 255, 255, .07); text-decoration: none; }
.gh-nav__item.is-active > .gh-nav__link { color: #fff; }
.gh-nav__item.is-active > .gh-nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -16px; height: 2px; border-radius: 2px; background: var(--gh-red);
}
.gh-nav__chevron { opacity: .7; transition: transform var(--gh-dur) var(--gh-ease); }
.gh-nav__item.is-open .gh-nav__chevron { transform: rotate(180deg); opacity: 1; }

.gh-header__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.gh-header__icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; color: #E6E9F7; text-decoration: none; border: 1px solid rgba(255, 255, 255, .12);
  transition: background-color var(--gh-dur), color var(--gh-dur), border-color var(--gh-dur);
}
.gh-header__icon-btn:hover, .gh-header__icon-btn:focus { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); text-decoration: none; }
.gh-header__portal { box-shadow: none; }
.gh-header__burger {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer;
}
.gh-header__burger:hover { background: rgba(255, 255, 255, .12); }

@media (max-width: 1180px) {
  .gh-header__inner { gap: 18px; }
  .gh-nav__link { padding: 0 11px; }
}
@media (max-width: 1060px) {
  .gh-nav { display: none; }
  .gh-header__burger { display: inline-flex; }
  .gh-header__actions { margin-left: auto; }
}
@media (max-width: 640px) {
  .gh-header__brand img { height: 34px; }
  .gh-header__portal { display: none; }
}

/* ==========================================================================
   6. Mega menu (desktop)
   ========================================================================== */
.gh-mega {
  position: absolute; top: 100%; left: var(--gh-gutter); right: var(--gh-gutter); z-index: 950;
  padding-top: 10px;   /* hover bridge */
  visibility: hidden; opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .18s var(--gh-ease), transform .18s var(--gh-ease), visibility 0s linear .18s;
}
.gh-nav__item.is-open > .gh-mega,
.gh-no-js .gh-nav__item--mega:hover > .gh-mega,
.gh-no-js .gh-nav__item--mega:focus-within > .gh-mega {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s;
}
.gh-mega__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; padding: 12px;
  background: #fff; border-radius: 20px; box-shadow: var(--gh-shadow-lg), 0 0 0 1px rgba(14, 19, 48, .06);
  color: var(--gh-text); text-align: left;
}
.gh-mega__main { padding: 18px 14px 14px 18px; }
.gh-mega__title { margin: 0 0 12px 12px; font: 700 var(--gh-fs-xs)/1.2 var(--gh-font); letter-spacing: .1em; text-transform: uppercase; color: var(--gh-muted); }
.gh-mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.gh-mega__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gh-mega__link {
  display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 14px; border-radius: 14px;
  color: var(--gh-text); text-decoration: none; transition: background-color var(--gh-dur);
}
.gh-mega__link:hover, .gh-mega__link:focus { background: var(--gh-bg-alt); color: var(--gh-text); text-decoration: none; }
.gh-mega__link[aria-current="page"] { background: var(--gh-red-50); }
.gh-mega__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--gh-red-50); color: var(--gh-red); transition: background-color var(--gh-dur), color var(--gh-dur);
}
.gh-mega__link:hover .gh-mega__icon { background: var(--gh-red); color: #fff; }
.gh-mega__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gh-mega__label { display: inline-flex; align-items: center; gap: 6px; color: var(--gh-ink); font: 700 .9375rem/1.3 var(--gh-font); }
.gh-mega__ext { color: var(--gh-muted); }
.gh-mega__desc { color: var(--gh-muted); font: 500 var(--gh-fs-sm)/1.45 var(--gh-font); }
.gh-mega__price { margin-top: 2px; color: var(--gh-red); font: 700 var(--gh-fs-xs)/1.3 var(--gh-font); }

.gh-mega__aside {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 26px 24px; border-radius: 14px; color: var(--gh-on-dark-muted);
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(124, 140, 255, .28), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(187, 52, 55, .35), transparent 60%),
    var(--gh-navy-900);
}
.gh-mega__aside-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; }
.gh-mega__aside-title { margin: 4px 0 0; color: #fff; font: 800 var(--gh-fs-lg)/1.25 var(--gh-font); letter-spacing: -.01em; }
.gh-mega__aside-text { margin: 0 0 6px; font: 500 var(--gh-fs-sm)/1.55 var(--gh-font); color: var(--gh-on-dark-muted); }
.gh-mega__aside-note { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font: 500 var(--gh-fs-xs)/1.4 var(--gh-font); color: var(--gh-on-dark-muted); }
.gh-mega__aside-note strong { color: #fff; }
.gh-mega__phone { display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 800 1.5rem/1.1 var(--gh-font); letter-spacing: -.01em; text-decoration: none; }
.gh-mega__phone .gh-icon { color: var(--gh-red-soft); }
.gh-mega__phone:hover, .gh-mega__phone:focus { color: #fff; text-decoration: none; }
.gh-mega__aside-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--gh-on-dark-muted); font: 600 var(--gh-fs-sm)/1.3 var(--gh-font); text-decoration: none; }
.gh-mega__aside-link:hover, .gh-mega__aside-link:focus { color: #fff; text-decoration: none; }
.gh-mega__aside .gh-btn { margin-top: auto; }
.gh-mega__aside .gh-domain { width: 100%; }

/* ==========================================================================
   7. Mobile drawer
   ========================================================================== */
.gh-drawer { position: fixed; inset: 0; z-index: 1000; font-family: var(--gh-font); }
.gh-drawer__backdrop { position: absolute; inset: 0; background: rgba(6, 10, 31, .6); opacity: 0; transition: opacity .25s var(--gh-ease); }
.gh-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  width: min(420px, 100%); background: #fff; color: var(--gh-text);
  box-shadow: -20px 0 60px -20px rgba(6, 10, 31, .5);
  transform: translateX(100%); transition: transform .3s var(--gh-ease); outline: none;
}
.gh-drawer.is-open .gh-drawer__backdrop { opacity: 1; }
.gh-drawer.is-open .gh-drawer__panel { transform: none; }
.gh-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--gh-line); }
.gh-drawer__brand img { display: block; height: 34px; width: auto; max-width: none; }
.gh-drawer__close {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0;
  border: 1px solid var(--gh-line); border-radius: 12px; background: #fff; color: var(--gh-ink); cursor: pointer;
}
.gh-drawer__close:hover { background: var(--gh-bg-alt); }
.gh-drawer__nav { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px; }
.gh-drawer__list, .gh-drawer__sub { margin: 0; padding: 0; list-style: none; }
.gh-drawer__group + .gh-drawer__group { border-top: 1px solid var(--gh-line); }
.gh-drawer__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 8px; margin: 0;
  border: 0; background: none; color: var(--gh-ink); font: 700 var(--gh-fs-md)/1.2 var(--gh-font); text-align: left; text-decoration: none; cursor: pointer;
}
.gh-drawer__toggle:hover, .gh-drawer__toggle:focus { color: var(--gh-red); text-decoration: none; }
.gh-drawer__toggle .gh-icon { color: var(--gh-muted); transition: transform var(--gh-dur) var(--gh-ease); }
.gh-drawer__toggle[aria-expanded="true"] .gh-drawer__chevron { transform: rotate(180deg); color: var(--gh-red); }
.gh-drawer__sub { padding: 0 0 12px; }
.gh-drawer__link {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px; border-radius: 12px;
  color: var(--gh-text); font: 600 .9375rem/1.3 var(--gh-font); text-decoration: none;
}
.gh-drawer__link:hover, .gh-drawer__link:focus { background: var(--gh-bg-alt); color: var(--gh-ink); text-decoration: none; }
.gh-drawer__link[aria-current="page"] { background: var(--gh-red-50); color: var(--gh-ink); }
.gh-drawer__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--gh-red-50); color: var(--gh-red); }
.gh-drawer__label { flex: 1 1 auto; }
.gh-drawer__price { flex: none; color: var(--gh-muted); font: 600 var(--gh-fs-xs)/1.2 var(--gh-font); }
.gh-drawer__foot { display: grid; gap: 10px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gh-line); background: var(--gh-bg-alt); }
.gh-drawer__contact { display: grid; gap: 4px; margin-top: 4px; }
.gh-drawer__contact a { display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--gh-text); font: 500 var(--gh-fs-sm)/1.3 var(--gh-font); text-decoration: none; }
.gh-drawer__contact a:hover { color: var(--gh-ink); text-decoration: none; }
.gh-drawer__contact .gh-icon { color: var(--gh-red); }
.gh-drawer__contact strong { color: var(--gh-ink); }
html.gh-drawer-open, html.gh-drawer-open body { overflow: hidden; }

/* ==========================================================================
   8. Footer
   ========================================================================== */
.gh-footer {
  position: relative; overflow: hidden; padding: 80px 0 28px;
  background: var(--gh-navy-950); color: var(--gh-on-dark-muted); font: 500 var(--gh-fs-sm)/1.6 var(--gh-font);
}
.gh-footer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 420px; pointer-events: none;
  background: radial-gradient(50% 100% at 15% 0%, rgba(187, 52, 55, .16), transparent 70%), radial-gradient(40% 90% at 90% 0%, rgba(124, 140, 255, .12), transparent 70%);
}
.gh-footer > .gh-container { position: relative; }
.gh-footer a { color: var(--gh-on-dark-muted); text-decoration: none; transition: color var(--gh-dur); }
.gh-footer a:hover, .gh-footer a:focus { color: #fff; text-decoration: none; }
.gh-footer__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr); gap: 56px; padding-bottom: 48px; }
.gh-footer__logo { display: inline-block; }
.gh-footer__logo img { display: block; height: 44px; width: auto; max-width: none; }
.gh-footer__blurb { max-width: 340px; margin: 20px 0 22px; color: var(--gh-on-dark-muted); }
.gh-footer__social { display: flex; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.gh-footer__social-link {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
}
.gh-footer .gh-footer__social-link:hover { background: var(--gh-red); border-color: var(--gh-red); color: #fff; }
.gh-footer__more { display: inline-flex; align-items: center; gap: 8px; color: #fff !important; font-weight: 700; }
.gh-footer__more:hover .gh-icon { transform: translateX(3px); }
.gh-footer__more .gh-icon { transition: transform var(--gh-dur); }
.gh-footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.gh-footer__heading { margin: 4px 0 18px; color: #fff; font: 700 var(--gh-fs-base)/1.3 var(--gh-font); letter-spacing: -.005em; }
.gh-footer__links { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.gh-footer__links a { display: inline-block; line-height: 1.45; }
.gh-footer__note { display: block; margin-top: 2px; color: var(--gh-on-dark-subtle); font-size: .75rem; font-weight: 600; line-height: 1.3; }

.gh-footer__contact {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 28px 0;
  border-top: 1px solid var(--gh-on-dark-line);
}
.gh-footer__contact-item { display: flex; align-items: flex-start; gap: 14px; }
.gh-footer__contact-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(187, 52, 55, .16); color: var(--gh-red-soft); }
.gh-footer__label { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--gh-on-dark-subtle); font: 700 var(--gh-fs-xs)/1.3 var(--gh-font); letter-spacing: .08em; text-transform: uppercase; }
.gh-footer__value { margin: 0; color: #fff; font-weight: 600; line-height: 1.65; }
.gh-footer__value a { color: #fff; }
.gh-footer__value a:hover { color: var(--gh-red-soft); }
.gh-footer__hint { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(74, 222, 155, .14); color: var(--gh-success-on-dark); font-size: var(--gh-fs-xs); font-weight: 700; }
.gh-footer__sep { color: var(--gh-on-dark-subtle); }

.gh-footer__pay { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; padding: 24px 0; border-top: 1px solid var(--gh-on-dark-line); }
.gh-footer__pay .gh-footer__label { margin: 0; }
.gh-paylist { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gh-paylist__item {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #E8EAF6;
  font: 700 var(--gh-fs-xs)/1 var(--gh-font); white-space: nowrap;
}
.gh-paylist__item img { display: block; height: 22px; width: auto; max-width: none; }
.gh-paylist__item--logo { min-width: 88px; padding: 0 16px; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.gh-paylist__item--logo img { height: 22px; width: auto; }
.gh-paylist__item--tall img { height: 30px; }
.gh-paylist__item .gh-icon { color: var(--gh-on-dark-muted); }

.gh-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 32px; padding-top: 24px;
  border-top: 1px solid var(--gh-on-dark-line); font-size: var(--gh-fs-xs);
}
.gh-footer__company p { margin: 0; line-height: 1.7; }
.gh-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.gh-footer__linkbtn { padding: 0; margin: 0; border: 0; background: none; color: var(--gh-on-dark-muted); font: inherit; cursor: pointer; }
.gh-footer__linkbtn:hover { color: #fff; }
.gh-footer__owner { margin: 18px 0 0; color: var(--gh-on-dark-subtle); font-size: .75rem; }

@media (max-width: 1060px) {
  .gh-footer__top { grid-template-columns: 1fr; gap: 40px; }
  .gh-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .gh-footer__contact { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .gh-footer { padding-top: 56px; }
  .gh-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   9. Section head
   ========================================================================== */
.gh-section-head { max-width: 760px; margin: 0 0 48px; font-family: var(--gh-font); }
.gh-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.gh-section-head__title {
  margin: 0; color: var(--gh-ink); font: 800 var(--gh-fs-2xl)/1.12 var(--gh-font); letter-spacing: -.028em; text-wrap: balance;
}
.gh-section-head__lead { margin: 16px 0 0; color: var(--gh-muted); font: 500 var(--gh-fs-md)/1.65 var(--gh-font); text-wrap: pretty; }
.gh-section-head--center .gh-section-head__lead { margin-left: auto; margin-right: auto; max-width: 640px; }
.gh-section-head--dark .gh-section-head__title { color: #fff; }
.gh-section-head--dark .gh-section-head__lead { color: var(--gh-on-dark-muted); }
@media (max-width: 640px) { .gh-section-head { margin-bottom: 36px; } }

/* ==========================================================================
   10. Grid & cards
   ========================================================================== */
.gh-grid { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.gh-grid > li { display: flex; }
.gh-grid > li > :only-child { flex: 1 1 auto; }
.gh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .gh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .gh-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .gh-grid--2, .gh-grid--3, .gh-grid--4 { grid-template-columns: 1fr; gap: 16px; } }

.gh-card {
  position: relative; display: flex; flex-direction: column; padding: 28px; margin: 0;
  background: #fff; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); box-shadow: var(--gh-shadow-sm);
  color: var(--gh-text); font-family: var(--gh-font);
}
.gh-card--link { text-decoration: none; transition: transform .25s var(--gh-ease), box-shadow .25s var(--gh-ease), border-color .25s var(--gh-ease); }
.gh-card--link:hover, .gh-card--link:focus { color: var(--gh-text); text-decoration: none; transform: translateY(-4px); box-shadow: var(--gh-shadow); border-color: var(--gh-line-strong); }
.gh-card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 14px;
  background: var(--gh-red-50); color: var(--gh-red); transition: background-color .25s, color .25s;
}
.gh-card--link:hover .gh-card__icon { background: var(--gh-red); color: #fff; }
.gh-card__title { margin: 0 0 8px; color: var(--gh-ink); font: 700 var(--gh-fs-lg)/1.3 var(--gh-font); letter-spacing: -.012em; }
.gh-card__text { margin: 0 0 22px; color: var(--gh-muted); font: 500 .9375rem/1.6 var(--gh-font); }
.gh-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--gh-line); }
.gh-card__price { color: var(--gh-ink); font: 700 var(--gh-fs-sm)/1.3 var(--gh-font); }
.gh-card__arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gh-bg-alt); color: var(--gh-ink); transition: background-color .25s, color .25s, transform .25s var(--gh-ease); }
.gh-card--link:hover .gh-card__arrow { background: var(--gh-ink); color: #fff; transform: translateX(2px); }

/* ==========================================================================
   11. Feature grid
   ========================================================================== */
.gh-feature { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--gh-font); }
.gh-feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 20px; border-radius: 14px; background: var(--gh-red-50); color: var(--gh-red); }
.gh-feature__title { margin: 0 0 8px; color: var(--gh-ink); font: 700 var(--gh-fs-lg)/1.3 var(--gh-font); letter-spacing: -.012em; }
.gh-feature__text { margin: 0; color: var(--gh-muted); font: 500 .9375rem/1.65 var(--gh-font); }
.gh-feature__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--gh-red); font: 700 var(--gh-fs-sm)/1.3 var(--gh-font); text-decoration: none; }
.gh-feature__link:hover, .gh-feature__link:focus { color: var(--gh-red-600); text-decoration: none; }
.gh-feature__link .gh-icon { transition: transform var(--gh-dur); }
.gh-feature__link:hover .gh-icon { transform: translateX(3px); }

.gh-features--boxed .gh-feature { padding: 28px; background: #fff; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); box-shadow: var(--gh-shadow-sm); }
.gh-features--dark .gh-feature { padding: 28px; border-radius: var(--gh-radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .09); }
.gh-features--dark .gh-feature__icon { background: rgba(187, 52, 55, .18); color: var(--gh-red-soft); }
.gh-features--dark .gh-feature__title { color: #fff; }
.gh-features--dark .gh-feature__text { color: var(--gh-on-dark-muted); }
.gh-features--dark .gh-feature__link { color: var(--gh-red-soft); }
.gh-features--dark .gh-feature__link:hover { color: #fff; }

/* ==========================================================================
   12. Pricing: billing toggle, grid, plan cards, price
   ========================================================================== */
.gh-pricing-wrap { font-family: var(--gh-font); }
.gh-pricing-wrap__toggle { display: flex; justify-content: center; margin: 0 0 40px; }
.gh-pricing-wrap__note { margin-top: 32px; text-align: center; color: var(--gh-muted); font-size: var(--gh-fs-sm); }

.gh-billing { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--gh-radius-pill); background: #fff; border: 1px solid var(--gh-line); box-shadow: var(--gh-shadow-sm); }
.gh-billing__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; margin: 0; border: 0; border-radius: var(--gh-radius-pill);
  background: transparent; color: var(--gh-muted); font: 700 var(--gh-fs-sm)/1 var(--gh-font); cursor: pointer;
  transition: background-color var(--gh-dur), color var(--gh-dur);
}
.gh-billing__btn:hover { color: var(--gh-ink); }
.gh-billing__btn[aria-pressed="true"] { background: var(--gh-ink); color: #fff; }
.gh-billing__tag { padding: 4px 8px; border-radius: var(--gh-radius-pill); background: var(--gh-success-bg); color: var(--gh-success); font-size: .75rem; font-weight: 700; }
.gh-billing__btn[aria-pressed="true"] .gh-billing__tag { background: rgba(74, 222, 155, .18); color: var(--gh-success-on-dark); }
.gh-billing__btn, .gh-billing__tag { white-space: nowrap; }
@media (max-width: 420px) {
  .gh-billing { max-width: 100%; }
  .gh-billing__btn { gap: 6px; padding: 0 14px; }
}
@media (max-width: 360px) {
  .gh-billing__btn { padding: 0 10px; }
  .gh-billing__tag { padding: 3px 6px; font-size: .6875rem; }
}
@media (max-width: 340px) {
  .gh-billing { border-radius: 22px; }
  .gh-billing__btn { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 12px; border-radius: 18px; }
}

.gh-pricing { display: grid; gap: 20px; align-items: stretch; }
.gh-pricing--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gh-pricing--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; margin: 0 auto; }
@media (max-width: 1140px) { .gh-pricing--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; } }
/* 3-column groups stay on one row of compact cards down to 720px (2 columns would orphan the third card), then stack. */
@media (min-width: 720px) and (max-width: 900px) {
  .gh-pricing--3 { max-width: none; gap: 14px; }
  .gh-pricing--3 .gh-plan { padding: 26px 18px 22px; border-radius: 18px; }
  .gh-pricing--3 .gh-plan__badge { left: 18px; }
  .gh-pricing--3 .gh-plan__tagline { min-height: 4.5em; }   /* taglines wrap to 3 lines in narrow cards: keep prices/CTAs aligned */
  .gh-pricing--3 .gh-price__amount { font-size: 2rem; }
  .gh-pricing--3 .gh-price__currency { font-size: var(--gh-fs-base); }
  .gh-pricing--3 .gh-plan__price { margin-bottom: 18px; padding-bottom: 18px; }
  .gh-pricing--3 .gh-plan__cta { margin-bottom: 20px; }
  .gh-pricing--3 .gh-checklist { gap: 10px; }
  .gh-pricing--3 .gh-checklist > li { padding-left: 26px; font-size: var(--gh-fs-sm); }
  .gh-pricing--3 .gh-checklist > li::before { width: 18px; height: 18px; }
}
/* below 800px a 3-digit price + "/god." no longer fits one line in every card: put the period on its own line in all of them */
@media (min-width: 720px) and (max-width: 799.98px) { .gh-pricing--3 .gh-price__period { flex-basis: 100%; margin-top: 4px; } }
@media (max-width: 719.98px) { .gh-pricing--3 { grid-template-columns: minmax(0, 1fr); max-width: 440px; } }
@media (max-width: 640px) { .gh-pricing--4 { grid-template-columns: minmax(0, 1fr); max-width: 440px; } }

.gh-plan {
  position: relative; display: flex; flex-direction: column; padding: 30px 26px 28px; margin: 0;
  background: #fff; border: 1px solid var(--gh-line); border-radius: 20px; box-shadow: var(--gh-shadow-sm);
  color: var(--gh-text); font-family: var(--gh-font);
  transition: transform .25s var(--gh-ease), box-shadow .25s var(--gh-ease);
}
.gh-plan:hover { transform: translateY(-3px); box-shadow: var(--gh-shadow); }
.gh-plan__badge {
  position: absolute; top: -13px; left: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--gh-radius-pill); background: var(--gh-red); color: #fff; font: 700 .75rem/1 var(--gh-font); letter-spacing: .02em;
  box-shadow: var(--gh-shadow-red);
}
.gh-plan__head { margin-bottom: 22px; }
.gh-plan__name { margin: 0 0 6px; color: var(--gh-ink); font: 800 1.1875rem/1.25 var(--gh-font); letter-spacing: -.01em; }
.gh-plan__tagline { margin: 0; min-height: 3em; color: var(--gh-muted); font: 500 var(--gh-fs-sm)/1.5 var(--gh-font); }
.gh-plan__price { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--gh-line); }
.gh-plan__sub { display: flex; align-items: center; gap: 6px; min-height: 1.5em; margin: 8px 0 0; color: var(--gh-muted); font: 500 var(--gh-fs-xs)/1.45 var(--gh-font); }
.gh-plan__sub .gh-icon { color: var(--gh-success); }
.gh-plan__cta { margin-bottom: 24px; }
.gh-plan__features { margin: 0; }
.gh-plan__free.is-off { color: var(--gh-muted); }
.gh-plan__free.is-off::before {
  background-color: var(--gh-subtle);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.5a1 1 0 0 0-1 1V14a1 1 0 1 0 2 0V9.5a1 1 0 0 0-1-1Zm0-3.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.5a1 1 0 0 0-1 1V14a1 1 0 1 0 2 0V9.5a1 1 0 0 0-1-1Zm0-3.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z'/%3E%3C/svg%3E");
}

.gh-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; color: var(--gh-ink); font-family: var(--gh-font); }
.gh-price__amount { font-size: 2.625rem; font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.gh-price__currency { font-size: var(--gh-fs-lg); font-weight: 800; }
.gh-price__period { color: var(--gh-muted); font-size: var(--gh-fs-sm); font-weight: 600; }

/* featured plan = dark card */
.gh-plan--featured {
  background: radial-gradient(90% 60% at 100% 0%, rgba(124, 140, 255, .22), transparent 60%), radial-gradient(80% 50% at 0% 100%, rgba(187, 52, 55, .28), transparent 60%), var(--gh-navy-900);
  border-color: var(--gh-navy-900); color: var(--gh-on-dark-muted); box-shadow: var(--gh-shadow-lg);
}
.gh-plan--featured .gh-plan__name, .gh-plan--featured .gh-price { color: #fff; }
.gh-plan--featured .gh-plan__tagline, .gh-plan--featured .gh-plan__sub, .gh-plan--featured .gh-price__period { color: var(--gh-on-dark-muted); }
.gh-plan--featured .gh-plan__sub .gh-icon { color: var(--gh-success-on-dark); }
.gh-plan--featured .gh-plan__price { border-color: rgba(255, 255, 255, .12); }
.gh-plan--featured .gh-checklist > li { color: #E4E7F5; }
.gh-plan--featured .gh-checklist > li strong { color: #fff; }
.gh-plan--featured .gh-checklist > li::before { background-color: var(--gh-success-on-dark); }
.gh-plan--featured .gh-plan__free.is-off { color: var(--gh-on-dark-subtle); }
.gh-plan--featured .gh-plan__free.is-off::before { background-color: var(--gh-on-dark-subtle); }

/* ==========================================================================
   13. Checklist
   ========================================================================== */
.gh-checklist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-family: var(--gh-font); }
.gh-checklist > li { position: relative; padding-left: 30px; margin: 0; color: var(--gh-text); font-size: .9375rem; line-height: 1.5; }
.gh-checklist > li strong { color: var(--gh-ink); font-weight: 700; }
.gh-checklist > li::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%;
  background-color: var(--gh-success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm4.3 6.3a1 1 0 0 0-1.4 0L8.8 10.4 7.1 8.7a1 1 0 1 0-1.4 1.4l2.4 2.4a1 1 0 0 0 1.4 0l4.8-4.8a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm4.3 6.3a1 1 0 0 0-1.4 0L8.8 10.4 7.1 8.7a1 1 0 1 0-1.4 1.4l2.4 2.4a1 1 0 0 0 1.4 0l4.8-4.8a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gh-checklist--dark > li { color: #E4E7F5; }
.gh-checklist--dark > li strong { color: #fff; }
.gh-checklist--dark > li::before { background-color: var(--gh-success-on-dark); }

/* ==========================================================================
   14. Domain search + TLD chips
   ========================================================================== */
.gh-domain { font-family: var(--gh-font); }
.gh-domain__label { margin: 0 0 12px; color: var(--gh-ink); font: 700 var(--gh-fs-md)/1.3 var(--gh-font); }
.gh-domain__form { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.gh-domain__field {
  position: relative; display: flex; align-items: center; flex: 100 1 320px; min-width: 0; height: 60px;
  background: #fff; border: 1.5px solid var(--gh-line-strong); border-radius: 14px;
  transition: border-color var(--gh-dur), box-shadow var(--gh-dur);
}
.gh-domain__field:focus-within { border-color: var(--gh-ink); box-shadow: 0 0 0 4px rgba(91, 124, 255, .22); }
.gh-domain__prefix { padding-left: 20px; color: var(--gh-muted); font: 600 var(--gh-fs-md)/1 var(--gh-font); user-select: none; }
.gh-domain__input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 12px 0 2px; margin: 0; border: 0; outline: 0; background: transparent; box-shadow: none;
  color: var(--gh-ink); font: 700 var(--gh-fs-md)/1 var(--gh-font);
}
.gh-domain__input::placeholder { color: #767C96; font-weight: 600; opacity: 1; }
.gh-domain__select-wrap { position: relative; display: flex; align-items: center; height: 100%; flex: none; border-left: 1px solid var(--gh-line); }
.gh-domain__select {
  height: 100%; padding: 0 40px 0 18px; margin: 0; border: 0; outline: 0; background: transparent; border-radius: 0 14px 14px 0;
  color: var(--gh-ink); font: 800 var(--gh-fs-md)/1 var(--gh-font); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.gh-domain__select:focus-visible { outline: 3px solid var(--gh-focus); outline-offset: -3px; }
.gh-domain__chev { position: absolute; right: 14px; pointer-events: none; color: var(--gh-muted); }
.gh-domain__btn { flex: 1 0 150px; height: 60px; border-radius: 14px; font-size: var(--gh-fs-md); }
.gh-domain__error { flex: 1 1 100%; margin: 2px 0 0; color: var(--gh-red-700); font: 600 var(--gh-fs-sm)/1.4 var(--gh-font); }

.gh-domain--hero .gh-domain__field, .gh-domain--hero .gh-domain__btn { height: 64px; }
.gh-domain--compact .gh-domain__form { gap: 8px; }
.gh-domain--compact .gh-domain__field { flex-basis: 100%; height: 48px; border-radius: 12px; border-color: transparent; }
.gh-domain--compact .gh-domain__prefix { display: none; }
.gh-domain--compact .gh-domain__input { padding-left: 14px; font-size: .9375rem; }
.gh-domain--compact .gh-domain__select { padding: 0 32px 0 12px; font-size: .9375rem; border-radius: 0 12px 12px 0; }
.gh-domain--compact .gh-domain__chev { right: 10px; }
.gh-domain--compact .gh-domain__btn { flex: 1 1 100%; height: 44px; min-width: 0; border-radius: 12px; font-size: var(--gh-fs-sm); box-shadow: none; }
.gh-domain--compact .gh-domain__error { color: #FFB3B5; }

@media (max-width: 640px) {
  .gh-domain__field { flex-basis: 100%; height: 56px; }
  .gh-domain__prefix { display: none; }
  .gh-domain__input { padding-left: 16px; }
  .gh-domain__btn { flex: 1 1 100%; height: 54px; }
  .gh-domain--hero .gh-domain__field, .gh-domain--hero .gh-domain__btn { height: 56px; }
}

.gh-tlds { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.gh-tlds__chip {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 9px 14px; margin: 0;
  border: 1px solid var(--gh-line); border-radius: 12px; background: var(--gh-bg-alt); color: var(--gh-text);
  font: 600 var(--gh-fs-sm)/1.2 var(--gh-font); cursor: pointer; transition: border-color var(--gh-dur), background-color var(--gh-dur), transform var(--gh-dur);
}
.gh-tlds__chip:hover { border-color: var(--gh-ink); background: #fff; }
.gh-tlds__chip.is-selected { border-color: var(--gh-red); background: var(--gh-red-50); }
.gh-tlds__ext { color: var(--gh-ink); font-weight: 800; font-size: var(--gh-fs-md); }
.gh-tlds__price { color: var(--gh-muted); }

/* ==========================================================================
   15. FAQ (native <details>)
   ========================================================================== */
.gh-faq { display: grid; gap: 12px; font-family: var(--gh-font); }
.gh-faq__item { margin: 0; background: #fff; border: 1px solid var(--gh-line); border-radius: 16px; transition: border-color var(--gh-dur), box-shadow var(--gh-dur); }
.gh-faq__item[open] { border-color: var(--gh-line-strong); box-shadow: var(--gh-shadow-sm); }
.gh-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; margin: 0;
  list-style: none; cursor: pointer; border-radius: 16px; color: var(--gh-ink);
}
.gh-faq__q::-webkit-details-marker { display: none; }
.gh-faq__q::marker { content: ""; }
.gh-faq__title { margin: 0; color: var(--gh-ink); font: 700 var(--gh-fs-md)/1.4 var(--gh-font); letter-spacing: -.005em; }
.gh-faq__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--gh-bg-alt); color: var(--gh-ink); transition: transform .25s var(--gh-ease), background-color .25s, color .25s;
}
.gh-faq__item[open] .gh-faq__icon { transform: rotate(45deg); background: var(--gh-red); color: #fff; }
.gh-faq__a { padding: 0 22px 22px; color: var(--gh-muted); font: 500 .9688rem/1.7 var(--gh-font); }
.gh-faq__a p { margin: 0 0 10px; }
.gh-faq__a p:last-child { margin-bottom: 0; }
.gh-faq__a a { color: var(--gh-red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.gh-faq__a a:hover { color: var(--gh-red-600); }
.gh-faq__a strong { color: var(--gh-ink); }

/* ==========================================================================
   16. CTA band
   ========================================================================== */
.gh-cta {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 32px 48px;
  padding: 52px 56px; border-radius: var(--gh-radius-xl); font-family: var(--gh-font);
}
.gh-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 100% 50%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 70% 90% at 100% 50%, #000 10%, transparent 70%);
}
.gh-cta--navy { background: radial-gradient(70% 120% at 100% 0%, rgba(124, 140, 255, .26), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgba(187, 52, 55, .32), transparent 60%), var(--gh-navy-900); color: var(--gh-on-dark-muted); }
.gh-cta--red { background: radial-gradient(70% 120% at 100% 0%, rgba(255, 255, 255, .12), transparent 60%), linear-gradient(120deg, #B33134 0%, #A02A2D 55%, #85211F 100%); color: #FCE9E9; }
.gh-cta--light { background: #fff; border: 1px solid var(--gh-line); box-shadow: var(--gh-shadow); color: var(--gh-muted); }
.gh-cta--light::before { display: none; }
.gh-cta__body { display: flex; align-items: flex-start; gap: 22px; }
.gh-cta__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 60px; height: 60px; border-radius: 16px; background: rgba(255, 255, 255, .1); color: #fff; }
.gh-cta--light .gh-cta__icon { background: var(--gh-red-50); color: var(--gh-red); }
.gh-cta__eyebrow { margin: 0 0 8px; font: 700 var(--gh-fs-xs)/1.2 var(--gh-font); letter-spacing: .12em; text-transform: uppercase; color: var(--gh-red-soft); }
.gh-cta--red .gh-cta__eyebrow { color: #fff; }
.gh-cta--light .gh-cta__eyebrow { color: var(--gh-red); }
.gh-cta__title { margin: 0; color: #fff; font: 800 clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem)/1.18 var(--gh-font); letter-spacing: -.025em; text-wrap: balance; }
.gh-cta--light .gh-cta__title { color: var(--gh-ink); }
.gh-cta__text { margin: 12px 0 0; font: 500 var(--gh-fs-md)/1.6 var(--gh-font); }
.gh-cta__side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.gh-cta__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.gh-cta__note { margin: 0; font: 500 var(--gh-fs-xs)/1.4 var(--gh-font); }
@media (max-width: 900px) {
  .gh-cta { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; }
  .gh-cta__side { align-items: flex-start; }
  .gh-cta__actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .gh-cta { padding: 32px 22px; border-radius: 20px; }
  .gh-cta__body { flex-direction: column; gap: 18px; }
  .gh-cta__actions { width: 100%; }
  .gh-cta__actions .gh-btn { flex: 1 1 100%; white-space: normal; }
}

/* ==========================================================================
   17. Steps
   ========================================================================== */
.gh-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: none; font-family: var(--gh-font); }
.gh-step { position: relative; padding: 30px 28px; background: #fff; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); box-shadow: var(--gh-shadow-sm); }
.gh-step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.gh-step__num { color: var(--gh-red); font: 800 var(--gh-fs-sm)/1 var(--gh-font); letter-spacing: .08em; }
.gh-step__num::before { content: "KORAK "; color: var(--gh-muted); font-weight: 700; }
.gh-step__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--gh-ink); color: #fff; }
.gh-step__title { margin: 0 0 8px; color: var(--gh-ink); font: 700 var(--gh-fs-lg)/1.3 var(--gh-font); letter-spacing: -.012em; }
.gh-step__text { margin: 0; color: var(--gh-muted); font: 500 .9375rem/1.65 var(--gh-font); }
.gh-step:not(:last-child)::after {
  content: ""; position: absolute; top: 54px; right: -24px; width: 24px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--gh-line-strong) 0 4px, transparent 4px 8px);
}
@media (max-width: 900px) {
  .gh-steps { grid-template-columns: 1fr; gap: 16px; }
  .gh-step:not(:last-child)::after { display: none; }
}

/* ==========================================================================
   18. Breadcrumb
   ========================================================================== */
.gh-breadcrumb { margin: 0 0 22px; font: 600 var(--gh-fs-sm)/1.3 var(--gh-font); }
.gh-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gh-breadcrumb__item { display: inline-flex; align-items: center; gap: 6px; color: var(--gh-muted); }
.gh-breadcrumb__item a { color: var(--gh-muted); text-decoration: none; }
.gh-breadcrumb__item a:hover { color: var(--gh-ink); text-decoration: underline; text-underline-offset: 3px; }
.gh-breadcrumb__item [aria-current] { color: var(--gh-ink); }
.gh-breadcrumb__sep { color: var(--gh-subtle); }
.gh-breadcrumb--dark .gh-breadcrumb__item, .gh-breadcrumb--dark .gh-breadcrumb__item a { color: var(--gh-on-dark-muted); }
.gh-breadcrumb--dark .gh-breadcrumb__item a:hover, .gh-breadcrumb--dark .gh-breadcrumb__item [aria-current] { color: #fff; }
.gh-breadcrumb--dark .gh-breadcrumb__sep { color: var(--gh-on-dark-subtle); }

/* ==========================================================================
   19. Page hero (inner pages)
   ========================================================================== */
.gh-page-hero { padding: 64px 0 76px; overflow: hidden; font-family: var(--gh-font); }
.gh-page-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.gh-page-hero__content { max-width: 760px; }
.gh-page-hero__title { margin: 0; color: #fff; font: 800 clamp(2.125rem, 1.5rem + 2.4vw, 3.375rem)/1.08 var(--gh-font); letter-spacing: -.032em; text-wrap: balance; }
.gh-page-hero__lead { margin: 20px 0 0; max-width: 640px; color: var(--gh-on-dark-muted); font: 500 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.65 var(--gh-font); text-wrap: pretty; }
.gh-page-hero__price { display: inline-flex; margin: 22px 0 0; padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: #fff; font: 700 var(--gh-fs-sm)/1.2 var(--gh-font); }
.gh-page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.gh-page-hero__bullets { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 30px 0 0; padding: 0; list-style: none; }
.gh-page-hero__bullets li { display: inline-flex; align-items: center; gap: 9px; color: #E4E7F5; font: 600 var(--gh-fs-sm)/1.3 var(--gh-font); }
.gh-page-hero__bullets .gh-icon { color: var(--gh-success-on-dark); }
.gh-page-hero--center .gh-page-hero__content { margin: 0 auto; text-align: center; }
.gh-page-hero--center .gh-page-hero__lead { margin-left: auto; margin-right: auto; }
.gh-page-hero--center .gh-breadcrumb__list, .gh-page-hero--center .gh-page-hero__actions, .gh-page-hero--center .gh-page-hero__bullets { justify-content: center; }
.gh-page-hero--compact { padding: 44px 0 52px; }
.gh-page-hero--compact .gh-page-hero__title { font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem); }
.gh-page-hero--split .gh-page-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
/* min-width:0 keeps any '1fr' column (also page overrides) from growing past the screen; the hero clips overflow */
.gh-page-hero__content, .gh-page-hero__aside { min-width: 0; }
@media (max-width: 960px) {
  .gh-page-hero { padding: 48px 0 56px; }
  .gh-page-hero--split .gh-page-hero__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .gh-page-hero__actions .gh-btn { flex: 1 1 100%; white-space: normal; } }

/* ==========================================================================
   20. Tables & comparison table
   ========================================================================== */
.gh-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); background: #fff; box-shadow: var(--gh-shadow-sm); }
.gh-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; color: var(--gh-text); font: 500 var(--gh-fs-sm)/1.5 var(--gh-font); }
.gh-table th, .gh-table td { padding: 15px 18px; border: 0; border-bottom: 1px solid var(--gh-line); text-align: left; vertical-align: middle; }
.gh-table thead th { background: var(--gh-bg-alt); color: var(--gh-ink); font-weight: 700; font-size: var(--gh-fs-xs); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.gh-table tbody tr:last-child > * { border-bottom: 0; }
.gh-table tbody tr:hover > * { background: #FAFBFD; }
.gh-table .gh-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gh-ink); font-weight: 700; }

.gh-compare__table { --gh-first: 220px; min-width: calc(var(--gh-first) + var(--gh-cols, 4) * 128px); table-layout: fixed; }
.gh-compare__table thead th:first-child { width: var(--gh-first); }
@media (max-width: 640px) { .gh-compare__table { --gh-first: 150px; } .gh-compare__table th, .gh-compare__table td { padding: 12px 12px; } }
.gh-compare__table th[scope="row"] { position: sticky; left: 0; z-index: 1; background: #fff; color: var(--gh-ink); font-weight: 600; }
.gh-compare__table thead th { position: sticky; top: 0; text-transform: none; letter-spacing: -.005em; font-size: var(--gh-fs-base); background: #fff; vertical-align: bottom; padding-top: 22px; }
.gh-compare__table td, .gh-compare__table thead th:not(:first-child), .gh-compare__table tfoot td { text-align: center; }
.gh-compare__corner { left: 0; z-index: 2 !important; }
.gh-compare__name { display: block; color: var(--gh-ink); font-weight: 800; }
.gh-compare__price { display: block; margin-top: 4px; color: var(--gh-muted); font-size: var(--gh-fs-xs); font-weight: 600; }
.gh-compare__table .is-featured { background: #FBF6F6; }
.gh-compare__table thead th.is-featured { box-shadow: inset 0 3px 0 var(--gh-red); }
.gh-compare__table tbody tr:hover > .is-featured { background: #F8EFEF; }
.gh-compare__group th { background: var(--gh-bg-alt) !important; color: var(--gh-muted) !important; font-size: var(--gh-fs-xs); font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; }
.gh-compare__yes { display: inline-flex; color: var(--gh-success); }
.gh-compare__no { color: var(--gh-subtle); }
.gh-compare__table tfoot td, .gh-compare__table tfoot th { border-top: 1px solid var(--gh-line); border-bottom: 0; padding-top: 18px; padding-bottom: 18px; background: #fff; }

/* ==========================================================================
   21. Cookie consent banner + checkbox
   ========================================================================== */
.gh-cookie {
  position: fixed; left: 20px; bottom: 20px; z-index: 990; width: min(440px, calc(100vw - 40px));
  padding: 22px; background: #fff; border: 1px solid var(--gh-line); border-radius: 20px; box-shadow: var(--gh-shadow-lg);
  color: var(--gh-text); font: 500 var(--gh-fs-sm)/1.55 var(--gh-font);
  animation: gh-cookie-in .4s var(--gh-ease) both;
}
@keyframes gh-cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.gh-cookie__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.gh-cookie__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gh-red-50); color: var(--gh-red); }
.gh-cookie__title { margin: 0; color: var(--gh-ink); font: 800 var(--gh-fs-md)/1.3 var(--gh-font); }
.gh-cookie__text { margin: 0 0 16px; color: var(--gh-muted); }
.gh-cookie__text a { color: var(--gh-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.gh-cookie__prefs { display: grid; gap: 8px; margin: 0 0 16px; }
.gh-cookie__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gh-cookie__more { margin-left: auto; padding: 8px 4px; border: 0; background: none; color: var(--gh-ink); font: 700 var(--gh-fs-sm)/1 var(--gh-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gh-cookie__more:hover { color: var(--gh-red); }
@media (max-width: 640px) {
  .gh-cookie { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 18px; border-radius: 18px; }
  .gh-cookie__actions .gh-btn { flex: 1 1 auto; }
  .gh-cookie__more { margin-left: 0; }
}

.gh-check { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px; border: 1px solid var(--gh-line); border-radius: 12px; cursor: pointer; font-family: var(--gh-font); }
.gh-check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.gh-check__box { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid var(--gh-line-strong); border-radius: 7px; background: #fff; color: transparent; transition: background-color var(--gh-dur), border-color var(--gh-dur), color var(--gh-dur); }
.gh-check input:checked + .gh-check__box { background: var(--gh-ink); border-color: var(--gh-ink); color: #fff; }
.gh-check input:disabled + .gh-check__box { background: var(--gh-muted); border-color: var(--gh-muted); }
.gh-check input:focus-visible + .gh-check__box { outline: 3px solid var(--gh-focus); outline-offset: 2px; }
.gh-check__text { display: grid; gap: 2px; }
.gh-check__text strong { color: var(--gh-ink); font-size: var(--gh-fs-sm); }
.gh-check__text small { color: var(--gh-muted); font-size: var(--gh-fs-xs); line-height: 1.45; }

/* ==========================================================================
   22. Prose (legal documents, long text)
   ========================================================================== */
.gh-prose { max-width: 760px; color: var(--gh-text); font: 400 var(--gh-fs-md)/1.75 var(--gh-font); }
.gh-prose > :first-child { margin-top: 0; }
.gh-prose h2 { margin: 2.2em 0 .6em; color: var(--gh-ink); font: 800 1.5rem/1.3 var(--gh-font); letter-spacing: -.02em; scroll-margin-top: calc(var(--gh-header-h) + 20px); }
.gh-prose h3 { margin: 1.8em 0 .5em; color: var(--gh-ink); font: 700 1.1875rem/1.4 var(--gh-font); letter-spacing: -.01em; scroll-margin-top: calc(var(--gh-header-h) + 20px); }
.gh-prose p, .gh-prose ul, .gh-prose ol { margin: 0 0 1.1em; }
.gh-prose ul, .gh-prose ol { padding-left: 1.4em; }
.gh-prose li { margin: .35em 0; }
.gh-prose li::marker { color: var(--gh-red); }
.gh-prose a { color: var(--gh-red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gh-prose a:hover { color: var(--gh-red-600); }
.gh-prose strong { color: var(--gh-ink); font-weight: 700; }
.gh-prose hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--gh-line); }
.gh-prose blockquote { margin: 1.5em 0; padding: 16px 20px; border-left: 4px solid var(--gh-red); border-radius: 0 12px 12px 0; background: var(--gh-bg-alt); color: var(--gh-ink); }
.gh-prose table { width: 100%; margin: 1.5em 0; border-collapse: collapse; font-size: var(--gh-fs-sm); }
.gh-prose th, .gh-prose td { padding: 10px 12px; border: 1px solid var(--gh-line); text-align: left; }
.gh-prose th { background: var(--gh-bg-alt); color: var(--gh-ink); }
.gh-prose .gh-prose__meta { color: var(--gh-muted); font-size: var(--gh-fs-sm); }

/* Table of contents for legal docs */
.gh-toc { position: sticky; top: calc(var(--gh-header-h) + 24px); padding: 22px; background: #fff; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); font-family: var(--gh-font); }
.gh-toc__title { margin: 0 0 12px; color: var(--gh-muted); font: 700 var(--gh-fs-xs)/1.2 var(--gh-font); letter-spacing: .1em; text-transform: uppercase; }
.gh-toc ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: gh-toc; }
.gh-toc a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--gh-text); font: 600 var(--gh-fs-sm)/1.4 var(--gh-font); text-decoration: none; }
.gh-toc a:hover, .gh-toc a:focus { background: var(--gh-bg-alt); color: var(--gh-ink); text-decoration: none; }

/* ==========================================================================
   23. Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .gh-btn, .gh-card--link, .gh-plan, .gh-mega, .gh-drawer__panel, .gh-drawer__backdrop, .gh-faq__icon, .gh-cookie,
  .gh-btn .gh-icon, .gh-card__arrow, .gh-nav__chevron { transition: none !important; animation: none !important; }
  .gh-card--link:hover, .gh-plan:hover { transform: none; }
}

/* Service cards: compact list layout on phones */
@media (max-width: 640px) {
  .gh-services { gap: 10px; }
  .gh-service { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "icon title arrow" "icon price arrow"; align-items: center; column-gap: 14px; row-gap: 2px; padding: 16px 16px 16px 14px; border-radius: 16px; }
  .gh-service .gh-card__icon { grid-area: icon; width: 48px; height: 48px; margin: 0; border-radius: 13px; }
  .gh-service .gh-card__title { grid-area: title; margin: 0; font-size: var(--gh-fs-md); }
  .gh-service .gh-card__text { display: none; }
  .gh-service .gh-card__foot { display: contents; }
  .gh-service .gh-card__price { grid-area: price; color: var(--gh-muted); font-size: var(--gh-fs-xs); font-weight: 600; }
  .gh-service .gh-card__arrow { grid-area: arrow; }
  .gh-card--link.gh-service:hover { transform: none; }
}