/* 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-smartphone-payment-v1.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); }
  .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; }
  .form-grid { grid-template-columns: 1fr; }
}

.solution-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.help-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.audience-grid, .application-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.solution-grid .pillar-card { padding: var(--space-8); }
.solution-grid .pillar-card h3 { min-height: 3.3em; font-size: clamp(1.5rem, 2.2vw, 2rem); }
.solution-grid .capability-message { min-height: 3.3em; }
.solution-grid .text-link { margin-top: auto; }
.hero-solutions { display: grid; gap: var(--space-2); margin: 0 0 var(--space-8); padding: 0; list-style: none; }
.hero-solutions a { display: inline-flex; gap: var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.hero-solutions a span { color: var(--color-gold-500); }
.solution-menu { position: relative; color: var(--color-white); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.solution-menu summary { cursor: pointer; padding-block: var(--space-2); }
.solution-menu-links { position: absolute; top: 100%; left: 0; display: grid; width: min(22rem, 85vw); padding: var(--space-3); border: var(--border-thin) solid var(--color-dark-border); border-radius: var(--radius-sm); background: var(--color-navy-900); box-shadow: var(--shadow-float); }
.solution-menu-links a { padding: var(--space-3); border-radius: var(--radius-sm); }
.solution-menu-links a:hover, .solution-menu-links a:focus-visible { background: var(--color-navy-800); }
.audience-grid > a, .application-card { padding: var(--space-8); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); }
.audience-grid > a:hover { border-color: var(--color-green-500); }
.audience-grid h3, .application-card h3 { font-size: var(--font-size-lg); }
.audience-grid p, .application-card p { margin-bottom: 0; color: var(--color-muted); }
.partner-link { display: inline-flex; margin-top: var(--space-6); }
.solution-hero { padding-top: calc(var(--size-header) + var(--space-20)); }
.solution-page-copy .eyebrow { margin-top: var(--space-8); color: var(--color-gold-500); }
.solution-page-copy h1 { max-width: 17ch; line-height: var(--line-height-heading); }
.solution-image { margin: 0; overflow: hidden; border-radius: var(--radius-lg); }
.solution-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.device-image img { object-fit: contain; }
.solution-actions { justify-content: center; margin-top: var(--space-8); }
@media (max-width: 64rem) {
  .solution-grid { grid-template-columns: 1fr; }
  .header-layout { gap: var(--space-4); }
  .site-nav { gap: var(--space-4); }
  .solution-grid .pillar-card { min-height: auto; }
  .solution-grid .pillar-card h3, .solution-grid .capability-message { min-height: auto; }
  .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .site-nav:has(.solution-menu) { overflow: visible; flex-wrap: wrap; gap: var(--space-4); }
  .solution-menu-links { left: 0; width: min(16rem, 80vw); text-align: left; }
  .hero-solutions { text-align: center; }
  .audience-grid, .application-grid, .help-grid { grid-template-columns: 1fr; }
  .solution-page-copy { text-align: center; }
  .solution-page-copy h1 { margin-inline: auto; }
  .solution-hero { padding-top: 12rem; }
}