/* Helix GTM Consulting brand layer for GTM Alpha and its connector sites.
   Palette (only these five colours): oxblood #641220, signal #C1121F, paper #FAF8F6, ink #1A0E10, clay #EAD9D5.
   Fonts: Archivo (text and display), IBM Plex Mono (eyebrows, navigation, footer). Georgia italic for the alpha mark.
   Loaded after each page's own styles, so it sets the shared header, hero, footer and base type. */
:root {
  --hx-ox: #641220;
  --hx-signal: #C1121F;
  --hx-paper: #FAF8F6;
  --hx-ink: #1A0E10;
  --hx-clay: #EAD9D5;
  --hx-ink-72: rgba(26, 14, 16, 0.72);
  --hx-ink-55: rgba(26, 14, 16, 0.55);
  --hx-paper-80: rgba(250, 248, 246, 0.8);
}

html { scroll-padding-top: 84px; }
body {
  background: var(--hx-paper) !important;
  color: var(--hx-ink);
  font-family: 'Archivo', Arial, sans-serif !important;
}
h1, h2, h3, h4 { font-family: 'Archivo', Arial, sans-serif !important; }
code, pre, kbd, samp { font-family: 'IBM Plex Mono', monospace !important; }
a { color: var(--hx-signal); }

.hx-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hx-mono { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 1.7px; text-transform: uppercase; font-weight: 600; }

/* Header: identical on every page */
header.hx-header {
  position: sticky !important; top: 0 !important; left: auto !important; right: auto !important; width: auto !important;
  z-index: 1500 !important;
  background: var(--hx-paper) !important;
  border-bottom: 1.5px solid var(--hx-clay) !important;
  box-shadow: none !important; backdrop-filter: none !important;
  padding: 0 !important; margin: 0 !important;
}
.hx-header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.hx-lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none !important; color: var(--hx-ink) !important; flex-shrink: 0; }
.hx-alpha {
  width: 38px; height: 38px; background: var(--hx-signal); color: var(--hx-paper);
  display: grid; place-items: center;
  font-family: Georgia, serif; font-style: italic; font-size: 24px; line-height: 1;
}
.hx-wordmark { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: 1.9px; text-transform: uppercase; font-weight: 600; color: var(--hx-ink); }
nav.hx-nav {
  display: flex !important; flex-wrap: nowrap; align-items: center; gap: 4px;
  overflow-x: auto; scrollbar-width: none; background: none !important; padding: 0 !important; margin: 0 !important;
}
nav.hx-nav::-webkit-scrollbar { display: none; }
nav.hx-nav a {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600;
  color: var(--hx-ink) !important; text-decoration: none !important; white-space: nowrap;
  padding: 8px 10px; border-bottom: 2px solid transparent;
}
nav.hx-nav a:hover { color: var(--hx-signal) !important; }
nav.hx-nav a.is-active { color: var(--hx-signal) !important; border-bottom-color: var(--hx-signal); }
nav.hx-nav a.hx-cta { background: var(--hx-signal); color: var(--hx-paper) !important; border-bottom: 0; margin-left: 6px; }
nav.hx-nav a.hx-cta:hover { background: var(--hx-ox); color: var(--hx-paper) !important; }
@media (max-width: 980px) {
  .hx-header-row { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 12px; padding-bottom: 6px; }
  header.hx-header { position: relative !important; } /* run 4: the wrapped menu is taller, so the header scrolls away on phones */
  nav.hx-nav { width: 100%; flex-wrap: wrap !important; overflow-x: visible; row-gap: 2px; justify-content: flex-start !important; }
  nav.hx-nav a { padding: 7px 8px; }
  nav.hx-nav a.hx-cta { margin-left: 0; }
}

/* Hero: the same background style on every page */
.hx-hero {
  background: var(--hx-paper) !important; background-image: none !important;
  color: var(--hx-ink) !important;
  margin-top: 0 !important; padding: 56px 0 40px !important;
  border-bottom: 1.5px solid var(--hx-clay);
  text-align: left !important; position: relative; overflow: visible !important;
}
.hx-hero::before, .hx-hero::after { display: none !important; content: none !important; }
.hx-hero .hero-content, .hx-hero .section-header, .hx-hero .hx-hero-inner { text-align: left !important; max-width: 820px; margin: 0 !important; }
.hx-hero h1 {
  font-family: 'Archivo', sans-serif !important; font-weight: 900 !important; color: var(--hx-ink) !important;
  font-size: clamp(34px, 5.4vw, 56px) !important; line-height: 1.08 !important; letter-spacing: -0.02em; margin: 12px 0 16px !important;
  background: none !important; -webkit-text-fill-color: currentColor !important;
}
.hx-hero p, .hx-hero .hero-subtitle, .hx-hero .section-subtitle { color: var(--hx-ink-72) !important; font-size: 17.5px !important; max-width: 64ch; margin-left: 0 !important; }
.hx-hero .hero-badge, .hx-hero .section-badge, .hx-hero .hx-eyebrow {
  display: inline-block; background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: 'IBM Plex Mono', monospace !important; font-size: 11.5px !important; letter-spacing: 1.7px; text-transform: uppercase; font-weight: 600 !important;
  color: var(--hx-signal) !important;
}
.hx-hero .hero-badge * { color: var(--hx-signal) !important; }
.hx-hero .hero-cta { justify-content: flex-start !important; margin-top: 22px; }
.hx-hero .btn-primary { background: var(--hx-signal) !important; color: var(--hx-paper) !important; border: 0 !important; box-shadow: none !important; }
.hx-hero .btn-primary:hover { background: var(--hx-ox) !important; }
.hx-hero .btn-secondary { background: transparent !important; color: var(--hx-ink) !important; border: 1.5px solid var(--hx-ink) !important; box-shadow: none !important; }

