/* Helix GTM design layer (run 7, 26 September 2026): the approved design sample applied to every page of the 7 sites.
   Loaded LAST on every page, after each site's own styles, brand.css and app.css, so it restyles the shared classes
   without touching content, forms or field names. Helix colours only: oxblood #641220, signal #C1121F,
   paper #FAF8F6, ink #1A0E10, clay #EAD9D5. Type: Archivo (display and text) and IBM Plex Mono (labels). */

:root {
  --h7-ox: #641220; --h7-signal: #C1121F; --h7-paper: #FAF8F6; --h7-ink: #1A0E10; --h7-clay: #EAD9D5;
  --h7-ink-70: rgba(26, 14, 16, .72); --h7-ink-12: rgba(26, 14, 16, .12); --h7-paper-70: rgba(250, 248, 246, .78);
  --h7-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --h7-display: "Archivo", Arial, sans-serif;
}

/* ---------- base ---------- */
body { font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
h1, h2, h3 { letter-spacing: -.025em; }
img, svg { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--h7-signal) !important; outline-offset: 3px; }
.hx7-label, .hx-eyebrow, .hx-card-kicker, .hx-foot-h { font-family: var(--h7-mono) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase; }

/* ---------- header ---------- */
header.hx-header { border-bottom: 1.5px solid var(--h7-ink-12) !important; }
.hx-header-row { min-height: 64px; padding-top: 10px !important; padding-bottom: 10px !important; }
nav.hx-nav a { font-size: 12px; letter-spacing: .1em; border-bottom: 0 !important; }
nav.hx-nav a:hover { background: var(--h7-clay); color: var(--h7-ink) !important; }
nav.hx-nav a.is-active { color: var(--h7-ox) !important; box-shadow: inset 0 -2px 0 var(--h7-signal); }
nav.hx-nav a.hx-cta { background: var(--h7-ox); }
nav.hx-nav a.hx-cta:hover { background: var(--h7-signal); color: var(--h7-paper) !important; }

/* ---------- hero: sized so the whole first screen fits (G2) ---------- */
.hx-hero { padding: clamp(24px, 4.5vh, 64px) 0 clamp(28px, 5vh, 64px) !important; border-bottom: 1.5px solid var(--h7-ink-12) !important; }
.hx-hero .hx-hero-inner, .hx-hero .hero-content, .hx-hero .section-header { max-width: 980px; }
.hx-hero h1 {
  font-weight: 800 !important; letter-spacing: -.035em !important; line-height: .98 !important;
  font-size: clamp(34px, min(6.4vw, 8.2vh), 88px) !important; margin: 10px 0 14px !important; max-width: 18ch;
}
.hx-hero .hx-eyebrow, .hx-hero .hero-badge, .hx-hero .section-badge { color: var(--h7-ox) !important; display: inline-flex !important; align-items: baseline; gap: 10px; }
.hx-hero .hx-eyebrow::after { content: ""; width: 72px; border-bottom: 2px dotted var(--h7-signal); transform: translateY(-4px); }
.hx-hero p, .hx-hero .hx-lead, .hx-hero .hero-subtitle { font-size: clamp(16px, 1.25vw + 8px, 20px) !important; line-height: 1.5; }
.hx-hero .hx-byline { font-family: var(--h7-mono); font-size: 12.5px !important; }
.hx-cta-row, .hx-hero .hero-cta { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; margin-top: 18px !important; }

/* ---------- buttons: a solid oxblood block and an underlined text link ---------- */
.hx-btn, .hx-hero .btn-primary, .btn-primary {
  background: var(--h7-ox) !important; color: var(--h7-paper) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: var(--h7-mono) !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .08em; text-transform: uppercase;
  padding: 13px 18px !important; text-decoration: none !important; display: inline-block;
}
.hx-btn:hover, .hx-btn:focus-visible, .btn-primary:hover { background: var(--h7-signal) !important; color: var(--h7-paper) !important; }
.hx-btn-ghost, .hx-hero .btn-secondary, .btn-secondary {
  background: transparent !important; color: var(--h7-ink) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: var(--h7-display) !important; font-weight: 700 !important; font-size: 18px !important; letter-spacing: -.01em; text-transform: none;
  padding: 6px 0 !important; text-decoration: underline !important; text-decoration-thickness: 3px !important; text-underline-offset: 7px; text-decoration-color: var(--h7-signal) !important;
}
.hx-btn-ghost:hover, .btn-secondary:hover { color: var(--h7-ox) !important; background: transparent !important; }

/* ---------- sections: a signal square and a rule open each one ---------- */
.hx-section { padding-top: clamp(40px, 6vw, 72px) !important; }
.hx-section + .hx-section { border-top: 1.5px solid var(--h7-ink-12); }
.hx-section > h2, .hx-qa > h2, .section-title {
  font-weight: 800 !important; letter-spacing: -.035em !important; line-height: 1 !important;
  font-size: clamp(30px, 4.6vw, 56px) !important; max-width: 20ch; color: var(--h7-ink);
}
.hx-section > h2::before, .hx-qa > h2::before { content: ""; display: block; width: 10px; height: 10px; background: var(--h7-signal); margin: 0 0 18px; }
.hx-sub, .hx-prose { color: var(--h7-ink-70); }

/* ---------- cards: a ruled grid, not floating boxes ---------- */
.hx-cards { gap: 0 !important; border-top: 1.5px solid var(--h7-ink); border-left: 1.5px solid var(--h7-ink); }
.hx-card, .hx-card-static { border: 0 !important; border-right: 1.5px solid var(--h7-ink) !important; border-bottom: 1.5px solid var(--h7-ink) !important; border-radius: 0 !important; box-shadow: none !important; background: var(--h7-paper) !important; }
.hx-card h3, .hx-card-static h3 { font-size: 22px !important; letter-spacing: -.02em; }
.hx-card a:hover { background: var(--h7-clay) !important; }
.feature-card, .pricing-card, .tool-card { border-radius: 0 !important; box-shadow: none !important; border: 1.5px solid var(--h7-ink) !important; }

