/* Mullahc product & service pages (on top of landing.css). */

.sp-hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.sp-visual { position: relative; }
.sp-preview { min-height: 440px; }
.sp-card-pad { padding: 18px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.lp-cards.sp-four { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Generic "panel" visual */
.sp-rows { border-radius: 26px; padding: 18px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 80px -30px rgba(34,196,68,.35); }
.sp-rows-head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 6px 12px; }
.sp-rows-head b { font-size: 1rem; }
.sp-rows-head small { color: var(--muted); }
.sp-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(15,23,42,.6); border: 1px solid var(--line); margin-top: 8px; }
.sp-row b { display: block; font-size: .95rem; color: var(--text); font-weight: 600; }
.sp-row small { color: var(--muted); font-size: .8rem; }
.sp-row .v { color: var(--soft); font-size: .9rem; text-align: right; }
.sp-row .tag { font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--soft); white-space: nowrap; }
.sp-row .tag.on { background: rgba(34,196,68,.18); color: var(--accent); }
.sp-agent-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.sp-agent-kpis div { padding: 14px 16px; border-radius: 16px; background: rgba(34,196,68,.08); border: 1px solid rgba(74,222,128,.2); }
.sp-agent-kpis small { color: var(--muted); font-size: .78rem; display: block; }
.sp-agent-kpis b { font-size: 1.2rem; letter-spacing: -.02em; }
.sp-agent-kpis b.g { color: var(--accent); }

/* Checkout visual */
.sp-checkout { max-width: 380px; margin-left: auto; border-radius: 28px; padding: 20px; background: #F6F7F3; color: #0B1F14; box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 80px -20px rgba(34,196,68,.35); }
.sp-co-head { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.sp-co-head small { margin-left: auto; color: #15803D; font-weight: 700; font-size: .72rem; background: #DCFCE7; padding: 3px 9px; border-radius: 999px; }
.sp-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #4ADE80, #15803D); flex: 0 0 auto; }
.sp-co-amt { margin: 16px 0 12px; padding: 16px; border-radius: 18px; background: #0B1F14; color: #fff; }
.sp-co-amt small { color: #A7F3D0; font-size: .75rem; }
.sp-co-amt b { display: block; font-size: 1.6rem; letter-spacing: -.02em; }
.sp-co-opt { display: grid; grid-template-columns: 36px 1fr 18px; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: #fff; border: 1.5px solid #E5E7E3; margin-top: 8px; }
.sp-co-opt .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; background: #DCFCE7; color: #15803D; }
.sp-co-opt b { display: block; font-size: .9rem; }
.sp-co-opt small { color: #6B736E; font-size: .75rem; }
.sp-co-opt i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C9CEC8; }
.sp-co-opt.on { border-color: #22C444; }
.sp-co-opt.on i { border: 5px solid #22C444; }
.sp-co-btn { margin-top: 14px; padding: 13px; text-align: center; border-radius: 999px; font-weight: 700; color: #04210F; background: linear-gradient(90deg, #4ADE80, #22C444); }

/* STK prompt visual */
.sp-prompt { position: relative; min-height: 420px; display: grid; place-items: center; }
.sp-prompt-phone { width: min(300px, 100%); aspect-ratio: 9 / 16; border-radius: 36px; padding: 14px; background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 80px -20px rgba(34,196,68,.35); background-image: radial-gradient(circle at 50% 20%, rgba(34,196,68,.25), transparent 60%); }
.sp-prompt-box { width: 88%; border-radius: 18px; background: #F3F4F0; color: #0B1F14; padding: 18px 16px; font-size: .85rem; }
.sp-prompt-box small { font-weight: 800; letter-spacing: .1em; color: #15803D; }
.sp-prompt-box p { margin: 8px 0 12px; line-height: 1.45; }
.sp-prompt-box .pin { border-bottom: 2px solid #22C444; padding: 6px 0; font-size: 1.2rem; letter-spacing: .4em; margin-bottom: 14px; }
.sp-prompt-box .btns { display: flex; justify-content: flex-end; gap: 18px; font-weight: 700; color: #6B736E; }
.sp-prompt-box .btns .ok { color: #15803D; }
.sp-prompt .lp-float.mpesa { left: 0; bottom: 30px; }

/* Payment link visual */
.sp-linkcard { max-width: 400px; margin-left: auto; border-radius: 28px; padding: 16px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 80px -20px rgba(34,196,68,.35); }
.sp-lc-url { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(15,23,42,.7); border: 1px solid var(--line); color: var(--soft); font: 500 .82rem 'JetBrains Mono', ui-monospace, monospace; }
.sp-lc-url b { color: var(--accent); font-weight: 500; }
.sp-lc-body { margin-top: 12px; padding: 18px; border-radius: 20px; background: #F6F7F3; color: #0B1F14; }
.sp-lc-body small { color: #6B736E; font-size: .75rem; }
.sp-lc-body > b { display: block; font-size: 1rem; }
.sp-lc-body .amt { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 10px; }
.sp-lc-row { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-lc-row span { font-size: .72rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: #DCFCE7; color: #15803D; }
.sp-lc-share { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.sp-lc-share span { text-align: center; font-size: .75rem; color: var(--soft); padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }

/* FAQ layout */
.sp-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 64px); align-items: start; }

/* Related links */
.sp-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.sp-rel { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: border-color .2s, transform .2s, background .2s; }
.sp-rel:hover { border-color: var(--glow); transform: translateY(-2px); background: var(--panel-hover); color: var(--text); }
.sp-rel .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(34,196,68,.1); border: 1px solid rgba(74,222,128,.22); color: var(--accent); }
.sp-rel .ic svg { width: 20px; height: 20px; }
.sp-rel b { display: block; font-size: .98rem; }
.sp-rel small { display: block; color: var(--muted); font-size: .85rem; line-height: 1.45; margin-top: 2px; }

@media (max-width: 960px) {
    .sp-faq { grid-template-columns: 1fr; }
    .sp-checkout, .sp-linkcard { margin: 0 auto; }
}
@media (max-width: 480px) {
    .sp-row { grid-template-columns: 1fr auto; }
    .sp-row .tag { display: none; }
}

.lp-cards.sp-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .lp-cards.sp-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lp-cards.sp-six { grid-template-columns: 1fr; } }