/* Membership registration portal. Shares tokens and base styles with site.css. */
.portal-band { background: var(--wash); padding-block: clamp(32px, 6vw, 72px) var(--band); }
.portal { max-width: 860px; margin-inline: auto; }
.portal-title { font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.02em; }
.portal-intro { color: var(--grey-d); margin-top: 12px; max-width: 60ch; }

.steps-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-block: 28px 20px; }
.steps-bar li { background: var(--white); border-radius: 0; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--grey); display: flex; align-items: center; gap: 10px; min-width: 0; }
.steps-bar .num { flex: none; width: 26px; height: 26px; border-radius: 0; background: var(--wash); color: var(--grey-d); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.steps-bar .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps-bar .is-active { background: var(--black); color: var(--white); }
.steps-bar .is-active .num { background: var(--yellow); color: var(--black); }
.steps-bar .is-done { color: var(--ink); }
.steps-bar .is-done .num { background: var(--yellow); color: var(--black); }

.sheet { background: var(--white); border-radius: 0; padding: clamp(20px, 4.5vw, 44px); }
.sheet-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; }
.sheet-title { font-size: clamp(24px, 3.4vw, 32px); }
.sheet-sub { color: var(--grey-d); margin-top: 10px; max-width: 62ch; }
.sheet-head { margin-bottom: 24px; }
.parts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.parts span { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 0; background: var(--wash); color: var(--grey-d); }
.parts .on { background: var(--black); color: var(--white); }
.parts .done { background: var(--yellow); color: var(--black); }

/* Terms text */
.intro-box { background: var(--black); color: var(--ice); border-radius: 0; padding: 20px 22px; margin-bottom: 8px; }
.intro-box p { font-size: 15px; }
.tc-sh { font-size: 22px; margin-top: 36px; }
.tc-sub { font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
.tc-p { color: var(--grey-d); margin-top: 10px; max-width: 68ch; }
.tc-p strong, .blt strong { color: var(--ink); }
.tbl-wrap { overflow-x: auto; margin-block: 16px; border-radius: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.tbl th { background: var(--black); color: var(--white); text-align: left; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 11px 14px; }
.tbl td { padding: 11px 14px; }
.tbl tbody tr:nth-child(odd) td { background: var(--wash); }
.tbl td:first-child { font-weight: 700; }
.blt { display: flex; gap: 12px; margin-top: 12px; max-width: 68ch; }
.blt p { color: var(--grey-d); }
.blt .arr { flex: none; width: 8px; height: 8px; margin-top: 10px; background: var(--black); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.blt.sub { margin-left: 20px; }
.blt.sub p { font-size: 15px; }
.blt.sub .arr { background: var(--grey); }
.thrived { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px; }
.thrived-pill { background: var(--black); color: var(--white); font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 0; }
.thrived-pill .r { color: var(--yellow); }

/* Actions */
.actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 32px; }
.actions.end { justify-content: flex-end; }
.btn-line { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 2px var(--black); }
.btn[disabled] { background: var(--wash); color: var(--grey); cursor: not-allowed; box-shadow: none; }
.btn[disabled]:active { transform: none; }

/* Acknowledgements */
.doc-link { display: flex; align-items: center; gap: 16px; background: var(--yellow); color: var(--black); border-radius: 0; padding: 16px 18px; text-decoration: none; margin-bottom: 20px; }
.doc-link b { display: block; font-size: 16px; }
.doc-link small { font-size: 13px; }
.doc-link .go { margin-left: auto; font-weight: 700; white-space: nowrap; }
.acks { display: grid; gap: 10px; }
.ack { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; background: var(--wash); border-radius: 0; padding: 18px; cursor: pointer; transition: background-color 160ms ease; }
.ack input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ack .box { grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 0; background: var(--white); box-shadow: inset 0 0 0 2px var(--grey); display: grid; place-items: center; font-weight: 700; color: transparent; transition: background-color 160ms ease; }
.ack .t { font-weight: 700; }
.ack .d { font-size: 15px; color: var(--grey-d); }
.ack:has(input:checked) { background: var(--black); }
.ack:has(input:checked) .box { background: var(--yellow); box-shadow: none; color: var(--black); }
.ack:has(input:checked) .t { color: var(--white); }
.ack:has(input:checked) .d { color: var(--ice); }
.ack:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 3px; }
.remaining { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--grey-d); }

/* Form */
.group { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.group legend { font-size: 18px; font-weight: 700; padding: 0; margin-bottom: 14px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 20px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field + .field.wide, .grid2 + .field { margin-top: 16px; }
.field label, .lbl-text { font-size: 14px; font-weight: 600; }
.req { color: var(--red); }
.field input, .field select { font: inherit; width: 100%; padding: 13px 14px; border: 0; border-radius: 0; background: var(--wash); color: var(--ink); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow 160ms ease; }
.field input:focus, .field select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--black); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--red); }
.hint { font-size: 13px; color: var(--grey); }
.err { font-size: 13px; font-weight: 600; color: var(--red); }
.group-note { color: var(--grey-d); font-size: 15px; margin-bottom: 14px; max-width: 64ch; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: block; text-align: center; font-weight: 700; padding: 15px 12px; border-radius: 0; background: var(--wash); transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.choice input:checked + span { background: var(--black); color: var(--yellow); }
.choice input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 3px; }
.choice:active span { transform: scale(0.97); }

/* Signature */
.pledge { background: var(--black); color: var(--white); border-radius: 0; padding: 20px 22px; font-weight: 500; margin-bottom: 24px; }
.sig-pad { width: 100%; height: 170px; display: block; background: var(--wash); border-radius: 0; touch-action: none; cursor: crosshair; box-shadow: inset 0 0 0 2px var(--black); }
.sig-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; color: var(--ink); }
.dates { display: grid; grid-template-columns: 1fr 1.7fr 1.2fr; gap: 8px; max-width: 360px; }
.notice { border-radius: 0; padding: 14px 16px; font-size: 15px; font-weight: 600; margin-top: 18px; }
.notice.bad { background: #FDEEEC; color: var(--red); }
.notice.info { background: var(--yellow); color: var(--black); }

/* Complete */
.done-head { text-align: left; }
.done-mark { width: 56px; height: 56px; border-radius: 0; background: var(--yellow); display: grid; place-items: center; font-size: 26px; font-weight: 700; margin-bottom: 18px; }
.ref { display: inline-block; margin-top: 18px; background: var(--black); color: var(--yellow); font-weight: 700; padding: 10px 16px; border-radius: 0; font-variant-numeric: tabular-nums; user-select: all; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 14px; }
.summary div { background: var(--wash); border-radius: 0; padding: 14px 16px; min-width: 0; }
.summary dt { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.summary dd { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.confirmed { display: grid; gap: 6px; margin-top: 14px; }
.confirmed li { display: flex; gap: 12px; align-items: center; background: var(--wash); border-radius: 0; padding: 12px 14px; font-weight: 600; font-size: 15px; }
.confirmed li::before { content: "\2713"; width: 22px; height: 22px; flex: none; border-radius: 0; background: var(--yellow); display: grid; place-items: center; font-size: 12px; }
.sub-h { font-size: 18px; margin-top: 32px; }
.help { margin-top: 18px; font-size: 14px; color: var(--grey-d); }
.help a { font-weight: 700; }

@media (max-width: 560px) {
  .steps-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions .btn { flex: 1 1 100%; justify-content: center; }
  .doc-link { flex-wrap: wrap; }
  .doc-link .go { margin-left: 0; }
}