/* Ecare Africa Partner Programme — public page components (builds on site.css tokens) */

.pp-topbar{background:var(--ink);color:#fff;text-align:center;font-size:.86rem;padding:9px 16px;font-weight:500}
.pp-topbar strong{color:#7EE7DA}
.pp-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.pp-section{padding:72px 0}
.pp-alt{background:var(--paper-raised);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pp-head{max-width:68ch;margin:0 auto 38px;text-align:center}
.pp-head.left{margin-left:0;text-align:left}
.pp-head h2{font-size:clamp(1.55rem,2.8vw,2.2rem);font-weight:700}
.pp-head p{margin-top:12px;color:var(--ink-soft);font-size:1.03rem}
.pp-eyebrow{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--brand-teal) 14%,transparent);color:var(--brand-teal-deep);padding:6px 14px;border-radius:100px;font-weight:700;font-size:.8rem;margin-bottom:14px}
.pp-crumb{font-size:.82rem;color:var(--ink-soft);padding:18px 0 0}
.pp-crumb a{color:var(--brand-blue);font-weight:600}
.pp-crumb span[aria-current]{color:var(--ink)}

/* Hero */
.pp-hero{padding:46px 0 56px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand-teal) 8%,var(--paper)) 0%,var(--paper) 55%,color-mix(in srgb,var(--brand-blue) 7%,var(--paper)) 100%)}
.pp-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.pp-hero h1{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:700;line-height:1.1}
.pp-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--brand-blue),var(--brand-teal-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-lede{margin-top:18px;font-size:1.1rem;color:var(--ink-soft);max-width:58ch}
.pp-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.pp-ticks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:24px;font-size:.9rem;font-weight:600;color:var(--ink)}
.pp-ticks li{display:flex;align-items:center;gap:7px}
.pp-ticks svg{width:16px;height:16px;color:var(--brand-teal-deep);flex-shrink:0}
.pp-earn{background:var(--paper-raised);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 30px 60px -30px rgba(var(--shadow-color),.35)}
.pp-earn small{display:block;font-size:.78rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.pp-earn .num{font-family:'Manrope',sans-serif;font-size:clamp(2.6rem,6vw,3.6rem);font-weight:800;line-height:1.05;margin:6px 0;background:linear-gradient(100deg,var(--brand-blue),var(--brand-teal-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-earn p{color:var(--ink-soft);font-size:.92rem}
.pp-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.pp-flow div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;font-weight:700;font-size:.84rem}
.pp-flow div b{display:block;font-family:'Manrope',sans-serif;font-size:1.3rem;color:var(--brand-blue)}

/* Card grids */
.pp-grid{display:grid;gap:18px}
.pp-grid.c4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pp-grid.c3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.pp-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:8px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
a.pp-card:hover{transform:translateY(-3px);border-color:var(--brand-teal);box-shadow:0 18px 34px -22px rgba(var(--shadow-color),.5)}
.pp-card h3{font-size:1.04rem;font-weight:700}
.pp-card p{font-size:.9rem;color:var(--ink-soft);flex-grow:1}
.pp-card .more{font-size:.84rem;font-weight:700;color:var(--brand-blue);margin-top:4px}
.pp-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brand-blue),var(--brand-teal));color:#fff;font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem}
.pp-ico svg{width:22px;height:22px}

/* Steps */
.pp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;counter-reset:s}
.pp-step{background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;padding:22px 22px 22px 22px;position:relative;counter-increment:s}
.pp-step::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--brand-blue);color:#fff;font-family:'Manrope',sans-serif;font-weight:700;margin-bottom:12px}
.pp-step h3{font-size:1.02rem;margin-bottom:4px}
.pp-step p{font-size:.9rem;color:var(--ink-soft)}