/* ---------- tables, panels, code ---------- */
.hx-table th { font-family: var(--h7-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: var(--h7-ink) !important; color: var(--h7-paper) !important; }
.hx-table td, .hx-table th { border-color: var(--h7-ink-12) !important; }
.hx-panel { border: 1.5px solid var(--h7-ink) !important; border-top: 6px solid var(--h7-ox) !important; border-radius: 0 !important; box-shadow: none !important; }
.hx-addr, .hx-code-block, pre { border-radius: 0 !important; }

/* ---------- forms ---------- */
.hx-field input[type=text], .hx-field input[type=number], .hx-field select, .hx-field textarea { border: 1.5px solid var(--h7-ink) !important; border-radius: 0 !important; background: #fff; }

/* ---------- questions: square plus and minus toggles ---------- */
.hx-qa details { border-top: 1.5px solid var(--h7-ink-12) !important; }
.hx-qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 6px 0; font-family: var(--h7-mono); font-size: 15px; font-weight: 600; }
.hx-qa summary::-webkit-details-marker { display: none; }
.hx-qa summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1.5px solid var(--h7-ink); font-size: 18px; line-height: 1; }
.hx-qa details[open] summary::after { content: "\2212"; background: var(--h7-signal); border-color: var(--h7-signal); color: var(--h7-paper); }
.hx-qa details p { padding-left: 14px; border-left: 2px solid var(--h7-signal); }

/* ---------- credentials band (D2b): straight after the hero on home pages ---------- */
.hx7-cred { background: var(--h7-clay); padding: clamp(32px, 5vw, 56px) 0; border-bottom: 1.5px solid var(--h7-ink-12); }
.hx7-cred-grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.hx7-cred-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; box-shadow: 8px 8px 0 var(--h7-ox); }
.hx7-cred h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1; margin: 6px 0 6px; }
.hx7-label { color: var(--h7-ox); margin: 0; }
.hx7-role { margin: 0 0 16px; font-size: 18px; color: var(--h7-ink-70); }
.hx7-facts, .hx7-results, .hx7-awards { list-style: none; margin: 0; padding: 0; }
.hx7-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 16px; }
.hx7-facts b { display: block; font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--h7-ox); }
.hx7-facts span { font-size: 14px; color: var(--h7-ink-70); }
.hx7-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--h7-ink); margin-bottom: 14px; }
.hx7-results li { padding: 12px 14px 12px 0; }
.hx7-results li + li { border-left: 1.5px solid rgba(26, 14, 16, .25); padding-left: 14px; }
.hx7-results b { display: block; font-size: 20px; letter-spacing: -.02em; }
.hx7-results span { display: block; font-size: 14px; color: var(--h7-ink-70); }
.hx7-awards li { font-size: 14.5px; padding: 4px 0 4px 16px; position: relative; }
.hx7-awards li::before { content: ""; position: absolute; left: 0; top: .75em; width: 7px; height: 7px; background: var(--h7-signal); }
.hx7-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; }
.hx7-links a, .hx7-built-links a, .hx7-strip a { color: var(--h7-ink) !important; font-weight: 700; text-decoration: underline; text-decoration-color: var(--h7-signal); text-underline-offset: 4px; }
@media (max-width: 760px) { .hx7-cred-grid { grid-template-columns: 1fr; } .hx7-cred-photo { max-width: 160px; } .hx7-results { grid-template-columns: 1fr; } .hx7-results li + li { border-left: 0; padding-left: 0; border-top: 1px solid rgba(26, 14, 16, .2); } }

/* ---------- "Built by" strip (D2c): tool and plugin pages ---------- */
.hx7-strip { background: var(--h7-clay); border-bottom: 1.5px solid var(--h7-ink-12); }
.hx7-strip-row { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.hx7-strip-photo img { width: 44px; height: 44px; display: block; }
.hx7-strip p { margin: 0; flex: 1 1 260px; font-size: 15px; }

/* ---------- footer (D2d): ink band with the Built by block and a large wordmark ---------- */
footer.hx-footer { background: var(--h7-ink) !important; color: var(--h7-paper-70) !important; border-top: 0 !important; margin-top: 64px !important; padding-top: 40px !important; }
footer.hx-footer p, footer.hx-footer a { color: var(--h7-paper-70) !important; }
footer.hx-footer a:hover { color: var(--h7-paper) !important; text-decoration: underline; text-decoration-color: var(--h7-signal); }
footer.hx-footer .hx-foot-h, footer.hx-footer h4 { color: var(--h7-clay) !important; }
footer.hx-footer .hx-wordmark { color: var(--h7-paper) !important; }
footer.hx-footer .hx-footer-bottom { border-top-color: rgba(250, 248, 246, .2) !important; color: var(--h7-paper-70) !important; }
.hx7-built { display: flex; gap: 16px; align-items: flex-start; padding: 0 0 28px; margin: 0 0 28px; border-bottom: 1.5px solid rgba(250, 248, 246, .2); }
.hx7-built-photo img { width: 72px; height: 72px; display: block; }
.hx7-built p { margin: 0 0 6px !important; }
.hx7-built-h { color: var(--h7-paper) !important; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.hx7-built-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer.hx-footer .hx7-built-links a { display: inline; margin: 0; color: var(--h7-paper) !important; }
.hx7-giant { font-family: var(--h7-display); font-weight: 800; letter-spacing: -.05em; line-height: .85; font-size: clamp(52px, 14vw, 200px); color: var(--h7-clay) !important; margin: 28px 0 8px !important; white-space: nowrap; overflow: hidden; }

/* ---------- About page (D2a) ---------- */
.hx7-about-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.hx7-about-grid .hx7-cred-photo img { box-shadow: 10px 10px 0 var(--h7-clay); }
.hx7-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--h7-ink); }
.hx7-list li { padding: 12px 0; border-bottom: 1.5px solid var(--h7-ink-12); }
.hx7-list b { font-weight: 800; }
@media (max-width: 760px) { .hx7-about-grid { grid-template-columns: 1fr; } .hx7-about-grid .hx7-cred-photo { max-width: 200px; } }

