/* GTM Alpha's own shared rules (run 10), loaded after brand.css and helix.css on every page, the 404 page, the sample
   report and the report page. helix.css is the shared Helix file and is not edited here. Helix colours only. */

/* R10-15: skip link, first thing on every page; hidden until it has keyboard focus */
.hx10-skip { position: absolute; left: 12px; top: -200px; z-index: 100; background: #641220; color: #FAF8F6 !important; padding: 12px 18px; min-height: 44px; font: 600 16px/1.25 'Archivo', Arial, sans-serif; text-decoration: none !important; }
.hx10-skip:focus, .hx10-skip:focus-visible { top: 12px; }

/* R10-15 (D4 of the chat review): the page containers line up with the shared header. The header's container is 1248 px
   wide, border-box, with 24 px on each side (helix.css, .hx9-gh .hx-wrap); the pages' own .container was 1200 px, so
   their text started 24 px to the right of the logo. Reading pages keep their 800 px text measure, aligned left. */
.container, .hx-wrap { max-width: 1248px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; }
.hx10-read > * { max-width: 800px; }
.hx-hero .hero-content, .hx-hero .section-header, .hx-hero .hx-hero-inner { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
.hx-qa { max-width: 1248px !important; box-sizing: border-box; padding-left: 24px !important; padding-right: 24px !important; }

/* R10-15: tap targets at least 44 px high */
.hx9-crumbs a, .hx9-site a, footer.hx-footer a, .hx7-links a, .hx7-strip a, .hx9-mm > summary, .tab-btn, .faq-question, .copy-btn,
.hx-byline a, .hx10-actions a, .hx10-actions button, .hx10-links a, .sidebar-nav a { min-height: 44px; box-sizing: border-box; }
.hx9-crumbs a, .hx9-site a, .hx7-links a, .hx7-strip a, .hx-byline a { display: inline-flex; align-items: center; }
footer.hx-footer a { display: flex !important; align-items: center; margin: 0 !important; }
footer.hx-footer .hx-footer-bottom a { display: inline-flex !important; }
.hx-qa summary { min-height: 44px; }
.sidebar-nav a { display: flex !important; align-items: center; }
/* The shared header's logo (30 px) and top links (40 px) get a 44 px tap area without changing the header's look; the
   same rule belongs in helix.css for every site (reported to the coordinator). */
.hx9-gh .hx9-logo, .hx9-gh .hx9-nav a { min-height: 44px; box-sizing: border-box; }
.hx9-gh .hx9-nav a { display: inline-flex; align-items: center; }
/* Buttons drawn as underlined links, a link that is a list item's only content, and the email line under a card */
.btn-secondary, .hx-btn-ghost, .plan-alt a { display: inline-flex !important; align-items: center; min-height: 44px; box-sizing: border-box; }
main li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }

/* R10-A1-5 and R10-16: the action bar at the top of a report, and the made-up example note */
.hx10-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 20px; }
.hx10-actions a, .hx10-actions button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; font: 600 13px/1.2 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important; cursor: pointer; border: 1.5px solid #641220; background: transparent; color: #641220 !important; border-radius: 0; }
.hx10-actions .hx10-primary { background: #641220; color: #FAF8F6 !important; }
.hx10-actions a:hover, .hx10-actions button:hover { background: #C1121F; border-color: #C1121F; color: #FAF8F6 !important; }
.hx10-report { padding-top: 24px; padding-bottom: 8px; }
.hx9-report-next { margin: 20px 0 0; padding-top: 14px; border-top: 1.5px solid rgba(26, 14, 16, .12); font-size: 17px; }
.hx9-report-next a { color: #641220 !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hx10-note { margin: 0 0 18px; padding: 12px 16px; background: #EAD9D5; border-left: 4px solid #C1121F; font-size: 17px; color: #1A0E10; }
.hx10-links { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hx10-links a { display: inline-flex; align-items: center; font-weight: 700; color: #1A0E10 !important; text-decoration: underline; text-decoration-color: #C1121F; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* R10-23: the answer-first block under the home H1 */
.hx10-answer { max-width: 68ch; margin: 14px 0 0; padding: 12px 16px; border-left: 4px solid #641220; background: #FAF8F6; font-size: 17px !important; color: #1A0E10 !important; }
.hx10-history, .hx-hero .hx10-history { font-family: 'IBM Plex Mono', monospace; font-size: 13px !important; color: rgba(26, 14, 16, .72) !important; margin-top: 8px; }

/* D1 (owner, run 10): headings balance their lines, so a heading does not end with one word where that can be avoided
   (the same rule goes into helix.css for every site). */
h1, h2, h3 { text-wrap: balance; }

/* The shared helix.css (run 10) also styles .hx10-actions for the tool cards (margin-top auto, padding-top); the report
   pages' action bar keeps its own spacing. */
.hx10-report > .hx10-actions { margin: 0 0 20px !important; padding-top: 0; }

/* R10-14 (D1, owner): wide screens on GTM Alpha, the same layout as helix.css gives .hx-body > .hx-section on the other
   sites. From 1280 px each content section's heading sits in a 300 px left column (sticky under the header, 28 px) and its
   content beside it, 64 px apart, inside the header's 1248 px container. The hero is unchanged; below 1280 px nothing
   changes. GTM Alpha's pages are hand-built, so the sections are named here one by one:
   - home: the two section blocks (.features, .epic-framework) and the questions (.hx-qa)
   - /consultation: the form box (its header, with the example buttons, on the left)
   - /pricing: the two options and the pricing questions
   - /integration: the question sections (.hx-qa); the setup tabs use the full width
   - /faq, /privacy, /terms: .hx10-sec (each H2 with what follows it; work/run10/gtmalpha/d1_sections.py); the legal prose
     keeps a readable line length (78 characters)
   - the report and the sample report: the full container width, headings above their sections (see below) */
@media (min-width: 1280px) {
  .features > .container, .epic-framework > .container, .hx-qa, .form-container, #pricing, .faq-section, .hx10-sec {
    display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 64px; align-items: start;
  }
  .features > .container > .section-header, .epic-framework > .container > .section-header, .hx-qa > h2,
  .form-container > .form-header, #pricing > .section-header, .faq-section > .section-header, .hx10-sec > h2 {
    grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 136px; margin: 0 !important; text-align: left !important; max-width: none !important;
  }
  .features > .container > :not(.section-header), .epic-framework > .container > :not(.section-header), .hx-qa > :not(h2),
  .form-container > :not(.form-header), #pricing > :not(.section-header), .faq-section > :not(.section-header),
  .hx10-sec > :not(h2) {
    grid-column: 2; min-width: 0;
  }
  .section-header .section-title, .hx-qa > h2, .hx10-sec > h2, .form-header h2 {
    font-size: 28px !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  .section-header .section-subtitle { margin: 12px 0 0 !important; max-width: none; }
  .form-header .hx9-example { justify-content: flex-start; }
  .form-container { max-width: none !important; padding: 0 !important; box-shadow: none !important; background: transparent !important; }
  .form-container > .security-note { margin-top: 0; }
  .pricing-grid, .faq-grid, .features-grid, .epic-grid, #gtmalpha-epic-visual { margin-top: 0 !important; max-width: none !important; }
  .epic-grid { margin-top: 24px !important; }
  .integration-tabs { max-width: none !important; }
  .tab-buttons { justify-content: flex-start !important; }
  .hx10-read > * { max-width: none; }
  .hx10-sec { padding-top: 32px; }
  .hx10-sec > :not(h2) { max-width: 78ch; }
  .hx10-sec > h2 { padding-bottom: 8px; }
  /* The report pages keep each heading above its section (the report headings are two or three long words, which would
     end on one word in a 300 px column); from 1280 px the report uses the container's full width. */
  .report-container { max-width: none; }
}
@media (min-width: 1280px) {
  /* Full-width blocks with the page's own paper background are held to the header's 1248 px container (no visible change:
     same background, no border), so their box lines up with the header like the other sites' sections. */
  .features, .epic-framework, .page-content { max-width: 1248px; margin-left: auto !important; margin-right: auto !important; }
  /* Question lists (closed questions are one short line each) run in two columns beside their heading on wide screens. */
  .hx10-sec:has(> .faq-item) { grid-template-columns: 300px 16px minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .hx10-sec:has(> .faq-item) > h2 { grid-column: 1 / span 2; }
  .hx10-sec:has(> .faq-item) > :not(h2) { grid-column: auto; max-width: none; }
  .faq-section .faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
}
@media (min-width: 1280px) {
  /* a question that is alone in its section, and the closing box, use both columns */
  .hx10-sec:has(> .faq-item) > .faq-item:first-of-type:last-of-type, .hx10-sec:has(> .faq-item) > .highlight-box { grid-column: 3 / span 2; }
}
@media (min-width: 1280px) {
  /* the four motion cards: two per row beside the heading, so each name stays on one line */
  .epic-framework .epic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}