/* "Start Your Data Business" promo popup (homepage only).
   Colours follow the website: yellow, white and black. */
.ap-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .25s ease; }
.ap-overlay.is-open { opacity: 1; }
.ap-card { position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; color: #111; border: 2px solid #111; box-shadow: 0 24px 60px rgba(0,0,0,.45); transform: translateY(14px) scale(.98); transition: transform .28s cubic-bezier(.2,.8,.2,1); font-family: var(--font-body, "Inter", sans-serif); }
.ap-overlay.is-open .ap-card { transform: none; }

.ap-head { position: relative; flex: none; padding: 26px 22px 22px; background: var(--yellow, #ffc629); color: #111; border-bottom: 2px solid #111; }
.ap-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; background: #111; color: var(--yellow, #ffc629); display: grid; place-items: center; }
.ap-close:hover { background: #333; }
.ap-head-row { display: flex; gap: 14px; align-items: flex-start; padding-right: 42px; }
.ap-store-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; background: #111; color: var(--yellow, #ffc629); display: grid; place-items: center; }
.ap-badge-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ap-badge-row svg { color: #111; }
.ap-badge { font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; background: #111; color: var(--yellow, #ffc629); }
.ap-title { margin: 0; font-family: var(--font-display, "Archivo Black", sans-serif); font-size: 21px; line-height: 1.15; color: #111; }
.ap-sub { margin: 12px 0 0; font-size: 14px; line-height: 1.4; color: rgba(17,17,17,.82); font-weight: 500; }

.ap-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 18px 6px; background: #fff; }
.ap-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ap-tile { border-radius: 14px; padding: 14px 6px; text-align: center; font-size: 12.5px; }
.ap-tile b { display: block; font-size: 14px; margin: 6px 0 2px; line-height: 1.2; }
.ap-tile span { font-size: 12px; line-height: 1.25; display: block; }
.ap-tile svg { display: block; margin: 0 auto; }
.ap-tile--y { background: var(--yellow, #ffc629); color: #111; }
.ap-tile--y span { color: rgba(17,17,17,.7); }
.ap-tile--g { background: #111; color: var(--yellow, #ffc629); }
.ap-tile--g b { color: #fff; }
.ap-tile--g span { color: rgba(255,255,255,.65); }
.ap-tile--b { background: #f1f1f1; color: #111; border: 1.5px solid #111; }
.ap-tile--b span { color: rgba(17,17,17,.65); }

.ap-list { margin: 16px 0 0; padding: 16px; background: #f7f7f7; border: 1.5px solid #e4e4e4; border-radius: 16px; }
.ap-list h3 { margin: 0 0 12px; font-size: 16px; display: flex; align-items: center; gap: 8px; color: #111; }
.ap-list h3 svg { color: #111; }
.ap-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.ap-item:last-child { margin-bottom: 2px; }
.ap-item svg { flex: none; color: #111; margin-top: 2px; background: var(--yellow, #ffc629); border-radius: 50%; }
.ap-item b { display: block; font-size: 15px; font-weight: 700; color: #111; }
.ap-item small { color: rgba(17,17,17,.6); font-size: 13px; }

.ap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.ap-stat { background: #111; border-radius: 14px; padding: 14px 6px; text-align: center; }
.ap-stat b { display: block; font-size: 15px; color: var(--yellow, #ffc629); }
.ap-stat small { color: rgba(255,255,255,.7); font-size: 12px; }

.ap-steps { display: none; margin-top: 14px; padding: 14px 16px; background: #fff7dd; border: 1.5px solid var(--yellow, #ffc629); border-radius: 14px; font-size: 14px; line-height: 1.5; color: #111; }
.ap-steps.is-open { display: block; }
.ap-steps ol { margin: 0; padding-left: 20px; }

.ap-foot { flex: none; padding: 14px 18px 18px; background: #fff; }
.ap-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px; border-radius: 14px; border: 0; cursor: pointer; text-decoration: none; font-weight: 800; font-size: 16px; color: #111; background: var(--yellow, #ffc629); border: 2px solid #111; box-shadow: 0 4px 0 #111; }
.ap-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 #111; }
.ap-more { width: 100%; margin-top: 14px; padding: 13px; border-radius: 14px; cursor: pointer; font-size: 15px; font-weight: 700; color: #fff; background: #111; border: 2px solid #111; }

@media (max-width: 380px) { .ap-title { font-size: 19px; } .ap-tile b { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .ap-overlay, .ap-card { transition: none; } }