/* Commission */
.pp-comm{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:start}
.pp-comm-box{background:linear-gradient(130deg,var(--brand-blue-deep),var(--brand-teal-deep));color:#fff;border-radius:22px;padding:34px}
.pp-comm-box .big{font-family:'Manrope',sans-serif;font-size:clamp(2.8rem,6vw,4rem);font-weight:800;line-height:1.05;margin:10px 0}
.pp-comm-box p{color:rgba(255,255,255,.88)}
.pp-comm-box .pp-eyebrow{background:rgba(255,255,255,.14);color:#fff}
.pp-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--paper-raised);margin-top:18px}
.pp-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:420px}
.pp-table th,.pp-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
.pp-table th{background:var(--paper);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.pp-table tr:last-child td{border-bottom:0}
.pp-calc{margin-top:22px;background:var(--paper-raised);border:1px dashed var(--brand-teal);border-radius:16px;padding:20px}
.pp-calc h3{font-size:1rem;margin-bottom:4px}
.pp-calc .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.pp-calc label{display:block;font-size:.78rem;font-weight:700;margin-bottom:5px}
.pp-calc input[type=number],.pp-calc input[type=range]{width:100%}
.pp-calc input[type=number]{padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--paper);color:var(--ink)}
.pp-calc .out{margin-top:14px;font-family:'Manrope',sans-serif;font-size:1.5rem;font-weight:800;color:var(--brand-blue-deep)}
.pp-calc small{display:block;color:var(--ink-soft);font-size:.76rem;margin-top:6px}

