/* ============================================================
   apply.css — InstaSupply "Become a Supplier" application flow.
   Builds on styles.css + supplier.css (tokens, nav, buttons,
   .eyebrow, footer). Three-stage journey banner + a one-screen
   lead form. Light monochrome + green confirm.
   ============================================================ */

/* ---------- page frame ---------- */
.ap-main{ padding:44px 0 90px; }
.ap-wrap{ max-width:920px; margin:0 auto; }
.ap-back{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600;
  color:var(--ink-2); margin-bottom:26px; transition:color .15s; }
.ap-back:hover{ color:var(--ink); }
.ap-back svg{ width:16px; height:16px; }

.ap-head{ text-align:center; max-width:640px; margin:0 auto 34px; }
.ap-head .eyebrow{ margin-bottom:14px; }
.ap-head h1{ font-size:clamp(30px,4.2vw,46px); font-weight:800; letter-spacing:-0.04em;
  line-height:1.04; margin:0; text-wrap:balance; }
.ap-head p{ font-size:17px; color:var(--ink-2); line-height:1.5; margin:14px 0 0; text-wrap:pretty; }

/* ---------- three-stage journey banner ---------- */
.journey{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:760px;
  margin:0 auto 44px; }
.jstage{ position:relative; border:1px solid var(--line); border-radius:16px; padding:15px 16px;
  background:#fff; display:flex; gap:12px; align-items:flex-start; }
.jstage .jn{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:14px; font-weight:800;
  background:var(--surface); color:var(--ink-3); border:1px solid var(--line); }
.jstage h4{ font-size:14.5px; font-weight:700; letter-spacing:-0.02em; margin:2px 0 3px; }
.jstage p{ font-size:12.5px; color:var(--ink-3); line-height:1.35; margin:0; }
.jstage.is-now{ border-color:var(--ink); box-shadow:0 10px 26px -14px rgba(0,0,0,.3); }
.jstage.is-now .jn{ background:var(--ink); color:#fff; border-color:var(--ink); }
.jstage.is-now h4{ color:var(--ink); }
.jstage.is-now p{ color:var(--ink-2); }
.jstage .jhere{ position:absolute; top:-9px; right:12px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; background:var(--ink); color:#fff;
  padding:3px 8px; border-radius:999px; }
@media (max-width:680px){
  .journey{ grid-template-columns:1fr; gap:8px; }
  .jstage{ align-items:center; padding:13px 15px; }
}

/* ---------- wizard shell ---------- */
.ap-card{ border:1px solid var(--line); border-radius:24px; background:#fff;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.4); overflow:hidden; }
.ap-progress{ padding:20px 30px 0; }
.ap-pmeta{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ap-pcount{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); }
.ap-pname{ font-size:14px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.ap-pbar{ height:5px; border-radius:999px; background:var(--line-2); overflow:hidden; }
.ap-pbar i{ display:block; height:100%; width:33%; background:var(--ink); border-radius:999px;
  transition:width .4s cubic-bezier(.22,1,.36,1); }
.ap-body{ padding:30px; }

.astep{ animation:apin .32s ease both; }
@keyframes apin{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.astep h2{ font-size:22px; font-weight:800; letter-spacing:-0.03em; margin:0 0 4px; }
.astep .astep-sub{ font-size:14.5px; color:var(--ink-2); line-height:1.5; margin:0 0 22px; }

/* ---------- fields ---------- */
.afield{ margin-bottom:17px; }
.afield label{ display:block; font-size:13.5px; font-weight:700; letter-spacing:-0.01em; margin-bottom:7px; }
.afield label .opt{ font-weight:500; color:var(--ink-3); }
.afield input, .afield select, .afield textarea{ width:100%; font-family:inherit; font-size:16px;
  color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:13px;
  padding:13px 15px; outline:none; transition:border-color .15s, box-shadow .15s; }
.afield textarea{ resize:vertical; min-height:88px; line-height:1.5; }
.afield input:focus, .afield select:focus, .afield textarea:focus{ border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(10,10,10,.07); }
.afield input::placeholder, .afield textarea::placeholder{ color:#9a9a9a; }
.afield .hint{ font-size:12.5px; color:var(--ink-3); margin:7px 0 0; line-height:1.4; }
.afield.err input, .afield.err select, .afield.err textarea{ border-color:#D64545; box-shadow:0 0 0 3px rgba(214,69,69,.1); }
.afield .err-msg{ display:none; font-size:12.5px; font-weight:600; color:#D64545; margin-top:6px; }
.afield.err .err-msg{ display:block; }
.arow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .arow{ grid-template-columns:1fr; } }

/* ---------- category picker ---------- */
.cat-pick{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width:640px){ .cat-pick{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cat-opt{ position:relative; display:flex; align-items:center; gap:11px; cursor:pointer; min-width:0;
  border:1px solid var(--line); border-radius:14px; padding:12px 13px; background:#fff;
  transition:border-color .14s, background .14s, transform .14s; }
.cat-opt:hover{ border-color:#cfcfcf; transform:translateY(-1px); }
.cat-opt input{ position:absolute; opacity:0; pointer-events:none; }
.cat-opt img{ width:34px; height:34px; object-fit:contain; flex-shrink:0; }
.cat-opt .cat-tx{ min-width:0; }
.cat-opt .cat-nm{ display:block; font-size:14px; font-weight:700; letter-spacing:-0.01em; line-height:1.15; }
.cat-opt .cat-sub{ display:block; font-size:11px; color:var(--ink-3); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-opt .cat-tick{ position:absolute; top:9px; right:9px; width:18px; height:18px; border-radius:50%;
  border:1.6px solid var(--line); display:flex; align-items:center; justify-content:center;
  background:#fff; transition:.14s; }
.cat-opt .cat-tick svg{ width:11px; height:11px; opacity:0; transform:scale(.6); transition:.14s; color:#fff; }
.cat-opt.on{ border-color:var(--ink); background:#FBFBF9; }
.cat-opt.on .cat-tick{ background:var(--ink); border-color:var(--ink); }
.cat-opt.on .cat-tick svg{ opacity:1; transform:none; }
.cat-count{ font-size:13px; font-weight:700; color:var(--ink-2); margin:14px 0 0; }
.cat-count b{ color:var(--ink); }

/* volume chips */
.vol-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.vol-chip{ cursor:pointer; }
.vol-chip input{ position:absolute; opacity:0; pointer-events:none; }
.vol-chip span{ display:inline-block; font-size:14px; font-weight:600; padding:10px 16px;
  border:1px solid var(--line); border-radius:999px; background:#fff; transition:.14s; }
.vol-chip:hover span{ border-color:#cfcfcf; }
.vol-chip input:checked + span{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- wizard nav ---------- */
.ap-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:22px 30px; border-top:1px solid var(--line-2); }
.ap-nav[hidden]{ display:none; }
.ap-nav .btn{ min-width:120px; }
.ap-nav .ghost-back{ background:none; border:none; font-family:inherit; font-size:14.5px;
  font-weight:600; color:var(--ink-2); cursor:pointer; padding:8px 4px; transition:color .15s; }
.ap-nav .ghost-back:hover{ color:var(--ink); }
.ap-nav .ghost-back[hidden]{ display:none; }
.ap-nav .grow{ flex:1; }
.ap-nav-note{ font-size:12.5px; font-weight:600; color:var(--ink-3); }
.ap-nav .btn:disabled{ opacity:.6; cursor:default; }
@media (max-width:560px){ .ap-nav{ flex-direction:column-reverse; align-items:stretch; text-align:center; } .ap-nav .btn{ width:100%; } }
.ap-fail{ margin:18px 0 0; padding:13px 15px; border-radius:13px; background:rgba(214,69,69,.08); border:1px solid rgba(214,69,69,.35); color:#B23A3A; font-size:13.5px; font-weight:600; line-height:1.5; }
.ap-fail[hidden]{ display:none; }
.ap-fail a{ text-decoration:underline; color:inherit; }
.ap-done{ text-align:center; padding:18px 0 8px; }
.ap-done .fs-check{ margin:0 auto 22px; }
.ap-done h2{ margin:0; }
.ap-done p{ margin:0 auto; max-width:420px; }
.ap-done .done-note{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line-2); font-size:14px; color:var(--ink-3); }
.ap-done .done-note a{ text-decoration:underline; color:var(--ink); }

/* trust line under the wizard */
.ap-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin:26px auto 0; max-width:720px; font-size:13.5px; font-weight:600; color:var(--ink-2); }
.ap-trust span{ display:inline-flex; align-items:center; gap:7px; }
.ap-trust svg{ width:15px; height:15px; flex-shrink:0; color:var(--green); }