/* ---------- hub home (the approved sample) ---------- */
.h7-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.h7-hero-grid h1 .h7-not { color: var(--h7-signal); }
@media (max-width: 900px) { .h7-hero-grid { grid-template-columns: 1fr; } }
.h7-demo { margin: 0; width: 100%; max-width: 560px; justify-self: end; }
.h7-demo svg { display: block; width: 100%; height: auto; background: var(--h7-ink); box-shadow: 8px 8px 0 var(--h7-clay); }
.h7-demo text { font-family: var(--h7-mono); white-space: pre; }
.h7-demo figcaption { font-family: var(--h7-mono); font-size: 12.5px; color: var(--h7-ink-70); margin-top: 12px; }
@media (max-width: 900px) { .h7-demo { justify-self: start; } }
.t-line { animation: t-in .5s steps(24, end) both; clip-path: inset(0 100% 0 0); }
.t1 { animation-delay: .2s; } .t2 { animation-delay: .6s; } .t3 { animation-delay: 1.1s; } .t4 { animation-delay: 1.7s; } .t5 { animation-delay: 2.2s; }
.t6 { animation-delay: 2.7s; } .t7 { animation-delay: 3.2s; } .t8 { animation-delay: 3.7s; } .t9 { animation-delay: 4.2s; }
.t-cursor { animation: blink 1s steps(1) 4.8s infinite both; opacity: 0; }
@keyframes t-in { to { clip-path: inset(0 0 0 0); } }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } }
.h7-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 28px; }
.h7-col { border-left: 2px solid var(--h7-ox); padding: 2px 0 2px 18px; }
.h7-col h3 { font-size: 21px; margin: 8px 0 6px; }
.h7-col p { margin: 0; color: var(--h7-ink-70); }
@media (max-width: 820px) { .h7-cols { grid-template-columns: 1fr; } }
.h7-proof { background: var(--h7-clay); padding: clamp(40px, 6vw, 72px) 0; margin-top: clamp(40px, 6vw, 72px); }
.h7-proof h2 { font-size: clamp(38px, 7vw, 96px); font-weight: 800; letter-spacing: -.04em; line-height: .95; margin: 0; max-width: 14ch; }
.h7-note { font-family: var(--h7-mono); font-size: 13px; color: var(--h7-ink-70); margin: 18px 0 0; max-width: 72ch; }
.h7-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--h7-ink); margin-top: 32px; }
.h7-stat { padding: 18px 16px 4px 0; }
.h7-stat + .h7-stat { border-left: 1.5px solid rgba(26, 14, 16, .25); padding-left: 16px; }
.h7-stat b { display: block; font-size: clamp(40px, 5.5vw, 72px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--h7-ox); }
.h7-stat span { display: block; margin-top: 8px; font-size: 15px; color: var(--h7-ink-70); }
@media (max-width: 820px) { .h7-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .h7-stat:nth-child(3) { border-left: 0; padding-left: 0; } }
.h7-fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: 28px; }
.h7-diagram { width: 100%; max-width: 480px; }
.h7-diagram text { font-family: var(--h7-mono); }
.flow { stroke-dasharray: 5 7; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }
@media (max-width: 900px) { .h7-fit { grid-template-columns: 1fr; } .h7-diagram { margin: 0 auto; } }
.h7-panel dl { margin: 0; display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 8px 14px; font-size: 16px; }
.h7-panel dt { font-family: var(--h7-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--h7-ox); padding-top: 3px; }
.h7-panel dd { margin: 0; }
.h7-panel .tag { display: inline-block; background: var(--h7-ink); color: var(--h7-paper); padding: 3px 8px; }
@media (max-width: 420px) { .h7-panel dl { grid-template-columns: 1fr; gap: 2px; } }
.h7-icon { width: 36px; height: 36px; flex: none; }
.h7-icon .st { fill: none; stroke: var(--h7-ox); stroke-width: 2; stroke-linecap: square; }
.h7-icon .fl { fill: var(--h7-signal); }
.h7-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.h7-dev { display: inline-block; background: var(--h7-signal); color: var(--h7-paper); font-family: var(--h7-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; }

/* ---------- reduced motion: every animated item shows its final state and nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .t-line { clip-path: none !important; }
  .t-cursor { opacity: 1 !important; }
}

/* ---------- addendum 1+3 (owner, 11:49 IST) ---------- */
/* Footer: five groups now (brand, site, connectors, Writing, contact) */
.hx-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important; }
@media (max-width: 980px) { .hx-footer-grid { grid-template-columns: 1fr 1fr 1fr !important; } }
@media (max-width: 620px) { .hx-footer-grid { grid-template-columns: 1fr 1fr !important; } }
/* Credentials band results: each line word for word */
.hx7-results li { font-size: 15px; line-height: 1.45; }
/* Hub home: the approved draft's headline size, with less empty space above and below */
.hx-hero.h7-home { padding-top: clamp(14px, 2.5vh, 32px) !important; padding-bottom: clamp(20px, 3vh, 36px) !important; }
.hx-hero.h7-home h1 { font-size: clamp(48px, 9.2vw, 136px) !important; line-height: .92 !important; max-width: none; margin: 8px 0 12px !important; }
.hx-hero.h7-home .hx-eyebrow { margin-top: 0 !important; }
.hx7-cred { padding: clamp(24px, 3.5vw, 44px) 0; }
.hx-body > .hx-section:first-child { padding-top: clamp(28px, 4vw, 48px) !important; }
.h7-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .h7-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .h7-cols-4 { grid-template-columns: 1fr; } }

