/* Product education and authentic publisher screenshots. */
.product-explainer { --px-accent:var(--green); }
.product-explainer .px-host { --px-accent:var(--blue); }
.product-explainer .px-sell { --px-accent:var(--purple); }
.product-explainer .px-panel { border:1px solid var(--line); border-top:3px solid var(--px-accent); border-radius:14px; background:linear-gradient(135deg,#f4f8fd,#fff 70%); padding:32px; }
.product-explainer .px-heading { display:flex; gap:18px; align-items:flex-start; max-width:1050px; margin-bottom:28px; }
.product-explainer .px-heading>.software-mark,.product-explainer .px-heading>.icon { flex:0 0 54px; width:54px; height:54px; color:var(--px-accent); }
.product-explainer .px-kicker { display:block; font-size:14px; font-weight:800; color:var(--px-accent); letter-spacing:.04em; margin-bottom:8px; }
.product-explainer .px-heading h2 { font-size:clamp(25px,2.3vw,34px); margin:0 0 12px; }
.product-explainer .px-heading p,.product-explainer p { font-size:16px; line-height:1.65; margin:0; }
.product-explainer h3 { font-size:19px; line-height:1.35; margin:0 0 8px; letter-spacing:-.025em; }
.product-explainer .px-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:28px; }
.product-explainer .px-benefits article { border-right:1px solid var(--line); padding-right:20px; }
.product-explainer .px-benefits article:last-child { border:0; padding-right:0; }
.product-explainer .px-benefits .icon { color:var(--px-accent); width:32px; height:32px; margin-bottom:14px; }
.product-explainer .px-close { display:flex; justify-content:space-between; align-items:center; gap:28px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.product-explainer .px-close p { max-width:860px; }
.product-explainer .px-close .btn { flex-shrink:0; }
.product-explainer figure { margin:0; min-width:0; }
.product-explainer figcaption { font-size:14px; line-height:1.5; padding:12px; text-align:center; color:#435371; }
.product-explainer .px-wordpress-view,.product-explainer .px-editor { border:1px solid #c8d6e8; border-radius:12px; overflow:hidden; background:white; box-shadow:0 10px 25px #05265712; }
.product-explainer .px-windowbar { background:var(--navy); color:#fff; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 20px; font-size:16px; }
.product-explainer .px-windowbar>span:last-child { font-size:14px; }
.product-explainer .px-content-desk { display:grid; grid-template-columns:190px 1fr; }
.product-explainer .px-desk-menu { background:#eef3fa; padding:22px; display:flex; flex-direction:column; gap:12px; font-size:15px; }
.product-explainer .px-desk-menu span { border-bottom:1px solid #d4dfed; padding-bottom:8px; }
.product-explainer .px-page-list { padding:24px; }
.product-explainer .px-page-list>div { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; }
.product-explainer .px-page-list b { color:var(--green); font-weight:600; }
.product-explainer .px-builder-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:center; }
.product-explainer .px-editor-body { display:grid; grid-template-columns:120px 1fr; min-height:330px; }
.product-explainer .px-widget-panel { background:#f1f4f9; padding:15px 10px; display:flex; flex-direction:column; gap:10px; }
.product-explainer .px-widget-panel>div { padding:10px 8px; background:#fff; border:1px solid #ccd8e9; border-radius:5px; display:flex; align-items:center; gap:8px; font-size:14px; }
.product-explainer .px-widget-panel .icon { width:21px; height:21px; color:var(--px-accent); }
.product-explainer .px-step-label { font-size:12px; font-weight:800; color:#244268; }
.product-explainer .px-editor-canvas { min-width:0; padding:16px; }
.product-explainer .px-drop-label { color:var(--px-accent); font-size:12px; font-weight:800; border-bottom:2px dashed #aabdd8; margin-bottom:12px; padding:0 0 8px; display:flex; justify-content:space-between; gap:8px; }
.product-explainer .px-drop-label b { font-size:26px; line-height:1; }
.product-explainer .px-canvas-hero { background:linear-gradient(90deg,#061a48ee,#061a4880),url('/assets/images/south-africa-flowing-flag-mobile.webp') center/cover; padding:22px; border-radius:5px; color:white; }
.product-explainer .px-demo-tag { font-size:11px; font-weight:800; letter-spacing:.1em; display:block; }
.product-explainer .px-canvas-hero>strong { display:block; font-size:27px; line-height:1.15; margin:12px 0; letter-spacing:-.03em; }
.product-explainer .px-canvas-hero>p { font-size:14px; color:#fff; line-height:1.4; }
.product-explainer .px-demo-button { display:inline-block; background:var(--yellow); color:var(--ink); padding:9px 12px; margin-top:16px; border-radius:4px; font-size:12px; font-weight:800; }
.product-explainer .px-canvas-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding-top:12px; }
.product-explainer .px-canvas-tiles>div { display:flex; flex-direction:column; align-items:center; gap:7px; font-size:12px; text-align:center; }
.product-explainer .px-canvas-tiles .icon { width:23px; height:23px; color:var(--px-accent); }
.product-explainer .px-editor-bottom { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:12px 16px; background:#ecf3ed; font-size:12px; font-weight:800; color:#125631; }
.product-explainer .px-editor-bottom>span:last-child { display:flex; align-items:center; gap:7px; }
.product-explainer .px-editor-bottom .icon { width:20px; height:20px; }
.product-explainer .px-build-steps { display:flex; flex-direction:column; list-style:none; padding:0; margin:0; gap:22px; }
.product-explainer .px-build-steps li { display:flex; gap:14px; align-items:flex-start; }
.product-explainer .px-build-steps li>span { flex:0 0 32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--px-accent); color:#fff; font-weight:800; font-size:15px; }
.product-explainer .px-two-jobs { display:grid; grid-template-columns:1fr 40px 1fr; gap:20px; margin-top:24px; align-items:center; }
.product-explainer .px-two-jobs>div { background:#fff; border:1px solid var(--line); border-radius:10px; padding:22px; }
.product-explainer .px-two-jobs>span { color:var(--px-accent); font-size:30px; text-align:center; }
.product-explainer .px-two-jobs .software-mark { width:40px; height:40px; margin-bottom:12px; }
.product-explainer .px-commerce-path { display:grid; grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr; gap:12px; align-items:center; background:#f4edf9; border-radius:10px; padding:24px; }
.product-explainer .px-commerce-path>div { display:flex; flex-direction:column; gap:5px; }
.product-explainer .px-commerce-path span { color:var(--px-accent); font-weight:800; font-size:14px; }
.product-explainer .px-commerce-path strong { font-size:17px; }
.product-explainer .px-commerce-path small { font-size:14px; }
.product-explainer .px-commerce-path>b { color:var(--px-accent); font-size:22px; }
.product-explainer .px-commerce-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; }
.product-explainer .px-commerce-features article { background:#fff; border:1px solid var(--line); border-radius:10px; padding:22px; }
.product-explainer .px-commerce-features .icon { color:var(--px-accent); width:34px; height:34px; display:block; margin-bottom:14px; }
.product-explainer .px-feature-type { display:block; color:var(--px-accent); font-size:12px; font-weight:800; margin-bottom:8px; letter-spacing:.04em; }
.product-explainer .px-local-payments { border:1px solid var(--line); border-radius:10px; padding:20px; background:#fff; margin-top:22px; }
.product-explainer .px-local-payments>strong { display:block; margin-bottom:15px; font-size:17px; }
.product-explainer .px-local-payments .payment-marks { grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
@media(max-width:1100px) {
 .product-explainer .px-builder-grid { grid-template-columns:1fr; }
 .product-explainer .px-build-steps { display:grid; grid-template-columns:1fr 1fr; }
 .product-explainer .px-benefits { grid-template-columns:1fr 1fr; }
 .product-explainer .px-benefits article:nth-child(2) { border:0; }
 .product-explainer .px-close { flex-direction:column; align-items:flex-start; }
 .product-explainer .px-commerce-features { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .product-explainer .px-local-payments .payment-marks { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px) {
 .product-explainer .px-panel { padding:20px; }
 .product-explainer .px-heading { flex-direction:column; gap:12px; }
 .product-explainer .px-heading>.software-mark,.product-explainer .px-heading>.icon { width:45px; height:45px; flex-basis:45px; }
 .product-explainer .px-heading h2 { font-size:27px; }
 .product-explainer .px-benefits,.product-explainer .px-build-steps,.product-explainer .px-commerce-features { grid-template-columns:1fr; }
 .product-explainer .px-benefits article { border-right:0; border-bottom:1px solid var(--line); padding:0 0 20px; }
 .product-explainer .px-content-desk { grid-template-columns:1fr; }
 .product-explainer .px-desk-menu { flex-direction:row; flex-wrap:wrap; gap:14px; padding:14px; }
 .product-explainer .px-desk-menu>strong { width:100%; }
 .product-explainer .px-page-list { padding:16px; }
 .product-explainer .px-page-list>div { flex-direction:column; gap:3px; }
 .product-explainer .px-windowbar { padding:12px; flex-wrap:wrap; gap:6px; }
 .product-explainer .px-editor-body { grid-template-columns:1fr; }
 .product-explainer .px-widget-panel { display:grid; grid-template-columns:1fr 1fr; }
 .product-explainer .px-step-label { grid-column:1/-1; }
 .product-explainer .px-editor-canvas { padding:12px; }
 .product-explainer .px-canvas-hero { padding:18px; }
 .product-explainer .px-canvas-hero>strong { font-size:26px; }
 .product-explainer .px-editor-bottom { flex-wrap:wrap; gap:9px; }
 .product-explainer .px-close .btn { width:100%; white-space:normal; text-align:center; }
 .product-explainer .px-two-jobs { grid-template-columns:1fr; gap:12px; }
 .product-explainer .px-two-jobs>div { padding:18px; }
 .product-explainer .px-commerce-path { grid-template-columns:1fr; gap:14px; padding:20px; }
 .product-explainer .px-commerce-path>b { transform:rotate(90deg); width:24px; }
 .product-explainer .px-local-payments { padding:14px; }
 .product-explainer .px-local-payments .payment-marks { grid-template-columns:repeat(2,minmax(0,1fr)); }
}