/* The Gas Safe showcase as Mike dialled it in on Smartfix (7-8 Oct 2026). Opt-in (`optInCss`).
   From 640px: "Gas Safe registered" on top as the section's label, then the triangle beside the heading,
   the two centred on each other. On a phone it stays stacked (beside it would squeeze the heading into
   three short lines), and its two buttons move under the register check, side by side at half width,
   so the check reads straight after the words and the actions close the section. */
@media (min-width: 640px) {
  #gas-safe .ph-panel > div:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; }
  #gas-safe .ph-panel > div:first-child > * { grid-column: 1 / -1; }
  #gas-safe .ph-panel > div:first-child > .eyebrow { grid-row: 1; margin-top: 0; }
  #gas-safe .ph-panel > div:first-child > img { grid-column: 1; grid-row: 2; align-self: center; margin-top: 1.25rem; }
  #gas-safe .ph-panel > div:first-child > h2 { grid-column: 2; grid-row: 2; align-self: center; margin-top: 1.25rem; }
}
@media (max-width: 639px) {
  #gas-safe .ph-panel { row-gap: 0; padding-left: 1.1rem; padding-right: 1.1rem; }
  #gas-safe .ph-panel > div:first-child { display: contents; }
  #gas-safe .ph-panel > .ph-check { margin-top: 1.75rem; }
  #gas-safe .ph-panel > div:first-child > div.flex { order: 2; flex-direction: row; margin-top: 1rem; gap: 0.6rem; }
  /* Each button its own width plus an equal share of what's left, so both get the same padding. */
  #gas-safe .ph-panel > div:first-child > div.flex > a { flex: 1 1 auto; min-width: 0; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.9rem; white-space: nowrap; }
  /* Room for the words at 360px: the arrow and the phone icon go. */
  #gas-safe .ph-panel > div:first-child > div.flex > a svg { display: none; }
}
/* Under 360px half width can't hold "Check the register": stacked, full width. */
@media (max-width: 359px) {
  #gas-safe .ph-panel > div:first-child > div.flex { flex-direction: column; }
}