/* Form */
.pp-form-shell{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}
.pp-form{background:var(--paper-raised);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 30px 60px -36px rgba(var(--shadow-color),.4)}
.pp-progress{height:6px;border-radius:10px;background:var(--line);overflow:hidden;margin-bottom:20px}
.pp-progress span{display:block;height:100%;width:50%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-teal));transition:width .3s ease}
.pp-stepno{font-size:.74rem;font-weight:800;letter-spacing:.06em;color:var(--brand-teal-deep)}
.pp-step-panel{display:none}
.pp-step-panel.active{display:block}
.pp-step-panel h3{font-size:1.25rem;margin:4px 0 16px}
.pp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pp-field{margin-bottom:14px}
.pp-field>label,.pp-label{display:block;font-size:.82rem;font-weight:700;margin-bottom:6px;color:var(--ink)}
.pp-field input[type=text],.pp-field input[type=email],.pp-field input[type=tel],.pp-field input[type=url],.pp-field select,.pp-field textarea,.pp-input{width:100%;padding:12px 13px;border-radius:10px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem}
.pp-field textarea{min-height:92px;resize:vertical}
.pp-field input:focus,.pp-field select:focus,.pp-field textarea:focus{outline:none;border-color:var(--brand-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-blue) 18%,transparent)}
.pp-field.has-error input,.pp-field.has-error select,.pp-field.has-error textarea{border-color:#D9534F}
.pp-error{display:none;color:#B42318;font-size:.78rem;font-weight:600;margin-top:5px}
.has-error .pp-error,.pp-error.show{display:block}
.pp-pills{display:flex;gap:10px;flex-wrap:wrap}
.pp-pill{position:relative}
.pp-pill input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pp-pill span{display:block;padding:11px 18px;border:1.5px solid var(--line);border-radius:100px;font-weight:600;font-size:.9rem;background:var(--paper);transition:.15s}
.pp-pill input:checked+span{border-color:var(--brand-blue);background:color-mix(in srgb,var(--brand-blue) 10%,var(--paper));color:var(--brand-blue-deep)}
.pp-pill input:focus-visible+span{outline:3px solid var(--focus-ring);outline-offset:2px}
.pp-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px}
.pp-check{position:relative;display:flex;align-items:center;gap:9px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:.88rem;font-weight:500;background:var(--paper);cursor:pointer}
.pp-check input{accent-color:var(--brand-blue);width:17px;height:17px;flex-shrink:0}
.pp-check:has(input:checked){border-color:var(--brand-blue);background:color-mix(in srgb,var(--brand-blue) 8%,var(--paper))}
.pp-consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;margin:10px 0;color:var(--ink)}
.pp-consent input{margin-top:3px;accent-color:var(--brand-blue);width:18px;height:18px;flex-shrink:0}
.pp-consent a{color:var(--brand-blue);text-decoration:underline}
.pp-optional{border:1px dashed var(--line);border-radius:12px;padding:0 14px;margin:6px 0 14px}
.pp-optional summary{cursor:pointer;font-weight:700;font-size:.88rem;padding:12px 0;color:var(--brand-blue-deep)}
.pp-optional[open] summary{border-bottom:1px solid var(--line);margin-bottom:14px}
.pp-actions-row{display:flex;justify-content:space-between;gap:12px;margin-top:18px;align-items:center}
.pp-fine{font-size:.78rem;color:var(--ink-soft);margin-top:10px}
.pp-success{display:none;text-align:center;padding:12px 4px}
.pp-success.show{display:block}
.pp-success .tick{width:62px;height:62px;border-radius:50%;background:color-mix(in srgb,var(--brand-teal) 18%,transparent);color:var(--brand-teal-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.pp-success h3{font-size:1.4rem;margin-bottom:8px}
.pp-success p{color:var(--ink-soft);margin-bottom:10px}
.pp-formmsg{display:none;background:#FEF3F2;border:1px solid #FDA29B;color:#B42318;padding:11px 14px;border-radius:10px;font-size:.88rem;margin-bottom:14px}
.pp-formmsg.show{display:block}
.pp-side-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;padding:20px;margin-top:16px}
.pp-side-card h3{font-size:1rem;margin-bottom:6px}
.pp-side-card p,.pp-side-card li{font-size:.9rem;color:var(--ink-soft)}
.pp-side-card ul{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.pp-side-card li{display:flex;gap:8px}
.pp-side-card li::before{content:"✓";color:var(--brand-teal-deep);font-weight:800}

/* FAQ (native <details>) */
.pp-faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.pp-faq details{background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;padding:0 20px}
.pp-faq summary{cursor:pointer;list-style:none;font-family:'Manrope',sans-serif;font-weight:700;font-size:.98rem;padding:17px 28px 17px 0;position:relative}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--brand-blue);font-weight:500}
.pp-faq details[open] summary::after{content:"–"}
.pp-faq details p{color:var(--ink-soft);font-size:.93rem;padding:0 0 18px;max-width:70ch}

/* Category + legal pages */
.pp-article{max-width:780px}
.pp-article h2{font-size:1.45rem;margin:34px 0 10px}
.pp-article h3{font-size:1.1rem;margin:22px 0 8px}
.pp-article p,.pp-article li{color:var(--ink-soft);font-size:1rem;line-height:1.7}
.pp-article p{margin:0 0 14px}
.pp-article ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.pp-article ol{padding-left:22px;display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.pp-article a{color:var(--brand-blue);text-decoration:underline}
.pp-quote{background:var(--paper-raised);border-left:4px solid var(--brand-teal);border-radius:0 12px 12px 0;padding:16px 20px;font-size:.96rem;color:var(--ink);margin:14px 0 20px;white-space:pre-line}
.pp-draft{background:#FFF7DF;border:1px solid #F2D58A;color:#6B4E00;border-radius:12px;padding:12px 16px;font-size:.88rem;margin:18px 0}
.pp-two{display:grid;grid-template-columns:1fr 330px;gap:44px;align-items:start}
.pp-aside{position:sticky;top:90px}
.pp-related{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pp-related a{font-size:.82rem;font-weight:600;padding:7px 14px;border:1px solid var(--line);border-radius:100px;background:var(--paper-raised);color:var(--ink)}
.pp-related a:hover{border-color:var(--brand-teal);color:var(--brand-blue)}
.pp-conduct{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.pp-conduct .do,.pp-conduct .dont{border-radius:16px;padding:20px;border:1px solid var(--line);background:var(--paper-raised)}
.pp-conduct h3{font-size:1rem;margin-bottom:8px}
.pp-conduct ul{display:flex;flex-direction:column;gap:7px;font-size:.9rem;color:var(--ink-soft)}
.pp-conduct .do li::before{content:"✓ ";color:var(--brand-teal-deep);font-weight:800}
.pp-conduct .dont li::before{content:"✕ ";color:#D9534F;font-weight:800}
.pp-refbanner{display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--brand-teal) 12%,var(--paper-raised));border:1px solid color-mix(in srgb,var(--brand-teal) 40%,var(--line));border-radius:14px;padding:14px 18px;margin-bottom:20px;font-size:.92rem}
.pp-refbanner svg{width:22px;height:22px;color:var(--brand-teal-deep);flex-shrink:0}

@media (max-width:980px){
  .pp-hero-grid,.pp-comm,.pp-form-shell,.pp-two{grid-template-columns:1fr}
  .pp-aside{position:static}
  .pp-form-shell{gap:26px}
}
@media (max-width:640px){
  .pp-wrap{padding:0 18px}
  .pp-section{padding:52px 0}
  .pp-row,.pp-calc .row{grid-template-columns:1fr}
  .pp-form{padding:20px 16px;border-radius:18px}
  .pp-actions .btn,.pp-actions-row .btn{width:100%}
  .pp-actions-row{flex-direction:column-reverse}
  .pp-ticks{flex-direction:column;gap:8px}
}

/* ---- layout safety: wide content must never widen the page (phones zoom out when it does) ---- */
.pp-hero-grid>*,.pp-comm>*,.pp-form-shell>*,.pp-two>*,.pp-conduct>*,.pp-grid>*,.pp-steps>*,.pp-flow>*{min-width:0}
.pp-table{min-width:0}
.pp-table th,.pp-table td{overflow-wrap:anywhere}
.pp-hp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.pp-hero-login{margin-top:16px;font-size:.95rem;color:var(--ink-soft)}
.pp-hero-login a{color:var(--brand-blue);font-weight:700;text-decoration:underline}
.pp-lede,.pp-head p,.pp-card p{overflow-wrap:break-word}
@media (max-width:640px){
  .pp-hero{padding:30px 0 40px}
  .pp-hero h1{font-size:clamp(1.9rem,8vw,2.3rem)}
  .pp-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pp-comm-box{padding:24px}
  .pp-calc .row{grid-template-columns:1fr}
  .pp-checks{grid-template-columns:1fr}
  .pp-faq details{padding:0 16px}
  .pp-topbar{font-size:.9rem;padding:10px 14px}
}

/* ---- invite-a-friend (WhatsApp share) ---- */
.btn-wa{background:#25D366;color:#fff;border-color:#25D366}
.btn-wa:hover{background:#1EB858;border-color:#1EB858;color:#fff}
.pp-invite{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;background:var(--paper-raised);border:1px solid var(--line);border-left:5px solid #25D366;border-radius:18px;padding:30px}
.pp-invite>div:first-child{flex:1 1 380px;min-width:0}
.pp-invite h2{font-size:clamp(1.35rem,2.4vw,1.8rem);margin:6px 0 8px}
.pp-invite p{color:var(--ink-soft);max-width:60ch}
.pp-invite-actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:640px){.pp-invite{padding:22px 18px}.pp-invite-actions{width:100%}.pp-invite-actions .btn{width:100%}}

/* === MOBILE TEXT BOOST (generated): keeps small text readable on phones === */
@media (max-width:640px){
  html{font-size:106.25%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  input,select,textarea{font-size:16px!important}
  .pp-topbar,
  .pp-crumb,
  .pp-earn small,
  .pp-flow div,
  .pp-card .more,
  .pp-table th,
  .pp-calc label,
  .pp-calc small,
  .pp-stepno,
  .pp-field>label,
  .pp-label,
  .pp-error,
  .pp-consent,
  .pp-fine,
  .pp-related a{font-size:.875rem}
  .pp-eyebrow{font-size:.8125rem}
}