/* ============ Become a Supplier page ============
   The shared hero, eyebrow, section-head and button styles come from critical.css and
   chrome.css; this sheet only owns the partner banner, the 3-step
   explainer and the supplier registration form. */

/* ---------- Partner highlight (the model explained) ---------- */
.partner{background:var(--cream)}
.partner-banner{position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(120deg,var(--green-900),var(--green-700));color:#fff;
  padding:clamp(1.75rem,4vw,2.75rem);text-align:center}
.partner-banner::after{content:"";position:absolute;right:-50px;bottom:-60px;width:220px;height:220px;
  border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.partner-banner .ico{width:3.2rem;height:3.2rem;border-radius:50%;margin:0 auto .9rem;
  background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff}
.partner-banner .ico svg{width:1.6rem;height:1.6rem}
.partner-banner h2{font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.2;font-weight:800;color:#fff;
  max-width:50rem;margin-inline:auto}
.partner-banner h2 b{color:var(--gold)}
.partner-banner p{color:rgba(255,255,255,.92);max-width:46rem;margin:.9rem auto 0;line-height:1.6}
/* 3-step "how it works" */
/* The steps are an <ol> for semantics; the theme reset only covers <ul>, so the
   numbering is turned off here — each card shows its own styled .num instead. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(1.5rem,3vw,2.25rem);
  margin-inline:0;padding:0;list-style:none}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:1.75rem 1.4rem;text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green-600)}
.step .num{position:absolute;top:1rem;right:1.1rem;font-weight:800;font-size:1.4rem;
  color:var(--cream-200);line-height:1}
.step .ico{width:3.2rem;height:3.2rem;border-radius:50%;background:#eef4e8;display:grid;
  place-items:center;color:var(--green-700);margin:0 auto .7rem}
.step .ico svg{width:1.5rem;height:1.5rem}
.step h3{font-size:1.05rem;color:var(--green-900);margin-bottom:.4rem}
.step p{font-size:.9rem;color:var(--muted);line-height:1.55}
/* ---------- Supplier form ---------- */
.supplier{background:#fff}
.supplier-form-wrap{max-width:60rem;margin-inline:auto;border:1px solid var(--line);border-radius:6px;
  background:#fff;box-shadow:var(--shadow);padding:clamp(1.4rem,3vw,2.5rem)}
.supplier-form{display:flex;flex-direction:column;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:.84rem;font-weight:600;color:var(--green-900)}
.field .req{color:var(--red)}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:6px;
  padding:.7rem .8rem;font:inherit;font-size:.92rem;color:var(--ink);background:#fff}
.field textarea{resize:vertical;min-height:7rem}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--green-600);
  box-shadow:0 0 0 3px rgba(47,158,68,.18)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.phone-row{display:flex;gap:.5rem}
.phone-row select{flex:0 0 10.5rem}
.phone-row input{flex:1;min-width:0}
.supplier-form .cf-turnstile{display:flex;justify-content:center;margin-top:.25rem}
.supplier-form .btn{align-self:center;margin-top:.25rem}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .steps{grid-template-columns:1fr}
}
@media (max-width:560px){
  .field-row{grid-template-columns:1fr}
}