/* Footer: identical on every page */
footer.hx-footer {
  background: var(--hx-paper) !important; color: var(--hx-ink-72) !important;
  border-top: 1.5px solid var(--hx-clay) !important; margin-top: 56px !important; padding: 36px 0 30px !important;
  text-align: left !important; font-size: 14px;
}
.hx-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.hx-footer h4, .hx-footer .hx-foot-h { font-family: 'IBM Plex Mono', monospace !important; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; color: var(--hx-ink) !important; margin: 0 0 12px; }
.hx-footer p { color: var(--hx-ink-72) !important; margin: 10px 0; line-height: 1.6; }
.hx-footer a { display: block; color: var(--hx-ink-72) !important; text-decoration: none; margin: 6px 0; }
.hx-footer a:hover { color: var(--hx-signal) !important; }
.hx-footer .hx-lockup { display: inline-flex; margin: 0 0 6px; }
.hx-footer-bottom { border-top: 1.5px solid var(--hx-clay); margin-top: 26px; padding-top: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--hx-ink-72); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; }
.hx-footer-bottom a { display: inline; margin: 0; }
@media (max-width: 820px) { .hx-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .hx-footer-grid { grid-template-columns: 1fr; } }

/* Testing notice */
#testing-notice { font-family: 'Archivo', Arial, sans-serif !important; background: var(--hx-ox) !important; color: var(--hx-paper) !important; }

/* Question and answer blocks added for answer engines */
.hx-qa { max-width: 1200px; margin: 48px auto 0; padding: 0 24px; }
.hx-qa h2 { font-weight: 900; font-size: clamp(24px, 3.4vw, 32px); color: var(--hx-ink); margin: 0 0 18px; }
.hx-qa details { border-top: 1.5px solid var(--hx-clay); padding: 14px 0; }
.hx-qa details:last-of-type { border-bottom: 1.5px solid var(--hx-clay); }
.hx-qa summary { cursor: pointer; font-weight: 700; color: var(--hx-ink); font-size: 17px; }
.hx-qa details p { color: var(--hx-ink-72); margin: 10px 0 0; max-width: 80ch; }

/* Payment status pages */
.hx-status{display:block !important;min-height:0 !important;}
.hx-status > .container{margin:48px auto !important;}

/* Dark sections: headings on ink need paper text (the index integration heading was ink on ink before) */
#integration .section-title { color: var(--hx-paper) !important; }
#integration .section-subtitle { color: var(--hx-paper-80) !important; }

/* Banners under the shared header: remove the old offset left from the previous fixed header */
.status-banner, .launch-banner { margin-top: 0 !important; }

/* Integration panels: stack the text and code columns on small screens so nothing is cut off */
@media (max-width: 760px) {
  .integration-content { grid-template-columns: 1fr !important; }
  .integration-content > * { min-width: 0; }
  .code-block, .code-container, pre { max-width: 100%; overflow-x: auto; }
  .integration-text h3 { overflow-wrap: anywhere; }
}

/* Byline and last-updated date under each hero */
.hx-hero .hx-byline { font-size: 14px !important; color: var(--hx-ink-72) !important; margin-top: 10px; }
.hx-hero .hx-byline a { color: var(--hx-ink) !important; text-decoration: underline !important; }

/* run 4: long paths and addresses wrap instead of widening the page on phones */
.file-location, .code-block, .hx-addr, code { overflow-wrap: anywhere; }
.code-block { max-width: 100%; overflow-x: auto; }
.docs-content, .main-content > * { min-width: 0; } /* grid children may shrink, so code blocks scroll inside their box on phones */

/* run 4: accessibility (Lighthouse): muted text meets 4.5:1; inline code on light backgrounds is readable;
   links inside running text are underlined; a visually hidden heading keeps the heading order */
:root { --text-light: rgba(26, 14, 16, 0.72); }
.docs-section p code, .docs-section li code, .docs-section td code { color: var(--hx-ink); background: rgba(26, 14, 16, 0.06); padding: 1px 4px; }
.container p a:not([class]), .container li a:not([class]) { text-decoration: underline; }
.hx-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }