/* ══════════════════════════════════════════════════════════════
   XceedWell: additions on top of styles.css, talpro.css and
   product.css (all generated in blue by tools/build-sites.mjs).
   Put anything XceedWell-specific here, never in them.
   ══════════════════════════════════════════════════════════════ */

/* Hero: an enrolment as HR sees it, prepared by agentic review (after the prototype's review screen) */
.xw-card{position:relative;max-width:390px;margin:0 auto;background:#fff;border-radius:26px;padding:22px;box-shadow:var(--sh-xl)}
.xw-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.xw-kicker{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.xw-pending{font-size:12px;font-weight:700;color:var(--orange-deep);background:var(--bg-peachtint);border-radius:99px;padding:5px 11px}
.xw-who{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.xw-who b{display:block;font-size:16px;color:var(--ink)}
.xw-lbl{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.xw-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;font-size:14px;color:#fff;background:var(--grad-warm)}
.xw-score{display:flex;align-items:center;gap:14px;background:var(--bg-peachtint);border-radius:16px;padding:14px;margin-bottom:10px}
.xw-score b{display:block;font-size:14.5px;color:var(--ink)}
.xw-ring{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--orange) 0 96%,#fff 96% 100%)}
.xw-ring b{width:44px;height:44px;border-radius:50%;background:var(--bg-peachtint);display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--orange-deep)}
.xw-flag{border:1px solid #F5D7A1;background:#FFF8EB;border-radius:14px;padding:11px 13px;margin-bottom:14px}
.xw-flag b{display:block;font-size:13px;color:#8A5A00}
.xw-flag span{font-size:12.5px;color:#6B5A3A}
.xw-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.xw-btn{text-align:center;font-size:13.5px;font-weight:700;border:1px solid var(--line);border-radius:12px;padding:11px 6px;color:var(--text-2)}
.xw-btn.primary{background:var(--grad-brand);color:#fff;border-color:transparent}
.xw-fine{text-align:center;font-size:11.5px;color:var(--muted);margin-top:10px}

/* How it works: the full pipeline under the four steps */
.xw-pipe{list-style:none;padding:0;margin:0 0 40px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.xw-pipe li{font-size:13px;font-weight:700;color:#D9D3E2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:99px;padding:7px 14px;position:relative}
.xw-pipe li+li::before{content:"→";position:absolute;left:-12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--amber)}

/* Compliance */
.xw-flag-ic{background:#fff;border:1px solid var(--line)}
.xw-flag-ic img{width:22px;height:22px;border-radius:50%}
.xw-note{max-width:700px;margin:30px auto 0;color:var(--muted);font-size:15px;line-height:1.6}