/* Pinglo North Africa section (/north-africa, /north-africa/<country>) — loaded after gcc.css on those pages only
 * (<body data-section="na">). Same system as the GCC pages; the one new colour is the clay of North Africa's arches
 * and old towns (terracotta) in place of the Gulf's sand-gold, and the destination pages' art is one illustration (images/na-art.svg:
 * the ping rings around a horseshoe arch over a sunset, the Mediterranean, the pyramids and a palm); the hub's hero
 * art is the shared inline .hero-win SVG. */
:root {
  --clay: #C65A2E;
  --clay-text: #A5461F; /* AA on paper and white */
}

/* The clay replaces the GCC's gold: eyebrows, the headline's second line, the product cards' sun, icon suns. */
body[data-section="na"] { --i-sun: var(--clay); --sun-gold: var(--clay); --gold-text: var(--clay-text); }
body[data-section="na"] .eyebrow { color: var(--clay-text); }
body[data-section="na"] .prod-card-art::before { background: var(--clay); }
body[data-section="na"] .hero2 h1 .gold { color: var(--clay-text); }

/* destination pages: the same illustration, the eSIM card smaller in the lower corner so the arch's sunset and the
   pyramids stay in view (the GCC card sits over the dunes instead) */
body[data-section="na"] .gcc-pd-art .na-art-img { left: 50%; top: 2%; height: 96%; width: auto; aspect-ratio: 1; transform: translateX(-50%); }
body[data-section="na"] .gcc-pd-art .esim-card2 { z-index: 2; left: 5%; top: 54%; width: 44%; padding: 4cqw; gap: 2.6cqw; }
body[data-section="na"] .gcc-pd-art .esim-card2 .nm b { font-size: 3.6cqw; }
body[data-section="na"] .gcc-pd-art .esim-card2 .chipx { width: 10cqw; height: 7.6cqw; }


/* networks: four countries fill the row (the GCC's six use the auto-fill grid) */
body[data-section="na"] .gcc-nets { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); max-width: 960px; }