/* Desktop composition follows the supplied Mbongo+ mockup. */
@media (min-width: 1101px) {
  .container { width: min(100% - 96px, 1450px); }
  .topbar { background: #fff; }
  .nav { min-height: 58px; gap: 16px; }
  .brand strong { font-size: 26px; letter-spacing: -.055em; }
  .brand small { font-size: 10px; margin-top: 2px; }
  .nav nav { gap: 27px; }
  .nav nav a { font-size: 12px; font-weight: 600; }
  .nav nav a.active { padding-bottom: 9px; border-bottom: 2px solid #bd8b30; }
  .client-link, .download-top, .team-link { font-size: 12px; }
  .download-top { padding: 11px 18px; }

  .hero { position: relative; height: 405px; background: #063d31; }
  .hero-layout { width: 100%; max-width: none; height: 100%; min-height: 0; display: block; position: relative; }
  .hero-copy { position: absolute; z-index: 4; left: max(48px,calc((100vw - 1450px)/2 + 48px)); top: 0; bottom: 0; width: min(475px,39vw); padding: 22px 0; justify-content: center; align-items: flex-start; }
  .hero h1 { font-size: clamp(42px,3.75vw,56px); line-height: .91; letter-spacing: -.055em; margin: 10px 0 16px; }
  .hero-text { font-size: 14px; line-height: 1.46; max-width: 470px; }
  .hero-buttons { margin: 16px 0 14px; gap: 10px; }
  .btn { min-height: 44px; padding: 0 22px; }
  .test-notice { font-size: 11px; border-color: rgba(255,255,255,.3); }
  .hero-photos { position: absolute; inset: 0; padding: 0; display: block; min-height: 0; }
  .main-person { position: absolute; inset: 0 230px 0 0; min-height: 0; border-radius: 0; }
  .main-person > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .main-person:after { background: linear-gradient(90deg,#053d32 0%,rgba(5,61,50,.98) 22%,rgba(5,61,50,.84) 37%,rgba(5,61,50,.25) 54%,transparent 72%); }
  .hand-note { left: 48%; top: 110px; font-size: 24px; transform: rotate(-9deg); line-height: 1.08; text-align: center; }
  .side-stack { position: absolute; z-index: 3; top: 15px; right: 18px; bottom: 15px; width: min(295px,22vw); grid-template-rows: 1fr 1fr; gap: 12px; }
  .photo-card { border: 1px solid rgba(255,255,255,.72); border-radius: 12px; }
  .photo-card strong { font-size: 15px; }
  .photo-card span { font-size: 11px; }
  .photo-card figcaption:after { content: '→'; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; border: 1px solid #e7bd58; border-radius: 50%; display: grid; place-items: center; color: #f5d37f; }
  .mobile-hero-gallery { display: none; }

  .services { padding: 15px 0 8px; background: #fff; border: 0; }
  .service-grid { gap: 18px; }
  .service-grid article { min-height: 128px; grid-template-columns: 64px 1fr; gap: 14px; padding: 17px 17px 16px; border-color: #edf0ec; border-radius: 14px; }
  .service-icon { width: 62px; height: 62px; background: #f8e9c7; color: #064a3a; }
  .service-icon svg { width: 31px; height: 31px; }
  .service-grid h3 { font-size: 16px; margin-bottom: 6px; }
  .service-grid p { font-size: 11px; line-height: 1.42; padding-right: 9px; }

  .trust-section { padding: 15px 0 10px; }
  .trust-layout { grid-template-columns: 31% 34% 1fr; gap: 24px; min-height: 171px; }
  .trust-copy h2 { font-size: clamp(26px,2.35vw,34px); line-height: 1.04; margin: 6px 0 10px; }
  .trust-copy > p:last-child { font-size: 11px; line-height: 1.4; }
  .benefit-row { gap: 4px; }
  .benefit-row article { padding: 2px; }
  .benefit-row svg { width: 29px; height: 29px; fill: #064a3a; }
  .benefit-row strong { font-size: 12px; margin-top: 10px; }
  .benefit-row p { font-size: 10px; line-height: 1.4; }
  .people-row { gap: 5px; transform: rotate(-2deg); }
  .people-row figure { min-height: 165px; border-radius: 8px; }
  .people-row img { height: 165px; }
  .people-row figure:nth-child(n+4) { display: none; }
  .people-row strong { font-size: 11px; }
  .people-row span { font-size: 9px; }

  .how { display: none; }
  .how:target { display: block; padding: 45px 0; }
  .download-zone { padding: 0 0 6px; }
  .download-zone .container { width: min(100% - 46px,1496px); }
  .download-banner { min-height: 172px; max-height: 172px; border-radius: 16px; grid-template-columns: 31% 34% 1fr; gap: 18px; padding: 0 27px; }
  .phone-preview { position: relative; height: 172px; width: 100%; overflow: visible; align-self: stretch; justify-content: flex-start; }
  .phone-shell { position: absolute; left: 50px; top: -18px; width: 178px; height: 275px; border: 7px solid #12251e; border-radius: 28px; transform: rotate(-8deg); overflow: hidden; background: #fff; z-index: 2; }
  .phone-shell.secondary { left: 170px; top: -7px; transform: rotate(-2deg); z-index: 1; }
  .phone-shell > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .phone-notch { display: none; }
  .phone-ui { padding: 28px 11px 12px; }
  .download-copy .section-kicker { font-size: 10px; }
  .download-copy h2 { font-size: clamp(23px,2vw,30px); margin: 4px 0 6px; }
  .download-copy p:not(.section-kicker) { font-size: 11px; line-height: 1.42; margin: 0; }
  .download-copy .download-disclaimer { font-size: 10px; margin-top: 6px; }
  .store-row { margin-top: 10px; }
  .store-row a { padding: 8px 13px; background: #111; color: #fff; }
  .download-features { grid-template-columns: repeat(4,1fr); gap: 5px; }
  .download-features > span { border-left: 1px solid rgba(255,255,255,.15); min-height: 80px; padding: 5px; font-size: 20px; }
  .download-features small { font-size: 9px; }

  footer { margin: 0; padding: 14px 0 12px; }
  .footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
  .footer-grid { grid-template-columns: 2.25fr repeat(4,1fr); gap: 28px; padding-bottom: 6px; }
  .footer-grid p { margin: 4px 0; font-size: 10px; line-height: 1.25; }
  .footer-grid > div:not(:first-child) { gap: 3px; }
  .footer-grid > div:not(:first-child) > strong { font-size: 10px; margin: 0 0 3px; }
  .footer-grid a:not(.brand) { font-size: 10px; }
  .footer-line { padding-top: 5px; font-size: 9px; }
}

@media (max-width: 1100px) {
  .hero-photos { min-height: 440px; }
  .main-person { min-height: 430px; }
  .main-person > img { width: 100%; height: 430px; object-fit: cover; }
  .main-person:after { background: linear-gradient(0deg,rgba(2,39,30,.7),transparent 60%); }
  .side-stack { display: none; }
  .mobile-hero-gallery { display: flex; }
  .service-icon svg { width: 28px; height: 28px; }
  .benefit-row svg { width: 29px; height: 29px; fill: #064a3a; }
  .how { display: block; }
  .phone-shell > img { height: 100%; width: 100%; object-fit: cover; object-position: top; border-radius: 24px; }
  .phone-shell.secondary { display: none; }
  .footer-grid { grid-template-columns: repeat(2,1fr); }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .hero-photos { display: block; padding: 0; min-height: 430px; }
  .main-person { min-height: 430px; }
  .mobile-hero-gallery { display: none; }
}

@media (max-width: 760px) {
  .hero-copy { padding-bottom: 26px; }
  .main-person > img { height: 430px; }
  .hand-note { top: 50px; left: 22px; font-size: 22px; }
  .download-banner { overflow: hidden; }
  .footer-grid { gap: 18px; }
}

/* Reuse the app's exact DRC flag map and wordmark styling. */
.topbar .app-logo{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:4px 10px 4px 6px;border-radius:10px;background:#073e30;color:#fff;white-space:nowrap}
.app-logo .brand-map{display:block;width:43px;height:45px;object-fit:contain;flex:0 0 43px;filter:drop-shadow(0 0 1px #f2c75c) drop-shadow(0 3px 4px rgba(0,0,0,.24))}
.app-logo>span{display:grid;min-width:0}
.app-logo strong{font:800 24px/1 Manrope,Arial,sans-serif;letter-spacing:-1px;background:linear-gradient(180deg,#ffe894,#c8911a);-webkit-background-clip:text;background-clip:text;color:transparent}
.app-logo strong span{color:#f0bd42}
.app-logo small{display:block;margin-top:5px;font:500 8.5px/1.15 'DM Sans',Arial,sans-serif;color:#fff;letter-spacing:0}
.footer-brand.app-logo{flex-direction:row;align-items:center;gap:8px}
.footer-brand.app-logo strong{font-size:23px}
@media(max-width:760px){.topbar .app-logo{padding:4px 7px 4px 3px;gap:5px}.topbar .app-logo .brand-map{width:36px;height:40px;flex-basis:36px}.topbar .app-logo strong{font-size:20px}.topbar .app-logo small{display:block;font-size:7px;margin-top:4px}}
@media(max-width:380px){.topbar .app-logo .brand-map{width:30px;height:35px;flex-basis:30px}.topbar .app-logo strong{font-size:18px}.topbar .app-logo small{font-size:6.4px}}

/* The download section carries the same app brand as the navigation and footer. */
.download-app-logo{display:inline-flex;align-items:center;gap:8px;margin-bottom:7px;text-align:left}
.download-app-logo .brand-map{width:37px;height:40px;flex-basis:37px}
.download-app-logo strong{font-size:22px}
.download-app-logo small{font-size:8px}
@media(max-width:760px){.download-app-logo{justify-content:center;margin:0 auto 12px}.download-app-logo .brand-map{width:43px;height:46px;flex-basis:43px}.download-app-logo strong{font-size:24px}.download-app-logo small{font-size:8.5px}}

/* Keep the country silhouette sharp inside the scaled phone preview. */
.phone-shell:not(.secondary)::after{content:"";position:absolute;z-index:3;left:5px;top:24px;width:19px;height:23px;background:#064b37 url("/drc-flag-map.svg") center/contain no-repeat;pointer-events:none}
@media(max-width:1100px){.phone-shell:not(.secondary)::after{left:6px;top:26px;width:20px;height:24px}}

/* Final download section polish: readable content, clear calls to action, consistent symbols. */
.download-features svg{display:block;width:26px;height:26px;color:#f3d17a;flex:0 0 auto}
.download-features>span{gap:7px}
.download-features small{margin:0}
.store-row a:first-child{background:#e7bd58;color:#153a30}
.store-row a:last-child{border:1px solid rgba(255,255,255,.65);background:transparent;color:#fff}
@media(min-width:1101px){
  .download-banner{min-height:300px;max-height:none;padding:22px 27px}
  .phone-preview{height:210px}
  .download-copy .download-disclaimer{margin-top:8px}
}
@media(max-width:760px){
  .download-zone{padding:20px 0 28px}
  .download-banner{gap:16px;padding:25px 18px 22px;border-radius:20px}
  .download-copy h2{font-size:clamp(25px,7vw,32px);line-height:1.12;margin:10px 0 12px}
  .download-copy p:not(.section-kicker){font-size:14px;line-height:1.5}
  .store-row{display:grid;grid-template-columns:1fr;gap:10px;width:100%;max-width:360px;margin:18px auto 0}
  .store-row a{min-height:48px;display:flex;justify-content:center;align-items:center;font-size:13px;padding:10px 14px}
  .download-copy p.download-disclaimer{margin:14px auto 0;font-size:12px;line-height:1.45;max-width:350px}
  .phone-preview{height:240px;margin:0;overflow:visible}
  .phone-shell{transform:rotate(-3deg) scale(.87);transform-origin:center bottom}
  .download-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .download-features>span{min-height:95px;padding:12px 7px;gap:7px;border:1px solid rgba(255,255,255,.19);border-radius:13px;background:rgba(255,255,255,.055)}
  .download-features svg{width:25px;height:25px}
  .download-features small{font-size:11px;line-height:1.3}
  .footer-grid{gap:22px}
}
@media(max-width:380px){.download-top{font-size:9px;padding:9px 8px}.download-features small{font-size:10px}}