/* 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; }
  nav.hx-nav { width: 100%; }
}

/* 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; }