/* Photos keep their square size inside flex rows (the footer photo was squeezed to 25 x 72 px) */
.hx7-built-photo, .hx7-strip-photo, .hx7-cred-photo { flex: none; display: block; }
.hx7-built-photo { width: 72px; height: 72px; }
.hx7-strip-photo { width: 44px; height: 44px; }

/* ---------- independent verifier fixes (run 7, 14:50 IST) ---------- */
/* Tables: words wrap between words, never inside one; the tool name column keeps a readable width (the table box scrolls on its own if needed). */
.hx-table td, .hx-table th { overflow-wrap: break-word; word-break: normal; }
.hx-table td:first-child, .hx-table th:first-child { min-width: 9rem; }
/* GTM Alpha: centred section headings are centred as boxes too; stat labels never split a word. */
.section-header .section-title { margin-left: auto; margin-right: auto; }
.stat-label, .stat-number { overflow-wrap: normal; word-break: normal; }
@media (max-width: 480px) {
  .stats-grid { gap: 8px !important; }
  .stat-item { padding: 16px 6px !important; }
  .stat-label { font-size: 10px !important; letter-spacing: 0 !important; }
}
/* Verifier re-check (15:04 IST): every table (not only .hx-table) keeps whole words and scrolls in its own box on phones; the wordmark never splits a word. */
main table td, main table th { overflow-wrap: break-word; word-break: normal; }
@media (max-width: 600px) { main table { display: block; max-width: 100%; overflow-x: auto; } }
.hx-wordmark { overflow-wrap: normal; word-break: normal; }
/* Re-check 2 (15:15 IST): in auto-width tables Chrome treats break-word as a break point, so cells use normal wrapping
   (the table box scrolls instead) and only links may break; badges never split. */
main table td, main table th, .hx-table td, .hx-table th { overflow-wrap: normal; }
main table td a, .hx-table td a { overflow-wrap: anywhere; }
.free-badge { white-space: nowrap; }

