/* IOT Pay Africa design system: responsive layout primitives */
.header-layout { display: flex; min-height: var(--size-header); align-items: center; justify-content: space-between; gap: var(--space-8); }
.site-nav { display: flex; align-items: center; gap: var(--space-8); }
.hero-layout { display: grid; min-height: var(--size-hero-content); grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero-copy { max-width: 46rem; }
.company-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-meta-gap); }
.intro-layout, .heading-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.78fr); gap: var(--space-layout-gap); }
.heading-row { align-items: end; margin-bottom: var(--space-10); }
.heading-row h2, .heading-row > p { margin-bottom: 0; }
.heading-centered { max-width: var(--size-heading-wide); margin: 0 auto var(--space-10); text-align: center; }
.heading-centered .eyebrow { justify-content: center; }
.heading-centered h2 { max-width: var(--measure-heading); margin-inline: auto; }
.heading-centered > p { margin: 0 auto; }
.pillar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.outcome-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.iot-explorer { display: grid; grid-template-columns: minmax(25rem, 0.92fr) minmax(24rem, 1.08fr); align-items: stretch; gap: var(--space-10); }
.tad-layout { display: grid; gap: var(--space-10); }
.tad-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--space-layout-gap); }
.proposition { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.why-layout { display: flex; flex-direction: column; gap: var(--space-10); }
.value-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); width: 100%; }
.value-list div { flex: 1 1 14rem; max-width: 20rem; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(28rem, 1fr); align-items: start; gap: var(--space-layout-gap); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.footer-layout { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-8); }

@media (max-width: 64rem) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); }
  .outcome-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  .header-layout { min-height: auto; flex-direction: column; align-items: center; gap: var(--space-3); padding-block: var(--space-4); }
  .site-nav { width: 100%; justify-content: center; gap: var(--space-5); overflow-x: auto; padding-bottom: var(--space-2); }
  .site-nav .button { display: none; }
  .hero { min-height: auto; padding-top: calc(var(--size-header) + var(--space-20)); }
  .hero { background-image: linear-gradient(90deg, var(--color-hero-overlay-start) 0%, var(--color-hero-overlay-mid) 68%, var(--color-hero-overlay-end) 100%), url("../images/hero-edge-technology.jpg"); background-position: 55% center; }
  .hero-copy, .section-heading, .intro-prose, .tad-intro, .why-copy, .contact-copy { text-align: center; }
  .hero-copy { margin-inline: auto; }
  .hero h1, .hero-lead, .section-heading h2, .section-heading > p, .heading-row > p, .tad-intro > p:not(.eyebrow), .why-copy > p:not(.eyebrow), .contact-copy > p:not(.eyebrow, .contact-location) { margin-inline: auto; }
  .hero .eyebrow, .section-heading .eyebrow, .tad-intro .eyebrow, .why-copy .eyebrow, .contact-copy .eyebrow, .hero-cycle-line, .hero-copy .button-group { justify-content: center; }
  .pillar-card { text-align: center; }
  .pillar-card > p, .pillar-card .text-link { margin-inline: auto; }
  .hero-layout, .intro-layout, .heading-row, .tad-overview, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .proposition { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .company-meta { width: calc(100% + (var(--space-meta-bleed) * 2)); margin-inline: calc(var(--space-meta-bleed) * -1); gap: var(--space-meta-gap); }
  .heading-row { align-items: start; gap: var(--space-5); }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-card { min-height: 29rem; }
  .pillar-card h3, .pillar-card > p.capability-message { min-height: auto; }
  .outcome-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iot-explorer { grid-template-columns: minmax(0, 1fr); }
  .iot-tree, .industry-detail { grid-column: 1; grid-row: 1; }
  .industry-detail { position: sticky; top: calc(100svh - var(--size-iot-mobile-detail) - var(--space-4)); bottom: auto; z-index: var(--z-header); align-self: start; display: grid; min-height: var(--size-iot-mobile-detail); grid-template-columns: minmax(0, 1fr) var(--size-iot-mobile-media); grid-template-rows: minmax(var(--size-iot-mobile-detail), auto); border: var(--border-thin) solid var(--color-dark-border); box-shadow: var(--shadow-float); }
  .industry-detail-media { grid-column: 2; grid-row: 1; height: 100%; min-height: var(--size-iot-mobile-detail); }
  .industry-detail-media::after { background: linear-gradient(90deg, var(--color-navy-900), transparent 62%); }
  .industry-detail-copy { grid-column: 1; grid-row: 1; align-self: center; padding: var(--space-5); }
  .industry-detail-copy .card-kicker { margin-bottom: var(--space-2); }
  .industry-detail-copy h3 { margin-bottom: var(--space-2); font-size: var(--font-size-lg); }
  .industry-detail-copy > p:not(.card-kicker) { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--font-size-xs); line-height: 1.5; }
  .industry-points { display: none; }
  .iot-tree { padding-bottom: calc(var(--size-iot-mobile-detail) + var(--space-4)); }
  .contact-form { padding: var(--space-8); }
  .footer-layout { grid-template-columns: 1fr; justify-items: center; gap: var(--space-4); text-align: center; }
}

@media (max-width: 34rem) {
  .button-group { align-items: stretch; flex-direction: column; }
  .button-group .button { width: 100%; }
  .pillar-card, .contact-form { padding: var(--space-6); }
  .iot-explorer { padding: var(--space-5); }
  .tree-root { margin-left: 0; }
  .tree-branches { padding-left: var(--space-8); }
  .tree-branches::before { left: var(--space-3); transform: none; }
  .tree-node, .tree-node:nth-child(even) { width: 100%; align-self: stretch; }
  .tree-node::before, .tree-node:nth-child(odd)::before, .tree-node:nth-child(even)::before { right: 100%; left: auto; width: var(--space-5); }
  .tree-node::after, .tree-node:nth-child(odd)::after, .tree-node:nth-child(even)::after { right: calc(100% + var(--space-5) - (var(--space-3) / 2)); left: auto; }
  .industry-detail { grid-template-columns: minmax(0, 1fr) calc(var(--size-iot-mobile-media) - var(--space-4)); }
  .form-grid { grid-template-columns: 1fr; }
}