/* CONNECT: the one inquiry form. SOURCE OF TRUTH: b2m/assets/connect.css
   (copy to site/assets/connect.css). Every class is cx-; each site themes it by
   overriding the --cx-* tokens on .cx (see the bottom of this file). */
.cx{
  --cx-accent:#DD3333; --cx-accent-ink:#fff; --cx-accent-soft:rgba(221,51,51,.09);
  --cx-text:#0A0A0A; --cx-muted:#55555D; --cx-line:rgba(10,10,10,.22); --cx-field:#fff;
  --cx-warn:#9A5B00; --cx-radius:4px; --cx-btn-radius:var(--cx-radius);
  color:var(--cx-text);font:inherit;max-width:620px}
.cx *,.cx *::before,.cx *::after{box-sizing:border-box}
.cx-top{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.cx-bar{flex:1;height:5px;background:var(--cx-line);border-radius:3px;overflow:hidden}
.cx-bar i{display:block;height:100%;width:33%;background:var(--cx-accent);transition:width .45s cubic-bezier(.2,.7,.3,1)}
.cx-count{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cx-muted);white-space:nowrap}
.cx-title{font-size:1.375rem;font-weight:800;letter-spacing:-.015em;line-height:1.2;margin:0 0 18px}
.cx-intents{display:grid;gap:10px}
.cx-intent{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;font-weight:700;font-size:1.0625rem;
  color:var(--cx-text);background:var(--cx-field);border:2px solid var(--cx-line);border-radius:var(--cx-radius);
  padding:16px 18px;min-height:64px;cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
.cx-intent:hover{border-color:var(--cx-accent)}
.cx-intent:active{transform:scale(.99)}
.cx-intent.on{border-color:var(--cx-accent);background:var(--cx-accent-soft)}
.cx-ico{font-size:1.5rem;line-height:1;flex:none}
.cx-field{display:grid;gap:8px;margin:0 0 20px;border:0;padding:0;min-width:0}
.cx-label{font-weight:700;font-size:1rem;padding:0}
.cx-req{color:var(--cx-accent)}
.cx-hint{font-weight:400;color:var(--cx-muted);font-size:.9375rem}
.cx input,.cx textarea,.cx select{font:inherit;font-size:1.0625rem;padding:14px 15px;min-height:54px;width:100%;
  border:2px solid var(--cx-line);border-radius:var(--cx-radius);background:var(--cx-field);color:var(--cx-text)}
.cx textarea{min-height:120px;resize:vertical}
.cx input:focus,.cx textarea:focus,.cx select:focus{outline:none;border-color:var(--cx-accent)}
.cx-opts{display:flex;flex-wrap:wrap;gap:8px}
.cx-opt{font:inherit;font-weight:600;font-size:.9375rem;color:var(--cx-text);background:var(--cx-field);
  border:2px solid var(--cx-line);border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer;transition:all .15s}
.cx-opt:hover{border-color:var(--cx-accent)}
.cx-opt[aria-pressed=true]{background:var(--cx-accent);border-color:var(--cx-accent);color:var(--cx-accent-ink)}
.cx-field.bad input,.cx-field.bad textarea,.cx-field.bad .cx-opt{border-color:var(--cx-warn)}
.cx-err{margin:0;color:var(--cx-warn);font-weight:700;font-size:.9375rem;min-height:0}
.cx-err:empty{display:none}
.cx-nav{display:flex;gap:10px;margin-top:6px}
.cx-nav button{font:inherit;font-weight:800;font-size:1.0625rem;min-height:56px;border-radius:var(--cx-btn-radius);cursor:pointer;border:2px solid transparent}
.cx-next{flex:1;background:var(--cx-accent);color:var(--cx-accent-ink);border-color:var(--cx-accent)}
.cx-next[disabled]{opacity:.6}
.cx-back{padding:0 22px;background:transparent;color:var(--cx-text);border-color:var(--cx-line)!important}
.cx-note{margin:14px 0 0;font-weight:600}
.cx-note:empty{display:none}
.cx-note.warn{color:var(--cx-warn)}
.cx-note a,.cx-fine a,.cx-done a{color:inherit;font-weight:800}
.cx-fine{font-size:.9375rem;color:var(--cx-muted);margin:6px 0 16px}
.cx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cx-done{padding:8px 0}
.cx-check{width:56px;height:56px;border-radius:50%;background:var(--cx-accent);color:var(--cx-accent-ink);
  display:grid;place-items:center;font-size:1.75rem;font-weight:900;margin:0 0 16px}
.cx [hidden]{display:none!important}

/* On dark sections */
.on-ink .cx,.on-blue .cx{--cx-text:#fff;--cx-muted:rgba(255,255,255,.74);--cx-line:rgba(255,255,255,.32);
  --cx-field:rgba(255,255,255,.06);--cx-warn:#FFB020;--cx-accent-soft:rgba(255,255,255,.1)}
.on-ink .cx select option,.on-blue .cx select option{color:#0A0A0A}

/* Boys2Men v2 theme (14 Oct 2026): rounded inputs, pill buttons, brand red. Scoped to the
   boys2men form so chrisscott.me keeps its own look when this file is copied there. */
.cx[data-cx-site=boys2men]{
  --cx-accent:#D7262E; --cx-accent-soft:rgba(215,38,46,.07); --cx-text:#18181B; --cx-muted:#55555D;
  --cx-line:rgba(0,0,0,.14); --cx-radius:12px; --cx-btn-radius:999px; max-width:none}
.cx[data-cx-site=boys2men] .cx-bar{height:6px;background:rgba(0,0,0,.08)}
.cx[data-cx-site=boys2men] .cx-bar i{background:linear-gradient(90deg,#E3343B,#9E1219);border-radius:3px}
.cx[data-cx-site=boys2men] .cx-title{font-family:var(--display,inherit);font-stretch:110%;font-size:1.5rem;letter-spacing:-.02em}
.cx[data-cx-site=boys2men] .cx-intent{border-width:1px;box-shadow:0 1px 2px rgba(0,0,0,.05);padding:18px 20px;justify-content:space-between}
.cx[data-cx-site=boys2men] .cx-intent::after{content:"";width:9px;height:9px;border-top:2.5px solid var(--cx-accent);border-right:2.5px solid var(--cx-accent);transform:rotate(45deg);flex:none;margin-right:4px}
.cx[data-cx-site=boys2men] .cx-intent:hover{box-shadow:0 10px 24px -14px rgba(0,0,0,.35)}
.cx[data-cx-site=boys2men] input,.cx[data-cx-site=boys2men] textarea,.cx[data-cx-site=boys2men] select{border-width:1px;background:#FBFAF8}
.cx[data-cx-site=boys2men] input:focus,.cx[data-cx-site=boys2men] textarea:focus,.cx[data-cx-site=boys2men] select:focus{background:#fff;box-shadow:0 0 0 4px rgba(215,38,46,.14)}
.cx[data-cx-site=boys2men] .cx-opt{border-width:1px}
.cx[data-cx-site=boys2men] .cx-next{background:linear-gradient(135deg,#E3343B 0%,#B3141C 55%,#7A0C12 100%);border-color:transparent;box-shadow:0 8px 24px -10px rgba(215,38,46,.7)}
.cx[data-cx-site=boys2men] .cx-back{border-width:1px!important}
.cx[data-cx-site=boys2men] .cx-note.warn{background:#FFF6E8;border-radius:12px;padding:14px 16px;color:#7A4600}
.cx[data-cx-site=boys2men] .cx-check{background:linear-gradient(135deg,#E3343B,#9E1219)}