/* =========================================================================
   hub-modal.css — the free J3U Hub 2-step signup MODAL, extracted from the
   homepage (modern/styles.css) so it can be reused on any page that already
   loads /assets/css/j3.css (which defines the design tokens below).

   Self-contained: every rule here is scoped to .hub-modal* / the modal's own
   form components (.hub-form, .fl, .seg, .pillset, .field-*, .hub-*), so it
   drops into a page without colliding with page styles.

   Pairs with /assets/js/hub-modal.js (open/close + 2-step submit) and
   /assets/js/hub-path-block.js (goal-branched success block).
   Tokens used (all from j3.css :root): --red, --red-bright, --ink, --ink-2,
   --muted, --bg-soft, --bg-tint, --line, --pill, --shadow, --shadow-sm,
   --font-head, --font-body, --ease.
   ========================================================================= */

/* ---------- Modal shell ---------- */
.hub-modal { position: fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding: 24px; }
.hub-modal.open { display:flex; }
.hub-modal-overlay { position:absolute; inset:0; background: rgba(12,13,16,.62); backdrop-filter: blur(3px); animation: hubFade .2s var(--ease); }
.hub-modal-card { position:relative; z-index:1; width:100%; max-width: 880px; max-height: 92vh; overflow:auto;
  background:#fff; border-radius:24px; box-shadow: var(--shadow); display:grid; grid-template-columns: .82fr 1.18fr;
  animation: hubPop .26s var(--ease); }
