/* ============================================================
   ServeX — serve-view.css  (/serve/<otag> detail + /serve/confirm)
   Loaded at the top of serve/tpl/view.tpl and confirm.tpl.
   Scoped to .sx-theme.
   ============================================================ */

/* ---------- page head ---------- */
.sx-theme .sx-opp{padding:56px 0 90px}
@media(max-width:640px){.sx-theme .sx-opp{padding:36px 0 64px}}
.sx-theme .sx-opp-head{text-align:center;margin-bottom:34px}
.sx-theme .sx-opp-head .badges{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:1rem}
.sx-theme .sx-opp-head h1{font-size:clamp(2.1rem,4.6vw,3.1rem);margin-bottom:.35rem}
.sx-theme .sx-opp-head .oneliner{font-size:1.1rem;color:var(--ink-dim);max-width:56ch;margin:.5rem auto .7rem;line-height:1.6}
.sx-theme .sx-opp-head .backlink{font-size:.92rem}

/* ---------- facts strip ---------- */
.sx-theme .sx-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 46px;
  background:var(--teal-soft);border:1px solid rgba(9,117,122,.14);border-radius:var(--r-sm);
  padding:18px 24px;margin-bottom:1.8rem}
.sx-theme .sx-fact{text-align:center;min-width:96px}
.sx-theme .sx-fact-label{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.sx-theme .sx-fact-val{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--ink);line-height:1.35;margin-top:.15rem}

/* ---------- role description (admin-authored HTML) ---------- */
.sx-theme .sx-descr{color:var(--ink-dim);line-height:1.75;font-size:1.02rem}
.sx-theme .sx-descr p{margin-bottom:1rem}
.sx-theme .sx-descr ul,.sx-theme .sx-descr ol{margin:0 0 1rem 1.25rem;padding:0}
.sx-theme .sx-descr li{margin-bottom:.4rem}
.sx-theme .sx-descr h2,.sx-theme .sx-descr h3,.sx-theme .sx-descr h4{margin:1.5rem 0 .5rem;color:var(--ink)}
.sx-theme .sx-descr h3{font-size:1.3rem}
.sx-theme .sx-descr h4{font-size:1.1rem}
.sx-theme .sx-descr a{text-decoration:underline}
.sx-theme .sx-descr img{border-radius:var(--r-sm);margin:1rem 0}

/* ---------- epigraph: a breath before the form ----------
   Lives inside the sign-up card, under the "Count me in" label.
   Deliberately small -- it marks the shift from reading to offering
   without becoming a full-width interruption at the moment of intent. */
.sx-theme .sx-epigraph{text-align:center;font-family:var(--serif);font-style:italic;
  font-size:1.18rem;line-height:1.5;color:var(--clay-deep);max-width:34ch;
  margin:0 auto 1.9rem;padding-bottom:1.5rem;position:relative}
.sx-theme .sx-epigraph::after{content:"";position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);width:56px;height:1px;background:var(--line)}
@media(max-width:560px){.sx-theme .sx-epigraph{font-size:1.08rem;margin-bottom:1.6rem}}

/* the offer card and the closed notice used to be separated by the
   full-width quote block; now they carry their own top margin */
.sx-theme .sx-card-offer,.sx-theme .sx-closed{margin-top:30px}

/* ---------- closed state ---------- */
.sx-theme .sx-closed{text-align:center;background:var(--clay-soft);border:1px solid rgba(192,106,69,.2);
  border-radius:var(--r);padding:32px 26px}
.sx-theme .sx-closed i{font-size:1.4rem;color:var(--clay);display:block;margin-bottom:.6rem}
.sx-theme .sx-closed .hd{font-weight:600;color:var(--ink);margin-bottom:.3rem}

/* ---------- success banner (thanks / confirm) ---------- */
.sx-theme .sx-success{background:linear-gradient(150deg,var(--ok-soft) 0%,#d9ece1 100%);
  border-bottom:1px solid rgba(47,125,79,.18);padding:34px 30px;text-align:center}
.sx-theme .sx-success i{font-size:2rem;color:var(--ok);display:block;margin-bottom:.5rem}
.sx-theme .sx-success h2{font-size:1.75rem;margin-bottom:.4rem}
.sx-theme .sx-success p{color:var(--ink-dim);font-size:.98rem;max-width:52ch;margin:0 auto}

/* ---------- micro-exercise ---------- */
.sx-theme .sx-ex-thanks{text-align:center;padding:14px 0}
.sx-theme .sx-ex-thanks i{font-size:1.4rem;color:var(--ok);display:block;margin-bottom:.5rem}

/* ---------- confirm page ---------- */
.sx-theme .sx-confirm{padding:70px 0 100px}
.sx-theme .sx-confirm .sx-card{text-align:center}
.sx-theme .sx-confirm .glyph{font-size:1.7rem;color:var(--teal);display:block;margin-bottom:.7rem}
@media(max-width:640px){.sx-theme .sx-confirm{padding:48px 0 70px}}

/* ---------- about the project (pod-level blurb) ----------
   Moved here 2026-08-21 from an inline <style> in serve/tpl/view.tpl,
   where it had lived since the card shipped after this file. Rules are
   .sx-theme-scoped to match every other rule here -- the inline copies
   were unscoped, which worked only because the class names happen to be
   unique. */
.sx-theme .sx-about{margin-top:2rem;padding-top:1.8rem;border-top:1px solid #eef1f4}
.sx-theme .sx-about-head{display:flex;align-items:center;gap:12px;margin:.9rem 0 .7rem}
.sx-theme .sx-about-logo{width:40px;height:40px;border-radius:9px;object-fit:cover;
  flex-shrink:0;border:1px solid #edf1f4}
.sx-theme .sx-about-name{font-weight:700;font-size:1.02rem}
.sx-theme .sx-about-more{margin-top:.9rem;font-size:.92rem}