/* ---------- run 8: plain EPIC scorecard (hero) ---------- */
.hx8-sc { margin: 0; background: #fff; border: 1.5px solid var(--h7-ink-12); border-top: 4px solid var(--h7-ox); padding: 20px 22px; max-width: 560px; }
.hx8-sc-k { font-family: var(--h7-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--h7-ox); margin: 0 0 8px; }
.hx8-sc-in { font-family: var(--h7-display); font-size: 18px; line-height: 1.35; color: var(--h7-ink); margin: 0 0 16px; }
.hx8-sc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hx8-sc-rows li { display: grid; grid-template-columns: minmax(8.5rem, 11rem) 1fr auto; align-items: center; gap: 12px; font-size: 15px; }
.hx8-sc-l { color: var(--h7-ink); font-weight: 600; }
.hx8-sc-bar { height: 14px; background: var(--h7-clay); position: relative; overflow: hidden; }
.hx8-sc-bar i { position: absolute; inset: 0 auto 0 0; background: var(--h7-ink-70); animation: hx8-grow 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hx8-sc-rows li.is-lead .hx8-sc-bar i { background: var(--h7-signal); }
.hx8-sc-rows li b { font-family: var(--h7-mono); font-size: 15px; color: var(--h7-ink); white-space: nowrap; }
.hx8-sc-rows li b small { font-size: 12px; font-weight: 400; color: var(--h7-ink-70); }
.hx8-sc-v { margin: 18px 0 8px; font-family: var(--h7-display); font-weight: 800; font-size: 22px; color: var(--h7-ox); }
.hx8-sc figcaption { font-size: 13.5px; line-height: 1.5; color: var(--h7-ink-70); }
.hx8-sc-cta { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--h7-ink); text-decoration: underline; text-decoration-color: var(--h7-signal); text-decoration-thickness: 3px; text-underline-offset: 6px; }
@keyframes hx8-grow { from { width: 0; } }
@media (max-width: 420px) { .hx8-sc { padding: 16px 14px; } .hx8-sc-rows li { grid-template-columns: 1fr auto; } .hx8-sc-bar { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .hx8-sc-bar i { animation: none; } }

/* ---------- run 8: story section (result tiles, recognition), proof line, collapsed developer block ---------- */
.hx8-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 900px) { .hx8-story { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } }
.hx8-story .hx7-cred-photo img { width: 200px; height: 200px; object-fit: cover; }
.hx8-narr { font-size: 19px; line-height: 1.6; max-width: 62ch; color: var(--h7-ink); margin: 0 0 8px; }
.hx8-role { font-family: var(--h7-mono); font-size: 13px; color: var(--h7-ox); margin: 0 0 18px; }
.hx8-tiles { list-style: none; margin: 24px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.hx8-tiles li { background: #fff; border: 1.5px solid var(--h7-ink-12); border-top: 3px solid var(--h7-ox); padding: 16px 16px 14px; }
.hx8-tile-co { display: block; font-family: var(--h7-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--h7-ox); }
.hx8-tiles b { display: block; font-family: var(--h7-display); font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--h7-ink); margin-top: 6px; }
.hx8-tile-l { display: block; font-size: 14px; color: var(--h7-ink-70); margin-bottom: 8px; }
.hx8-tiles p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--h7-ink); }
.hx8-awards { list-style: none; margin: 18px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hx8-awards li { background: var(--h7-clay); color: var(--h7-ink); font-size: 13.5px; padding: 6px 10px; }
.hx8-proof { margin-top: 24px; padding: 14px 16px; background: var(--h7-clay); border-left: 4px solid var(--h7-signal); font-size: 15px; line-height: 1.5; color: var(--h7-ink); }
.hx8-motions { list-style: none; margin: 20px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.hx8-motions li { background: #fff; border: 1.5px solid var(--h7-ink-12); border-top: 4px solid var(--h7-ox); padding: 18px; }
.hx8-motions li b.hx8-letter { display: inline-block; width: 34px; height: 34px; line-height: 34px; text-align: center; background: var(--h7-signal); color: var(--h7-paper); font-family: var(--h7-display); font-size: 20px; margin-bottom: 8px; }
.hx8-motions h3 { margin: 4px 0 6px; }
.hx8-motions p { margin: 0 0 8px; }
.hx8-dev { margin-top: 32px; border: 1.5px solid var(--h7-ink-12); background: #fff; }
.hx8-dev > summary { cursor: pointer; padding: 12px 16px; font-family: var(--h7-mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--h7-ox); }
.hx8-dev > div { padding: 0 16px 16px; }

/* ---------- run 8 (E9 colour rule: no dark backgrounds): clay footer and table heads; the approved layout is unchanged ---------- */
footer.hx-footer { background: var(--h7-clay) !important; color: var(--h7-ink) !important; border-top: 4px solid var(--h7-ox) !important; }
footer.hx-footer p, footer.hx-footer a { color: var(--h7-ink) !important; }
footer.hx-footer a:hover { color: var(--h7-ox) !important; }
footer.hx-footer .hx-foot-h, footer.hx-footer h4 { color: var(--h7-ox) !important; }
footer.hx-footer .hx-wordmark { color: var(--h7-ink) !important; }
footer.hx-footer .hx-footer-bottom { border-top-color: var(--h7-ink-12) !important; color: var(--h7-ink) !important; }
.hx7-built { border-bottom-color: var(--h7-ink-12); }
.hx7-built-h { color: var(--h7-ink) !important; }
footer.hx-footer .hx7-built-links a { color: var(--h7-ink) !important; }
.hx7-giant { color: rgba(26, 14, 16, .14) !important; }
.hx-table th { background: var(--h7-clay) !important; color: var(--h7-ink) !important; border-bottom: 2px solid var(--h7-ink) !important; }
.h7-demo svg { background: var(--h7-paper); }

/* ---------- run 8: gtmhelix.com hero headline fits its column (no word breaks) ---------- */
.hx-hero.h7-home.hx8-home h1 { font-size: clamp(40px, 4.6vw, 76px) !important; line-height: 1 !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; max-width: 14ch; }
.hx8-home .h7-hero-grid { align-items: center; }

/* run 8: scorecard bar widths as classes (strict CSP: no inline style attributes) */
.hx8-v0 { width: 0%; } .hx8-v1 { width: 10%; } .hx8-v2 { width: 20%; } .hx8-v3 { width: 30%; } .hx8-v4 { width: 40%; } .hx8-v5 { width: 50%; } .hx8-v6 { width: 60%; } .hx8-v7 { width: 70%; } .hx8-v8 { width: 80%; } .hx8-v9 { width: 90%; } .hx8-v10 { width: 100%; }

/* ---------- run 8 (E9): code blocks, rules and form fields in Helix colours (no dark areas, no default greys) ---------- */
pre, .hx-code-block, .hx-output pre, .hx-result-body pre { background: #fff !important; color: var(--h7-ink) !important; border: 1.5px solid var(--h7-ink-12) !important; border-left: 4px solid var(--h7-ox) !important; }
pre code { background: transparent !important; color: inherit !important; }
hr { border: 0 !important; border-top: 1.5px solid var(--h7-ink-12) !important; }
.hx-form textarea, .hx-form input:not([type="hidden"]), .hx-field textarea { border: 1.5px solid var(--h7-ink-70) !important; background: #fff !important; color: var(--h7-ink) !important; font: inherit; width: 100%; padding: 10px 12px; box-sizing: border-box; }
.hx7-results { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 700px) { .hx7-results { grid-template-columns: 1fr !important; } }

/* ---------- run 8 E5: visual library (work/run8/visuals.py); still under reduced motion ---------- */
.hx8-vis { margin: 24px 0; max-width: 560px; }
.hx8-vis svg { display: block; width: 100%; height: auto; overflow: visible; }
.hx8-vis figcaption { font-size: 13.5px; line-height: 1.5; color: var(--h7-ink-70); margin-top: 8px; }
.hx8-svg text { font-family: var(--h7-display); fill: var(--h7-ink); }
.hx8-svg .v-t { font-size: 14px; } .hx8-svg .v-ts { font-size: 12.5px; } .hx8-svg .v-tb { font-size: 14px; font-weight: 700; }
.hx8-svg .v-tm, .hx8-svg .v-k, .hx8-svg .v-tmp { font-family: var(--h7-mono); font-size: 12px; }
.hx8-svg .v-k { font-weight: 600; letter-spacing: .08em; fill: var(--h7-ox); text-transform: uppercase; }
.hx8-svg .v-tp, .hx8-svg .v-tmp { fill: var(--h7-paper); font-size: 12.5px; }
.hx8-svg .v-letter { font-size: 22px; font-weight: 800; fill: var(--h7-paper); }
.hx8-svg .v-big { font-size: 26px; font-weight: 800; }
.hx8-svg .v-oxt { fill: var(--h7-ox); } .hx8-svg .v-sigt { fill: var(--h7-signal); }
.hx8-svg .v-strike { text-decoration: line-through; fill: var(--h7-ink-70); }
.hx8-svg .v-ox { fill: var(--h7-ox); } .hx8-svg .v-sig { fill: var(--h7-signal); } .hx8-svg .v-ink7 { fill: rgba(26, 14, 16, .72); }
.hx8-svg .v-clay { fill: var(--h7-clay); } .hx8-svg .v-clayd { fill: #EAD9D5; stroke: var(--h7-ox); stroke-width: 1.5; } .hx8-svg .v-paper { fill: var(--h7-paper); }
.hx8-svg .v-paperb { fill: #fff; stroke: rgba(26, 14, 16, .3); stroke-width: 1.5; }
.hx8-svg .v-line { stroke: rgba(26, 14, 16, .3); stroke-width: 1.5; fill: none; }
.hx8-svg .v-link { stroke: var(--h7-ox); stroke-width: 2; fill: none; }
.hx8-svg .v-spine { stroke: var(--h7-ink); stroke-width: 3; fill: none; }
.hx8-svg .v-arc { stroke: var(--h7-clay); stroke-width: 18; fill: none; } .hx8-svg .v-arcv { stroke: var(--h7-signal); stroke-width: 18; fill: none; }
.hx8-svg .v-needle { stroke: var(--h7-ox); stroke-width: 4; }
.hx8-svg .v-ringseg { fill: none; stroke-width: 26; }
.hx8-svg .v-oxs { stroke: var(--h7-ox); } .hx8-svg .v-sigs { stroke: var(--h7-signal); } .hx8-svg .v-ink7s { stroke: rgba(26, 14, 16, .72); fill: rgba(26, 14, 16, .72); } .hx8-svg .v-clayds { stroke: #EAD9D5; }
.hx8-svg .v-clays { fill: var(--h7-clay); stroke: var(--h7-ox); stroke-width: 1.5; }
.hx8-svg .v-grow, .hx8-svg .v-grow-y, .hx8-svg .v-pop, .hx8-svg .v-drop, .hx8-svg .v-slide, .hx8-svg .v-fall { transform-box: fill-box; }
.hx8-svg .v-grow { transform-origin: left center; animation: hx8v-grow .9s cubic-bezier(.2,.7,.2,1) both; }
.hx8-svg .v-grow-y { transform-origin: center bottom; animation: hx8v-growy .9s cubic-bezier(.2,.7,.2,1) both; }
.hx8-svg .v-pop { transform-origin: center; animation: hx8v-pop .6s cubic-bezier(.2,.8,.3,1.2) both; }
.hx8-svg .v-drop { animation: hx8v-drop .6s ease-out both; }
.hx8-svg .v-slide { animation: hx8v-slide .7s ease-out both; }
.hx8-svg .v-fall { animation: hx8v-fall 1.2s ease-in both; }
.hx8-svg .v-fade { animation: hx8v-fade .8s ease-out both; }
.hx8-svg .v-draw { stroke-dasharray: 600; stroke-dashoffset: 0; animation: hx8v-draw 1.2s ease-out both; }
.hx8-svg .v-tilt { transform-box: view-box; transform-origin: 180px 70px; animation: hx8v-tilt 1.6s ease-in-out both; }
.hx8-svg .d1 { animation-delay: .1s; } .hx8-svg .d2 { animation-delay: .2s; } .hx8-svg .d3 { animation-delay: .3s; } .hx8-svg .d4 { animation-delay: .4s; } .hx8-svg .d5 { animation-delay: .5s; }
.hx8-svg .d6 { animation-delay: .6s; } .hx8-svg .d7 { animation-delay: .7s; } .hx8-svg .d8 { animation-delay: .8s; } .hx8-svg .d9 { animation-delay: .9s; }
@keyframes hx8v-grow { from { transform: scaleX(0); } }
@keyframes hx8v-growy { from { transform: scaleY(0); } }
@keyframes hx8v-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes hx8v-drop { from { transform: translateY(-14px); opacity: 0; } }
@keyframes hx8v-slide { from { transform: translateX(-18px); opacity: 0; } }
@keyframes hx8v-fall { from { transform: translateY(0); opacity: 1; } to { transform: translateY(70px); opacity: 0; } }
@keyframes hx8v-fade { from { opacity: 0; } }
@keyframes hx8v-draw { from { stroke-dashoffset: 600; } }
@keyframes hx8v-tilt { 0% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .hx8-svg * { animation: none !important; } }

/* ---------- run 8 (E9, no dark areas): GTM Alpha /integration setup panel and /api-docs code blocks in light Helix colours ---------- */
.page-content { background: var(--h7-paper) !important; color: var(--h7-ink) !important; }
.page-content .section-title, .page-content .tab-panel h3, .page-content h3, .page-content h4 { color: var(--h7-ink) !important; }
.page-content .section-subtitle, .page-content p, .page-content li { color: var(--h7-ink) !important; }
.page-content .tab-btn { background: #fff !important; color: var(--h7-ink) !important; border-color: var(--h7-ink-12) !important; }
.page-content .tab-btn.active { background: var(--h7-ox) !important; color: var(--h7-paper) !important; }
.page-content .tab-content, .page-content .code-container { background: #fff !important; border-color: var(--h7-ink-12) !important; }
.page-content .code-header, .page-content .file-location { background: var(--h7-clay) !important; color: var(--h7-ink) !important; border-color: var(--h7-ink-12) !important; }
.code-block, .code-block .key, .code-block .string, .code-block .bracket, .code-block span { background: #fff !important; color: var(--h7-ink) !important; }
.code-block { border: 1.5px solid var(--h7-ink-12) !important; border-left: 4px solid var(--h7-ox) !important; }
hr { color: var(--h7-ink-12) !important; }
select, textarea, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]) { border-color: var(--h7-ink-70); }
/* run 8 E5 check (E5-N1): readable GTM Alpha controls and links on the light setup panel; ring segments never filled */
.copy-btn { background: var(--h7-ox) !important; color: var(--h7-paper) !important; border: 0 !important; }
.page-content a:not(.btn-primary):not(.hx-btn):not(.tab-btn) { color: var(--h7-ox) !important; }
.page-content [style*="rgba(250, 248, 246"], .page-content [style*="#FAF8F6"] { color: var(--h7-ink) !important; }
.hx8-svg .v-ringseg { fill: none !important; }

/* ================= run 9 U1: one global header on every page of every site ================= */
header.hx-header { display: none !important; }
.hx9-gh { position: sticky; top: 0; z-index: 50; background: var(--h7-paper); border-bottom: 1.5px solid var(--h7-ink-12); }
.hx9-row1 { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.hx9-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--h7-ink) !important; }
.hx9-mark { width: 30px; height: 30px; display: inline-grid; place-items: center; background: var(--h7-signal); color: var(--h7-paper); font: italic 700 20px/1 Georgia, serif; }
.hx9-word { font-family: var(--h7-mono); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.hx9-nav { display: flex; align-items: center; gap: 4px; }
.hx9-nav a { font-family: var(--h7-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--h7-ink) !important; text-decoration: none !important; padding: 10px 12px; }
.hx9-nav a:hover { background: var(--h7-clay); }
.hx9-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--h7-signal); }
.hx9-cta, .hx9-mm-panel .hx9-cta { background: var(--h7-ox) !important; color: var(--h7-paper) !important; }
.hx9-nav .hx9-cta:hover { background: var(--h7-signal) !important; }
.hx9-row2 { border-top: 1px solid var(--h7-ink-12); background: #FAF8F6; }
.hx9-row2-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; min-height: 42px; padding-top: 6px; padding-bottom: 6px; }
.hx9-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; color: var(--h7-ink-70); }
.hx9-crumbs a { color: var(--h7-ox) !important; text-decoration: underline; text-underline-offset: 3px; }
.hx9-crumbs [aria-current] { color: var(--h7-ink); font-weight: 600; }
.hx9-sep { color: var(--h7-ink-70); }
.hx9-site { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.hx9-site a { font-size: 14px; font-weight: 600; color: var(--h7-ink) !important; text-decoration: none !important; padding: 6px 10px; }
.hx9-site a:hover { background: var(--h7-clay); }
.hx9-site a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--h7-signal); }
.hx9-mm { display: none; }
@media (max-width: 860px) {
  .hx9-nav { display: none; }
  .hx9-site { display: none; }
  .hx9-mm { display: block; position: fixed; right: 14px; bottom: 14px; z-index: 60; }
  .hx9-mm > summary { list-style: none; cursor: pointer; background: var(--h7-ox); color: var(--h7-paper); font-family: var(--h7-mono); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; padding: 14px 22px; min-height: 52px; box-shadow: 0 2px 10px rgba(26, 14, 16, .25); }
  .hx9-mm > summary::-webkit-details-marker { display: none; }
  .hx9-mm[open] > summary { background: var(--h7-signal); }
  .hx9-mm-panel { position: fixed; left: 14px; right: 14px; bottom: 76px; background: var(--h7-paper); border: 1.5px solid var(--h7-ink-12); box-shadow: 0 6px 24px rgba(26, 14, 16, .2); display: grid; max-height: 70vh; overflow-y: auto; }
  .hx9-mm-panel a { display: block; padding: 15px 18px; min-height: 52px; font-size: 17px; font-weight: 600; color: var(--h7-ink) !important; text-decoration: none !important; border-bottom: 1px solid var(--h7-ink-12); }
  .hx9-mm-panel .hx9-cta { text-align: center; border-bottom: 0; }
  body { padding-bottom: 72px; }
}

/* ================= run 9 U3: one type scale for every site ================= */
:root { --fs-h1-home: clamp(36px, 4vw, 60px); --fs-h1: clamp(30px, 3vw, 44px); --fs-h2: clamp(24px, 2.2vw, 32px); --fs-h3: 20px; --fs-body: 17px; --fs-lead: 19px; }
body { font-size: var(--fs-body) !important; }
.hx-hero h1, main h1, .hero h1, .hero-title, .page-header h1, .ob h1 { font-size: var(--fs-h1) !important; line-height: 1.08 !important; letter-spacing: -.02em !important; overflow-wrap: normal !important; word-break: normal !important; }
.hx-hero.hx9-home h1, .hx9-home h1, .hx-hero.h7-home.hx8-home h1 { font-size: var(--fs-h1-home) !important; line-height: 1.02 !important; max-width: 16ch; }
main h2, .hx-section h2, .hx7-cred h2, section h2 { font-size: var(--fs-h2) !important; line-height: 1.12 !important; }
main h3, .hx-section h3, section h3 { font-size: var(--fs-h3) !important; line-height: 1.25 !important; }
.hx-lead, .hx-hero .hx-lead, .hero-subtitle { font-size: var(--fs-lead) !important; line-height: 1.5 !important; }
.hx-sub { font-size: 18px !important; }
.hx-hero { padding-top: clamp(20px, 3.5vh, 44px) !important; padding-bottom: clamp(20px, 3.5vh, 44px) !important; }

/* ================= run 9 U3: photo, never in the hero; sharp 2x source ================= */
.hx8-story { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 900px) { .hx8-story { grid-template-columns: 280px minmax(0, 1fr) !important; } }
.hx8-story .hx7-cred-photo, .hx9-photo { max-width: 280px; }
.hx8-story .hx7-cred-photo img, .hx9-photo img { width: 100% !important; height: auto !important; max-width: 280px; max-height: 40vh; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 899px) { .hx8-story .hx7-cred-photo img, .hx9-photo img { max-width: 200px; } }

/* ================= run 9 U2: job chooser ================= */
.hx9-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.hx9-chip { font: 600 15px/1 var(--h7-display); padding: 11px 16px; min-height: 44px; background: #FAF8F6; color: var(--h7-ink); border: 1.5px solid var(--h7-ink-70); cursor: pointer; }
.hx9-chip[aria-pressed="true"] { background: var(--h7-ox); color: var(--h7-paper); border-color: var(--h7-ox); }
.hx9-jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.hx9-job { background: #FAF8F6; border: 1.5px solid var(--h7-ink-12); border-top: 4px solid var(--h7-ox); padding: 18px; display: flex; flex-direction: column; transition: opacity .2s; }
.hx9-job h3 { margin: 4px 0 10px; }
.hx9-job-who { font-size: 14px; color: var(--h7-ink-70); margin: 0; }
.hx9-job dl { margin: 0 0 12px; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 15px; }
.hx9-job dt { font-family: var(--h7-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--h7-ox); padding-top: 2px; }
.hx9-job dd { margin: 0; }
.hx9-job > p:last-child { margin: auto 0 0; }
.hx9-job .hx8-sc { max-width: none; padding: 12px; margin-bottom: 12px; border-top-width: 2px; }
.hx9-job .hx8-sc figcaption, .hx9-job .hx8-sc-cta { display: none; }
.hx9-job.is-dim { opacity: .38; }
.hx9-job.is-hit { border-top-color: var(--h7-signal); box-shadow: 0 0 0 2px var(--h7-signal); }
.hx9-all { margin-top: 18px; font-weight: 700; }
.hx9-all a { color: var(--h7-ink) !important; text-decoration: underline; text-decoration-color: var(--h7-signal); text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .hx9-job { transition: none; } }
/* ================= run 9 U4: terminal and diagram ================= */
.hx8-vis.hx9-term, .hx8-vis.hx9-diagram { max-width: 520px; }
.hx8-svg .v-blink { animation: hx9-blink 1s steps(2, start) 6; }
@keyframes hx9-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .hx8-svg .v-blink { animation: none !important; } }
.hx9-gh .hx9-nav a.hx9-cta, .hx9-gh .hx9-mm-panel a.hx9-cta { color: var(--h7-paper) !important; background: var(--h7-ox) !important; }
.hx9-gh .hx9-nav a.hx9-cta:hover { background: var(--h7-signal) !important; }
.hx-section h2 { max-width: 30ch !important; }
.hx-hero h1, main h1 { max-width: 26ch !important; }
.hx-hero.hx9-home h1, .hx9-home h1 { max-width: 22ch !important; }
.hx9-steps { counter-reset: s; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hx9-steps li { counter-increment: s; background: #FAF8F6; border: 1.5px solid var(--h7-ink-12); border-left: 4px solid var(--h7-ox); padding: 12px 16px; font-weight: 600; }
.hx9-steps li::before { content: counter(s) ". "; color: var(--h7-ox); }
/* run 9 D7: paper instead of white inside visuals; smallest visual text at least 11 px on a 360 px screen */
.hx8-svg .v-paperb { fill: #FAF8F6 !important; }
.hx8-svg .v-tm, .hx8-svg .v-k, .hx8-svg .v-tmp { font-size: 12.5px !important; }
.hx8-svg .v-tp { font-size: 13px !important; }
.hx8-vis { min-width: 0; }
.hx9-visrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 20px 0; }
.hx8-proof { font-size: var(--fs-body) !important; }
.hx-section > h2, .hx-qa > h2, h2.section-title, .section-title { font-size: var(--fs-h2) !important; line-height: 1.12 !important; }
footer.hx-footer .hx-footer-bottom, footer.hx-footer .hx-footer-bottom *, .hx7-label, .hx-eyebrow { font-size: max(12px, 1em) !important; }

/* ================= run 9 addendum 2, A2.2: the header on phones, and one header geometry everywhere =================
   Every box in the header is border-box, and its container is 1248 px wide including 24 px padding each side, so the logo
   sits at the same x on every site (it was 1200 px on GTM Alpha and the Offbeat reports, 1248 px elsewhere). Row 2 has the
   same height everywhere. The last breadcrumb stays on one line with an ellipsis. On phones (860 px and below) the header
   scrolls away with the page, Menu sits in row 1 at the top right, and row 2 is hidden when it has no breadcrumb. */
.hx9-gh, .hx9-gh *, .hx9-gh *::before, .hx9-gh *::after { box-sizing: border-box; }
.hx9-gh .hx-wrap { max-width: 1248px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.hx9-gh .hx9-row2-in { min-height: 54px; flex-wrap: nowrap; }  /* one line: a long breadcrumb shortens with an ellipsis instead */
.hx9-gh .hx9-crumbs { flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.hx9-gh .hx9-crumbs > * { flex: none; white-space: nowrap; }
.hx9-gh .hx9-crumbs > [aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hx9-gh .hx9-site { flex: none; }
@media (max-width: 860px) {
  .hx9-gh { position: relative; }
  .hx9-gh .hx9-row1 { padding-right: 112px; }
  .hx9-gh .hx9-row2-in { min-height: 44px; }
  .hx9-gh .hx9-row2.hx9-row2-nocrumb, .hx9-gh .hx9-row2:not(:has(.hx9-crumbs)) { display: none; }
  .hx9-gh .hx9-mm { position: absolute; top: 8px; right: 16px; bottom: auto; left: auto; z-index: 60; }
  .hx9-gh .hx9-mm > summary { min-height: 44px; padding: 12px 18px; font-size: 14px; box-shadow: none; }
  .hx9-gh .hx9-mm-panel { position: absolute; top: calc(100% + 8px); right: 0; left: auto; bottom: auto; width: min(320px, calc(100vw - 32px)); }
  body { padding-bottom: 0; }
}

/* run 9 addendum 2, A2.3 and A2.4: the note over an example answer, and the next step under every answer */
.hx9-example-note { margin: 12px 0 0; padding: 10px 14px; background: #FAF8F6; border-left: 4px solid var(--h7-signal); font-size: 17px; }
.hx9-next { margin: 20px 0 0; padding-top: 14px; border-top: 1.5px solid var(--h7-ink-12); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; font-size: 17px; }
.hx9-next a { color: var(--h7-ox) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* run 9 addendum 2, A2.15: tool visuals drawn 360 wide are shown at most 440 px wide (at 560 their labels grew past body
   text); the small SVG text is 13 units, so it stays at least 11 px when a 360 px phone draws the visual about 312 px wide;
   under 480 px the eyebrow's dotted rule is hidden, so "1 of 8" does not wrap. */
.hx8-vis { max-width: 440px; }
.hx8-vis.hx9-term, .hx8-vis.hx9-diagram { max-width: 520px; }
.hx8-svg .v-ts, .hx8-svg .v-tp, .hx8-svg .v-tm, .hx8-svg .v-k, .hx8-svg .v-tmp { font-size: 13px !important; }
@media (max-width: 480px) { .hx-hero .hx-eyebrow::after { display: none; } }