@keyframes hubFade { from{opacity:0} to{opacity:1} }
@keyframes hubPop { from{opacity:0; transform: translateY(14px) scale(.98)} to{opacity:1; transform:none} }
.hub-modal-close { position:absolute; top:14px; right:16px; z-index:3; width:36px; height:36px; border-radius:50%;
  border:0; background: rgba(255,255,255,.14); color:#fff; font-size:24px; line-height:1; cursor:pointer; transition:.2s; }
.hub-modal-close:hover { background: rgba(255,255,255,.28); }

/* aside */
.hub-aside { background: var(--ink-2); color:#fff; padding: clamp(28px,3vw,40px); position:relative; overflow:hidden; display:flex; flex-direction:column; }
.hub-aside::after { content:""; position:absolute; inset:auto -40% -45% auto; width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(211,30,3,.55), transparent 68%); }
.hub-aside > * { position:relative; z-index:1; }
.hub-aside .a-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family: var(--font-head); font-weight:600;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.hub-aside .a-eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--red); }
.hub-aside h2 { color:#fff; font-size:1.5rem; line-height:1.2; margin-bottom:14px; }
.hub-aside .a-lead { color: rgba(255,255,255,.82); font-size:.95rem; line-height:1.6; margin-bottom:22px; }
.hub-aside-list { list-style:none; padding:0; margin:0 0 auto; display:grid; gap:13px; }
.hub-aside-list li { display:flex; gap:11px; align-items:flex-start; font-family: var(--font-head); font-size:.88rem; color: rgba(255,255,255,.9); line-height:1.4; }
.hub-aside-list li svg { width:18px; height:18px; color: var(--red-bright); flex-shrink:0; margin-top:1px; }
.hub-aside .a-sign { margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-family: var(--font-head); font-size:.84rem; color: rgba(255,255,255,.6); }
.hub-aside .a-sign b { color:#fff; font-weight:600; }

/* body */
.hub-body { padding: clamp(26px,3vw,40px); }
.hub-stepind { display:flex; align-items:center; gap:7px; font-family: var(--font-head); font-weight:600; font-size:.74rem;
  letter-spacing:.06em; text-transform:uppercase; color: var(--muted); margin-bottom:14px; }
.hub-stepind .dot { width:18px; height:4px; border-radius:4px; background: var(--line); }
.hub-stepind .dot.on { background: var(--red); }
.hub-body h3 { font-size:1.25rem; color: var(--ink); margin-bottom:6px; }
.hub-body .sub { font-size:.92rem; color: var(--muted); margin-bottom:22px; line-height:1.55; }
.hub-form { display:grid; gap:18px; }
.field-label { font-family: var(--font-head); font-size:.84rem; font-weight:600; color: var(--ink); margin-bottom:8px; display:block; }
.field-optional { font-weight:400; color: var(--muted); font-size:.8rem; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* floating-label inputs */
.fl { position:relative; }
.fl input { width:100%; font-family: var(--font-body); font-size:.97rem; color: var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:11px; padding:20px 14px 8px; outline:none; transition:.2s; }
.fl label { position:absolute; left:14px; top:13px; font-family: var(--font-head); font-size:.95rem; color:#9aa0aa; pointer-events:none; transition:.16s; }
.fl input:focus { border-color: var(--red); box-shadow:0 0 0 4px rgba(211,30,3,.08); }
.fl input:focus + label, .fl input:not(:placeholder-shown) + label { top:7px; font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color: var(--red); font-weight:600; }

/* segmented control */
.seg { display:grid; grid-template-columns:repeat(3,1fr); background: var(--bg-soft); border:1.5px solid var(--line); border-radius:11px; padding:4px; gap:4px; }
.seg.seg-2 { grid-template-columns:repeat(2,1fr); }
.seg label { text-align:center; font-family: var(--font-head); font-weight:600; font-size:.86rem; color: var(--muted); padding:11px 6px; border-radius:8px; cursor:pointer; transition:.16s; position:relative; }
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg label:hover { color: var(--ink); }
.seg label:has(input:checked) { background:#fff; color: var(--ink); box-shadow: var(--shadow-sm); }

/* persona / goal / need pills */
.pillset { display:grid; gap:9px; }
.pillset label { display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); border-radius:11px; padding:13px 15px; cursor:pointer; font-family: var(--font-head); font-weight:500; font-size:.93rem; color: var(--ink); transition:.16s; }
.pillset input { width:18px; height:18px; accent-color: var(--red); flex-shrink:0; }
.pillset label:hover { border-color: var(--red); background: var(--bg-tint); }
.pillset label:has(input:checked) { border-color: var(--red); background: var(--bg-tint); font-weight:600; }

/* validation + helpers */
.fl.invalid input { border-color: var(--red); box-shadow:0 0 0 4px rgba(211,30,3,.08); }
.pillset.invalid label { border-color: var(--red); }
.seg.invalid { border-color: var(--red); }
.hub-err { display:none; color: var(--red); font-family: var(--font-head); font-weight:600; font-size:.85rem; margin:-2px 0 0; }
.hub-err.show { display:block; }
.hub-fine { font-size:.78rem; color: var(--muted); margin:2px 0 0; text-align:center; }
.hub-fine a { color: var(--red); text-decoration:underline; }
.hub-form .btn { width:100%; justify-content:center; padding:15px 28px; }

/* success */
.hub-success { text-align:center; padding: 18px 0; }
.hub-success .check-ring { width:64px; height:64px; border-radius:50%; background: var(--red); display:inline-flex; align-items:center; justify-content:center; margin-bottom:20px; box-shadow:0 10px 28px -10px rgba(211,30,3,.5); }
.hub-success .check-ring svg { width:30px; height:30px; color:#fff; }
.hub-success h3 { font-size:1.5rem; margin-bottom:14px; }
.hub-success p { font-size:1rem; color:#34373d; margin:0 auto 24px; max-width:440px; line-height:1.6; }
.hub-success .btn { display:inline-flex; width:auto; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .hub-modal-card { grid-template-columns:1fr; }
  .hub-aside { padding: 26px 24px; }
  .hub-aside-list { margin-bottom:0; }
}
@media (max-width: 540px) {
  .hub-modal { padding:0; align-items:stretch; }
  .hub-modal-card { max-height:100vh; border-radius:0; }
  .field-row { grid-template-columns:1fr; }
}

/* ---- personalized path block (post-onboarding, hub-path-block.js) ---- */
.hub-path { text-align: left; margin: 4px 0 18px; }
.hub-path p { margin: 0 0 10px; font-size: .95rem; line-height: 1.55; }
.hub-path .hub-path-lead { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; }
.hub-path-goal { border: 1px solid var(--line, #e6e2dc); border-left: 3px solid var(--red); background: var(--bg-tint, #faf7f3); border-radius: 10px; padding: 14px 16px; margin: 14px 0 6px; }
.hub-path-goal h4 { margin: 0 0 8px; font-family: var(--font-head); font-size: .95rem; letter-spacing: .01em; }
.hub-path-goal p:last-child { margin-bottom: 0; }