/* The merged site's technology pages (api.html, white-label.html). Loads after site-b.css and builds on its b_* patterns;
   adds only what those pages need: the hero eyebrow, the figures' small labels and moving packet, the integration-model
   grid, the illustrative code block, and the partner-model pair. Palette and type: r3/system.css and site.css only. */

/* hero eyebrow: a mono label between two hairlines */
.tech_eyebrow { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); }
.tech_eyebrow::before { content: ""; width: var(--space-6); border-top: var(--line-hair) solid var(--color-gold); }

/* figures */
.tech_fig { max-width: 84rem; }
.tech_label { fill: var(--color-mist); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; }
.tech_packet { opacity: 0; }

/* integration models: four ruled columns */
.tech_models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--line-hair) solid var(--b-rule-strong); border-bottom: var(--line-hair) solid var(--b-rule); }
.tech_model { display: grid; grid-template-rows: auto auto auto 1fr; gap: var(--space-3); align-content: start; padding: var(--space-6) var(--space-5); }
.tech_model + .tech_model { border-left: var(--line-hair) solid var(--b-rule); }
.tech_model-heading { font-family: var(--font-display); font-stretch: var(--stretch-wide); font-weight: 300; font-size: var(--text-xl); line-height: 1.1; }
.tech_model-text { font-size: var(--text-base); line-height: 1.5; color: var(--color-text-muted); }
.tech_ticks { display: grid; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-4); border-top: var(--line-hair) solid var(--b-rule); font-size: var(--text-sm); color: var(--color-paper); }
.tech_ticks li { display: grid; grid-template-columns: var(--space-4) minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.tech_ticks li::before { content: ""; width: var(--space-3); border-top: var(--line-hair) solid var(--color-gold); transform: translateY(-0.25em); }

/* how it works: steps beside the illustrative exchange */
.tech_how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-6); align-items: start; padding-bottom: var(--space-8); }
.tech_how-steps { grid-column: 1 / span 5; }
.tech_code { grid-column: 7 / -1; margin: 0; display: grid; border: var(--line-hair) solid var(--b-rule-strong); background: var(--color-night); min-width: 0; }
.tech_code-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--line-hair) solid var(--b-rule); }
.tech_code-tag { padding: var(--space-1) var(--space-2); border: var(--line-hair) solid var(--color-gold); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); }
.tech_code pre { margin: 0; padding: var(--space-5); overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; color: var(--color-paper); tab-size: 2; }
.tech_code-c { color: var(--color-mist); }
.tech_standards .b_row-number { font-size: var(--text-xs); letter-spacing: 0.06em; padding-top: 0.35em; }
.tech_standards .b_value { grid-template-columns: 3.5rem minmax(0, 1fr); }

/* partner models: two cards */
.tech_pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.tech_card { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); border: var(--line-hair) solid var(--b-rule-strong); background: var(--wash-slate-12); }
.tech_facts { display: grid; border-top: var(--line-hair) solid var(--b-rule); }
.tech_facts div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--line-hair) solid var(--b-rule); }
.tech_facts dt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-mist); padding-top: 0.25em; }
.tech_facts dd { margin: 0; font-size: var(--text-base); line-height: 1.5; }

/* breakpoints */
@media (max-width: 1279px) {
  .tech_models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech_model:nth-child(3) { border-left: 0; }
  .tech_model:nth-child(n + 3) { border-top: var(--line-hair) solid var(--b-rule); }
}
@media (max-width: 991px) {
  .tech_how-steps, .tech_code { grid-column: 1 / -1; }
  .tech_pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .tech_models { grid-template-columns: minmax(0, 1fr); }
  .tech_model + .tech_model { border-left: 0; border-top: var(--line-hair) solid var(--b-rule); }
  .tech_model { padding-left: 0; padding-right: 0; }
  .tech_card { padding: var(--space-5); }
  .tech_facts div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .tech_code pre { padding: var(--space-4); font-size: var(--text-xs); }
}

/* model columns: ticks sit at the top of their row, evenly spaced */
.tech_ticks { align-content: start; }

/* anchors land below the sticky nav */
main [id] { scroll-margin-top: calc(var(--space-8) + var(--space-4)); }

@media (max-width: 991px) {
  .b_key-text, .tech_stack th, .tech_stack td { font-size: var(--text-base); }
  /* the twelve-column how-it-works grid is one column once it stacks (eleven gaps outgrow a phone) */
  .tech_how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  /* site-b's twelve-column grids outgrow a phone once their eleven gaps are counted: one column */
  .b_hero-grid, .b_head, .b_figset { grid-template-columns: minmax(0, 1fr); }
  .tech_ticks { font-size: var(--text-base); }
  .b_hero.has-grid { background-size: calc((100% - 2 * var(--gutter)) / 4) 100%; }
  .b_key-text { font-size: var(--text-base); }
  /* onboarding steps read heading, text, then the drawing */
  .b_step figure { order: 1; }
  /* tables become one block per row, each value labelled */
  .tech_stack { min-width: 0; }
  .tech_stack tbody th { width: auto; }
  .tech_stack thead { display: none; }
  .tech_stack tbody, .tech_stack tr, .tech_stack th, .tech_stack td { display: block; width: auto; }
  .tech_stack tr { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-bottom: var(--line-hair) solid var(--b-rule); }
  .tech_stack th, .tech_stack td { padding: 0; border-bottom: 0; font-size: var(--text-base); }
  .tech_stack td::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-mist); }
}

/* hero key: heading and text sit together at the top of each cell; the API's six parts as 3 + 3 below the 1280 base */
.b_key-body { align-content: start; }
@media (min-width: 768px) and (max-width: 1279px) {
  .b_hero-figure .b_key:has(> li:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* QA 11 Oct (late): body copy never below 16px - the key texts and the stack table read at the base size on every
   width (they were 15px above 991px) */
.b_key-text, .tech_stack th, .tech_stack td { font-size: var(--text-base); }