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

/* Hero: a learner's home, after the prototype's learner home screen */
.xs-card{position:relative;max-width:390px;margin:0 auto;background:#fff;border-radius:26px;padding:22px;box-shadow:var(--sh-xl)}
.xs-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.xs-logo{height:24px;width:auto}
.xs-kicker{font-size:12px;font-weight:700;color:var(--muted)}
.xs-lbl{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.xs-course{display:flex;justify-content:space-between;align-items:center;gap:10px}
.xs-course b{display:block;font-size:14.5px;color:var(--ink)}
.xs-course span{font-size:12px;color:var(--muted);font-weight:600}
.xs-course em{font-style:normal;font-size:13px;font-weight:800;color:var(--orange-dark)}
.xs-bar{height:7px;border-radius:99px;background:var(--line-2);overflow:hidden;margin:8px 0 14px}
.xs-bar i{display:block;height:100%;border-radius:99px;background:var(--grad-warm)}
.xs-bar i.w68{width:68%}.xs-bar i.w12{width:12%}
.xs-goal{display:flex;align-items:center;gap:14px;background:var(--bg-peachtint);border-radius:16px;padding:14px;margin-top:4px}
.xs-goal b{display:block;font-size:14px;color:var(--ink)}
.xs-goal span{font-size:12px;color:var(--muted);font-weight:600}
.xs-ring{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--orange) 0 78%,#fff 78% 100%)}
.xs-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)}
.xs-fine{text-align:center;font-size:11.5px;color:var(--muted);margin-top:12px}