/* =========================================================================
   Page-specific composition.
   Kept separate from the design system so the system stays reusable.
   ========================================================================= */

/* -------------------- Login -------------------- */

/* ----- Login (Figma-spec) ----- */

.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1234fr) minmax(0, 686fr);
  background: #ffffff;
  font-family: var(--vs-font-body);
}

.login__left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 80px;
  background: #ffffff;
}

.login__form-wrap {
  width: 100%;
  max-width: 588px;
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: 52px;
  width: 100%;
}

.login__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #000000;
  align-self: center;
}

.login__brand-mark {
  display: inline-block;
  width: 58px;
  height: 44px;
  flex-shrink: 0;
}

.login__brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.login__brand-word {
  display: block;
  height: 28px;
  width: auto;
  max-width: 430px;
}

.login__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.2;
  letter-spacing: -1px;
  color: #000000;
  margin: 0;
  text-align: center;
}

.login__tabs {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.login__tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 52px;
  padding: 12px 20px;
  border-radius: 60px;
  border: 0;
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #000000;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-card-title);
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.login__tab svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.login__tab--active,
.login__tab[aria-selected="true"] {
  background: #576038;
  color: #ffffff;
  backdrop-filter: none;
}

.login__fields {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

.login__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.login__field[hidden] { display: none; }

.login__view {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.login__view[hidden] { display: none; }

.login__code-prompt {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.3;
  color: #000000;
  text-align: center;
  margin: 0;
}

.login__code {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  width: 100%;
}

.login__code-cell {
  appearance: none;
  width: 100%;
  height: 77px;
  padding: 0;
  background: rgba(230, 230, 224, 0.4);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  line-height: 1;
  color: #000000;
  text-align: center;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.login__code-cell:hover {
  border-color: rgba(0, 0, 0, 0.32);
}

.login__code-cell:focus {
  outline: 0;
  border-color: #576038;
  box-shadow: 0 0 0 4px rgba(87, 96, 56, 0.18);
}

.login__code-cell:not(:placeholder-shown),
.login__code-cell[data-filled="true"] {
  background: #ffffff;
  border-color: #576038;
}

/* ----- Forgot password ----- */

.fp-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 460px;
  align-self: center;
}

.fp-steps__step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

.fp-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.fp-steps__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 200ms ease;
}

.fp-steps__step--active .fp-steps__num {
  background: #576038;
  border-color: #576038;
  color: #ffffff;
}

.fp-steps__step--active .fp-steps__label {
  color: #000000;
  font-weight: 600;
}

.fp-steps__step--done .fp-steps__num {
  background: #e8eed7;
  border-color: #576038;
  color: #576038;
}

.fp-steps__step--done .fp-steps__label {
  color: rgba(0, 0, 0, 0.7);
}

/* Success state inside forgot-password */
.login__view--success {
  align-items: center;
  text-align: center;
}

.login__view--success .login__title,
.login__view--success .login__code-prompt {
  text-align: center;
}

.fp-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* Link styled like a submit button (for "Log in to your account") */
.login__submit--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}

.login__submit--link:hover {
  background: #3F4828;
  color: #ffffff;
}

/* Resend row */
.fp-resend {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
  margin: 0;
}

.fp-resend__btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-label);
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  margin-left: 4px;
}

.fp-resend__btn:hover {
  color: #576038;
}

/* Mismatch / error message */
.fp-mismatch {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: #b53b2c;
  margin: 8px 0 0;
}

/* Two-column field layout for new-password step */
.login__fields--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 720px) {
  .login__fields--two-col {
    grid-template-columns: 1fr;
  }
}

/* Password rules guidance */
.password-rules {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 8px;
}

.password-rules__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
  transition: color 200ms ease;
}

.password-rules__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.password-rules__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.password-rules__circle {
  fill: rgba(0, 0, 0, 0.08);
  stroke: rgba(0, 0, 0, 0.25);
  stroke-width: 1.5;
  transition: fill 200ms ease, stroke 200ms ease;
}

.password-rules__check {
  stroke: rgba(0, 0, 0, 0.25);
  transition: stroke 200ms ease;
}

.password-rules__item--valid {
  color: #000000;
}

.password-rules__item--valid .password-rules__circle {
  fill: #2D7E3F;
  stroke: #2D7E3F;
}

.password-rules__item--valid .password-rules__check {
  stroke: #ffffff;
}

@media (max-width: 720px) {
  .fp-steps__label { font-size: var(--portal-text-caption); }
  .fp-steps__num { width: 24px; height: 24px; font-size: var(--portal-text-caption); }
  .login__code-cell { height: 64px; font-size: var(--portal-text-section); }
  .login__code { gap: 12px; }
}

.login__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: #000000;
  opacity: 0.8;
  margin: 0;
}

.login__input {
  appearance: none;
  width: 100%;
  height: 77px;
  padding: 0 30px;
  background: rgba(230, 230, 224, 0.4);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.3;
  color: #000000;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.login__input::placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.login__input:hover {
  border-color: rgba(0, 0, 0, 0.32);
}

.login__input:focus {
  outline: 0;
  border-color: #576038;
  box-shadow: 0 0 0 4px rgba(87, 96, 56, 0.18);
}

.login__pw {
  position: relative;
  width: 100%;
}

.login__pw .login__input {
  padding-right: 88px;
}

.login__pw-toggle {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  padding: 0;
}

.login__pw-toggle:hover {
  color: #000000;
}

.login__pw-toggle svg {
  width: 32px;
  height: 32px;
}

.login__forgot {
  display: block;
  margin-top: 20px;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.6);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.login__forgot:hover {
  color: #000000;
}

.login__submit-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.login__submit {
  appearance: none;
  border: 0;
  background: #576038;
  color: #ffffff;
  font-family: 'Stratum2', var(--vs-font-display, var(--vs-font-body));
  font-weight: 900;
  font-size: var(--portal-text-section);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 24px 40px;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  transition: background 200ms ease;
}

.login__submit:hover {
  background: #3F4828;
}

.login__signup {
  text-align: center;
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: #000000;
}

.login__signup a {
  color: #000000;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-left: 4px;
}

/* ----- Login: view entry animation ----- */

.login__view--enter {
  animation: loginViewIn 280ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
}

@keyframes loginViewIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .login__view--enter { animation: none; }
}

/* ----- Login: "or" divider between password and code-login ----- */

.login__divider {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
}

.login__divider-line {
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.14);
}

.login__divider-word {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}

/* ----- Login: secondary submit (outlined olive, "Send me a code") ----- */

.login__submit--alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  color: var(--vs-olive);
  border: 2px solid var(--vs-olive);
  transition: background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              color 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.login__submit--alt:hover {
  background: #e8eed7;
  color: var(--vs-olive);
}

.login__submit--alt:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
}

.login__submit--alt:active {
  transform: scale(0.98);
}

.login__submit--alt svg {
  flex-shrink: 0;
}

.login__submit:active:not(:disabled) {
  transform: scale(0.98);
}

/* Press feedback on the primary submit pill */
.login__submit {
  transition: background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* ----- Login: OTP prompt + target identifier ----- */

.login__code-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login__code-target {
  font-weight: 600;
  color: #000000;
  white-space: nowrap;
}

/* ----- Login: code-view footer row (back + resend) ----- */

.login__code-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.login__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 14px 12px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  min-height: 48px;
  border-radius: 8px;
  transition: color 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.login__back:hover {
  color: #000000;
  background: rgba(0, 0, 0, 0.04);
}

.login__back:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 2px;
}

.login__back:active {
  transform: scale(0.97);
}

.login__resend {
  background: transparent;
  border: 0;
  padding: 12px 4px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  color: var(--vs-olive);
  cursor: pointer;
  border-radius: 8px;
  min-height: 48px;
  transition: opacity 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              color 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.login__resend:hover:not(:disabled) {
  opacity: 0.72;
}

.login__resend:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
}

.login__resend:active:not(:disabled) {
  transform: scale(0.97);
}

.login__resend:disabled {
  color: rgba(0, 0, 0, 0.42);
  cursor: not-allowed;
}

/* Right panel: black card with V-pattern decoration */
.login__right {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 20px 16px;
  background: #ffffff;
}

.login__panel {
  position: relative;
  flex: 1 1 auto;
  background: #000000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 160px 60px 80px;
  color: #ffffff;
  min-height: 0;
}

.login__panel-bg {
  position: absolute;
  top: -60px;
  left: -89px;
  width: 1025px;
  height: 774px;
  max-width: none;
  pointer-events: none;
  user-select: none;
  opacity: 0.65;
  z-index: 0;
}

.login__panel > *:not(.login__panel-bg) {
  position: relative;
  z-index: 1;
}

.login__pitch {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-hero);
  line-height: 1.2;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0;
  text-align: center;
  max-width: 100%;
}

/* ===== Carousel: 3-up peek ===== */
.login-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 100%;
  margin: 60px 0;
}

.login-carousel__viewport {
  position: relative;
  width: 100%;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-carousel__viewport::before,
.login-carousel__viewport::after {
  content: "";
  position: absolute;
  width: 208px;
  height: 415px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("../img/login/ellipse-glow.svg");
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

.login-carousel__viewport::before { left: -130px; }
.login-carousel__viewport::after { right: -130px; }

.login-carousel__track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.login-carousel__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: transform 500ms cubic-bezier(0.5, 0, 0, 1), opacity 400ms ease, width 500ms cubic-bezier(0.5, 0, 0, 1), height 500ms cubic-bezier(0.5, 0, 0, 1);
}

.login-carousel__slide--active {
  width: 330px;
  height: 350px;
  opacity: 1;
  visibility: visible;
  z-index: 3;
  cursor: default;
  transform: translate(-50%, -50%);
}

.login-carousel__slide--prev,
.login-carousel__slide--next {
  width: 236px;
  height: 250px;
  opacity: 0.5;
  visibility: visible;
  z-index: 2;
}

.login-carousel__slide--prev {
  transform: translate(calc(-50% - 200px), -50%);
}

.login-carousel__slide--next {
  transform: translate(calc(-50% + 200px), -50%);
}

.login-carousel__slide--hidden {
  width: 236px;
  height: 250px;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

.login-carousel__card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 60px;
  gap: 12px;
}

.login-carousel__slide--prev .login-carousel__card,
.login-carousel__slide--next .login-carousel__card {
  padding: 14px 43px;
  gap: 9px;
  border-radius: 9px;
}

.login-carousel__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.login-carousel__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
  z-index: 1;
}

.login-carousel__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.login-carousel__slide--prev .login-carousel__inner,
.login-carousel__slide--next .login-carousel__inner {
  gap: 9px;
}

.login-carousel__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 60px;
  font-family: 'Stratum2', var(--vs-font-display, var(--vs-font-body));
  font-weight: 900;
  font-size: var(--portal-text-card-title);
  line-height: 1.1;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0;
  white-space: nowrap;
}

.login-carousel__slide--prev .login-carousel__pill,
.login-carousel__slide--next .login-carousel__pill {
  font-size: 14.29px;
  padding: 8.571px 14.286px;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.login-carousel__brand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-carousel__brand--equifax { width: 100%; max-width: 210px; height: auto; }
.login-carousel__brand--agero { width: 171px; height: 54px; }
.login-carousel__brand--hrblock { width: 210px; height: 38px; object-fit: contain; }
.login-carousel__brand--fox {
  width: 79px;
  height: 79px;
  border-radius: 4px;
  overflow: hidden;
}
.login-carousel__brand--fox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-carousel__slide--prev .login-carousel__brand--equifax,
.login-carousel__slide--next .login-carousel__brand--equifax { max-width: 150px; }
.login-carousel__slide--prev .login-carousel__brand--agero,
.login-carousel__slide--next .login-carousel__brand--agero { width: 122px; height: 39px; }
.login-carousel__slide--prev .login-carousel__brand--hrblock,
.login-carousel__slide--next .login-carousel__brand--hrblock { width: 150px; height: 27px; }
.login-carousel__slide--prev .login-carousel__brand--fox,
.login-carousel__slide--next .login-carousel__brand--fox { width: 56px; height: 56px; }

.login-carousel__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: #ffffff;
  text-align: center;
  max-width: 167px;
  margin: 0;
}

.login-carousel__slide--prev .login-carousel__sub,
.login-carousel__slide--next .login-carousel__sub {
  font-size: 12.86px;
  max-width: 119px;
}

.login-carousel__dots {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.login-carousel__dot {
  appearance: none;
  border: 0;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease, width 200ms ease;
}

.login-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.login-carousel__dot--active {
  background: #ffffff;
  width: 28px;
}

.login__partner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 0;
}

.login__partner-mark {
  display: block;
  width: 60px;
  height: 57px;
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: cover;
}

.login__partner-text {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: #ffffff;
  opacity: 0.8;
  max-width: 120px;
}

@media (max-width: 1199px) {
  .login {
    grid-template-columns: 1fr;
  }
  .login__right {
    order: -1;
    padding: 16px;
    min-height: 600px;
  }
  .login__left {
    padding: 60px 32px;
  }
  .login__panel {
    padding: 60px 32px 60px;
  }
  .login__panel-bg {
    width: 800px;
    height: 600px;
    top: -40px;
    left: -100px;
  }
  .login-carousel {
    margin: 32px 0;
  }
}

@media (max-width: 720px) {
  .login__left { padding: 40px 20px; }
  .login__form { gap: 32px; }
  .login__title { font-size: var(--portal-text-display); }
  .login__brand-word { height: 22px; }
  .login__brand-mark { width: 42px; height: 32px; }
  .login__pitch { font-size: var(--portal-text-section); }
  .login__tab { font-size: var(--portal-text-label); padding: 10px 16px; height: 44px; }
  .login__tab svg { width: 20px; height: 20px; }
  .login__input { height: 64px; padding: 0 20px; font-size: var(--portal-text-body); }
  .login__pw .login__input { padding-right: 64px; }
  .login__pw-toggle { right: 20px; }
  .login__label { font-size: var(--portal-text-label); }
  .login__forgot { font-size: var(--portal-text-body); }
  .login__submit { font-size: var(--portal-text-body); padding: 18px 24px; }
  .login__signup { font-size: var(--portal-text-label); }
  .login-carousel__viewport { height: 280px; }
  .login-carousel__slide--active { width: 240px; height: 260px; }
  .login-carousel__slide--prev { transform: translate(calc(-50% - 130px), -50%); width: 160px; height: 180px; }
  .login-carousel__slide--next { transform: translate(calc(-50% + 130px), -50%); width: 160px; height: 180px; }
  .login-carousel__pill { font-size: var(--portal-text-caption); padding: 8px 14px; }
}

/* -------------------- Sign up -------------------- */

.signup {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  background: #fff;
}

.signup__left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 96px;
  background: #fff;
}

.signup__form-wrap {
  width: 100%;
  max-width: 784px;
}

.signup__form {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.signup__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.signup__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--vs-ink);
}

.signup__brand-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 28px;
  color: var(--vs-ink);
}

.signup__brand-mark svg {
  width: 100%;
  height: 100%;
}

.signup__brand-word {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-section);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-ink);
}

.signup__divider {
  width: 1px;
  height: 40px;
  background: rgba(0, 0, 0, 0.2);
}

.signup__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-hero);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}

.signup__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.signup__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.signup__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signup__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.8);
}

.signup__input {
  width: 100%;
  background: rgba(230, 230, 224, 0.4);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 24px 30px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-card-title);
  line-height: 1.3;
  color: var(--vs-ink);
  transition: border-color 200ms ease-out, background 200ms ease-out;
}

.signup__input::placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.signup__input:focus-visible {
  outline: none;
  border-color: var(--vs-olive);
  background: #fff;
}

.signup__pw {
  position: relative;
}

.signup__input--pw {
  padding-right: 72px;
}

.signup__pw-toggle {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: color 200ms ease-out, background 200ms ease-out;
}

.signup__pw-toggle:hover,
.signup__pw-toggle:focus-visible {
  color: var(--vs-ink);
  background: rgba(0, 0, 0, 0.06);
  outline: none;
}

.signup__hint {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
  margin: 4px 0 0;
}

.signup__consent {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  cursor: pointer;
}

.signup__check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.signup__consent-box {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--vs-olive);
  border-radius: 4px;
  color: transparent;
  transition: background 200ms ease-out, color 200ms ease-out;
}

.signup__check:checked + .signup__consent-box {
  background: var(--vs-olive);
  color: #fff;
}

.signup__check:focus-visible + .signup__consent-box {
  outline: 2px solid var(--vs-olive);
  outline-offset: 2px;
}

.signup__consent-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.4;
  color: #494949;
  text-align: left;
}

.signup__consent-link {
  color: #494949;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.signup__consent-link:hover { color: var(--vs-olive); }

.signup__actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.signup__submit {
  appearance: none;
  width: 100%;
  background: var(--vs-olive);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 22px 32px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-section);
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease-out, opacity 200ms ease-out;
}

.signup__submit:hover:not(:disabled) {
  background: var(--vs-olive-deep, #3F4828);
}

.signup__submit:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
}

.signup__submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.signup__login-link {
  text-align: center;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 0;
}

.signup__login-link a {
  color: var(--vs-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* -------------------- Sign up — Right panel -------------------- */

.signup__right {
  padding: 16px 16px 16px 0;
  display: flex;
}

.signup__panel {
  position: relative;
  flex: 1;
  background: #000;
  border-radius: 12px;
  padding: 80px 80px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}

.signup__panel-pattern {
  position: absolute;
  top: -60px;
  left: -89px;
  width: 1025px;
  height: 774px;
  background: url("../img/signup/pattern-bg.svg") no-repeat top left / contain;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.signup__pitch {
  position: relative;
  z-index: 1;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-hero);
  line-height: 1.2;
  letter-spacing: -1px;
  color: #fff;
  text-align: center;
  margin: 0;
  max-width: 18ch;
}

.signup__carousel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.signup__cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.signup__card {
  position: relative;
  flex-shrink: 0;
  width: 240px;
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 20px 20px;
  gap: 8px;
  opacity: 0.5;
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.signup__card--active {
  width: 280px;
  height: 320px;
  padding: 20px 32px 24px;
  gap: 12px;
  opacity: 1;
}

.signup__card-media {
  position: absolute;
  inset: 0;
  background: #1a1a1a center/cover;
  z-index: 0;
}

/* Legacy card background-image rules removed Sprint 9e — the signup
   markup moved to the canonical .auth-showcase (§16). The old photos
   remain in assets/img/signup/ only because the stale (unserved)
   root-level auth pages still reference them through the shared
   assets symlink. */

.signup__card-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
  z-index: 1;
}

.signup__card > *:not(.signup__card-media):not(.signup__card-veil) {
  position: relative;
  z-index: 2;
}

.signup__card-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  margin-bottom: auto;
  align-self: center;
}

.signup__card--active .signup__card-pill {
  font-size: var(--portal-text-body);
  padding: 10px 20px;
}

.signup__card-equifax {
  width: 70%;
  max-width: 200px;
  height: auto;
  display: block;
}

.signup__card-agero {
  width: 60%;
  max-width: 120px;
  height: auto;
  display: block;
}

.signup__card-fox-mark {
  width: 56px;
  height: 56px;
  background: url("../img/signup/fox-nation-small.png") no-repeat center/contain;
  border-radius: 4px;
}

.signup__card-caption {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.4;
  color: #fff;
  text-align: center;
  margin: 0;
  max-width: 18ch;
}

.signup__card--active .signup__card-caption {
  font-size: var(--portal-text-label);
  max-width: 20ch;
}

.signup__dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.signup__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease-out, width 200ms ease-out;
}

.signup__dot:hover { background: rgba(255, 255, 255, 0.8); }

.signup__dot--active {
  width: 28px;
  background: #fff;
}

.signup__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.signup__partner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.signup__partner-mark {
  width: 60px;
  height: 57px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}

.signup__partner-text {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}

/* -------------------- Sign up — Responsive -------------------- */

@media (max-width: 1280px) {
  .signup {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
  .signup__left { padding: 48px 56px; }
  .signup__panel { padding: 60px 48px 48px; gap: 36px; }
  .signup__pitch { font-size: var(--portal-text-hero); }
  .signup__card { width: 200px; height: 220px; }
  .signup__card--active { width: 240px; height: 280px; }
}

@media (max-width: 1023px) {
  .signup {
    grid-template-columns: 1fr;
  }
  .signup__right {
    order: -1;
    padding: 16px;
  }
  .signup__panel {
    padding: 48px 32px 40px;
    min-height: 480px;
  }
  .signup__left { padding: 40px 24px; }
  .signup__head { gap: 16px; }
  .signup__title { font-size: var(--portal-text-section); }
  .signup__divider { display: none; }
  .signup__fields { gap: 20px; }
  .signup__row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .signup__input { padding: 20px 24px; font-size: var(--portal-text-body); }
}

@media (max-width: 600px) {
  .signup__panel { padding: 32px 20px 28px; gap: 24px; }
  .signup__pitch { font-size: var(--portal-text-section); max-width: 16ch; }
  .signup__cards { gap: 12px; }
  .signup__card { width: 140px; height: 170px; padding: 12px; }
  .signup__card--active { width: 180px; height: 220px; padding: 14px 18px; }
  .signup__card-equifax { width: 80%; }
  .signup__card-caption { font-size: var(--portal-text-caption); }
  .signup__card--active .signup__card-caption { font-size: var(--portal-text-caption); }
  .signup__title { font-size: var(--portal-text-section); }
  .signup__brand-word { font-size: var(--portal-text-body); }
  .signup__brand-mark { width: 28px; height: 22px; }
  .signup__submit { padding: 18px 24px; font-size: var(--portal-text-body); }
}

/* -------------------- Sign up — Wizard (4 steps) -------------------- */

/* Wizard variant of the form header — brand on its own line, then title */
.signup__head--wizard {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: nowrap;
}

.signup__form--wizard {
  gap: 32px;
}

/* ----- Stepper ----- */

.signup__stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.signup__stepper-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

.signup__stepper-item::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.12);
  transition: background 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.signup__stepper-item:last-child::after {
  display: none;
}

.signup__stepper-item--done::after {
  background: var(--vs-olive);
}

.signup__stepper-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  min-height: 48px;
  font: inherit;
  color: inherit;
  text-align: left;
  flex-shrink: 0;
  transition: opacity 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.signup__stepper-btn:disabled {
  cursor: default;
}

.signup__stepper-btn:not(:disabled):hover {
  opacity: 0.78;
}

.signup__stepper-btn:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 2px;
}

.signup__stepper-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.signup__stepper-num {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: rgba(0, 0, 0, 0.55);
  transition: background 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              border-color 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              color 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.signup__stepper-num-text,
.signup__stepper-check {
  grid-area: 1 / 1;
  transition: opacity 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.signup__stepper-check {
  opacity: 0;
  transform: scale(0.6);
}

.signup__stepper-label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.signup__stepper-item--active .signup__stepper-num {
  background: var(--vs-olive);
  border-color: var(--vs-olive);
  color: #fff;
}

.signup__stepper-item--active .signup__stepper-label {
  color: var(--vs-ink);
  font-weight: 600;
}

.signup__stepper-item--done .signup__stepper-num {
  background: #e8eed7;
  border-color: var(--vs-olive);
  color: var(--vs-olive);
}

.signup__stepper-item--done .signup__stepper-num-text {
  opacity: 0;
  transform: scale(0.6);
}

.signup__stepper-item--done .signup__stepper-check {
  opacity: 1;
  transform: scale(1);
}

.signup__stepper-item--done .signup__stepper-label {
  color: rgba(0, 0, 0, 0.72);
}

/* ----- View container + entry animation ----- */

.signup__view {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 360px;
}

.signup__view[hidden] {
  display: none;
}

.signup__view--enter {
  animation: signupViewIn 280ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
}

@keyframes signupViewIn {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .signup__view--enter { animation: none; }
  .signup__stepper-num,
  .signup__stepper-label,
  .signup__stepper-item::after { transition: none; }
}

.signup__view-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.signup__view-eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0;
}

.signup__view-prompt {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.4;
  letter-spacing: -0.2px;
  color: var(--vs-ink);
  margin: 0;
}

.signup__view-prompt-value {
  font-weight: 600;
  color: var(--vs-ink);
  white-space: nowrap;
}

/* ----- OTP code grid (scoped from login) ----- */

.signup__code {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  width: 100%;
}

.signup__code-cell {
  appearance: none;
  width: 100%;
  height: 76px;
  padding: 0;
  background: rgba(230, 230, 224, 0.4);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1;
  color: var(--vs-ink);
  text-align: center;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out, background 180ms ease-out;
}

.signup__code-cell:hover {
  border-color: rgba(0, 0, 0, 0.32);
}

.signup__code-cell:focus {
  outline: 0;
  border-color: var(--vs-olive);
  box-shadow: 0 0 0 4px rgba(87, 96, 56, 0.18);
}

.signup__code-cell:not(:placeholder-shown),
.signup__code-cell[data-filled="true"] {
  background: #ffffff;
  border-color: var(--vs-olive);
}

/* ----- Resend + change row ----- */

.signup__resend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.signup__change,
.signup__resend-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 12px 4px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  color: var(--vs-olive);
  cursor: pointer;
  border-radius: 8px;
  min-height: 48px;
  transition: opacity 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              color 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.signup__change:hover,
.signup__resend-btn:not(:disabled):hover {
  opacity: 0.72;
}

.signup__change:focus-visible,
.signup__resend-btn:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
}

.signup__change:active,
.signup__resend-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.signup__resend-btn:disabled {
  color: rgba(0, 0, 0, 0.42);
  cursor: not-allowed;
}

/* ----- Back button + action row ----- */

.signup__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 14px 12px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  cursor: pointer;
  min-height: 48px;
  border-radius: 8px;
  transition: color 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.signup__back:hover {
  color: var(--vs-ink);
  background: rgba(0, 0, 0, 0.04);
}

.signup__back:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 2px;
}

.signup__back:active {
  transform: scale(0.97);
}

.signup__back--link {
  color: rgba(0, 0, 0, 0.7);
}

.signup__actions--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Inline (non-full-width) variant of the submit pill */
.signup__submit--inline {
  width: auto;
  flex-shrink: 0;
  padding: 18px 32px;
  font-size: var(--portal-text-body);
  transition: background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              opacity 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.signup__submit--inline:active:not(:disabled) {
  transform: scale(0.97);
}

.signup__login-link--wizard {
  margin-top: 4px;
  text-align: left;
  font-size: var(--portal-text-label);
  color: rgba(0, 0, 0, 0.7);
}

/* ----- Wizard responsive ----- */

@media (max-width: 960px) {
  .signup__stepper-label { display: none; }
  .signup__stepper-item { gap: 0; }
  .signup__view { min-height: 320px; }
  .signup__view-prompt { font-size: var(--portal-text-card-title); }
  .signup__code { gap: 10px; }
  .signup__code-cell { height: 64px; font-size: var(--portal-text-section); }
}

@media (max-width: 560px) {
  .signup__actions--row { flex-direction: column-reverse; align-items: stretch; }
  .signup__submit--inline { width: 100%; }
  .signup__back { justify-content: center; }
  .signup__code { gap: 8px; }
  .signup__code-cell { height: 56px; font-size: var(--portal-text-section); border-radius: 10px; }
  .signup__form--wizard { gap: 24px; }
}

/* -------------------- Dashboard -------------------- */

.dash-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.dash-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0;
  max-width: 18ch;
  color: #fff;
}

.dash-stats {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .dash-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .dash-stats--5col {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .dash-stats--2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dash-row {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .dash-row {
    grid-template-columns: 5fr 7fr;
  }
}

/* Dashboard alerts preview (paired with the score history chart) */

.dash-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dash-alerts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dash-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--vs-surface-alt);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card);
}

.dash-alert__body {
  min-width: 0;
}

.dash-alert__title {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  font-weight: 600;
  color: var(--vs-ink);
  margin: 0;
}

.dash-alert__meta {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
  margin: var(--space-1) 0 0;
}

.dash-alerts__footer {
  margin-top: auto;
  padding-top: var(--space-3);
}

@media (max-width: 768px) {
  .dash-alert {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .dash-alert > .vs-btn {
    justify-self: flex-start;
  }
}

.dash-shortcuts {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .dash-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dash-shortcuts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.shortcut {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--vs-ink);
  min-height: 168px;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
}

.shortcut:hover {
  border-color: var(--vs-line-strong);
  box-shadow: var(--shadow-pop);
  transform: translateY(-2px);
}

.shortcut__title {
  font-size: var(--portal-text-card-title);
  font-weight: 600;
  margin: 0;
}

.shortcut__sub {
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted);
  margin: 0;
}

.shortcut__arrow {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vs-olive-deep);
}

/* -------------------- Score detail -------------------- */

.score-card {
  background: var(--vs-surface-alt);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card-lg);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-6);
}

.score-card__provider {
  display: inline-flex;
  height: 32px;
  align-items: center;
  padding: 0 var(--space-4);
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-pill);
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vs-ink-muted);
}

.score-card__big {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
}

.score-card__num {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-num-mega);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
}

.score-card__delta {
  font-size: var(--portal-text-body);
  font-weight: 500;
  color: var(--vs-olive-deep);
  padding-bottom: 12px;
}

.score-card__date {
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted);
  margin: 0;
}

.factor {
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 196px;
}

.factor__title {
  font-size: var(--portal-text-card-title);
  font-weight: 600;
  margin: 0;
}

.factor__summary {
  margin: 0;
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted);
}

.factor--link {
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, background-color 200ms ease-out;
}

.factor__hint {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--vs-line);
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--vs-olive-deep);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.factor__arrow {
  transition: transform 200ms ease-out;
  display: inline-block;
}

.factor--link:hover {
  border-color: var(--vs-olive);
  background: var(--vs-surface);
  color: var(--vs-ink);
  box-shadow: 0 4px 16px rgba(63, 74, 42, 0.08);
}

.factor--link:hover .factor__arrow {
  transform: translateX(4px);
}

.factor--link:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
  border-radius: var(--radius-card);
}

@media (prefers-reduced-motion: reduce) {
  .factor--link,
  .factor__arrow {
    transition: none;
  }
  .factor--link:hover .factor__arrow {
    transform: none;
  }
}

/* -------------------- Report -------------------- */

.report-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.report-summary__title {
  font-size: var(--portal-text-section);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

.report-summary__sub {
  margin: 0;
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted);
  max-width: 56ch;
}

.report-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* -------------------- Alerts -------------------- */

.alert-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card);
  align-items: center;
}

.alert-row + .alert-row {
  margin-top: var(--space-3);
}

.alert-row__title {
  font-size: var(--portal-text-card-title);
  font-weight: 600;
  margin: 0 0 4px;
}

.alert-row__body {
  font-size: var(--portal-text-label);
  margin: 0 0 4px;
  color: var(--vs-ink);
}

.alert-row__meta {
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .alert-row {
    grid-template-columns: 1fr;
  }
}

.alert-empty {
  background: var(--vs-surface-alt);
  border: 1px dashed var(--vs-line);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.alert-empty__headline {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-body);
  font-weight: 600;
  color: var(--vs-ink);
  margin: 0;
}

.alert-empty__body {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted);
  margin: 0;
}

/* -------------------- Optimal path -------------------- */

.goal-rail {
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-input);
  padding: var(--space-5) var(--space-6);
}

.goal-rail__heads {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.goal-rail__head {
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
  letter-spacing: 0.02em;
}

.goal-rail__head strong {
  display: block;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-hero);
  color: var(--vs-ink);
  letter-spacing: 0;
}

.goal-rail__track {
  position: relative;
  height: 12px;
  background: var(--vs-line);
  border-radius: var(--radius-pill);
}

.goal-rail__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--vs-olive);
  border-radius: var(--radius-pill);
  width: 0;
  transition: width 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.goal-rail__thumb {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  background: var(--vs-olive);
  border: 4px solid var(--vs-surface);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px var(--vs-line);
}

.recommendation {
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.recommendation__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

.recommendation__title {
  font-size: var(--portal-text-body);
  font-weight: 600;
  margin: 0;
}

.recommendation__body {
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted);
  margin: 0;
}

.recommendation.is-in-plan {
  border-left: 2px solid var(--vs-olive);
  background: var(--vs-success-bg);
}

.recommendation-grid__count {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted);
  margin: 0;
}

.recommendation-grid__count strong {
  font-family: var(--vs-font-display);
  color: var(--vs-olive);
  font-size: var(--portal-text-card-title);
  margin-right: var(--space-1);
}

/* Score tools — Credit page promo pair (Plan + Simulator) */
.score-tools {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .score-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.score-tool {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--vs-ink);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, background-color 200ms ease-out;
}

.score-tool:hover {
  border-color: var(--vs-olive);
  box-shadow: 0 4px 16px rgba(63, 74, 42, 0.08);
  color: var(--vs-ink);
}

.score-tool:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
  border-radius: var(--radius-card);
}

.score-tool__title {
  font-size: var(--portal-text-section);
  font-weight: 600;
  margin: 0;
}

.score-tool__sub {
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted);
  margin: 0;
}

.score-tool__arrow {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--vs-line);
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--vs-olive-deep);
  transition: transform 200ms ease-out;
  display: inline-block;
}

.score-tool:hover .score-tool__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .score-tool,
  .score-tool__arrow {
    transition: none;
  }
  .score-tool:hover .score-tool__arrow {
    transform: none;
  }
}

/* Top monthly interest list (debts page) */
.top-interest {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--portal-hairline);
}

/* Each row is a flat table-style band — no per-row card, just a hairline
   below. The whole list reads as one calm table, not a stack of loud
   coloured cards. */
.top-interest__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--portal-space-8);
  padding: var(--portal-space-7) 0;
  border-bottom: 1px solid var(--portal-hairline);
  align-items: center;
}

.top-interest__creditor {
  font-family: var(--portal-font-body);
  font-size: var(--portal-text-body);
  font-weight: 600;
  margin: 0;
  color: var(--portal-ink);
}

.top-interest__meta {
  font-family: var(--portal-font-body);
  font-size: var(--portal-text-caption);
  color: var(--portal-ink-muted);
  margin: var(--portal-space-1) 0 0;
}

.top-interest__amt {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--portal-space-2);
  font-family: var(--portal-font-body);
  font-size: var(--portal-text-caption);
  color: var(--portal-ink-muted);
  text-align: right;
}

.top-interest__amt strong {
  font-family: var(--portal-font-display);
  font-size: var(--portal-num-stat);
  font-weight: 500;
  letter-spacing: -0.6px;
  color: var(--portal-olive-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.top-interest__footer {
  display: flex;
  flex-direction: column;
  gap: var(--portal-space-4);
  align-items: flex-start;
  margin-top: var(--portal-space-8);
}

.top-interest__footer .vs-caption {
  margin: 0;
  font-size: var(--portal-text-caption);
  color: var(--portal-ink-muted);
  line-height: 1.5;
}

/* -------------------- Protection -------------------- */

.id-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--vs-line);
}

.id-row:last-child {
  border-bottom: none;
}

.id-row__label {
  font-size: var(--portal-text-caption);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vs-ink-muted);
  margin: 0 0 4px;
  font-weight: 600;
}

.id-row__value {
  font-size: var(--portal-text-body);
  font-weight: 600;
  color: var(--vs-ink);
  margin: 0;
}

.id-row__sub {
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
  margin: 4px 0 0;
}

/* -------------------- Score simulator -------------------- */

.sim-rail {
  position: relative;
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-6) var(--space-8);
}

.sim-rail__bands {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: var(--space-2);
}

.sim-rail__band {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--vs-line);
}

.sim-rail__band--vp { background: #d8634a; }
.sim-rail__band--p { background: #e29a45; }
.sim-rail__band--f { background: #d2a02c; }
.sim-rail__band--g { background: #92a558; }
.sim-rail__band--e { background: var(--vs-olive); }

.sim-rail__legend {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  font-size: var(--portal-text-caption);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vs-ink-muted);
}

.sim-rail__indicator {
  position: absolute;
  bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.sim-rail__indicator-num {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-display);
  line-height: 1;
}

.sim-rail__indicator-arrow {
  width: 0;
  height: 0;
  margin-top: 4px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--vs-ink);
}

.scenario {
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  cursor: pointer;
  text-align: left;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
  font: inherit;
  color: inherit;
}

.scenario:hover,
.scenario[aria-pressed="true"] {
  border-color: var(--vs-ink);
  box-shadow: var(--shadow-pop);
}

.scenario[aria-pressed="true"] {
  background: var(--vs-surface-alt);
}

.scenario__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.scenario__label {
  font-size: var(--portal-text-body);
  font-weight: 600;
  margin: 0;
}

.scenario__delta {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
}

.scenario__delta--up { color: var(--vs-olive-deep); }
.scenario__delta--down { color: var(--vs-danger-ink); }
.scenario__delta--zero { color: var(--vs-ink-muted); }

.scenario__body {
  margin: 0;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
}

/* -------------------- Debts -------------------- */

.debt-cat {
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.debt-cat__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.debt-cat__label {
  font-size: var(--portal-text-body);
  font-weight: 600;
  margin: 0;
}

.debt-cat__balance {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  letter-spacing: -1px;
}

.debt-cat__rail {
  height: 8px;
  background: var(--vs-line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.debt-cat__rail-fill {
  height: 100%;
  background: var(--vs-olive);
  border-radius: var(--radius-pill);
  width: 0;
  transition: width 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.debt-cat__rail-fill--installment { background: #92a558; }
.debt-cat__rail-fill--mortgage { background: var(--vs-ink); }

.debt-cat__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
}

.debt-cat__summary {
  margin: 0;
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted);
}

.debt-cat--link {
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, background-color 200ms ease-out;
}

.debt-cat__hint {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--vs-line);
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--vs-olive-deep);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.debt-cat__arrow {
  transition: transform 200ms ease-out;
  display: inline-block;
}

.debt-cat--link:hover {
  border-color: var(--vs-olive);
  background: var(--vs-surface);
  color: var(--vs-ink);
  box-shadow: 0 4px 16px rgba(63, 74, 42, 0.08);
}

.debt-cat--link:hover .debt-cat__arrow {
  transform: translateX(4px);
}

.debt-cat--link:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
  border-radius: var(--radius-card);
}

@media (prefers-reduced-motion: reduce) {
  .debt-cat--link,
  .debt-cat__arrow {
    transition: none;
  }
  .debt-cat--link:hover .debt-cat__arrow {
    transform: none;
  }
}

.cost-of-carry {
  background: var(--vs-panel-dark);
  color: #fff;
  border-radius: var(--radius-card-lg);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .cost-of-carry {
    grid-template-columns: 5fr 7fr;
    align-items: center;
  }
}

.cost-of-carry__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  margin: 0;
}

.cost-of-carry__amount {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 1;
  color: #fff;
  margin: 0;
  letter-spacing: -1px;
}

.cost-of-carry__note {
  font-size: var(--portal-text-caption);
  color: rgba(255, 255, 255, 0.7);
  margin: var(--space-3) 0 0;
}

.cost-of-carry__split {
  display: grid;
  gap: var(--space-3);
}

.cost-of-carry__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--portal-text-label);
}

.cost-of-carry__row:last-child {
  border-bottom: none;
}

.cost-of-carry__row strong {
  color: #fff;
}

.cost-of-carry__row span {
  color: rgba(255, 255, 255, 0.78);
}

.protection-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--vs-line);
}

.protection-item:last-child { border-bottom: none; }

.protection-item__title {
  font-size: var(--portal-text-body);
  font-weight: 600;
  margin: 0;
}

.protection-item__body {
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted);
  margin: 0;
}

.partner-card {
  background: var(--vs-surface-alt);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card-lg);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 768px) {
  .partner-card {
    grid-template-columns: 1fr auto;
  }
}

.partner-card__tag {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vs-olive-deep);
  margin: 0 0 var(--space-3);
}

.partner-card__head {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-hero);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}

.partner-card__body {
  font-size: var(--portal-text-body);
  color: var(--vs-ink-muted);
  margin: 0;
  max-width: 56ch;
}

/* -------------------- NewDay Home -------------------- */

.benefit-hero {
  position: relative;
  background: var(--vs-panel-dark);
  color: #fff;
  border-radius: var(--radius-card-lg);
  padding: var(--space-12);
  overflow: hidden;
  background-image:
    linear-gradient(135deg, rgba(14, 20, 16, 0.6), rgba(14, 20, 16, 0.96)),
    url("../img/hero-credit.svg");
  background-size: cover;
  background-position: center;
}

.benefit-hero__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.benefit-hero__brand-mark {
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: var(--vs-ink);
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-label);
  width: 44px;
  height: 44px;
  border-radius: 8px;
  letter-spacing: 0.04em;
}

.benefit-hero__brand-name {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-card-title);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.benefit-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1.05;
  margin: 0 0 var(--space-5);
  max-width: 18ch;
  letter-spacing: -1px;
}

.benefit-hero__lead {
  font-size: var(--portal-text-body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 60ch;
  margin: 0 0 var(--space-8);
}

.included-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.included-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--vs-line);
  font-size: var(--portal-text-body);
}

.included-list li:last-child { border-bottom: none; }

.included-list li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--vs-success-bg);
  color: var(--vs-success-ink);
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  margin-top: 2px;
}

.plus-strip {
  background: linear-gradient(135deg, #1f1a0e 0%, #2c2615 100%);
  color: #f1e6c1;
  border-radius: var(--radius-card-lg);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  border: 1px solid var(--vs-gold);
  align-items: center;
}

@media (min-width: 768px) {
  .plus-strip { grid-template-columns: 1fr auto; }
}

.plus-strip__tag {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vs-gold);
  margin: 0 0 var(--space-3);
}

.plus-strip__head {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-section);
  font-weight: 400;
  margin: 0;
  color: #fff;
}

.plus-strip__body {
  margin: var(--space-3) 0 0;
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
}

.plus-strip__btn {
  background: var(--vs-gold);
  color: #1f1a0e;
  border-color: var(--vs-gold);
}

.plus-strip__btn:hover {
  background: #b48d33;
  color: #1f1a0e;
  border-color: #b48d33;
}

.faq {
  display: grid;
  gap: var(--space-3);
}

.faq__item {
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
}

.faq__item[open] { border-color: var(--vs-line-strong); }

.faq__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  font-size: var(--portal-text-body);
  font-weight: 600;
  list-style: none;
  padding: var(--space-2) 0;
  min-height: 48px;
}

.faq__summary::-webkit-details-marker { display: none; }

.faq__summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: var(--portal-text-section);
  font-weight: 400;
  color: var(--vs-ink-muted);
  border-radius: 50%;
  background: var(--vs-surface-alt);
  flex: 0 0 32px;
}

.faq__item[open] .faq__summary::after { content: "–"; }

.faq__body {
  padding: var(--space-3) 0 var(--space-3);
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted);
  margin: 0;
}

.partner-info {
  background: var(--vs-surface-alt);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}

.partner-info__phone {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-section);
  margin: var(--space-3) 0 0;
}

/* -------------------- Account page -------------------- */

.account-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  background: var(--vs-surface);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-pill);
  padding: var(--space-2);
}

.account-anchors a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--space-4);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-ink-muted);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background 200ms ease-out, color 200ms ease-out;
}

.account-anchors a:hover,
.account-anchors a:focus-visible {
  background: var(--vs-surface-alt);
  color: var(--vs-ink);
}

.account-section {
  scroll-margin-top: var(--space-12);
}

.account-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.account-section__title {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-section);
  font-weight: 600;
  margin: 0;
}

.account-section__sub {
  margin: 0;
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted);
  max-width: 64ch;
}

.member-overview {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 768px) {
  .member-overview { grid-template-columns: auto 1fr auto; }
}

.member-overview__avatar {
  display: inline-grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--vs-olive);
  color: #fff;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-hero);
  letter-spacing: 0.02em;
}

.member-overview__name {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-hero);
  margin: 0;
  letter-spacing: -1px;
}

.member-overview__meta {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin: var(--space-3) 0 0;
  color: var(--vs-ink-muted);
  font-size: var(--portal-text-label);
}

.payment-card {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--vs-line);
  border-radius: var(--radius-card);
  background: var(--vs-surface);
}

.payment-card + .payment-card { margin-top: var(--space-3); }

.payment-card__brand {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 36px;
  background: var(--vs-ink);
  color: #fff;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.04em;
  border-radius: 6px;
}

.payment-card__num {
  font-family: var(--vs-font-body);
  font-feature-settings: "tnum" 1;
  font-size: var(--portal-text-card-title);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.payment-card__sub {
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
  margin-top: 2px;
}

.empty-state {
  background: var(--vs-surface-alt);
  border: 1px dashed var(--vs-line-strong);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  text-align: center;
}

.empty-state__title {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-section);
  font-weight: 400;
  margin: 0 0 var(--space-3);
}

.empty-state__body {
  margin: 0 auto;
  max-width: 56ch;
  color: var(--vs-ink-muted);
  font-size: var(--portal-text-label);
}

.session-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--vs-line);
}

.session-row:last-child { border-bottom: none; }

.session-row__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--vs-surface-alt);
  display: grid;
  place-items: center;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
}

.session-row__title {
  font-size: var(--portal-text-body);
  font-weight: 600;
  margin: 0;
}

.session-row__sub {
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
  margin: 2px 0 0;
}

.linked-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--vs-line);
}

.linked-row:last-child { border-bottom: none; }

.doc-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--vs-line);
}

.doc-row:last-child { border-bottom: none; }

.doc-row__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--vs-surface-alt);
  display: grid;
  place-items: center;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
}

.doc-row__name {
  font-size: var(--portal-text-body);
  font-weight: 600;
  margin: 0;
}

.doc-row__sub {
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
  margin: 2px 0 0;
}

/* -------------------- Activate -------------------- */

.activate-flag {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--vs-line);
}

.activate-flag:last-child { border-bottom: none; }

.activate-flag__code {
  font-family: var(--vs-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: var(--portal-text-caption);
}

.activate-flag__label {
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
  margin-top: 2px;
}

/* =========================================================================
   Portal — Member Dashboard (main landing)
   ========================================================================= */

.portal-body {
  background: #ffffff;
  min-height: 100vh;
  margin: 0;
}

.portal-body--white {
  background: #ffffff;
}

/* -------------------- Top nav (Direction-B refresh, canonical) --------------------
   Senior-friendly bank-app aesthetic. Hairline bottom border replaces the
   legacy deep shadow. Grid `1fr auto 1fr` truly centers the link cluster.
   Active link = filled olive pill + cream text (unmistakable at a glance).
   Account chip = ghost on resting, olive-tint on hover (no heavy box-bg).
   Tokens are --vs-* (defined globally in styles.css) so this CSS works on
   every portal page regardless of whether portal.css is loaded.
   ------------------------------------------------------------------------------- */

/* Container — hairline border + tiny depth, NOT heavy shadow */
.portal-nav {
  background: #ffffff;
  border-bottom: 1px solid #ebe6dd;
  box-shadow: 0 1px 0 rgba(14, 15, 12, 0.025);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Grid layout — true center of nav links between brand and right cluster */
.portal-nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
}

/* ---- Brand block (col 1) ---- */
.portal-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--vs-ink);
  justify-self: start;
}

/* Text stack — sits to the right of the mark. The old wordmark +
   "Powered by Fox Nation" pair collapsed to a single wordmark in
   2026-07 so the stack is a single row centered against the mark. */
.portal-nav__brand-text {
  display: inline-flex;
  align-items: center;
}

/* Mark sized by height. With the tag line gone, the icon is a touch
   smaller and pairs with the wordmark's cap-height rather than the
   two-line stack it used to match. Aspect ratio from the SVG (67×50). */
.portal-nav__brand-mark {
  display: inline-grid;
  place-items: center;
  height: 30px;
  aspect-ratio: 67 / 50;
  color: var(--vs-ink);
  flex: 0 0 auto;
}

.portal-nav__brand-mark svg {
  width: 100%;
  height: 100%;
}

.portal-nav__brand-word {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-section); /* 24 — bumped from card-title (20) */
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--vs-ink);
}

/* "Powered by Fox Nation" — sits in the text stack column directly
   under the wordmark. Held at the 14px caption floor (design-system
   rule) but tightened with a leaner line-height + negative tracking
   so it visually recedes against the larger wordmark. */
.portal-nav__brand-tag {
  display: inline-flex;
  gap: 4px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption); /* 14 — floor */
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--vs-ink-muted);
}

/* Backward compat shim — old .portal-nav__brand-row markup is gone but
   any stray instance should still render the row inline. */
.portal-nav__brand-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.portal-nav__brand-tag-faint {
  opacity: 1;
  color: var(--vs-ink-muted);
}

.portal-nav__brand-tag-strong {
  color: #2a2c26;
  font-weight: 500;
}

/* ---- Center links (col 2 — truly centered by the grid) ---- */
.portal-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: center;
}

.portal-nav__link {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label); /* portal-text-label */
  letter-spacing: 0.01em;
  color: var(--vs-ink-muted);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  white-space: nowrap;
  transition: background 200ms ease-out, color 200ms ease-out;
}

.portal-nav__link:hover {
  background: rgba(74, 91, 45, 0.06);
  color: var(--vs-ink);
  opacity: 1;
}

.portal-nav__link--active,
.portal-nav__link--active:hover {
  background: #4a5b2d;
  color: #ffffff;
  opacity: 1;
  box-shadow: 0 4px 12px -4px rgba(74, 91, 45, 0.4);
}

/* ---- Right cluster (col 3) ---- */
.portal-nav__right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

/* Icon buttons (bell, message) — ghost on resting, olive-tint on hover */
.portal-nav__icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #2a2c26;
  cursor: pointer;
  transition: background 200ms ease-out, color 200ms ease-out;
}

.portal-nav__icon-btn:hover {
  background: rgba(74, 91, 45, 0.06);
  color: var(--vs-ink);
}

/* ---- Account chip — refined, no heavy bg ---- */
.portal-nav__account-wrap {
  position: relative;
}

.portal-nav__account {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border-radius: 999px;
  padding: 4px 16px 4px 4px;
  height: 44px;
  text-decoration: none;
  color: var(--vs-ink);
  font-family: var(--vs-font-body);
  transition: background 200ms ease-out;
}

.portal-nav__account:hover {
  background: rgba(74, 91, 45, 0.06);
}

.portal-nav__account-wrap--open .portal-nav__account {
  background: rgba(74, 91, 45, 0.06);
}

.portal-nav__avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #4a5b2d;
  color: #ffffff;
  border: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption); /* portal-text-caption */
  letter-spacing: 0.04em;
}

.portal-nav__account-label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label); /* portal-text-label */
  letter-spacing: 0;
  color: var(--vs-ink);
}

.portal-nav__account-chev {
  display: inline-grid;
  place-items: center;
  color: var(--vs-ink-muted);
  transition: transform 200ms ease-out;
}

.portal-nav__account-wrap--open .portal-nav__account-chev {
  transform: rotate(180deg);
}

/* ---- Account dropdown menu ---- */
.portal-nav__account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #ebe6dd;
  border-radius: 12px;
  box-shadow:
    0 12px 32px rgba(14, 15, 12, 0.10),
    0 2px 6px rgba(14, 15, 12, 0.05);
  z-index: 40;
}

.portal-nav__account-menu[hidden] { display: none; }

.portal-nav__account-menu li {
  border-bottom: 0;
}

/* Member ID header (Pastel #114/#155) — moved into the dropdown so it
   stays visible in one tap without crowding the nav bar. Read to partners
   for coverage verification (e.g. Agero). */
.portal-nav__account-menu-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 14px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid #ebe6dd;
}

.portal-nav__account-menu-label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption); /* portal-text-caption */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vs-ink-muted);
}

.portal-nav__account-menu-id {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption); /* portal-text-caption */
  color: var(--vs-ink);
  font-variant-numeric: tabular-nums;
}

.portal-nav__account-item {
  display: block;
  padding: 10px 14px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label); /* portal-text-label */
  color: var(--vs-ink);
  text-decoration: none;
  border-radius: 8px;
  transition: background 200ms ease-out, color 200ms ease-out;
}

.portal-nav__account-item:hover {
  background: rgba(74, 91, 45, 0.06);
  color: var(--vs-ink);
}

/* ---- "Your Credit" sections dropdown (Sprint 10 sitemap) ----
   ONE pill holds the label + chevron; the wrapper carries the hover /
   active / open states so the whole unit reads as a single nav item.
   The panel animates from its top-left origin and marks the current
   section with an olive check. */
.portal-nav__dd {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: transparent;
  transition: background 200ms ease-out, box-shadow 200ms ease-out;
}

.portal-nav__dd:hover,
.portal-nav__dd--open {
  background: rgba(74, 91, 45, 0.06);
}

.portal-nav__dd-label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  letter-spacing: 0.01em;
  color: var(--vs-ink-muted);
  text-decoration: none;
  padding: 10px 4px 10px 18px;
  white-space: nowrap;
  transition: color 200ms ease-out;
}

.portal-nav__dd:hover .portal-nav__dd-label,
.portal-nav__dd--open .portal-nav__dd-label {
  color: var(--vs-ink);
}

.portal-nav__dd-toggle {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  padding: 0 16px 0 6px;
  align-self: stretch;
  background: transparent;
  border-radius: 0 999px 999px 0;
  color: var(--vs-ink-muted);
  transition: color 200ms ease-out;
}

.portal-nav__dd:hover .portal-nav__dd-toggle,
.portal-nav__dd--open .portal-nav__dd-toggle {
  color: var(--vs-ink);
}

.portal-nav__dd-toggle svg {
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.portal-nav__dd--open .portal-nav__dd-toggle svg {
  transform: rotate(180deg);
}

/* Active section — the whole pill goes olive, chevron included. */
.portal-nav__dd--active,
.portal-nav__dd--active:hover {
  background: #4a5b2d;
  box-shadow: 0 4px 12px -4px rgba(74, 91, 45, 0.4);
}
.portal-nav__dd--active .portal-nav__dd-label,
.portal-nav__dd--active:hover .portal-nav__dd-label,
.portal-nav__dd--active .portal-nav__dd-toggle,
.portal-nav__dd--active:hover .portal-nav__dd-toggle {
  color: #ffffff;
}

/* Panel — origin-aware entrance from the pill (top-left), olive check
   on the section you're on. */
.portal-nav__dd-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 236px;
  margin: 0;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #ebe6dd;
  border-radius: 14px;
  box-shadow:
    0 16px 40px rgba(14, 15, 12, 0.12),
    0 2px 8px rgba(14, 15, 12, 0.06);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.98);
  transform-origin: top left;
  transition:
    opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0s linear 160ms;
}

.portal-nav__dd--open .portal-nav__dd-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.portal-nav__dd-menu-head {
  margin: 0;
  padding: 8px 14px 6px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vs-ink-muted);
}

.portal-nav__dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 10px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
  text-decoration: none;
  transition: background 160ms ease-out;
}

.portal-nav__dd-item:hover {
  background: rgba(74, 91, 45, 0.08);
  color: var(--vs-ink);
}

.portal-nav__dd-item svg {
  flex: 0 0 auto;
  color: #4a5b2d;
  opacity: 0;
}

.portal-nav__dd-item.is-current {
  background: rgba(74, 91, 45, 0.06);
  color: #324019;
  font-weight: 600;
}
.portal-nav__dd-item.is-current svg { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .portal-nav__dd,
  .portal-nav__dd-label,
  .portal-nav__dd-toggle,
  .portal-nav__dd-toggle svg,
  .portal-nav__dd-item { transition: none; }
  .portal-nav__dd-menu {
    transition: opacity 160ms ease-out, visibility 0s linear 160ms;
    transform: none;
  }
}

/* -------------------- Sub-nav (credit-experience pages) -------------------- */

.portal-subnav {
  background: #ffffff;
  margin-top: 24px;
}

/* Breadcrumbs sit at the very top of the page, above the sub-nav, exactly aligned
   with the breadcrumb position on /my-assets, /all-benefits, /account.
   Uses the same max-width + padding tokens as .vs-container, with 32px top margin
   (matches .ma top padding on the other pages). */
.portal-crumbs {
  width: 100%;
  max-width: var(--page-max);
  margin: 32px auto 0;
  padding: 0 var(--page-pad);
  box-sizing: border-box;
}

/* --bare: for crumbs nested inside an already-padded page shell
   (account__inner, benefit-page__inner, bf-page, ...). Type styles
   only — the shell owns the geometry. */
.portal-crumbs--bare {
  max-width: none;
  margin: 0 0 var(--portal-space-8);
  padding: 0;
}

/* --flush: zero bottom margin — for shells whose own stack gap already
   provides the spacing (benefit pages' 32px inner gap). */
.portal-crumbs--flush {
  margin-bottom: 0;
}

.portal-crumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--portal-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.portal-crumbs__link {
  font-family: var(--portal-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  color: var(--portal-ink-muted);
  text-decoration: none;
  transition: color var(--portal-dur-base) var(--portal-ease-out);
}

.portal-crumbs__link:hover {
  color: var(--portal-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.portal-crumbs__sep {
  display: grid;
  place-items: center;
  color: var(--portal-ink-disabled);
}

.portal-crumbs__current {
  font-family: var(--portal-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--portal-ink);
}

@media (max-width: 768px) {
  .portal-crumbs {
    padding: 0 24px;
  }
}

.portal-subnav__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 48px;
  overflow-x: auto;
}

.portal-subnav__link {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vs-ink);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 200ms ease-out, background 200ms ease-out, color 200ms ease-out;
  white-space: nowrap;
}

.portal-subnav__link:hover {
  opacity: 1;
}

.portal-subnav__link--active {
  background: var(--vs-olive);
  color: #ffffff;
  opacity: 1;
}

/* When sub-nav follows the main nav, allow main nav to scroll past while sub-nav sticks */
.portal-nav + .portal-subnav {
  top: 88px;
}

@media (max-width: 1023px) {
  .portal-subnav { position: static; }
  .portal-subnav__inner { padding: 8px 16px; }
  .portal-subnav__link { font-size: var(--portal-text-caption); padding: 8px 14px; }
}

/* When credit pages embed portal chrome, give the inner content a clean white wrapper */
.portal-body--credit {
  background: #ffffff;
}

.portal-body--credit .vs-page {
  background: #ffffff;
}

/* -------------------- Page shell -------------------- */

.portal {
  padding: 40px 48px 80px;
}

.portal__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* -------------------- Section header -------------------- */

.portal-section__head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.portal-section__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-hero);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
  flex-shrink: 0;
}

.portal-section__rule {
  display: none;
}
.portal-section__rule--legacy {
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
}

.portal-section__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--portal-space-2);
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  letter-spacing: 0;
  text-transform: none;
  color: var(--portal-ink-secondary);
  text-decoration: none;
  transition: color var(--portal-dur-base) var(--portal-ease-out);
}

.portal-section__cta:hover {
  color: var(--vs-olive);
}

/* =====================================================================
   PORTAL BUTTON — canonical button component.
   Sprint 9b consolidated 8 parallel button blocks into .portal-btn.
   Sprint 9d (2026-06-11) flipped the default from Stratum-uppercase to
   Graphik sentence-case after audit found ~95% of the actually-used
   in-context buttons (.pact-rec__btn, .pact-active__cta, etc.) were
   Graphik sentence-case. The marketing/billboard Stratum-uppercase
   treatment is now an explicit `--display` variant for auth pages,
   benefit-page heroes, and big landing CTAs.

   Usage:
     <button class="portal-btn portal-btn--primary">Continue</button>
     <button class="portal-btn portal-btn--ghost portal-btn--sm">Cancel</button>
     <button class="portal-btn portal-btn--primary portal-btn--display">LOG IN</button>

   Style variants:
     --primary   olive bg, white text (default — use explicitly for clarity)
     --ghost     transparent, olive border + text
     --text      link-style, no border, no bg (UI utility)

   Tone variant:
     --display   Stratum 700 uppercase + tracking — marketing/billboard
                 treatment for auth submit, hero CTAs, benefit-page primary
                 actions. Default (no --display) is Graphik 600 sentence
                 case — the right tone for in-context dashboard buttons.

   Sizes:
     --sm        40px min-height, 14px text (compact / inline actions)
     (default)   48px min-height, 16px text
     --lg        64px min-height, 24px text (auth / landing CTAs)

   Modifiers (combinable):
     --pill      999px radius (round)
     --block     full-width
     --inverse   dark surface (ink bg)

   Spec: portal-components.md §12
   ===================================================================== */

.portal-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  padding: 14px 24px;
  border-radius: 12px;
  border: 2px solid var(--portal-olive);
  background: var(--portal-olive);
  color: #ffffff;
  /* Default tone: Graphik sentence case. Calm, professional, the right
     register for dashboard buttons. See --display for marketing/auth. */
  font-family: var(--portal-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  min-height: 48px;
  transition:
    background var(--portal-dur-base) var(--portal-ease-out),
    border-color var(--portal-dur-base) var(--portal-ease-out),
    color var(--portal-dur-base) var(--portal-ease-out),
    transform var(--portal-dur-base) var(--portal-ease-out),
    box-shadow var(--portal-dur-base) var(--portal-ease-out);
}
/* Icon sizing is owned by the canonical — never by width/height attributes
   on the SVG. Without this rule an attribute-less icon inherits the global
   svg { max-width: 100% } reset and inflates to fill its container
   (the portal-activated rec-card bug, Sprint 9d). */
.portal-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.portal-btn:hover {
  background: var(--portal-olive-hover);
  border-color: var(--portal-olive-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px var(--portal-olive-shadow);
}
/* --on-dark: on photo/slate surfaces the standard darken-hover is
   imperceptible — a white ring gives a visible cue on any backdrop. */
.portal-btn--on-dark:hover {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6);
}

.portal-btn:focus-visible {
  outline: 3px solid var(--portal-olive-shadow);
  outline-offset: 2px;
}
.portal-btn:disabled,
.portal-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.portal-btn--primary {
  background: var(--portal-olive);
  color: #ffffff;
  border-color: var(--portal-olive);
}
/* Pin white text on hover. Without this, `a.portal-btn--primary` (signup-
   success "Continue to log in", etc.) inherits the global `a:hover` rule
   in styles.css that paints links ink-dark — making the label vanish into
   the olive plate. */
.portal-btn--primary:hover {
  color: #ffffff;
}

.portal-btn--ghost {
  background: transparent;
  color: var(--portal-olive-deep);
  border-color: var(--portal-olive);
}
.portal-btn--ghost:hover {
  background: var(--portal-olive);
  color: #ffffff;
  border-color: var(--portal-olive);
}

/* Destructive confirmations only ("Yes, delete it") — never the default
   action in a pair; the safe way out stays --ghost beside it. */
.portal-btn--danger {
  background: var(--portal-danger);
  color: #ffffff;
  border-color: var(--portal-danger);
}
.portal-btn--danger:hover {
  background: #5a2409;
  color: #ffffff;
  border-color: #5a2409;
}

.portal-btn--text {
  background: transparent;
  color: var(--portal-ink);
  border-color: transparent;
  padding: 10px 14px;
  min-height: auto;
}
.portal-btn--text:hover {
  background: transparent;
  color: var(--portal-olive-deep);
  border-color: transparent;
  transform: none;
  box-shadow: none;
}

/* Optical label centering. A button label has empty descender space below the
   baseline (e.g. "Add" has no descenders), so a vertically-centred line-box
   makes the visible text sit ~1px high. Wrapping the label in .portal-btn__label
   and trimming its box to cap-height/baseline centres the *visible ink*.
   Modern browsers only; older keep the already pixel-centred line-box. */
@supports (text-box-trim: trim-both) {
  .portal-btn__label { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
}

/* Canonical icon-button — square/circular control holding a single inline SVG
   (carousel arrows, card view/edit, dismiss, modal close). One size language,
   one hover. Default 40px; --sm 32px; --ghost is borderless (close/dismiss). */
.portal-iconbtn {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--portal-hairline-strong);
  background: var(--portal-surface);
  color: var(--portal-ink-secondary);
  cursor: pointer;
  transition:
    background-color var(--portal-dur-fast) var(--portal-ease-out),
    border-color var(--portal-dur-fast) var(--portal-ease-out),
    color var(--portal-dur-fast) var(--portal-ease-out),
    transform var(--portal-dur-fast) var(--portal-ease-out);
}
.portal-iconbtn svg { width: 18px; height: 18px; }
.portal-iconbtn:hover {
  background: var(--portal-olive);
  border-color: var(--portal-olive);
  color: #ffffff;
  transform: translateY(-1px);
}
.portal-iconbtn:active { transform: scale(0.96); }
.portal-iconbtn:disabled,
.portal-iconbtn[aria-disabled="true"] { opacity: 0.35; cursor: default; transform: none; }
.portal-iconbtn:disabled:hover { background: var(--portal-surface); border-color: var(--portal-hairline-strong); color: var(--portal-ink-secondary); }
.portal-iconbtn:focus-visible { outline: 3px solid var(--portal-olive-shadow); outline-offset: 2px; }
.portal-iconbtn--sm { width: 32px; height: 32px; }
.portal-iconbtn--sm svg { width: 16px; height: 16px; }
.portal-iconbtn--ghost { border-color: transparent; background: transparent; }
.portal-iconbtn--ghost:hover { background: var(--portal-surface-soft); border-color: transparent; color: var(--portal-ink); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .portal-iconbtn { transition: background-color var(--portal-dur-fast) var(--portal-ease-out), border-color var(--portal-dur-fast) var(--portal-ease-out), color var(--portal-dur-fast) var(--portal-ease-out); }
  .portal-iconbtn:hover, .portal-iconbtn:active { transform: none; }
}

/* Tone variant — Stratum uppercase for marketing / auth / hero billboards.
   Default tone (no --display) is Graphik sentence case. Reads the brand
   token — font-display is Graphik-for-numbers since Pastel #43. */
.portal-btn--display {
  font-family: var(--portal-font-brand, var(--portal-font-display));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Sizes */
.portal-btn--sm {
  padding: 8px 16px;
  font-size: var(--portal-text-caption);
  min-height: 40px;
  gap: 8px;
}
.portal-btn--sm svg {
  width: 14px;
  height: 14px;
}
.portal-btn--lg {
  padding: 22px 32px;
  font-size: var(--portal-text-section);
  min-height: 64px;
  gap: 12px;
}
.portal-btn--lg svg {
  width: 22px;
  height: 22px;
}
.portal-btn--display.portal-btn--lg {
  letter-spacing: 0.06em;
}

/* Shape modifiers */
.portal-btn--pill { border-radius: 999px; }
.portal-btn--block { width: 100%; }
/* Layout: opt out of flex-column stretch — button hugs its content.
   The counterpart of --block (which forces full width). */
.portal-btn--start { align-self: flex-start; }

/* Surface modifiers */
.portal-btn--inverse {
  background: var(--portal-ink);
  border-color: var(--portal-ink);
  color: #ffffff;
}
.portal-btn--inverse:hover {
  background: var(--portal-ink-secondary, #2a2c25);
  border-color: var(--portal-ink-secondary, #2a2c25);
}
.portal-btn--inverse.portal-btn--ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}
.portal-btn--inverse.portal-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #ffffff;
}

/* -------------------- Concierge row -------------------- */

.portal-concierge {
  display: grid;
  grid-template-columns: minmax(280px, 320px) 1fr;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}

.portal-concierge__person {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
}

.portal-concierge__avatar {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  object-fit: cover;
  background: #fac957;
  flex-shrink: 0;
}

.portal-concierge__id {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portal-concierge__name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
}

.portal-concierge__role {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: #494949;
  margin: 0;
}

.portal-concierge__bubble {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: #e6e6e0;
  border-radius: 16px;
  padding: 24px 32px;
  position: relative;
}

.portal-concierge__bubble::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: #e6e6e0;
  border-radius: 50% 0 50% 50%;
  transform: translateY(-50%) rotate(45deg);
}

.portal-concierge__msg {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 0;
  max-width: 64ch;
}

.portal-concierge__bubble .portal-btn {
  flex-shrink: 0;
}

/* Meeting variant — used on /portal-scheduled.html.
   Same chat-bubble layout as the standard concierge, but the bubble
   content is a meeting summary + date/time + change link instead of a CTA. */
.portal-concierge__bubble--meeting {
  align-items: flex-start;
}
.portal-concierge__meeting-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portal-concierge__meeting-eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: var(--vs-olive-deep, #3f4a2a);
}
.portal-concierge__meeting-when {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portal-concierge__meeting-date {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  line-height: 1.3;
  color: var(--vs-ink, #0e0f0c);
  white-space: nowrap;
}
.portal-concierge__meeting-change {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--vs-olive-deep, #3f4a2a);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.portal-concierge__meeting-change:hover {
  color: var(--vs-ink, #0e0f0c);
}

@media (max-width: 768px) {
  .portal-concierge__bubble--meeting {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .portal-concierge__meeting-when {
    text-align: left;
  }
}

/* -------------------- 3-up tile rail -------------------- */

.portal-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.portal-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  background: #e6e6e0;
  border-radius: 16px;
  padding: 32px;
  min-height: 140px;
  color: var(--vs-olive);
  transition: background 200ms ease-out;
}

.portal-tile:hover {
  background: #ddddd5;
}

.portal-tile__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--vs-olive);
}

.portal-tile__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.3;
  color: var(--vs-olive);
}

.portal-tile--done {
  opacity: 0.55;
}

.portal-tile__check {
  position: absolute;
  top: 16px;
  left: 16px;
  display: none;
  place-items: center;
  color: var(--vs-olive);
  width: 22px;
  height: 22px;
}
.portal-tile--done .portal-tile__check {
  display: grid;
}

/* Get-to-Know-You tile rail — 4 across, never wraps */
.portal-tiles--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.portal-tiles--4 .portal-tile {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  min-height: 168px;
  cursor: pointer;
}
.portal-tiles--4 .portal-tile__label {
  font-size: var(--portal-text-body);
  line-height: 1.25;
}
.portal-tiles--4 .portal-tile__icon { width: 44px; height: 44px; }
.portal-tiles--4 .portal-tile__icon svg { width: 100%; height: 100%; }

/* Start-here CTA — matches the .portal-btn design system */
.portal-tile__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.portal-tile__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--vs-olive);
  color: #fff;
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid var(--vs-olive);
  border-radius: 12px;
  cursor: pointer;
  transition: background 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}
.portal-tile__cta:hover,
.portal-tile:hover .portal-tile__cta {
  background: var(--vs-olive-deep, #3F4828);
  border-color: var(--vs-olive-deep, #3F4828);
}
.portal-tile__cta svg { width: 11px; height: 11px; }

/* Verification tiles share a fixed height so all 3 boxes match,
   even when only one (Account Verification) has the Start-here CTA */
.portal-tiles--tabs .portal-tile--tab { min-height: 140px; }
.portal-tile--tab .portal-tile__cta {
  padding: 8px 14px;
  font-size: var(--portal-text-caption);
}

/* 4-tile rail (GTKY): CTA sits inline below the label inside the column body */
.portal-tiles--4 .portal-tile__body { gap: 8px; }
.portal-tiles--4 .portal-tile__cta {
  padding: 8px 12px;
  font-size: var(--portal-text-caption);
}
.portal-tiles--4 .portal-tile__cta svg { width: 9px; height: 9px; }

/* Hide CTA when the tile is done or active */
.portal-tile--done .portal-tile__cta,
.portal-tile--tab.portal-tile--active .portal-tile__cta,
.portal-tile--active .portal-tile__cta {
  display: none;
}

/* =========================================================================
   Veteran Strong Plus — Checkout
   ========================================================================= */

.checkout-nav {
  background: #ffffff;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.06);
  padding: 24px 48px;
}

.checkout-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--vs-ink);
}

.checkout-nav__brand-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 24px;
  color: var(--vs-ink);
}

.checkout-nav__brand-mark svg {
  width: 100%;
  height: 100%;
}

.checkout-nav__brand-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.checkout-nav__brand-word {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-ink);
}

.checkout-nav__brand-tag {
  display: inline-flex;
  gap: 4px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: #14213d;
}

.checkout-nav__brand-tag-faint { opacity: 0.4; }

.checkout {
  background: #f5f5f3;
  min-height: calc(100vh - 80px);
  padding: 32px 48px 80px;
}

.checkout__shell {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.checkout__shell[hidden] { display: none; }

.checkout__shell--center {
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: flex-start;
}

/* Form column */

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkout-form__secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0 0 4px;
}

.checkout-form__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.15;
  color: var(--vs-ink);
  margin: 0;
}

.checkout-form__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink);
  margin: 0 0 16px;
}

/* Section accordion */

.checkout-section {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 16px 0;
}

.checkout-section__head {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
}

.checkout-section__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  line-height: 1.2;
  color: var(--vs-ink);
}

.checkout-section__chev {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--vs-ink);
  transition: transform 200ms ease-out;
}

.checkout-section--open .checkout-section__chev {
  transform: rotate(180deg);
}

.checkout-section__body {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkout-section__body[hidden] { display: none; }

.checkout-section__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

/* Plan cards */

.checkout-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.checkout-plan {
  position: relative;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 200ms ease-out;
}

.checkout-plan--selected {
  border-color: var(--vs-ink);
}

.checkout-plan__radio {
  appearance: none;
  position: absolute;
  top: 24px;
  left: 24px;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 2px solid rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 200ms ease-out;
}

.checkout-plan__radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: transparent;
  transition: background 200ms ease-out;
}

.checkout-plan--selected .checkout-plan__radio {
  border-color: var(--vs-ink);
}

.checkout-plan--selected .checkout-plan__radio-dot {
  background: var(--vs-ink);
}

.checkout-plan__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  background: #d4d4c6;
  color: var(--vs-ink);
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
}

.checkout-plan__name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 36px 0 0;
}

.checkout-plan__price {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
  margin: 0;
}

.checkout-plan__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.checkout-form__continue {
  appearance: none;
  border: 0;
  background: var(--vs-olive);
  color: #ffffff;
  border-radius: 10px;
  padding: 18px 32px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease-out;
  margin-top: 8px;
}

.checkout-form__continue:hover {
  background: var(--vs-olive-deep, #3F4828);
}

.checkout-section__body .checkout-form__continue {
  width: 100%;
  margin-top: 16px;
}

.checkout-terms__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink, #1B1D17);
  cursor: pointer;
}

.checkout-terms__check input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--vs-ink, #1B1D17);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  position: relative;
}

.checkout-terms__check input[type="checkbox"]:checked {
  background: var(--vs-olive);
  border-color: var(--vs-olive);
}

.checkout-terms__check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkout-form__row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkout-form__row--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Summary card */

.checkout-summary {
  background: #ede8da;
  border-radius: 16px;
  padding: 32px;
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkout-summary__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0 0 8px;
}

.checkout-summary__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.checkout-summary__line--row {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
}

.checkout-summary__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-ink);
}

.checkout-summary__brand-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 17px;
  color: var(--vs-ink);
}

.checkout-summary__brand-mark svg {
  width: 100%;
  height: 100%;
}

.checkout-summary__price {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  color: var(--vs-ink);
}

.checkout-summary__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
  margin: -4px 0 4px;
}

.checkout-summary__rule {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 8px 0;
}

.checkout-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.checkout-summary__total-label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  color: var(--vs-ink);
}

.checkout-summary__total-value {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.checkout-summary__total-value strong {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  color: var(--vs-ink);
}

.checkout-summary__total-tax {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

.checkout-summary__note {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 12px 0 0;
  text-align: center;
}

/* Processing view */

.checkout-processing {
  background: #ede8da;
  border-radius: 16px;
  padding: 56px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: min(720px, 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.06);
}

.checkout-processing__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--vs-ink);
  border-radius: 50%;
  animation: portal-verify-spin 1s linear infinite;
  margin-bottom: 4px;
}

.checkout-processing__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
  margin: 0;
}

.checkout-processing__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

/* Success view */

.checkout-success {
  background: #ffffff;
  border-radius: 20px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.checkout-success__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  color: var(--vs-olive);
}

.checkout-success__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 4px 0 0;
}

.checkout-success__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink);
  margin: 0;
  max-width: 56ch;
}

.checkout-success__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--vs-olive);
  color: #ffffff;
  border-radius: 10px;
  padding: 16px 28px;
  margin-top: 8px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 200ms ease-out;
}

.checkout-success__cta:hover {
  background: var(--vs-olive-deep, #3F4828);
}

.checkout-success__details {
  background: #f5f5f3;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 28px 32px;
  margin-top: 16px;
  text-align: left;
  width: 100%;
  max-width: 520px;
}

.checkout-success__details-title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
  margin: 0 0 12px;
}

.checkout-success__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-ink);
  margin: 0;
}

.checkout-success__brand-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 17px;
  color: var(--vs-ink);
}

.checkout-success__brand-mark svg {
  width: 100%;
  height: 100%;
}

.checkout-success__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
  margin: 4px 0 12px;
}

.checkout-success__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checkout-success__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
}

.checkout-success__row dt {
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.checkout-success__row dd {
  margin: 0;
  font-weight: 500;
}

.checkout-success__email {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 16px 0 0;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 12px;
}

@media (max-width: 1023px) {
  .checkout { padding: 24px 24px 64px; }
  .checkout__grid { grid-template-columns: 1fr; gap: 24px; }
  .checkout-summary { position: static; }
  .checkout-success { padding: 32px 20px; }
}

@media (max-width: 600px) {
  .checkout-nav { padding: 16px 20px; }
  .checkout-plans { grid-template-columns: 1fr; }
  .checkout-form__row--2 { grid-template-columns: 1fr; }
}

/* Plus badge for benefit cards (member view) */
.benefit-card__plus-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: #ffffff;
  z-index: 3;
}

/* Member dashboard layout */
.vsp-member {
  padding: 32px 48px 80px;
}

.vsp-member__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.vsp-member-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (max-width: 1023px) {
  .vsp-member { padding: 24px 24px 64px; }
  .vsp-member__inner { gap: 48px; }
}

/* =========================================================================
   Veteran Strong Plus — upsell page
   ========================================================================= */

.vsp {
  padding: 32px 48px 80px;
}

.vsp__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* -------------------- Hero banner -------------------- */

.vsp-hero {
  position: relative;
  background:
    radial-gradient(120% 200% at 100% 50%, rgba(250, 201, 87, 0.18) 0%, rgba(250, 201, 87, 0) 35%),
    linear-gradient(135deg, #1a1604 0%, #0a0703 100%);
  border-radius: 16px;
  padding: 40px 64px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.vsp-hero__decor {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  pointer-events: none;
  z-index: 0;
}

.vsp-hero__decor::before,
.vsp-hero__decor::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 220px;
  height: 220px;
  transform: translateY(-50%);
  background: rgba(154, 134, 64, 0.4);
  clip-path: polygon(0 0, 60% 50%, 0 100%, 12% 100%, 72% 50%, 12% 0);
}

.vsp-hero__decor::after {
  left: 70px;
  background: rgba(154, 134, 64, 0.22);
}

.vsp-hero__plus {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
}

.vsp-hero__plus svg {
  width: 100%;
  height: 100%;
}

.vsp-hero__eyebrow,
.vsp-hero__title,
.vsp-hero__body {
  position: relative;
  z-index: 1;
}

.vsp-hero__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}

.vsp-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.2;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0;
  max-width: 22ch;
}

.vsp-hero__title strong {
  color: #fac957;
  font-weight: 500;
}

.vsp-hero__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 60ch;
}

/* -------------------- Section rule (heading + lines) -------------------- */

.vsp-rule {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.vsp-rule::before,
.vsp-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.vsp-rule__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-display);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
  text-align: center;
  flex-shrink: 0;
}

/* -------------------- What's included (3-up) -------------------- */

.vsp-included__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.vsp-included__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}

.vsp-included__photo {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.vsp-included__heading {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 8px 0 0;
}

.vsp-included__copy {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
  max-width: 36ch;
}

/* -------------------- More benefits (6-up) -------------------- */

.vsp-more__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 56px;
}

.vsp-more__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.vsp-more__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--vs-ink);
  margin-bottom: 4px;
  background: transparent;
  border-radius: 0;
}

.vsp-more__heading {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
}

.vsp-more__copy {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
  max-width: 38ch;
}

/* -------------------- Choose your plan -------------------- */

.vsp-plans {
  background: #000000;
  border-radius: 20px;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

.vsp-plans__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.2;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

.vsp-plans__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 920px;
}

.vsp-plan {
  position: relative;
  background: rgba(140, 130, 100, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #ffffff;
  transition: border-color 200ms ease-out, background 200ms ease-out;
}

.vsp-plan--selected {
  background: #000000;
  border-color: rgba(250, 201, 87, 0.4);
}

.vsp-plan__radio {
  appearance: none;
  position: absolute;
  top: 28px;
  left: 28px;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 200ms ease-out;
}

.vsp-plan__radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: transparent;
  transition: background 200ms ease-out;
}

.vsp-plan--selected .vsp-plan__radio {
  border-color: #fac957;
}

.vsp-plan--selected .vsp-plan__radio-dot {
  background: #fac957;
}

.vsp-plan__badge {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: #fac957;
  color: #1a1402;
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.02em;
}

.vsp-plan__name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: #ffffff;
  margin: 36px 0 0;
}

.vsp-plan__price {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-body);
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.vsp-plan__price strong {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  color: #ffffff;
  margin-right: 6px;
}

.vsp-plan__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  flex: 1;
}

.vsp-plan__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  background: transparent;
  color: #fac957;
  border: 2px solid #fac957;
  border-radius: 10px;
  padding: 12px 28px;
  margin-top: 8px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 200ms ease-out, color 200ms ease-out;
}

.vsp-plan__cta--filled,
.vsp-plan__cta:hover {
  background: #fac957;
  color: #1a1402;
}

@media (max-width: 1023px) {
  .vsp { padding: 24px 24px 64px; }
  .vsp__inner { gap: 48px; }
  .vsp-hero { padding: 32px 28px; gap: 10px; }
  .vsp-hero__title { font-size: var(--portal-text-section); }
  .vsp-hero__body { font-size: var(--portal-text-caption); }
  .vsp-hero__plus { width: 90px; height: 90px; right: 12px; }
  .vsp-hero__decor { width: 140px; opacity: 0.7; }
  .vsp-rule__title { font-size: var(--portal-text-section); }
  .vsp-included__list { grid-template-columns: 1fr; gap: 24px; }
  .vsp-included__photo { aspect-ratio: 16 / 9; }
  .vsp-more__list { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .vsp-plans { padding: 40px 24px; }
  .vsp-plans__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .vsp-hero { padding: 28px 20px; }
  .vsp-hero__title { font-size: var(--portal-text-section); }
  .vsp-hero__plus { display: none; }
  .vsp-hero__decor { display: none; }
  .vsp-more__list { grid-template-columns: 1fr; }
}

/* =========================================================================
   Strong Debit — coming soon page
   ========================================================================= */

.debit {
  padding: 32px 48px 80px;
}

.debit__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* -------------------- Hero -------------------- */

.debit-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.debit-hero__pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  background: var(--vs-olive);
  color: #ffffff;
  border-radius: 999px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.debit-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-display);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}

.debit-hero__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.5;
  color: var(--vs-ink);
  margin: 0;
  max-width: 64ch;
}

/* -------------------- Card visual -------------------- */

.debit-card {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1.586 / 1;
  margin-top: 24px;
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
  border-radius: 18px;
  padding: 28px 32px 24px;
  color: #ffffff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 30px 60px rgba(0, 0, 0, 0.25),
    0 60px 120px rgba(0, 0, 0, 0.18);
  isolation: isolate;
  overflow: hidden;
}

.debit-card__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fac957;
}

.debit-card__brand-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 21px;
  color: #fac957;
}

.debit-card__brand-mark svg {
  width: 100%;
  height: 100%;
}

.debit-card__brand-word {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fac957;
  line-height: 1;
}

.debit-card__chip {
  display: block;
  margin: 28px 0 16px;
}

.debit-card__wave {
  position: absolute;
  top: 28px;
  right: 32px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  transform: rotate(90deg);
  opacity: 0.6;
}

.debit-card__number {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  letter-spacing: 0.08em;
  color: #ffffff;
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
}

.debit-card__meta {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 8px;
}

.debit-card__credit {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.debit-card__valid {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.debit-card__valid-label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  max-width: 36px;
  line-height: 1.2;
}

.debit-card__valid-value {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.04em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.debit-card__name {
  font-family: var(--vs-font-display);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}

/* -------------------- How it works -------------------- */

.debit-how {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.debit-how__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}

.debit-how__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  width: 100%;
  max-width: 1280px;
}

.debit-how__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.debit-how__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--vs-ink);
  border-radius: 12px;
  color: #ffffff;
}

.debit-how__heading {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-card-title);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
}

.debit-how__copy {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink);
  margin: 0;
  max-width: 32ch;
}

@media (max-width: 1023px) {
  .debit { padding: 24px 24px 64px; }
  .debit__inner { gap: 56px; }
  .debit-hero__title { font-size: var(--portal-text-hero); }
  .debit-hero__body { font-size: var(--portal-text-label); }
  .debit-how__title { font-size: var(--portal-text-hero); }
  .debit-how__list {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 600px) {
  .debit-hero__title { font-size: var(--portal-text-hero); }
  .debit-hero__pill { font-size: var(--portal-text-caption); padding: 8px 18px; }
  .debit-card { padding: 20px 22px; }
  .debit-card__number { font-size: var(--portal-text-body); }
  .debit-how__title { font-size: var(--portal-text-section); }
}

/* =========================================================================
   Benefit detail page (NewDay Home, etc.)
   ========================================================================= */

/* Shell geometry matches the portal standard: content column 1216 wide
   (= 1280 shell minus 2x32 gutters), starting at the same x as every
   other member page. Was 48px gutters + 1280 inner — 64px wider and
   32px further left than the rest of the portal (Sprint 9f width audit). */
.benefit-page {
  padding: 32px var(--page-pad) 80px;
}

.benefit-page__inner {
  max-width: 1216px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* -------------------- Hero -------------------- */

.bp-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  min-height: 420px;
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bp-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
}

.bp-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(10, 12, 7, 0.92) 0%, rgba(10, 12, 7, 0.78) 45%, rgba(10, 12, 7, 0.3) 75%, rgba(10, 12, 7, 0.12) 100%);
  z-index: 1;
}

.bp-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 640px;
  color: #ffffff;
}

.bp-hero__logo {
  width: 120px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.bp-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-display);
  line-height: 1.05;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0;
}
.bp-hero__title strong { font-weight: 500; }

.bp-hero__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 580px;
}


/* -------------------- 2-column layout -------------------- */

.bp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px;
  align-items: flex-start;
}

.bp-main,
.bp-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Sticky right column on desktop */
@media (min-width: 1024px) {
  .bp-side {
    position: sticky;
    top: 32px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }
  .bp-side::-webkit-scrollbar { width: 6px; }
  .bp-side::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 999px; }

  /* On the cashout page (flow-first layout), the right column is just
     supporting content — no inner scroll, no sticky. */
  .bp-grid--flow-first .bp-side {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* Once the user has revealed their pre-approval (preQualShown or beyond),
   the supporting "Why NewDay 100" right column is no longer needed — the
   pre-approval letter takes center stage. Collapse to a single centered
   column and constrain the bp-flow + disclaimer below to the same width
   so everything aligns. Class toggled by portal-newday-flow.js → syncGridLayout. */
.bp-grid--flow-first.is-nd-revealed {
  grid-template-columns: 1fr;
}

.bp-grid--flow-first.is-nd-revealed .bp-side {
  display: none;
}

.bp-grid--flow-first.is-nd-revealed .bp-main {
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* "How it works" + the trailing disclaimer keep the page's natural full
   content width — only the pre-approval card itself is narrowed to 85%. */

/* -------------------- Benefit info (left) -------------------- */

.bp-info__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0 0 20px;
}

.bp-info__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.6;
  color: var(--vs-ink);
  margin: 0 0 20px;
}

.bp-info__body:last-child { margin-bottom: 0; }

/* What's included */

.bp-included {
  background: #e6e6e0;
  border-radius: 20px;
  padding: 40px;
}

.bp-included__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0 0 16px;
}

.bp-included__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bp-included__list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink);
}

.bp-included__list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--vs-ink);
}

/* Ordered "how it works" variant — uses counters instead of dots */
.bp-included__list--ordered {
  counter-reset: bp-step;
}
.bp-included__list--ordered li {
  counter-increment: bp-step;
  padding-left: 40px;
}
.bp-included__list--ordered li::before {
  content: counter(bp-step);
  top: 1px;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--vs-olive, #576038);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0;
}

/* Legal disclaimer text under benefit detail pages */
.bp-disclaimer {
  margin: 28px 0 0;
  padding: 18px 22px;
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--vs-olive, #576038);
  border-radius: 8px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  line-height: 1.55;
  color: var(--vs-ink-muted, #5c5e58);
}
.bp-disclaimer strong { color: var(--vs-ink, #0e0f0c); }

/* VS Plus upsell card */

.bp-plus {
  background: #000000;
  border-radius: 20px;
  padding: 40px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.bp-plus__title {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-section);
  line-height: 1.25;
  color: #ffffff;
  margin: 0;
  position: relative;
  padding-right: 36px;
}

.bp-plus__title-faint {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

.bp-plus__title strong {
  font-weight: 600;
  color: #fac957;
  margin-left: 6px;
}

.bp-plus__plus {
  position: absolute;
  right: 0;
  top: -4px;
  font-size: var(--portal-text-hero);
  color: #fac957;
  font-weight: 400;
  line-height: 1;
}

.bp-plus__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bp-plus__list li {
  position: relative;
  padding-left: 20px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.bp-plus__list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
}

.bp-plus__btn {
  align-self: flex-start;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fac957;
  text-decoration: none;
  padding: 4px 0;
  transition: color 200ms ease-out;
}

.bp-plus__btn:hover {
  color: #f3bf3a;
}

/* -------------------- Right-side cards -------------------- */

.bp-form {
  background: #e6e6e0;
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bp-form__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
}

.bp-form__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink);
  margin: 0 0 8px;
}

.bp-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.bp-form__grid > .agero-field input,
.bp-form__grid > .agero-field select {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 16px 20px;
  font-size: var(--portal-text-label);
}

.bp-form__grid > .agero-field .agero-field__label {
  font-size: var(--portal-text-label);
}

.bp-form__submit {
  grid-column: 1 / -1;
  appearance: none;
  border: 0;
  background: var(--vs-olive);
  color: #ffffff;
  border-radius: 10px;
  padding: 18px 28px;
  margin-top: 4px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease-out;
}

.bp-form__submit:hover:not(:disabled) {
  background: var(--vs-olive-deep, #3F4828);
}

.bp-form__submit:disabled {
  opacity: 0.7;
  cursor: default;
}

.bp-form__secured {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
  justify-self: center;
  text-align: center;
  justify-content: center;
}

/* CTA card stack (used in lieu of a form, e.g. ADT shop + phone) */
.bp-cta-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 18px 18px 16px;
  background: #ffffff;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 14px;
  text-decoration: none;
  color: var(--vs-ink, #0e0f0c);
  transition: border-color 180ms ease, background 180ms ease, transform 160ms ease, box-shadow 180ms ease;
  position: relative;
}
.bp-cta-card:hover {
  border-color: var(--vs-olive, #576038);
  background: rgba(87, 96, 56, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -16px rgba(14, 15, 12, 0.25);
}
.bp-cta-card--primary {
  background: var(--vs-olive, #576038);
  border-color: var(--vs-olive, #576038);
  color: #ffffff;
}
.bp-cta-card--primary:hover {
  background: var(--vs-olive-deep, #3f4828);
  border-color: var(--vs-olive-deep, #3f4828);
}
.bp-cta-card__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(87, 96, 56, 0.1);
  color: var(--vs-olive, #576038);
}
.bp-cta-card--primary .bp-cta-card__icon {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.bp-cta-card__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.bp-cta-card__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vs-olive, #576038);
}
.bp-cta-card--primary .bp-cta-card__eyebrow { color: rgba(255, 255, 255, 0.75); }
.bp-cta-card__title {
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-card-title);
  line-height: 1.15;
  letter-spacing: -0.2px;
}
.bp-cta-card__body {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5c5e58);
}
.bp-cta-card--primary .bp-cta-card__body { color: rgba(255, 255, 255, 0.82); }
.bp-cta-card__arrow {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 6px;
  color: var(--vs-olive, #576038);
  transition: transform 180ms ease;
}
.bp-cta-card--primary .bp-cta-card__arrow { color: #ffffff; }
.bp-cta-card:hover .bp-cta-card__arrow { transform: translateX(2px); }

/* Divider between the two CTA cards */
.bp-cta-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5c5e58);
  text-align: center;
}
.bp-cta-divider::before,
.bp-cta-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--vs-line, #e4e0d6);
}

/* Hero logo override for brand marks we should not whitewash */
.bp-hero__logo--adt {
  filter: none;
  width: 96px;
}
.bp-hero__logo--nd100 {
  filter: none;
  width: 160px;
}
.bp-link-card__logo--nd100 {
  width: 140px;
}
.bp-hero__logo--afba {
  filter: brightness(0) invert(1);
  width: 130px;
}
.bp-link-card__logo--afba {
  width: 110px;
  /* The AFBA mark is a white SVG (made for the dark hero) — ink it for
     the light link-card surface. */
  filter: brightness(0);
  opacity: 0.85;
}

/* Link card with logo */

.bp-link-card {
  background: var(--portal-surface);
  border: 1px solid var(--portal-hairline);
  border-radius: var(--portal-radius-card-lg);
  padding: var(--portal-space-12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--portal-space-6);
}

.bp-link-card__logo {
  width: 120px;
  height: auto;
  margin-bottom: 4px;
}
.bp-link-card__logo--octagon {
  display: inline-block;
  width: 88px;
  height: 88px;
  margin-bottom: 4px;
}
.bp-link-card__logo--octagon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bp-link-card__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.25;
  color: var(--vs-ink);
  margin: 0;
}

.bp-link-card__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink);
  margin: 0;
}

.bp-link-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--vs-olive);
  border: 2px solid var(--vs-olive);
  border-radius: 10px;
  padding: 14px 22px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
  transition: background 200ms ease-out, color 200ms ease-out;
}

.bp-link-card__cta:hover {
  background: var(--vs-olive);
  color: #ffffff;
}

.bp-link-card__phone {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.bp-link-card__phone a {
  color: var(--vs-ink);
  text-decoration: underline;
  font-weight: 500;
}

/* -------------------- More benefits -------------------- */

.bp-more {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 8px;
}

@media (max-width: 1280px) {
  .benefit-page { padding: 24px 32px 64px; }
  .bp-hero { padding: 48px 40px; min-height: 360px; }
  .bp-hero__title { font-size: var(--portal-text-hero); }
  .bp-hero__content { max-width: 540px; }
  .bp-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .benefit-page { padding: 20px 16px 48px; }
  .bp-hero { padding: 32px 24px; min-height: 320px; }
  .bp-hero__title { font-size: var(--portal-text-section); }
  .bp-hero__body { font-size: var(--portal-text-caption); }
  .bp-hero__logo { width: 80px; }
  .bp-form { padding: 20px; }
  .bp-form__grid { grid-template-columns: 1fr; }
  .bp-link-card { padding: 20px; }
  .bp-info__title { font-size: var(--portal-text-card-title); }
}

/* =========================================================================
   All Benefits catalog page
   ========================================================================= */

.benefits {
  padding: 32px 48px 80px;
}

.benefits__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* -------------------- Hero -------------------- */

.benefits-hero {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin: 24px 0 32px;
  padding: 96px 48px;
  min-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(14, 20, 16, 0.78) 0%, rgba(14, 20, 16, 0.45) 50%, rgba(14, 20, 16, 0.72) 100%),
    url("../img/home/hero-tv-scene.png") center/cover no-repeat;
}

.benefits-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.1;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0;
  max-width: 18ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.benefits-hero__title strong {
  font-weight: 500;
  color: #aab87a;
}

.benefits-hero__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 64ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

/* -------------------- Featured 4-up grid -------------------- */

.benefits-featured__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.benefits-featured__grid--three {
  grid-template-columns: repeat(3, 1fr);
}

/* "More benefits" 3-up block on /all-benefits — sits below the featured row */
.benefits-more {
  margin-top: 40px;
}

/* Coming-soon panel that replaces the VS Plus upsell on /all-benefits */
.benefits-soon {
  margin-top: 56px;
  padding: 56px 48px;
  background: linear-gradient(135deg, #1a1d14 0%, #2b2f1f 100%);
  color: #ffffff;
  border-radius: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.benefits-soon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(250, 201, 87, 0.18) 0%, transparent 55%);
  pointer-events: none;
}
.benefits-soon > * { position: relative; z-index: 1; }
.benefits-soon__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fac957;
}
.benefits-soon__title {
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-hero);
  line-height: 1.12;
  letter-spacing: -0.6px;
  margin: 0;
  max-width: 720px;
}
.benefits-soon__title strong {
  color: #fac957;
  font-weight: 700;
}
.benefits-soon__body {
  margin: 0;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 620px;
}
.benefits-soon__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 18px;
  border: 1.5px solid rgba(250, 201, 87, 0.5);
  border-radius: 999px;
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fac957;
}

@media (max-width: 1023px) {
  .benefits-featured__grid--three { grid-template-columns: repeat(2, 1fr); }
  .benefits-soon { padding: 40px 28px; }
  .benefits-soon__title { font-size: var(--portal-text-hero); }
}
@media (max-width: 640px) {
  .benefits-featured__grid--three { grid-template-columns: 1fr; }
  .benefits-soon { padding: 32px 20px; border-radius: 18px; }
  .benefits-soon__title { font-size: var(--portal-text-section); }
  .benefits-soon__body { font-size: var(--portal-text-caption); }
}

/* -------------------- Benefit card (shared) -------------------- */

.benefit-card {
  background: #e6e6e0;
  border: 2px solid #ffffff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.benefit-card[hidden] { display: none; }
.benefits-grid__list[hidden] { display: none; }

/* Coming Soon — placeholder card for upcoming benefits */
.benefit-card--coming {
  background: var(--vs-surface-alt, #f4f0e3);
  border: 2px dashed var(--vs-line-strong, #c8c2b1);
}
.benefit-card--coming:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--vs-olive);
}
.benefit-card--coming .benefit-card__visual {
  background: linear-gradient(135deg, #1f2719 0%, #0f1310 100%);
  position: relative;
}
.benefit-card--coming .benefit-card__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(216, 184, 100, 0.06) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: 0 0;
}
.benefit-card--coming .benefit-card__visual::after {
  display: none;
}
.benefit-card--coming .benefit-card__pill {
  background: rgba(216, 184, 100, 0.18);
  color: #d8b864;
  border: 1px solid rgba(216, 184, 100, 0.4);
  letter-spacing: 0.18em;
}
.benefit-card--coming .benefit-card__visual-mark {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(216, 184, 100, 0.5);
  display: grid;
  place-items: center;
  color: #d8b864;
}
.benefit-card--coming .benefit-card__title {
  color: var(--vs-ink-muted, #5c5e58);
}
.benefit-card--coming .benefit-card__copy {
  color: var(--vs-ink-muted, #5c5e58);
}
.benefit-card--coming .benefit-card__cta {
  color: var(--vs-olive-deep, #3f4828);
  border-bottom-color: var(--vs-olive-deep, #3f4828);
}
.benefit-card--coming .benefit-card__cta[disabled] {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}
.benefit-card--coming .benefit-chip {
  background: rgba(244, 240, 227, 0.5);
  color: var(--vs-ink-muted);
}

.benefit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 14px 28px rgba(0, 0, 0, 0.08);
}

.benefit-card__visual {
  position: relative;
  height: 180px;
  background: #2a2520;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  border-radius: 18px 18px 0 0;
}

.benefit-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.benefit-card__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 4.4%, rgba(0, 0, 0, 0) 57.76%);
  z-index: 1;
}

.benefit-card__pill {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  z-index: 3;
}

.benefit-card__logo {
  position: relative;
  z-index: 2;
  max-width: 65%;
  max-height: 55%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}

.benefit-card__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
  padding: 28px 20px 20px;
  flex: 1;
}

.benefit-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--portal-space-2);
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--portal-olive-tint);
  color: var(--portal-olive-deep);
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.benefit-chip svg {
  display: block;
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.8);
}

.benefit-card__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.15;
  color: var(--vs-ink);
  margin: 0;
}

.benefit-card__copy {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 0;
}

/* Canonical benefit-card CTA language (§9): quiet text-link, never a
   boxed uppercase button (Sprint 9j). */
.benefit-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--portal-space-1);
  align-self: start;
  margin-top: auto;
  padding-top: var(--portal-space-2);
  background: transparent;
  color: var(--portal-ink-secondary);
  border-radius: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-link);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: color var(--portal-dur-base) var(--portal-ease-out);
}
.benefit-card__cta::after {
  content: "\2192";
}
.benefit-card__cta:hover {
  background: transparent;
  color: var(--portal-ink);
}

/* -------------------- All Benefits intro -------------------- */

.benefits-intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.benefits-intro__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}

.benefits-intro__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink);
  margin: 0;
  max-width: 64ch;
}

/* -------------------- Toolbar (label + search) -------------------- */

.benefits-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.benefits-toolbar__label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
  margin: 0;
}

.benefits-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 320px;
  max-width: 100%;
}

.benefits-search__icon {
  position: absolute;
  left: 14px;
  display: grid;
  place-items: center;
  color: var(--vs-ink-muted, #5C5E58);
  pointer-events: none;
}

.benefits-search__input {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 10px 14px 10px 36px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
  transition: border-color 200ms ease-out;
}

.benefits-search__input:focus-visible {
  outline: none;
  border-color: var(--vs-olive);
}

/* -------------------- Layout: sidebar + grid -------------------- */

.benefits-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 20px;
  align-items: flex-start;
}

/* -------------------- Sidebar -------------------- */

.benefits-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 88px;
}

.benefits-cats {
  list-style: none;
  margin: 0;
  padding: 8px 20px;
  background: #f5f5f3;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}

.benefits-cats > li {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.benefits-cats > li:first-child {
  border-top: 0;
}

.benefits-cat {
  width: 100%;
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  background: transparent;
  border: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: opacity 200ms ease-out;
}

.benefits-cat:hover {
  opacity: 0.7;
}

.benefits-cat__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--vs-ink);
  flex-shrink: 0;
}

.benefits-cat--active {
  font-weight: 600;
}

.benefits-cat__count {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  background: var(--vs-olive);
  color: #ffffff;
  border-radius: 999px;
  padding: 4px 12px;
  min-width: 36px;
  text-align: center;
}

.benefits-cat__chev {
  display: grid;
  place-items: center;
  color: var(--vs-ink);
  opacity: 0.5;
  width: 16px;
  height: 16px;
}

/* -------------------- Plus upsell -------------------- */

.benefits-plus {
  position: relative;
  background:
    radial-gradient(180% 90% at 95% 5%, rgba(250, 201, 87, 0.6) 0%, rgba(250, 201, 87, 0) 36%),
    radial-gradient(140% 100% at -20% 100%, #2a200a 0%, #0a0703 80%);
  border-radius: 20px;
  padding: 32px 28px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.benefits-plus::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(250, 201, 87, 0.4) 0%, rgba(250, 201, 87, 0) 60%);
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}

.benefits-plus > * {
  position: relative;
  z-index: 1;
}

.benefits-plus__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}

.benefits-plus__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-hero);
  line-height: 1.15;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0;
}

.benefits-plus__title strong {
  display: block;
  color: #fac957;
  font-weight: 600;
  margin-top: 4px;
}

.benefits-plus__body {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}

.benefits-plus__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fac957;
  color: #1a1402;
  border-radius: 10px;
  padding: 18px 32px;
  margin-top: 12px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 200ms ease-out;
  width: 100%;
}

.benefits-plus__btn:hover {
  background: #f3bf3a;
}

/* -------------------- Main grid + pagination -------------------- */

.benefits-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.benefits-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.benefits-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}

.benefits-pager__nav {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
  text-decoration: none;
  padding: 8px 12px;
}

.benefits-pager__nav--prev { justify-self: flex-start; }
.benefits-pager__nav--next { justify-self: flex-end; }

.benefits-pager__nav[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.benefits-pager__pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 4px;
}

.benefits-pager__page {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
  text-decoration: none;
  transition: background 200ms ease-out, color 200ms ease-out;
}

.benefits-pager__page:hover {
  background: #f4f0e3;
}

.benefits-pager__page--active {
  background: var(--vs-olive);
  color: #ffffff;
}

.benefits-pager__page--active:hover {
  background: var(--vs-olive);
}

.benefits-pager__count {
  text-align: center;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

/* -------------------- Responsive -------------------- */

@media (max-width: 1280px) {
  .benefits { padding: 24px 32px 64px; }
  .benefits-hero__title,
  .benefits-intro__title { font-size: var(--portal-text-display); }
  .benefits-featured__grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .benefits { padding: 20px 16px 48px; }
  .benefits-hero__title,
  .benefits-intro__title { font-size: var(--portal-text-hero); }
  .benefits-hero__body,
  .benefits-intro__body { font-size: var(--portal-text-caption); }
  .benefits-featured__grid { grid-template-columns: 1fr; }
  .benefits-grid__list { grid-template-columns: 1fr; }
  .benefits-layout { grid-template-columns: 1fr; }
  .benefits-side {
    position: static;
    order: -1;
  }
  .benefits-cats {
    flex-direction: row;
    overflow-x: auto;
    padding: 6px;
  }
  .benefits-cat { white-space: nowrap; }
  .benefits-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .benefits-search { width: 100%; }
}

/* =========================================================================
   Agero benefit / activation page
   ========================================================================= */

.agero-body {
  background:
    linear-gradient(180deg, #e6e6e0 0%, #ffffff 87%) no-repeat,
    #ffffff;
  background-size: 100% 100%;
  min-height: 100vh;
}

.portal-nav--simple .portal-nav__inner {
  justify-content: space-between;
}

/* Same shell standardization as .benefit-page (Sprint 9f width audit). */
.agero {
  padding: 32px var(--page-pad) 80px;
}

.agero__inner {
  max-width: 1216px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* -------------------- Breadcrumbs -------------------- */

/* -------------------- Hero -------------------- */

.agero-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  min-height: 380px;
  padding: 64px 64px 64px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.agero-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.agero-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(11, 10, 0, 0.95) 0%, rgba(11, 10, 0, 0.7) 38%, rgba(11, 10, 0, 0.05) 70%);
  z-index: 1;
}

.agero-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 880px;
  color: #ffffff;
}

.agero-hero__logo {
  width: 132px;
  height: auto;
  display: block;
}

.agero-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.05;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0;
}

.agero-hero__title strong {
  font-weight: 500;
}

.agero-hero__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 720px;
}

/* -------------------- 2-column grid -------------------- */

.agero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}

/* -------------------- Wizard (left) -------------------- */

.agero-wizard {
  background: #e6e6e0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.agero-wizard__head {
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: 1px solid rgba(73, 73, 73, 0.08);
}

.agero-wizard__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.15;
  color: var(--vs-ink);
  margin: 0;
}

.agero-wizard__step {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: rgba(73, 73, 73, 0.75);
  margin: 0;
}

.agero-wizard__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.agero-wizard__tab {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}

.agero-wizard__tab-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(190, 190, 185, 0.6);
  transition: background 200ms ease-out;
}

.agero-wizard__tab-label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  color: rgba(73, 73, 73, 0.55);
  transition: color 200ms ease-out;
}

.agero-wizard__tab--active .agero-wizard__tab-bar,
.agero-wizard__tab--done .agero-wizard__tab-bar {
  background: var(--vs-olive);
}

.agero-wizard__tab--active .agero-wizard__tab-label {
  color: var(--vs-olive);
}

.agero-wizard__tab--done .agero-wizard__tab-label {
  color: var(--vs-ink);
}

.agero-wizard__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.agero-wizard__panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.agero-wizard__panel[hidden] { display: none; }

.agero-wizard__lead {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agero-wizard__heading {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
}

.agero-wizard__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.4;
  color: rgba(73, 73, 73, 0.85);
  margin: 0;
}

.agero-wizard__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.agero-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agero-field[hidden] { display: none; }

.agero-field__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
  opacity: 0.8;
}

.agero-field__input {
  width: 100%;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 18px 22px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.3;
  color: var(--vs-ink);
  transition: border-color 200ms ease-out;
}

.agero-field__input:focus-visible {
  outline: none;
  border-color: var(--vs-olive);
}

.agero-field__input--select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1 L6 6 L11 1' stroke='%230E0F0C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 22px center;
  background-size: 12px 8px;
  padding-right: 48px;
  cursor: pointer;
}

.agero-wizard__foot {
  padding: 20px 32px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.agero-wizard__back {
  appearance: none;
  border: 0;
  background: #d4d4c6;
  border-radius: 8px;
  padding: 12px 22px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: rgba(73, 73, 73, 0.85);
  cursor: pointer;
  transition: background 200ms ease-out, opacity 200ms ease-out;
}

.agero-wizard__back:hover:not(:disabled) {
  background: #c4c4b6;
}

.agero-wizard__back:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.agero-wizard__secured {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
}

.agero-wizard__continue {
  appearance: none;
  border: 0;
  background: var(--vs-olive);
  color: #ffffff;
  border-radius: 8px;
  padding: 14px 28px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease-out;
}

.agero-wizard__continue:hover {
  background: var(--vs-olive-deep, #3F4828);
}

/* Section subhead with rule (LOAN, LEASE, MAINTENANCE) */
.agero-section-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-olive);
}

.agero-section-rule span { flex-shrink: 0; }

.agero-section-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--vs-olive);
  opacity: 0.4;
}

/* Prefixed input (e.g., $ or %) */
.agero-field__pre {
  position: relative;
  display: flex;
  align-items: center;
}

.agero-field__pre > span {
  position: absolute;
  left: 18px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
  pointer-events: none;
}

.agero-field__input--prefixed {
  padding-left: 36px;
}

.agero-field__input--textarea {
  resize: vertical;
  min-height: 96px;
  font-family: var(--vs-font-body);
}

/* Yes/No segmented toggle */
.agero-toggle {
  display: inline-flex;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  width: fit-content;
}

.agero-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 28px;
  border-radius: 8px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: background 200ms ease-out, color 200ms ease-out;
}

.agero-toggle__btn--on {
  background: var(--vs-olive);
  color: #ffffff;
}

/* Ownership choice cards (step 4) */
.agero-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agero-choice {
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  align-items: center;
  gap: 16px;
  appearance: none;
  border: 2px solid rgba(0, 0, 0, 0.15);
  background: #ffffff;
  border-radius: 12px;
  padding: 18px 22px;
  text-align: left;
  cursor: pointer;
  transition: background 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}

.agero-choice:hover { border-color: rgba(87, 96, 56, 0.4); }

.agero-choice--selected {
  background: var(--vs-olive);
  border-color: var(--vs-olive);
  color: #ffffff;
}

.agero-choice__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #efe9d6;
  display: grid;
  place-items: center;
  color: var(--vs-olive);
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-label);
}

.agero-choice--selected .agero-choice__icon {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.agero-choice__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agero-choice__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.2;
  color: inherit;
}

.agero-choice__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.55);
}

.agero-choice--selected .agero-choice__sub { color: rgba(255, 255, 255, 0.85); }

.agero-choice__radio {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  position: relative;
  flex-shrink: 0;
}

.agero-choice--selected .agero-choice__radio {
  border-color: #ffffff;
  background: #ffffff;
}

.agero-choice--selected .agero-choice__radio::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: var(--vs-olive);
}

/* Maintenance checkboxes (step 5c) */
.agero-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.agero-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 500;
  color: var(--vs-ink);
  transition: border-color 200ms ease-out;
}

.agero-check:hover { border-color: rgba(87, 96, 56, 0.4); }

.agero-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.agero-check__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  color: transparent;
  transition: background 200ms ease-out, border-color 200ms ease-out;
}

.agero-check input:checked + .agero-check__box {
  background: var(--vs-olive);
  border-color: var(--vs-olive);
  color: #ffffff;
}

.agero-check:has(input:checked) {
  border-color: var(--vs-olive);
}

/* Insurance provider tiles (step 6) */
.agero-providers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.agero-provider {
  appearance: none;
  background: #ffffff;
  border: 2px solid rgba(190, 190, 185, 0.6);
  border-radius: 12px;
  padding: 24px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 124px;
  cursor: pointer;
  transition: border-color 200ms ease-out;
}

.agero-provider__logo {
  display: block;
  height: 44px;
  width: 140px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

.agero-provider:hover { border-color: rgba(87, 96, 56, 0.4); }

.agero-provider--selected {
  border-color: var(--vs-olive);
}

.agero-provider__name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
  letter-spacing: 0.04em;
}

.agero-provider--selected .agero-provider__name {
  color: var(--vs-olive);
}

.agero-provider__plus {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  color: rgba(0, 0, 0, 0.4);
  line-height: 1;
}

/* Driver chips (step 10) */
.agero-drivers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agero-driver {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 18px;
}

.agero-driver__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #d0cfc6;
  color: var(--vs-ink);
  display: grid;
  place-items: center;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
}

.agero-driver__avatar--primary {
  background: var(--vs-olive);
  color: #dfd7bc;
}

.agero-driver__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agero-driver__name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
}

.agero-driver__role {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

.agero-driver__role--primary { color: var(--vs-olive); font-weight: 500; }

.agero-driver__edit {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: var(--vs-olive);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 4px 8px;
}

.agero-driver__remove {
  appearance: none;
  border: 0;
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background 200ms ease-out, color 200ms ease-out;
}

.agero-driver__remove:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--vs-ink);
}

.agero-driver-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 2px dashed var(--vs-olive);
  border-radius: 12px;
  padding: 16px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-olive);
  cursor: pointer;
  transition: background 200ms ease-out;
}

.agero-driver-add:hover:not(:disabled) { background: rgba(87, 96, 56, 0.06); }
.agero-driver-add:disabled,
.agero-driver-add--maxed {
  opacity: 0.55;
  cursor: not-allowed;
  border-color: var(--vs-line-strong, #c8c2b1);
  color: var(--vs-ink-muted, #5c5e58);
}

.agero-driver-add span { font-size: var(--portal-text-body); }
.agero-driver-add__count {
  margin-left: auto;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--vs-ink-muted, #5c5e58);
}

/* Inline add-driver form (step 10) */
.agero-driver-form {
  background: #ffffff;
  border: 2px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.agero-driver-form[hidden] { display: none; }
.agero-driver-form__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.agero-driver-form__cancel {
  appearance: none;
  background: #d4d4c6;
  color: rgba(73, 73, 73, 0.85);
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease-out;
}
.agero-driver-form__cancel:hover { background: #c6c6b7; }
.agero-driver-form__save {
  appearance: none;
  background: var(--vs-olive);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease-out;
}
.agero-driver-form__save:hover { background: var(--vs-olive-deep, #3f4828); }

/* Primary driver row — inline edit state */
.agero-driver--editing {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar inputs"
    "actions actions";
  column-gap: 16px;
  row-gap: 16px;
  align-items: start;
}
.agero-driver--editing > .agero-driver__avatar { grid-area: avatar; }
.agero-driver__inline {
  grid-area: inputs;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agero-driver__inline-row {
  display: flex;
  gap: 8px;
}
.agero-driver__inline-row input {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 12px;
  font-size: var(--portal-text-label);
}
.agero-driver--editing .agero-driver-form__cancel,
.agero-driver--editing .agero-driver-form__save {
  padding: 12px 20px;
  font-size: var(--portal-text-caption);
}
.agero-driver--editing .agero-driver-form__cancel {
  grid-area: actions;
  justify-self: start;
}
.agero-driver--editing .agero-driver-form__save {
  grid-area: actions;
  justify-self: end;
}
@media (min-width: 640px) {
  .agero-driver--editing {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "avatar inputs cancel save";
    align-items: center;
  }
  .agero-driver--editing .agero-driver-form__cancel { grid-area: cancel; }
  .agero-driver--editing .agero-driver-form__save { grid-area: save; }
}

/* Review summary cards (step 11) */
.agero-summary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agero-summary__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 18px 22px;
}

.agero-summary__check {
  display: grid;
  place-items: center;
  color: var(--vs-olive);
}

.agero-summary__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.agero-summary__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
}

.agero-summary__line {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  line-height: 1.4;
  color: var(--vs-ink-muted, #5C5E58);
}

.agero-summary__edit {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: var(--vs-olive);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 4px 8px;
}

/* Success state (step 12) */
.agero-wizard__panel--success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: 24px 0;
}

.agero-success__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--vs-olive);
}

.agero-success__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.1;
  color: var(--vs-ink);
  margin: 0;
}

.agero-success__body {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
  max-width: 56ch;
}

.agero-success__card {
  background: #ffffff;
  border: 2px solid var(--vs-olive);
  border-radius: 16px;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.agero-success__caption {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.agero-success__phone {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.1;
  color: var(--vs-ink);
  margin: 0;
}

.agero-success__phone span {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.agero-wizard__success-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--vs-olive);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--portal-text-caption);
}

/* -------------------- Right-side info cards -------------------- */

.agero-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agero-card {
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agero-card--call {
  background: rgba(103, 123, 35, 0.18);
  border: 2px solid var(--vs-olive);
}

.agero-card--benefits {
  background: #f5f5f3;
}

.agero-card--cs {
  background: #e6e6e0;
  border: 2px solid var(--vs-olive);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
}

.agero-card__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-card-title);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
}

.agero-card__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 0;
}

.agero-card__phone {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-hero);
  line-height: 1.1;
  color: var(--vs-ink);
  text-decoration: none;
  margin-top: 8px;
}

.agero-card__phone span {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.agero-card__phone--md {
  font-size: var(--portal-text-section);
}

.agero-card__cs-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agero-card__cs-photo {
  width: 200px;
  height: auto;
  align-self: end;
  margin: -40px -16px -40px 0;
}

/* Benefit grid */
.agero-benefits {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.agero-benefit {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: var(--vs-ink);
}

/* Coin treatment per the §7 --feature icon language. */
.agero-benefit__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: var(--portal-radius-card-lg);
  background: var(--portal-olive-tint);
  color: var(--portal-olive);
}

.agero-benefit__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  line-height: 1.3;
  color: var(--vs-ink);
}

/* =========================================================================
   FAQ — design system component
   ─────────────────────────────────────────────────────────────────────────
   Canonical FAQ pattern used across portal & benefit pages
   (agero, vs-plus, vs-plus-member, newday-home, credit-activate, etc).

   Markup contract:
     <section class="vs-faq" aria-labelledby="…">
       <div class="vs-faq__copy">
         <p class="vs-faq__eyebrow">FAQs</p>
         <h2 class="vs-faq__title">Have Questions?</h2>
         <p class="vs-faq__body">…intro copy…</p>
         <a class="agero-btn agero-btn--primary" href="contact.html">Get in touch</a>
       </div>
       <ul class="vs-faq__list" role="list">
         <li>
           <button class="vs-faq__item" type="button" aria-expanded="false" aria-controls="faq-1">
             <span class="vs-faq__q">Question?</span>
             <span class="vs-faq__icon" aria-hidden="true">
               <img class="vs-faq__icon-plus" src="assets/img/home/faq-plus-circle.svg" alt="">
               <img class="vs-faq__icon-x" src="assets/img/home/faq-close-circle.svg" alt="">
             </span>
           </button>
           <div id="faq-1" class="vs-faq__a" hidden>
             <p>Answer…</p>
           </div>
         </li>
       </ul>
     </section>

   Behavior contract (JS, single-open accordion):
     const items = document.querySelectorAll('.vs-faq__item');
     items.forEach(btn => btn.addEventListener('click', () => {
       const expanded = btn.getAttribute('aria-expanded') === 'true';
       items.forEach(b => {
         b.setAttribute('aria-expanded', 'false');
         const a = document.getElementById(b.getAttribute('aria-controls'));
         if (a) a.hidden = true;
       });
       if (!expanded) {
         btn.setAttribute('aria-expanded', 'true');
         const a = document.getElementById(btn.getAttribute('aria-controls'));
         if (a) a.hidden = false;
       }
     }));
   ========================================================================= */

.vs-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  padding: 48px 0;
  align-items: start;
}

.vs-faq__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vs-faq__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vs-ink);
  margin: 0;
}

.vs-faq__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  letter-spacing: -0.5px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}

.vs-faq__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 0;
  max-width: 56ch;
}

.agero-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--vs-olive);
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  padding: 18px 28px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  align-self: flex-start;
  transition: background 200ms ease-out;
}

.agero-btn:hover { background: var(--vs-olive-deep, #3F4828); }

.vs-faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 0;
  min-width: 0;
}

.vs-faq__list > li {
  background: rgba(230, 230, 224, 0.4);
  border-radius: 12px;
  overflow: hidden;
  transition: background-color 200ms ease-out;
}

.vs-faq__list > li:hover {
  background: rgba(230, 230, 224, 0.7);
}

.vs-faq__item {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  text-align: left;
}

.vs-faq__item:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: -4px;
}

.vs-faq__q {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink);
}

.vs-faq__icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}

.vs-faq__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.vs-faq__icon img.vs-faq__icon-x { display: none; }
.vs-faq__item[aria-expanded="true"] img.vs-faq__icon-plus { display: none; }
.vs-faq__item[aria-expanded="true"] img.vs-faq__icon-x { display: block; }

.vs-faq__a {
  padding: 0 30px 24px;
}

.vs-faq__a p {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.5;
  color: var(--vs-ink);
  margin: 0;
  max-width: 821px;
}

.vs-faq__a[hidden] { display: none; }

@media (max-width: 1280px) {
  .agero { padding: 24px 32px 64px; }
  .agero-hero { padding: 48px 40px; min-height: 320px; }
  .agero-hero__title { font-size: var(--portal-text-display); }
  .agero-hero__body { font-size: var(--portal-text-label); }
  .agero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* .vs-faq stacks at tablet (≤1024px) — at 1280px the 2-col layout still
   fits comfortably inside the page's max-width container. */
@media (max-width: 1024px) {
  .vs-faq {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 0;
  }
  .vs-faq__title { font-size: var(--portal-text-hero); }
  .vs-faq__q { font-size: var(--portal-text-section); }
}

@media (max-width: 768px) {
  .agero { padding: 20px 16px 48px; }
  .agero-hero { padding: 40px 24px; min-height: 280px; }
  .agero-hero__title { font-size: var(--portal-text-hero); }
  .agero-hero__body { font-size: var(--portal-text-label); }
  .agero-wizard__head { padding: 20px 20px 16px; }
  .agero-wizard__body { padding: 20px; }
  .agero-wizard__foot {
    flex-wrap: wrap;
    padding: 16px 20px 20px;
  }
  .agero-wizard__row { grid-template-columns: 1fr; }
  .agero-card { padding: 24px; }
  .agero-card__phone { font-size: var(--portal-text-section); }
  .agero-card--cs {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .agero-card__cs-photo {
    width: 160px;
    margin: 0 auto;
  }
  .agero-benefits { grid-template-columns: repeat(2, 1fr); }
  .vs-faq__title { font-size: var(--portal-text-hero); }
  .vs-faq__q { font-size: var(--portal-text-body); }
  .agero-wizard__tab-label { font-size: var(--portal-text-caption); }
}

/* -------------------- Upcoming meeting banner -------------------- */

.portal-meeting {
  display: grid;
  grid-template-columns: minmax(220px, auto) 1px minmax(0, 1fr) 1px minmax(220px, auto);
  align-items: center;
  gap: 32px;
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 20px;
  padding: 28px 32px;
}

.portal-meeting__person {
  display: flex;
  align-items: center;
  gap: 16px;
}

.portal-meeting__avatar-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: inline-flex;
}

.portal-meeting__avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
}

.portal-meeting__online {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: #2f7a3d;
  border: 2.5px solid var(--vs-surface, #ffffff);
  border-radius: 999px;
}

.portal-meeting__name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  line-height: 1.2;
  color: var(--vs-ink, #0e0f0c);
  margin: 0 0 4px;
}

.portal-meeting__phone {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  line-height: 1.2;
  color: var(--vs-ink-muted, #5c5e58);
}

.portal-meeting__divider {
  width: 1px;
  height: 56px;
  background: rgba(0, 0, 0, 0.12);
}

.portal-meeting__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portal-meeting__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
}

.portal-meeting__icon {
  display: inline-grid;
  place-items: center;
  color: var(--vs-ink);
}

.portal-meeting__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 0;
}

.portal-meeting__when {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.portal-meeting__date {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
  margin: 0;
  white-space: nowrap;
}

.portal-meeting__change {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.portal-meeting__change:hover {
  color: var(--vs-olive);
}

@media (max-width: 1023px) {
  .portal-meeting {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 24px;
  }
  .portal-meeting__divider { display: none; }
  .portal-meeting__when { align-items: flex-start; }
}

/* -------------------- Benefit card paragraph variant -------------------- */

.portal-benefit__copy {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink);
  margin: 0;
}

/* -------------------- Get-to-know-you task flow -------------------- */

.portal-task-panel {
  padding: 56px 48px 40px;
}

.portal-task {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.portal-task[hidden] { display: none; }

.portal-task__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
  position: relative;
  padding-bottom: 16px;
  width: 100%;
}

.portal-task__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 2px;
  background: var(--vs-olive);
  border-radius: 999px;
}

.portal-task__progress {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.portal-task__question {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 8px 0 4px;
}

.portal-task__select {
  width: 100%;
  max-width: 420px;
}

.portal-task__submit {
  width: 100%;
  max-width: 420px;
  margin-top: 8px;
}

@media (max-width: 1023px) {
  .portal-task-panel { padding: 48px 24px 32px; }
  .portal-task { max-width: 100%; }
}

/* -------------------- Profile verification — tabs + panel -------------------- */

.portal-verify-wrap {
  position: relative;
}

.portal-tiles--tabs {
  position: relative;
  z-index: 2;
}

.portal-tile--tab {
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  font-family: var(--vs-font-body);
}

.portal-tile--tab .portal-tile__check {
  display: none;
}

.portal-tile--tab.portal-tile--done .portal-tile__check {
  display: grid;
}

.portal-tile--tab.portal-tile--done {
  opacity: 0.55;
}

.portal-tile--tab.portal-tile--active {
  background: var(--vs-olive);
  color: #ffffff;
  opacity: 1;
}

.portal-tile--tab.portal-tile--active .portal-tile__icon,
.portal-tile--tab.portal-tile--active .portal-tile__label {
  color: #ffffff;
}

.portal-tile--tab.portal-tile--active::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 20px;
  height: 20px;
  background: var(--vs-olive);
}

.portal-verify {
  position: relative;
  margin-top: 20px;
  background: #ffffff;
  border-radius: 16px;
  padding: 56px 48px 48px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04);
}

.portal-verify[hidden] { display: none; }

.portal-verify__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #e6e6e0;
  border: 0;
  border-radius: 8px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 500;
  color: var(--vs-ink);
  cursor: pointer;
  transition: background 200ms ease-out;
}

.portal-verify__close:hover { background: #d8d8d0; }

.portal-verify__step {
  display: block;
}

.portal-verify__step[hidden] { display: none; }

.portal-verify__step--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
}

.portal-verify__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.portal-verify__cols--media {
  align-items: center;
}

.portal-verify__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.portal-verify__col--center {
  align-items: stretch;
  text-align: center;
}

.portal-verify__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
}

.portal-verify__title--center {
  text-align: center;
  font-weight: 600;
}

.portal-verify__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0 0 8px;
}

.portal-verify__lead--center {
  text-align: center;
}

.portal-verify__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.portal-verify__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.portal-verify__label {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
}

.portal-verify__input {
  width: 100%;
  background: #f4f0e3;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: var(--vs-ink);
  transition: border-color 200ms ease-out, background 200ms ease-out;
}

.portal-verify__input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.portal-verify__input:focus-visible {
  outline: none;
  border-color: var(--vs-olive);
  background: #ffffff;
}

.portal-verify__input--select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1 L6 6 L11 1' stroke='%230E0F0C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 40px;
  cursor: pointer;
}

.portal-verify__submit {
  width: 100%;
  margin-top: 8px;
}

.portal-verify__continue {
  margin-top: 8px;
  min-width: 200px;
}

.portal-verify__secured {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px auto 0;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
}

.portal-verify__col--center .portal-verify__secured {
  margin-left: auto;
  margin-right: auto;
}

/* Loader */
.portal-verify__loader {
  background: #f4f0e3;
  border-radius: 12px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 480px;
}

.portal-verify__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(87, 96, 56, 0.2);
  border-top-color: var(--vs-olive);
  border-radius: 50%;
  animation: portal-verify-spin 1s linear infinite;
}

@keyframes portal-verify-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .portal-verify__spinner { animation-duration: 4s; }
}

.portal-verify__loader-title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  margin: 0;
  color: var(--vs-ink);
}

.portal-verify__loader-sub {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

/* Success banner */
.portal-verify__success {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: #d8efd0;
  border-radius: 12px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: #2f6b1e;
  width: 100%;
  max-width: 600px;
  justify-content: center;
}

/* Verification checklist */
.portal-verify__checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 600px;
  margin-bottom: 8px;
}

/* Step icon (phone / email / success) */
.portal-verify__step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--vs-success-bg, #e0ead0);
  margin-bottom: 8px;
}

/* OTP input row */
.portal-otp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 20px;
}
.portal-otp__digit {
  width: 56px;
  height: 64px;
  border: 2px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  background: var(--vs-surface, #fff);
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-size: var(--portal-text-section);
  font-weight: 700;
  text-align: center;
  color: var(--vs-ink, #0e0f0c);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
  caret-color: var(--vs-olive);
}
.portal-otp__digit:focus {
  outline: none;
  border-color: var(--vs-olive);
  box-shadow: 0 0 0 4px rgba(90, 107, 63, 0.15);
}
.portal-otp__sep {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: var(--vs-line-strong, #c8c2b1);
}

/* Waiting indicator */
.portal-verify__waiting {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--vs-surface-alt, #f4f0e3);
  border-radius: 12px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5c5e58);
  width: 100%;
  max-width: 600px;
  justify-content: center;
}
.portal-verify__waiting-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vs-olive);
  animation: otp-pulse 1.4s ease-in-out infinite;
}
@keyframes otp-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}
.portal-verify__lead--muted {
  color: var(--vs-ink-subtle, #9a9a8e);
  font-size: var(--portal-text-label);
}

/* Dropzone */
.portal-verify__dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  background: #f4f0e3;
  border: 2px dashed rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 200ms ease-out, background 200ms ease-out;
  margin: 8px 0;
}

.portal-verify__dropzone:hover,
.portal-verify__dropzone:focus-within {
  border-color: var(--vs-olive);
  background: #ede8da;
}

.portal-verify__dropzone--filled {
  border-style: solid;
  border-color: var(--vs-olive);
  background: #e8efd7;
}

.portal-verify__dropzone-icon {
  display: grid;
  place-items: center;
  color: var(--vs-ink);
}

.portal-verify__dropzone-text {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
}

/* Video card */
.portal-verify__video {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%),
    url("../img/portal/concierge-avatar.png") center/cover #1a1a1a;
  border-radius: 12px;
  height: 280px;
  cursor: pointer;
  overflow: hidden;
}

.portal-verify__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.portal-verify__video-caption {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: #ffffff;
}

.portal-verify__video-time {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: #ffffff;
}

/* Text button (e.g., Upload another document) */
.portal-verify__textbtn {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  margin: 0;
  padding: 4px 0;
  align-self: center;
}

.portal-verify__textbtn:hover {
  color: var(--vs-olive);
}

/* Concierge step */
.portal-verify__concierge-card {
  background: #f4f0e3;
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.portal-verify__concierge-person {
  display: flex;
  align-items: center;
  gap: 16px;
}

.portal-verify__concierge-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  background: #fac957;
}

.portal-verify__concierge-name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  color: var(--vs-ink);
  margin: 0;
}

.portal-verify__concierge-role {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.portal-verify__concierge-body {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink);
  margin: 0;
}

.portal-verify__cal-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.portal-verify__cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

.portal-verify__cal-dow {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  text-align: center;
  padding: 8px 0;
}

.portal-verify__cal-day {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 12px 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: background 150ms ease-out, color 150ms ease-out;
}

.portal-verify__cal-day:hover {
  background: rgba(87, 96, 56, 0.08);
}

.portal-verify__cal-day--empty {
  display: block;
  cursor: default;
}

.portal-verify__cal-day--active {
  background: var(--vs-olive);
  color: #ffffff;
}

.portal-verify__cal-day--active:hover {
  background: var(--vs-olive-deep, #3F4828);
}

@media (max-width: 1023px) {
  .portal-verify { padding: 48px 24px 32px; }
  .portal-verify__cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .portal-verify__row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .portal-tile--tab.portal-tile--active::after { display: none; }
  .portal-verify__video { height: 220px; }
}

@media (max-width: 600px) {
  .portal-verify { padding: 40px 16px 24px; border-radius: 12px; }
  .portal-verify__title { font-size: var(--portal-text-card-title); }
  .portal-verify__close { padding: 6px 10px; font-size: var(--portal-text-caption); }
  .portal-verify__concierge-card { padding: 20px; }
  .portal-verify__cal-day { padding: 10px 0; font-size: var(--portal-text-caption); }
}

/* -------------------- Get to Know You Wizard -------------------- */

.wiz-panel {
  background: var(--vs-surface, #fff);
  border-radius: 20px;
  padding: 48px 40px;
  margin-top: 24px;
}
.wiz-panel[hidden] { display: none; }

.wiz-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 40px;
  max-width: 480px;
}
.wiz-progress__step {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}
.wiz-progress__step:last-child { flex: 0; }
.wiz-progress__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--vs-line, #e4e0d6);
  background: var(--vs-surface, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #9a9a8e);
  transition: background-color 250ms var(--portal-ease-out), border-color 250ms var(--portal-ease-out), color 250ms var(--portal-ease-out), transform 250ms var(--portal-ease-out), box-shadow 250ms var(--portal-ease-out);
  flex-shrink: 0;
}
.wiz-progress__step--active .wiz-progress__dot {
  border-color: var(--vs-olive);
  background: var(--vs-olive);
  color: #fff;
}
.wiz-progress__step--done .wiz-progress__dot {
  border-color: var(--vs-olive);
  background: var(--vs-olive);
  color: #fff;
}
.wiz-progress__bar {
  flex: 1;
  height: 3px;
  background: var(--vs-line, #e4e0d6);
  margin: 0 8px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.wiz-progress__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--vs-olive);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms ease-out;
}
.wiz-progress__step--done .wiz-progress__bar::after {
  transform: scaleX(1);
}

.wiz-step { display: none; }
.wiz-step--active { display: block; }

.wiz-step__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  color: var(--vs-ink);
  margin: 0 0 8px;
}
.wiz-step__lead {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-body);
  color: var(--vs-ink-muted);
  margin: 0 0 32px;
  line-height: 1.5;
}

/* Box selector grid */
.wiz-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.wiz-boxes--wide {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.wiz-boxes--2col {
  grid-template-columns: repeat(2, 1fr);
}
.wiz-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: var(--vs-surface-alt, #f4f0e3);
  border: 2px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 200ms ease-out, background 200ms ease-out, transform 150ms ease-out;
  text-align: center;
  min-height: 120px;
  justify-content: center;
}
.wiz-box:hover {
  border-color: var(--vs-line-strong, #c8c2b1);
  transform: translateY(-2px);
}
.wiz-box--selected {
  border-color: var(--vs-olive);
  background: var(--vs-success-bg, #e0ead0);
}
.wiz-box--selected::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vs-olive) url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8 L7 11 L12 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.wiz-box input[type="radio"],
.wiz-box input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.wiz-box__icon {
  width: 40px;
  height: 40px;
  color: var(--vs-ink-muted, #5c5e58);
  transition: color 200ms ease-out;
}
.wiz-box--selected .wiz-box__icon {
  color: var(--vs-olive-deep, #3f4a2a);
}
.wiz-box__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
  line-height: 1.3;
}

/* Inline field row inside wizard */
.wiz-field {
  margin-bottom: 24px;
  max-width: 480px;
}
.wiz-field__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
  margin-bottom: 8px;
  display: block;
}
.wiz-field__row {
  display: flex;
  gap: 12px;
}
.wiz-field__input {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  padding: 14px 16px;
  border: 2px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  background: var(--vs-surface, #fff);
  color: var(--vs-ink);
  width: 100%;
  transition: border-color 200ms ease-out;
}
.wiz-field__input:focus {
  outline: none;
  border-color: var(--vs-olive);
  box-shadow: 0 0 0 4px rgba(90, 107, 63, 0.15);
}
select.wiz-field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1 L6 6 L11 1' stroke='%235c5e58' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 40px;
}

/* Wizard buttons */
.wiz-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 40px;
}
.wiz-btn {
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-size: var(--portal-text-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  padding: 16px 32px;
  transition: background 200ms ease-out, transform 150ms ease-out;
}
.wiz-btn--primary {
  background: var(--vs-olive);
  color: #fff;
}
.wiz-btn--primary:hover {
  background: var(--vs-olive-deep);
  transform: translateY(-1px);
}
.wiz-btn--ghost {
  background: transparent;
  color: var(--vs-ink-muted);
  padding: 16px 20px;
}
.wiz-btn--ghost:hover {
  color: var(--vs-ink);
}

/* Wizard completion celebration */
.wiz-complete {
  text-align: center;
  padding: 40px 20px;
}
.wiz-complete__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--vs-success-bg, #e0ead0);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  animation: wiz-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wiz-pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.wiz-complete__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  color: var(--vs-ink);
  margin: 0 0 8px;
}
.wiz-complete__body {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-body);
  color: var(--vs-ink-muted);
  margin: 0 0 24px;
  line-height: 1.5;
}

/* -------------------- Wizard v2: premium split layout -------------------- */

.wiz-panel--v2 {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--vs-line, #e4e0d6);
  background: var(--vs-surface, #fff);
}

.wiz-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 40px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
  background: var(--vs-surface-alt, #f4f0e3);
}
.wiz-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5c5e58);
}
.wiz-meta__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vs-olive);
}
.wiz-meta__id {
  font-feature-settings: "tnum" 1;
  color: var(--vs-ink, #1f1f1a);
  letter-spacing: 0.12em;
}
.wiz-panel__close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 500;
  color: var(--vs-ink-muted, #5c5e58);
  cursor: pointer;
  transition: border-color 200ms ease-out, color 200ms ease-out;
}
.wiz-panel__close:hover {
  border-color: var(--vs-ink, #1f1f1a);
  color: var(--vs-ink, #1f1f1a);
}
.wiz-panel__close svg { width: 12px; height: 12px; }

.wiz-panel__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 0;
  min-height: 560px;
}
.wiz-panel__main {
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.wiz-panel__aside {
  background: linear-gradient(180deg, #1f2719 0%, #0f1310 100%);
  color: #f4f0e3;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}
.wiz-panel__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 24px 24px, 8px 8px;
  background-position: 0 0, 12px 12px;
  pointer-events: none;
}
.wiz-panel__aside > * { position: relative; z-index: 1; }

@media (max-width: 960px) {
  .wiz-panel__layout { grid-template-columns: 1fr; min-height: auto; }
  .wiz-panel__main { padding: 32px 24px; }
  .wiz-panel__aside { padding: 24px; }
}

/* Progress bar inside top */
.wiz-panel__top .wiz-progress { margin: 0; max-width: 360px; flex: 1; }
.wiz-panel__top .wiz-progress__step { gap: 0; }

/* Editorial step copy */
.wiz-step__eyebrow {
  display: block;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vs-olive);
  margin-bottom: 12px;
}
.wiz-step__title--editorial {
  font-family: var(--vs-font-display, "Stratum No2", serif);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin-bottom: 12px;
}
.wiz-step__lead--editorial {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted);
  line-height: 1.55;
  margin: 0 0 32px;
  max-width: 540px;
}

/* Chip range picker */
.wiz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.wiz-chip {
  position: relative;
  cursor: pointer;
}
.wiz-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.wiz-chip__label {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 500;
  color: var(--vs-ink, #1f1f1a);
  background: var(--vs-surface, #fff);
  transition: background-color 180ms var(--portal-ease-out), border-color 180ms var(--portal-ease-out), color 180ms var(--portal-ease-out), transform 180ms var(--portal-ease-out), box-shadow 180ms var(--portal-ease-out);
  white-space: nowrap;
}
.wiz-chip:hover .wiz-chip__label { border-color: var(--vs-olive); }
.wiz-chip--selected .wiz-chip__label,
.wiz-chip input:checked + .wiz-chip__label {
  background: var(--vs-olive);
  border-color: var(--vs-olive);
  color: #fff;
}

/* Stepper (+/-) */
.wiz-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin: 20px 0 16px;
  padding: 24px;
  background: var(--vs-surface-alt, #f4f0e3);
  border-radius: 20px;
  max-width: 380px;
}
.wiz-stepper__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--vs-line-strong, #c8c2b1);
  background: var(--vs-surface, #fff);
  color: var(--vs-ink, #1f1f1a);
  font-size: var(--portal-text-section);
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 180ms var(--portal-ease-out), border-color 180ms var(--portal-ease-out), color 180ms var(--portal-ease-out), transform 180ms var(--portal-ease-out), box-shadow 180ms var(--portal-ease-out);
  flex-shrink: 0;
}
.wiz-stepper__btn:hover:not(:disabled) {
  border-color: var(--vs-olive);
  color: var(--vs-olive);
  transform: scale(1.05);
}
.wiz-stepper__btn:active:not(:disabled) {
  transform: scale(0.95);
  background: var(--vs-success-bg, #e0ead0);
}
.wiz-stepper__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.wiz-stepper__value {
  font-family: var(--vs-font-display, "Stratum No2", serif);
  font-weight: 500;
  font-size: var(--portal-num-headline);
  color: var(--vs-ink, #1f1f1a);
  min-width: 120px;
  text-align: center;
  line-height: 1;
  font-feature-settings: "tnum" 1;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wiz-stepper__value--word {
  font-size: var(--portal-text-section);
  letter-spacing: -0.01em;
}
.wiz-stepper__caption {
  text-align: center;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
  margin: 4px 0 28px;
  max-width: 380px;
}

/* Privacy badge & skip link */
.wiz-privacy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5c5e58);
  margin-bottom: 20px;
  padding: 8px 12px;
  background: var(--vs-surface-alt, #f4f0e3);
  border-radius: 999px;
}
.wiz-privacy svg {
  width: 12px;
  height: 12px;
  color: var(--vs-olive);
  flex-shrink: 0;
}
.wiz-skip {
  background: transparent;
  border: none;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}
.wiz-skip:hover { color: var(--vs-ink); }

/* Multi-select counter */
.wiz-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
  margin-bottom: 16px;
}
.wiz-counter strong {
  color: var(--vs-olive);
  font-weight: 600;
}

/* Sub-question label inside a step */
.wiz-sub {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--vs-line, #e4e0d6);
}
.wiz-sub__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
  margin: 0 0 12px;
}

/* Branching reveal */
.wiz-reveal {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 320ms ease-out, opacity 200ms ease-out, margin 200ms ease-out;
  margin-top: 0;
}
.wiz-reveal--open {
  max-height: 600px;
  opacity: 1;
  margin-top: 24px;
}

/* -------------------- Dossier (right panel) -------------------- */

.wiz-dossier {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wiz-dossier__watermark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 240, 227, 0.4);
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(244, 240, 227, 0.1);
  margin-bottom: 20px;
}
.wiz-dossier__watermark::before {
  content: "";
  width: 14px;
  height: 1px;
  background: rgba(244, 240, 227, 0.3);
}
.wiz-dossier__watermark::after {
  content: "";
  width: 14px;
  height: 1px;
  background: rgba(244, 240, 227, 0.3);
}

.wiz-dossier__concierge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(244, 240, 227, 0.04);
  border: 1px solid rgba(244, 240, 227, 0.08);
  border-radius: 12px;
  margin-bottom: 20px;
}
.wiz-dossier__concierge-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #d8b864;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  position: relative;
}
.wiz-dossier__concierge-avatar::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8fb259;
  border: 2px solid #1f2719;
}
.wiz-dossier__concierge-meta {
  font-family: var(--vs-font-body);
  line-height: 1.3;
}
.wiz-dossier__concierge-name {
  font-size: var(--portal-text-caption);
  font-weight: 600;
  color: #f4f0e3;
}
.wiz-dossier__concierge-status {
  font-size: var(--portal-text-caption);
  color: rgba(244, 240, 227, 0.55);
  margin-top: 2px;
}

.wiz-dossier__body {
  flex: 1;
}
.wiz-dossier__section {
  margin-bottom: 24px;
}
.wiz-dossier__section-label {
  display: block;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 240, 227, 0.45);
  margin-bottom: 8px;
}
.wiz-dossier__section-value {
  font-family: var(--vs-font-display, "Stratum No2", serif);
  font-weight: 500;
  font-size: var(--portal-text-card-title);
  color: #f4f0e3;
  line-height: 1.3;
}
.wiz-dossier__section-value--placeholder {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: rgba(244, 240, 227, 0.35);
  font-style: italic;
}

/* Sections are hidden until they have real content */
.wiz-dossier__section[hidden],
.wiz-dossier__tally[hidden],
.wiz-dossier__tip[hidden] { display: none; }

/* Service wizard — thank-you note + branch crest in dossier */
.wiz-dossier__thanks {
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(216, 184, 100, 0.14) 0%, rgba(216, 184, 100, 0.04) 100%);
  border: 1px solid rgba(216, 184, 100, 0.22);
  border-radius: 12px;
  margin-bottom: 20px;
  display: none;
}
.wiz-dossier__thanks--shown { display: block; }
.wiz-dossier__thanks-label {
  display: block;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d8b864;
  margin-bottom: 6px;
}
.wiz-dossier__thanks-line {
  font-family: var(--vs-font-display, "Stratum No2", serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--portal-text-body);
  line-height: 1.35;
  color: #f4f0e3;
}
.wiz-dossier__crest {
  width: 64px;
  height: 64px;
  margin: 4px 0 12px;
  color: #d8b864;
  display: none;
}
.wiz-dossier__crest--shown { display: block; }
.wiz-dossier__crest svg { width: 100%; height: 100%; }

.wiz-dossier__motto {
  font-family: var(--vs-font-display, "Stratum No2", serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--portal-text-section);
  letter-spacing: -0.005em;
  color: #d8b864;
  line-height: 1.3;
  margin: 4px 0 6px;
}
.wiz-dossier__motto-branch {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 240, 227, 0.55);
}

.wiz-dossier__tally {
  padding: 20px;
  background: rgba(216, 184, 100, 0.08);
  border: 1px solid rgba(216, 184, 100, 0.18);
  border-radius: 14px;
  margin-bottom: 20px;
}
.wiz-dossier__tally-label {
  display: block;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(216, 184, 100, 0.7);
  margin-bottom: 6px;
}
.wiz-dossier__tally-value {
  font-family: var(--vs-font-display, "Stratum No2", serif);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  color: #d8b864;
  line-height: 1;
  font-feature-settings: "tnum" 1;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wiz-dossier__tally-foot {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: rgba(244, 240, 227, 0.5);
  margin-top: 6px;
}

.wiz-dossier__tip {
  padding: 16px;
  background: rgba(244, 240, 227, 0.04);
  border-left: 2px solid #d8b864;
  border-radius: 0 10px 10px 0;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: rgba(244, 240, 227, 0.78);
  line-height: 1.5;
}
.wiz-dossier__tip-label {
  display: block;
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d8b864;
  margin-bottom: 6px;
}

/* Partners strip */
.wiz-dossier__partners {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.wiz-dossier__partner {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(244, 240, 227, 0.05);
  color: rgba(244, 240, 227, 0.3);
  border: 1px solid rgba(244, 240, 227, 0.06);
  transition: background-color 400ms var(--portal-ease-out), border-color 400ms var(--portal-ease-out), color 400ms var(--portal-ease-out), transform 400ms var(--portal-ease-out), box-shadow 400ms var(--portal-ease-out);
}
.wiz-dossier__partner--lit {
  background: rgba(216, 184, 100, 0.12);
  color: #d8b864;
  border-color: rgba(216, 184, 100, 0.3);
}

/* Family viz */
.wiz-dossier__family {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  min-height: 64px;
  margin-top: 8px;
}
.wiz-dossier__silhouette {
  width: 22px;
  height: 44px;
  background: rgba(244, 240, 227, 0.5);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 44' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='9' r='6'/%3E%3Cpath d='M2 44 C2 30 5 22 11 22 C17 22 20 30 20 44 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 44' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='9' r='6'/%3E%3Cpath d='M2 44 C2 30 5 22 11 22 C17 22 20 30 20 44 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: silhouette-in 400ms ease-out backwards;
}
.wiz-dossier__silhouette--child {
  width: 16px;
  height: 30px;
  background: rgba(216, 184, 100, 0.7);
}
@keyframes silhouette-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Coverage meter */
.wiz-dossier__meter {
  margin-top: 8px;
}
.wiz-dossier__meter-bar {
  height: 6px;
  background: rgba(244, 240, 227, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.wiz-dossier__meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #d8b864 0%, #a8c87a 100%);
  border-radius: 999px;
  width: 0;
  transition: width 600ms ease-out;
}
.wiz-dossier__meter-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: rgba(244, 240, 227, 0.55);
  margin-top: 8px;
}

/* Membership plaque (completion) */
.wiz-plaque-wrap {
  padding: 48px 32px;
  text-align: center;
}
.wiz-plaque {
  max-width: 480px;
  margin: 0 auto;
  padding: 36px 32px 32px;
  background: linear-gradient(180deg, #1f2719 0%, #0f1310 100%);
  border-radius: 18px;
  position: relative;
  text-align: left;
  color: #f4f0e3;
  box-shadow: 0 18px 48px -16px rgba(31, 39, 25, 0.45);
  animation: plaque-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wiz-plaque::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1.5px;
  background: linear-gradient(135deg, #d8b864 0%, #8a7340 35%, #d8b864 50%, #8a7340 65%, #d8b864 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@keyframes plaque-reveal {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.wiz-plaque__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #d8b864;
  margin-bottom: 24px;
}
.wiz-plaque__crest {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  color: #d8b864;
}
.wiz-plaque__crest svg { width: 100%; height: 100%; }
.wiz-plaque__name {
  font-family: var(--vs-font-display, "Stratum No2", serif);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  line-height: 1.1;
  margin-bottom: 4px;
}
.wiz-plaque__rank {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: rgba(244, 240, 227, 0.7);
  margin-bottom: 28px;
}
.wiz-plaque__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-bottom: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(244, 240, 227, 0.12);
}
.wiz-plaque__grid-item-label {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 240, 227, 0.45);
  margin-bottom: 4px;
}
.wiz-plaque__grid-item-value {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: #f4f0e3;
  font-weight: 500;
}
.wiz-plaque__concierge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(244, 240, 227, 0.12);
}
.wiz-plaque__concierge-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #d8b864;
}
.wiz-plaque__concierge-text {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  line-height: 1.4;
  color: rgba(244, 240, 227, 0.78);
}
.wiz-plaque__concierge-text strong { color: #f4f0e3; font-weight: 600; }

.wiz-plaque-actions {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* Rank picker structured grid */
.wiz-rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.wiz-rank-chip {
  position: relative;
  cursor: pointer;
}
.wiz-rank-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.wiz-rank-chip__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 10px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  color: var(--vs-ink);
  background: var(--vs-surface);
  transition: background-color 180ms var(--portal-ease-out), border-color 180ms var(--portal-ease-out), color 180ms var(--portal-ease-out), transform 180ms var(--portal-ease-out), box-shadow 180ms var(--portal-ease-out);
}
.wiz-rank-chip:hover .wiz-rank-chip__label { border-color: var(--vs-olive); }
.wiz-rank-chip input:checked + .wiz-rank-chip__label {
  background: var(--vs-olive);
  color: #fff;
  border-color: var(--vs-olive);
}
.wiz-rank-title {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted);
  margin-bottom: 24px;
  min-height: 20px;
}
.wiz-rank-title strong { color: var(--vs-ink); font-weight: 600; }

/* Year inputs side by side */
.wiz-year-range {
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: 320px;
  margin-bottom: 24px;
}
.wiz-year-range input {
  font-family: var(--vs-font-display, "Stratum No2", serif);
  font-weight: 500;
  font-size: var(--portal-text-section);
  text-align: center;
  padding: 14px 12px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  background: var(--vs-surface);
  color: var(--vs-ink);
  width: 120px;
  font-feature-settings: "tnum" 1;
  transition: border-color 200ms ease-out;
}
.wiz-year-range input:focus {
  outline: none;
  border-color: var(--vs-olive);
}
.wiz-year-range__dash {
  font-family: var(--vs-font-display, "Stratum No2", serif);
  font-size: var(--portal-text-section);
  color: var(--vs-ink-muted);
}

/* Stress slider */
.wiz-stress {
  margin-bottom: 28px;
}
.wiz-stress__scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.wiz-stress__step {
  position: relative;
  cursor: pointer;
}
.wiz-stress__step input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.wiz-stress__step-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  background: var(--vs-surface);
  transition: background-color 180ms var(--portal-ease-out), border-color 180ms var(--portal-ease-out), color 180ms var(--portal-ease-out), transform 180ms var(--portal-ease-out), box-shadow 180ms var(--portal-ease-out);
}
.wiz-stress__step-num {
  font-family: var(--vs-font-display, "Stratum No2", serif);
  font-weight: 500;
  font-size: var(--portal-text-section);
  color: var(--vs-ink);
  line-height: 1;
}
.wiz-stress__step-text {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 500;
  color: var(--vs-ink-muted);
  text-align: center;
  line-height: 1.2;
}
.wiz-stress__step:hover .wiz-stress__step-label { border-color: var(--vs-olive); }
.wiz-stress__step input:checked + .wiz-stress__step-label {
  background: var(--vs-olive);
  border-color: var(--vs-olive);
}
.wiz-stress__step input:checked + .wiz-stress__step-label .wiz-stress__step-num,
.wiz-stress__step input:checked + .wiz-stress__step-label .wiz-stress__step-text {
  color: #fff;
}

/* Compact wiz boxes for inline use */
.wiz-boxes--compact .wiz-box {
  min-height: 88px;
  padding: 16px 12px;
}
.wiz-boxes--compact .wiz-box__icon { width: 28px; height: 28px; }
.wiz-boxes--compact .wiz-box__label { font-size: var(--portal-text-caption); }

/* -------------------- Benefits 2x2 -------------------- */

.portal-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.portal-benefit {
  background: #e6e6e0;
  border: 2px solid #ffffff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.portal-benefit__visual {
  position: relative;
  height: 320px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #2a2520;
  isolation: isolate;
}

.portal-benefit__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.portal-benefit__logo {
  position: relative;
  z-index: 1;
  max-width: 60%;
  max-height: 50%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}

.portal-benefit__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 32px 32px;
  flex: 1;
}

.portal-benefit__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
}

.portal-benefit__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.portal-benefit__list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.5;
  color: var(--vs-ink);
}

.portal-benefit__list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vs-ink);
}

/* -------------------- Footer -------------------- */

.portal-footer {
  background: linear-gradient(180deg, rgba(87, 96, 56, 0.08) 0%, rgba(87, 96, 56, 0) 100%);
  padding: 24px 48px 20px;
}

.portal-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.portal-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--vs-ink);
}

.portal-footer__brand-mark {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 32px;
  color: var(--vs-ink);
}

.portal-footer__brand-mark svg { width: 100%; height: 100%; }

.portal-footer__brand-word {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-card-title); /* 20 — bumped from body */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vs-ink);
}

.portal-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

.portal-footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--vs-ink);
  transition: background 200ms ease-out;
}

.portal-footer__social a:hover { background: var(--vs-olive); }

.portal-footer__social img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.portal-footer__divider {
  display: block;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.portal-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.portal-footer__address {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption); /* portal-text-caption */
  line-height: 1.5;
  color: var(--vs-ink);
  margin: 0;
}

.portal-footer__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-decoration: underline;
  color: var(--vs-ink);
}

.portal-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.portal-footer__copy {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption); /* portal-text-caption */
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 0;
}

.portal-footer__copy-strong { font-weight: 700; }
.portal-footer__copy-faint { font-weight: 400; }

.portal-footer__legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.portal-footer__legal-links a {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption); /* portal-text-caption */
  color: var(--vs-ink);
  text-decoration: none;
}

.portal-footer__legal-links a:hover { text-decoration: underline; }

.portal-footer__legal-links li[aria-hidden] {
  color: rgba(0, 0, 0, 0.3);
  font-size: var(--portal-text-caption); /* portal-text-caption */
}

/* Demo-only reset control — visually subdued vs. the real legal links */
.portal-footer__reset {
  color: rgba(0, 0, 0, 0.55) !important;
  text-decoration: underline dotted !important;
  text-underline-offset: 3px;
  cursor: pointer;
}

.portal-footer__reset:hover {
  color: var(--vs-olive) !important;
  text-decoration: underline solid !important;
}

/* =========================================================================
   Benefit gating (project_specs.md §11) — locked CTA and banner components.
   Inserted by mvp/assets/js/portal-benefit-gate.js based on vsState.
   ========================================================================= */

/* Gate wrapper visibility — hide original content while locked, hide all lock
   cards while unlocked. The JS toggles [hidden] on each child explicitly, but
   these rules backstop the structural intent. */
[data-benefit-gate] > [data-gate-lock-card][hidden],
[data-benefit-gate] > [data-gate-original][hidden] {
  display: none !important;
}

/* ----- Lock card (used inside [data-benefit-gate], e.g. credit-activate) ----- */

.benefit-lock-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  padding: 32px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f1e6 100%);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 20px;
  box-shadow: 0 18px 44px -26px rgba(63, 72, 40, 0.38);
  max-width: 560px;
  width: 100%;
}

.benefit-lock-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--vs-olive);
  color: #fff;
  border: none;
  box-shadow: 0 8px 18px -8px rgba(90, 107, 63, 0.6);
  flex-shrink: 0;
}

.benefit-lock-card__eyebrow {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vs-olive);
}

.benefit-lock-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.benefit-lock-card__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--vs-ink);
  margin: 0;
}

.benefit-lock-card__copy {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.benefit-lock-card__steps {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.benefit-lock-card__step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted, #5C5E58);
}

.benefit-lock-card__step-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  background: #fff;
  font-weight: 700;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

.benefit-lock-card__step.is-done { color: var(--vs-ink); }
.benefit-lock-card__step.is-done .benefit-lock-card__step-dot {
  background: var(--vs-olive);
  border-color: var(--vs-olive);
  color: #fff;
}

.benefit-lock-card__step.is-active { color: var(--vs-ink); font-weight: 600; }
.benefit-lock-card__step.is-active .benefit-lock-card__step-dot {
  border-color: var(--vs-olive);
  color: var(--vs-olive);
  box-shadow: 0 0 0 3px rgba(90, 107, 63, 0.14);
}

.benefit-lock-card__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 14px 22px;
  min-height: 48px;
  background: var(--vs-olive);
  color: #fff;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  letter-spacing: 0.01em;
  border-radius: 999px;
  text-decoration: none;
  transition: background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.benefit-lock-card__cta:hover {
  background: var(--vs-olive-deep, #3F4828);
}

.benefit-lock-card__cta:active {
  transform: scale(0.98);
}

.benefit-lock-card__cta:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 3px;
}

.benefit-lock-card__cta-arrow {
  display: inline-flex;
  transition: transform 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.benefit-lock-card__cta:hover .benefit-lock-card__cta-arrow {
  transform: translateX(3px);
}

@media (max-width: 560px) {
  .benefit-lock-card {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 16px;
  }
  .benefit-lock-card__icon {
    margin-bottom: 4px;
  }
  .benefit-lock-card__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ----- Lock banner (top of free-benefit pages) ----- */

.benefit-lock-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  background: #f4f1e6;
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  margin: 0 0 32px;
}

.benefit-lock-banner[hidden] { display: none; }

.benefit-lock-banner__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--vs-olive);
  color: var(--vs-olive);
  flex-shrink: 0;
}

.benefit-lock-banner__copy {
  flex: 1;
  min-width: 0;
}

.benefit-lock-banner__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.3;
  color: var(--vs-ink);
  margin: 0 0 2px;
}

.benefit-lock-banner__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.benefit-lock-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  min-height: 48px;
  background: var(--portal-olive, var(--vs-olive));
  color: #fff;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  border-radius: var(--portal-radius-button, 8px);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--portal-dur-base, 220ms) var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform var(--portal-dur-fast, 160ms) var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              box-shadow var(--portal-dur-base, 220ms) var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.benefit-lock-banner__cta:hover {
  background: var(--portal-olive-hover, #3e4d26);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px var(--portal-olive-shadow, rgba(74, 91, 45, 0.4));
}

.benefit-lock-banner__cta:active {
  transform: scale(0.98);
  box-shadow: none;
}

@media (max-width: 640px) {
  .benefit-lock-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
  }
  .benefit-lock-banner__cta {
    width: 100%;
    justify-content: center;
  }
}

/* --page-top variant — the pre-credit notice portal-benefit-gate.js injects
   between the breadcrumb action bar and the hero on benefit pages. */
.benefit-lock-banner--page-top {
  margin: 24px 0 0;
}

/* --nudge — one soft ring pulse when a member clicks an inactive benefit
   CTA: points the eye at the notice, then gets out of the way. */
.benefit-lock-banner--nudge {
  animation: benefit-lock-banner-nudge 600ms cubic-bezier(0.23, 1, 0.32, 1) 1;
}
@keyframes benefit-lock-banner-nudge {
  0%   { box-shadow: 0 0 0 0 rgba(90, 107, 63, 0.4); }
  100% { box-shadow: 0 0 0 12px rgba(90, 107, 63, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .benefit-lock-banner--nudge {
    animation: none;
  }
}

/* ----- Lock badge (used on benefit-catalog cards) ----- */

.benefit-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.03em;
  color: var(--vs-ink-muted, #5C5E58);
  text-transform: uppercase;
}

.benefit-lock-badge[hidden] { display: none; }

.benefit-lock-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ----- Lock overlay (covers a wizard/form box while locked) ----- */

[data-lock-overlay-target] {
  position: relative;
}

.benefit-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(244, 241, 230, 0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: inherit;
  animation: benefitOverlayIn 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
}

.benefit-lock-overlay[hidden] { display: none; }

/* The overlay now hosts the shared "Complete your profile" card box. */
.benefit-lock-overlay { overflow-y: auto; }

/* When locked, the gate card REPLACES the host content instead of
   floating above it — an absolutely-positioned overlay taller than its
   host clipped the CTA (the afba rail bug, Sprint 9j). */
.has-lock-overlay.is-locked > :not([data-lock-overlay]) { display: none; }
/* The host's own card chrome must vanish too — otherwise the gate card
   renders inside a ghost frame (user comment, Sprint 9k). */
.has-lock-overlay.is-locked {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.has-lock-overlay.is-locked > .benefit-lock-overlay {
  position: static;
  inset: auto;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  overflow: visible;
}
.benefit-lock-card--overlay {
  margin: auto;
  box-shadow: 0 24px 60px -28px rgba(63, 72, 40, 0.5);
}

@keyframes benefitOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .benefit-lock-overlay { animation: none; }
}

.benefit-lock-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px;
  max-width: 420px;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 8px 24px rgba(17, 17, 17, 0.07);
}

.benefit-lock-overlay__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #f4f1e6;
  border: 1.5px solid var(--vs-olive);
  color: var(--vs-olive);
}

.benefit-lock-overlay__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-card-title);
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--vs-ink);
  margin: 0;
}

.benefit-lock-overlay__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.benefit-lock-overlay__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 13px 22px;
  min-height: 48px;
  background: var(--vs-olive);
  color: #fff;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.benefit-lock-overlay__cta:hover {
  background: var(--vs-olive-deep, #3F4828);
}

.benefit-lock-overlay__cta:active {
  transform: scale(0.98);
}

.benefit-lock-overlay__cta:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 3px;
}

/* ----- Rich overlay variant (used on the cashout page) ----- */

.benefit-lock-overlay--rich {
  padding: 32px;
  background: rgba(244, 241, 230, 0.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.benefit-lock-overlay__inner--rich {
  max-width: 520px;
  padding: 32px 32px 28px;
  gap: 10px;
  text-align: left;
  align-items: stretch;
}

.benefit-lock-overlay__inner--rich .benefit-lock-overlay__icon {
  align-self: center;
  margin-bottom: 8px;
}

.benefit-lock-overlay__inner--rich .benefit-lock-overlay__title {
  text-align: center;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.benefit-lock-overlay__inner--rich .benefit-lock-overlay__body {
  text-align: center;
  margin-bottom: 6px;
}

.benefit-lock-overlay__preview-label {
  margin: 14px 0 6px;
  padding: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
}

.benefit-lock-overlay__preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.benefit-lock-overlay__preview li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
}

.benefit-lock-overlay__preview li svg {
  color: var(--vs-olive);
}

.benefit-lock-overlay__steps {
  list-style: none;
  margin: 12px 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.benefit-lock-overlay__step {
  display: grid;
  grid-template-columns: 24px 32px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}

.benefit-lock-overlay__step-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--vs-olive);
  color: #fff;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
}

.benefit-lock-overlay__step-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f4f1e6;
  color: var(--vs-olive);
}

.benefit-lock-overlay__step-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.benefit-lock-overlay__step-title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.25;
  color: var(--vs-ink);
}

.benefit-lock-overlay__step-body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.3;
  color: var(--vs-ink-muted, #5C5E58);
}

.benefit-lock-overlay__inner--rich .benefit-lock-overlay__cta {
  align-self: stretch;
  justify-content: center;
  margin-top: 6px;
}

@media (max-width: 560px) {
  .benefit-lock-overlay--rich { padding: 16px; }
  .benefit-lock-overlay__inner--rich { padding: 24px 20px 22px; }
}

/* Underlying content can't be hovered while overlay is up — pointer-events on
   the overlay capture all clicks, but in case of edge cases we also dim
   interaction visuals on the locked target. */
[data-lock-overlay-target].is-locked > :not([data-lock-overlay]) {
  pointer-events: none;
  user-select: none;
}

@media (max-width: 560px) {
  .benefit-lock-overlay { padding: 16px; }
  .benefit-lock-overlay__inner { padding: 24px 20px; }
}

/* ----- All-set confirmation banner (portal "everything unlocked" state) ----- */

.portal-allset-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  background: var(--vs-olive);
  color: #fff;
  border-radius: 16px;
  margin: 0 0 32px;
}

.portal-allset-banner[hidden] { display: none; }

.portal-allset-banner__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.portal-allset-banner__copy {
  flex: 1;
  min-width: 0;
}

.portal-allset-banner__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.3;
  color: #fff;
  margin: 0 0 2px;
}

.portal-allset-banner__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
}

.portal-allset-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  min-height: 48px;
  background: #fff;
  color: var(--vs-olive);
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.portal-allset-banner__cta:hover {
  background: #e8eed7;
}

.portal-allset-banner__cta:active {
  transform: scale(0.98);
}

@media (max-width: 640px) {
  .portal-allset-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
  }
  .portal-allset-banner__cta {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================================
   NewDay multi-step flow (project_specs.md §11.4). Driven by
   mvp/assets/js/portal-newday-flow.js.
   ========================================================================= */

.nd-flow {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 4px 12px rgba(17, 17, 17, 0.025);
  margin: 0 0 32px;
  /* Keep the box at pre-approval-card height across all states (locked,
     preQualReady, loader, approved) so the layout doesn't shrink/grow as
     the user moves through the flow. Sized for the tallest state
     (preQualShown with all headlines + summary + savings + letter +
     fine print + final approval CTA). */
  min-height: 720px;
}

/* When locked, the gate card replaces the flow content (Sprint 9j) —
   the reserved flow height would just render as a huge empty box. */
.nd-flow.is-locked { min-height: 0; }

/* On a narrow viewport the pre-approval card is taller; bump the min so the
   locked state still matches it. */
@media (max-width: 640px) {
  .nd-flow { min-height: 820px; }
  .nd-flow.is-locked { min-height: 0; }
}

.nd-flow[hidden] { display: none; }

.nd-stage-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: ndStageIn 320ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
}

.nd-stage-block[hidden] { display: none; }

@keyframes ndStageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nd-stage-block { animation: none; }
}

.nd-stage-block__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--vs-ink);
  margin: 0;
}

.nd-stage-block__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-stage-block__disclaimer {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-stage-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ----- Primary, secondary, ghost buttons in the flow ----- */

.nd-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 0;
  background: transparent;
  color: var(--vs-ink);
  cursor: pointer;
  align-self: flex-start;
  transition: background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              color 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              opacity 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.nd-cta:active:not(:disabled) {
  transform: scale(0.97);
}

.nd-cta:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 3px;
}

.nd-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.nd-cta--primary {
  background: var(--vs-olive);
  color: #fff;
}
.nd-cta--primary:hover:not(:disabled) {
  background: var(--vs-olive-deep, #3F4828);
}

.nd-cta--secondary {
  background: #fff;
  color: var(--vs-ink);
  border: 1.5px solid var(--vs-line-strong, #c8c2b1);
}
.nd-cta--secondary:hover:not(:disabled) {
  border-color: var(--vs-olive);
  color: var(--vs-olive);
}

.nd-cta--ghost {
  background: transparent;
  color: var(--vs-ink-muted, #5C5E58);
}
.nd-cta--ghost:hover:not(:disabled) {
  color: var(--vs-ink);
  background: rgba(0, 0, 0, 0.04);
}

.nd-cta--lg {
  font-size: var(--portal-text-body);
  padding: 16px 26px;
  min-height: 52px;
}

.nd-cta__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* ----- preQualReady entry state (cashout): hero copy + big preview tiles ----- */

.nd-stage-block--prequal {
  gap: 18px;
}

.nd-stage-block__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0;
}

.nd-stage-block__title--xl {
  font-size: var(--portal-text-hero);
  line-height: 1.1;
  letter-spacing: -0.8px;
  font-weight: 700;
  color: var(--vs-ink);
}

.nd-stage-block__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.5;
  color: var(--vs-ink);
  margin: 0;
}

.nd-stage-block__lead strong {
  font-weight: 700;
  color: var(--vs-olive);
}

/* Group title above the 3 preview tiles */
.nd-preview-tiles__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.25;
  letter-spacing: -0.1px;
  color: var(--vs-ink);
  margin: 4px 0 -4px;
}

/* Big preview tiles (3-up) */
.nd-preview-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 4px 0 4px;
}

.nd-preview-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px 18px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  min-height: 140px;
  justify-content: space-between;
  position: relative;
}

.nd-preview-tile--accent {
  background: #f4f1e6;
  border-color: rgba(87, 96, 56, 0.22);
}

.nd-preview-tile__label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-preview-tile__range {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-section);
  line-height: 1.05;
  letter-spacing: -0.4px;
  color: var(--vs-ink);
  margin: 4px 0 0;
  font-feature-settings: "tnum" 1;
}

.nd-preview-tile--accent .nd-preview-tile__range {
  color: var(--vs-olive);
}

.nd-preview-tile__range--small {
  font-size: var(--portal-text-body);
  letter-spacing: -0.2px;
}

.nd-preview-tile__note {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.35;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

/* Disclaimer anchored under the 3 preview tiles, supporting the ranges. */
.nd-preview-tiles__disclaimer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: -4px 0 4px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid var(--vs-line-strong, #c8c2b1);
  border-radius: 4px 10px 10px 4px;
}

.nd-preview-tiles__disclaimer-label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
}

.nd-preview-tiles__disclaimer-body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
}

/* ----- "Consenting" mode of preQualReady -----
   When the consent panel is open, the rest of the marketing content fades
   out so the consent is the focal point. The 3 preview tiles stay visible
   as a structural reminder of "this is what you're about to see", but with
   placeholder bullets in place of the ranges. */

.nd-stage-block--prequal.is-consenting > .nd-stage-block__eyebrow,
.nd-stage-block--prequal.is-consenting > .nd-stage-block__title--xl,
.nd-stage-block--prequal.is-consenting > .nd-stage-block__lead,
.nd-stage-block--prequal.is-consenting > .nd-preview-tiles__disclaimer,
.nd-stage-block--prequal.is-consenting > .nd-reassurance,
.nd-stage-block--prequal.is-consenting > [data-nd-action="open-prequal-consent"] {
  display: none;
}

/* Empty / placeholder treatment for the 3 tiles while consenting */
.nd-stage-block--prequal.is-consenting .nd-preview-tile {
  background: rgba(0, 0, 0, 0.02);
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.14);
}

.nd-stage-block--prequal.is-consenting .nd-preview-tile--accent {
  background: rgba(87, 96, 56, 0.05);
  border-color: rgba(87, 96, 56, 0.18);
}

.nd-stage-block--prequal.is-consenting .nd-preview-tile__range {
  color: rgba(0, 0, 0, 0.24);
  letter-spacing: 0.06em;
  font-size: var(--portal-text-card-title);
}

.nd-stage-block--prequal.is-consenting .nd-preview-tile--accent .nd-preview-tile__range {
  color: rgba(87, 96, 56, 0.42);
}

.nd-stage-block--prequal.is-consenting .nd-preview-tile__note {
  visibility: hidden;
}

/* Oversized CTA */
.nd-cta--xl {
  font-size: var(--portal-text-body);
  padding: 20px 32px;
  min-height: 60px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.nd-cta--block {
  display: flex;
  width: 100%;
  align-self: stretch;
  justify-content: center;
}

/* Reassurance row */
.nd-reassurance {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: center;
  color: var(--vs-ink-muted, #5C5E58);
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
}

.nd-reassurance li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nd-reassurance .nd-prereveal__check {
  width: 16px;
  height: 16px;
  color: var(--vs-olive);
}

/* Status-check icon (also used in reassurance pills) */
.nd-prereveal__check {
  flex-shrink: 0;
  color: var(--vs-olive);
}

@media (max-width: 720px) {
  .nd-stage-block__title--xl { font-size: var(--portal-text-section); }
  .nd-preview-tiles { grid-template-columns: 1fr; }
  .nd-preview-tile { min-height: 0; }
  .nd-preview-tile__range { font-size: var(--portal-text-section); }
}

/* ----- Offer card ----- */

.nd-offer-card {
  background: #f4f1e6;
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nd-offer-card__pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 4px 12px;
  background: rgba(87, 96, 56, 0.12);
  color: var(--vs-olive);
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.nd-offer-card__pill--approved {
  background: var(--vs-olive);
  color: #fff;
}

.nd-offer-card__kind {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-offer-card__amount {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-display);
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--vs-ink);
  margin: 4px 0 12px;
}

.nd-offer-card__terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.nd-offer-card__terms > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nd-offer-card__terms dt {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-offer-card__terms dd {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
}

@media (max-width: 640px) {
  .nd-offer-card__amount { font-size: var(--portal-text-hero); }
  .nd-offer-card__terms { grid-template-columns: 1fr; gap: 12px; }
  .nd-offer-card__terms > div { flex-direction: row; justify-content: space-between; }
}

/* =========================================================================
   Cashout pre-approval LETTER (formal-document treatment used by nd100 in
   preQualShown + approved). Header attribution, sections separated by
   hairlines, line-item tables. Designed to read as a real pre-approval
   document rather than a marketing summary.
   ========================================================================= */

.nd-offer-card--letter {
  /* Letter card breathing room — printed-document feel.
     The CEO-demo polish ask: tighten visual hierarchy, make the letter
     feel calm rather than dense. */
  padding: 36px 36px 28px;
  background: #fff;
  border: 1px solid var(--vs-line, #e4e0d6);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 28px rgba(17, 17, 17, 0.05);
  gap: 20px;
  border-radius: 14px;
}

.nd-offer-card--letter .nd-cashout-headlines {
  margin-top: 8px;
}

/* Letterhead */
.nd-letter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
}

.nd-letter-head__brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.nd-letter-head__logo {
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin-bottom: 4px;
}

.nd-letter-head__lender {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
  margin: 0;
}

.nd-letter-head__address {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-letter-head__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}

.nd-letter-head__refs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
}

.nd-letter-head__refs > div {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.nd-letter-head__refs dt {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-letter-head__refs dd {
  font-weight: 600;
  color: var(--vs-ink);
  margin: 0;
}

/* Subject + addressee block (sits right under the letterhead).
   No border-bottom here — the next .nd-letter-section provides the divider,
   so we don't double up. */
.nd-letter-subject {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0;
}

.nd-letter-subject__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-letter-subject__title {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--vs-ink);
  margin: 0 0 8px;
}

.nd-letter-addressee {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-family: var(--vs-font-body);
}

.nd-letter-addressee > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  font-size: var(--portal-text-caption);
}

.nd-letter-addressee dt {
  letter-spacing: 0.02em;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-letter-addressee dd {
  font-weight: 600;
  color: var(--vs-ink);
  margin: 0;
}

@media (max-width: 640px) {
  .nd-letter-addressee > div {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Section + section header */
.nd-letter-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--vs-line, #e4e0d6);
}

.nd-letter-section__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0;
}

/* Loan summary */
.nd-letter-loan {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) 1fr;
  align-items: center;
  gap: 18px;
}

.nd-letter-loan__amount {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nd-letter-loan__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
}

.nd-letter-loan__value {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-hero);
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--vs-ink);
  font-feature-settings: "tnum" 1;
}

.nd-letter-loan__terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nd-letter-loan__terms li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

.nd-letter-loan__terms li strong {
  font-weight: 600;
  color: var(--vs-ink);
}

/* Use of funds + key dates table */
.nd-letter-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

.nd-letter-table__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.nd-letter-table__row:last-child {
  border-bottom: 0;
}

.nd-letter-table__row dt {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
  margin: 0;
}

.nd-letter-table__row dd {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
  margin: 0;
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}

.nd-letter-table__hint {
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin-left: 4px;
}

.nd-letter-table__row--total {
  margin-top: 6px;
  padding: 12px 14px;
  background: #f4f1e6;
  border-radius: 8px;
  border-bottom: 0;
}

.nd-letter-table__row--total dt {
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
}

.nd-letter-table__row--total dd {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-section);
  letter-spacing: -0.4px;
  color: var(--vs-olive);
}

/* Highlight the "Cash to your bank" row in Use of Funds — the headline
   benefit. Light olive tint matching the "You save" savings bar so it
   reads as a benefit chip and does NOT compete with the dark-olive CTA. */
.nd-letter-table__row--cash {
  margin: 4px 0;
  padding: 14px 16px;
  background: #e8eed7;
  border-radius: 10px;
  border-bottom: 0;
}

.nd-letter-table__row--cash dt {
  font-weight: 700;
  color: var(--vs-olive);
}

.nd-letter-table__row--cash dd {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-section);
  letter-spacing: -0.3px;
  color: var(--vs-olive);
}

/* Property */
.nd-letter-property {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nd-letter-property__address {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.3;
  color: var(--vs-ink);
  margin: 0;
}

.nd-letter-property__value {
  display: flex;
  justify-content: space-between;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-letter-property__value strong {
  font-weight: 600;
  color: var(--vs-ink);
}

/* Monthly compare */
.nd-letter-compare {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 16px;
  align-items: stretch;
}

.nd-letter-compare__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nd-letter-compare__divider {
  background: var(--vs-line, #e4e0d6);
  width: 1px;
  align-self: stretch;
}

.nd-letter-compare__label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-letter-compare__value {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-section);
  line-height: 1.05;
  letter-spacing: -0.3px;
  color: var(--vs-ink);
  margin: 2px 0 4px;
  font-feature-settings: "tnum" 1;
}

.nd-letter-compare__col--new .nd-letter-compare__value {
  color: var(--vs-olive);
}

.nd-letter-compare__breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nd-letter-compare__breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

.nd-letter-compare__breakdown li strong {
  font-weight: 600;
  color: var(--vs-ink);
}

.nd-letter-savings {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  padding: 12px 16px;
  background: #e8eed7;
  border-radius: 10px;
}

.nd-letter-savings span {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vs-olive);
}

.nd-letter-savings strong {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-section);
  letter-spacing: -0.3px;
  color: var(--vs-olive);
  font-feature-settings: "tnum" 1;
}

.nd-letter-loan__terms-hint {
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

/* Multi-line term row (used by Closing costs — value on top, hint below) */
.nd-letter-loan__terms-row--multi {
  align-items: flex-start !important;
}

.nd-letter-loan__terms-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.nd-letter-loan__terms-value strong {
  font-weight: 600;
  color: var(--vs-ink);
}

/* Single-value block — used by the home-purchase letter's "Estimated
   monthly payment" section. The cashout letter uses .nd-letter-compare
   (today vs after) here; purchase has only one number to show. */
.nd-letter-single {
  text-align: center;
  padding: 20px 24px;
  background: var(--vs-surface-alt, #f4f0e3);
  border-radius: 12px;
}

.nd-letter-single__value {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-hero);
  line-height: 1;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
  font-feature-settings: "tnum" 1;
}

.nd-letter-single__note {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 10px 0 0;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* Estimated funding date section (single big date + asterisk note) */
.nd-letter-section--funding {
  background: #f4f1e6;
  border-radius: 12px;
  padding: 18px 20px;
  border-top: 0;
  margin-top: 4px;
}

.nd-letter-funding__date {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-section);
  line-height: 1.05;
  letter-spacing: -0.3px;
  color: var(--vs-ink);
  margin: 4px 0 6px;
}

.nd-letter-funding__date sup {
  color: var(--vs-olive);
  font-weight: 700;
}

.nd-letter-funding__note {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

/* Officer signature — 2-col layout with CTAs on the LEFT and the cursive
   signature + officer line on the RIGHT. */
.nd-letter-section--signoff {
  gap: 0;
}

.nd-letter-signoff__grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) 1fr;
  gap: 24px;
  align-items: end;
}

.nd-letter-signoff__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.nd-letter-signoff__actions .nd-cta,
.nd-letter-signoff__actions .nd-letter-cta {
  align-self: stretch;
  white-space: nowrap;
  justify-content: center;
}

.nd-letter-signoff__sig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.nd-letter-signoff__close {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
  margin: 0;
}

.nd-letter-signoff__signature {
  font-family: 'Brush Script MT', 'Apple Chancery', cursive;
  font-size: var(--portal-text-hero);
  line-height: 1;
  color: var(--vs-ink);
  margin: 8px 0 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
  display: inline-block;
  min-width: 200px;
}

.nd-letter-signoff__officer {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 4px 0 0;
}

.nd-letter-signoff__officer strong {
  font-weight: 600;
  color: var(--vs-ink);
}

@media (max-width: 640px) {
  .nd-letter-signoff__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .nd-letter-signoff__sig {
    align-items: flex-start;
    text-align: left;
  }
}

/* =========================================================================
   Final-approval consent TAKEOVER (cashout). When the user clicks
   "Get full approval", the surrounding state block gains .is-approving and
   the letter's middle sections + signoff hide; the .nd-letter-approval
   block fills the same card frame. Lender header + underwriter footer stay
   visible to anchor the document feel.
   ========================================================================= */

/* Hidden by default; shown only in approving mode. */
.nd-letter-approval {
  display: none;
  flex-direction: column;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--vs-line, #e4e0d6);
  animation: ndStageIn 280ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
}

.nd-stage-block.is-approving .nd-letter-subject,
.nd-stage-block.is-approving .nd-letter-section:not(.nd-letter-section--signoff),
.nd-stage-block.is-approving .nd-letter-section--signoff {
  display: none;
}

.nd-stage-block.is-approving .nd-letter-approval {
  display: flex;
}

/* Hide the outer fine-print + the "Get full approval"/"Download letter"
   actions on the card edge when approving — the takeover supersedes them. */
.nd-stage-block.is-approving .nd-stage-block__fineprint {
  display: none;
}

/* Approval head: eyebrow, title, lead */
.nd-letter-approval__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nd-letter-approval__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0;
}

.nd-letter-approval__title {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-section);
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--vs-ink);
  margin: 0;
}

.nd-letter-approval__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.55;
  color: var(--vs-ink);
  margin: 4px 0 0;
}

.nd-letter-approval__lead strong {
  font-weight: 700;
  color: var(--vs-ink);
}

/* Numbered consent sections — formal authorization, must read calmly.
   Bumped from caption (14px) to label (16px) since this serves Veterans
   65+ who'll actually read the legal terms. Padding + gap loosened to
   give each clause room to breathe. */
.nd-letter-approval__sections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nd-letter-approval__sections li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.025);
  border-left: 3px solid var(--vs-olive);
  border-radius: 4px 10px 10px 4px;
}

.nd-letter-approval__section-title {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-label);
  letter-spacing: 0;
  color: var(--vs-ink);
  margin: 0;
}

.nd-letter-approval__sections li p {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.6;
  color: var(--vs-ink);
  margin: 0;
}

.nd-letter-approval__sections li p strong {
  font-weight: 600;
}

/* Authorization checkbox */
.nd-letter-approval__check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: #f4f1e6;
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink);
}

.nd-letter-approval__check input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.nd-letter-approval__check-box {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background: #fff;
  border: 1.5px solid var(--vs-olive);
  border-radius: 4px;
  color: transparent;
  transition: background 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              color 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.nd-letter-approval__check input:checked ~ .nd-letter-approval__check-box {
  background: var(--vs-olive);
  color: #fff;
}

.nd-letter-approval__check input:focus-visible ~ .nd-letter-approval__check-box {
  outline: 2px solid var(--vs-olive);
  outline-offset: 2px;
}

.nd-letter-approval__check-text strong {
  font-weight: 700;
}

/* Bottom action row: Cancel + Submit */
.nd-letter-approval__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4px;
}

.nd-letter-approval__actions .nd-cta--primary {
  flex: 0 1 auto;
}

@media (max-width: 640px) {
  .nd-letter-approval__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .nd-letter-approval__actions .nd-cta {
    width: 100%;
    justify-content: center;
  }
}

/* Footer attribution */
.nd-letter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--vs-line, #e4e0d6);
}

.nd-letter-footer__line {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-letter-footer__line strong {
  color: var(--vs-ink);
  font-weight: 600;
}

.nd-letter-footer__logo {
  height: 24px;
  width: auto;
  display: block;
}

@media (max-width: 640px) {
  .nd-letter-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .nd-letter-head__meta {
    align-items: flex-start;
    text-align: left;
  }
  .nd-letter-loan { grid-template-columns: 1fr; gap: 12px; }
  .nd-letter-compare { grid-template-columns: 1fr; }
  .nd-letter-compare__divider { display: none; }
  .nd-letter-compare__col + .nd-letter-compare__col { border-top: 1px solid var(--vs-line); padding-top: 12px; }
  .nd-letter-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .nd-letter-loan__value { font-size: var(--portal-text-hero); }
}

/* Cashout-specific variant — debt-consolidation summary instead of simple
   loan-terms grid. Used by nd100 in preQualShown and approved states. */

/* Section title above the ND flow box on the cashout page */
.nd-section-head {
  margin: 0 0 16px;
}

.nd-section-head__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--vs-ink);
  margin: 0;
}

/* Headline numbers — three-box layout: Cash to bank (big, full-height) +
   You save + Funding date (stacked on the right). Cash claims the visual
   weight; savings is the secondary number; funding date is tertiary. */
.nd-cashout-headlines {
  display: grid;
  gap: 12px;
  align-items: stretch;
  margin: 4px 0 4px;
}

.nd-cashout-headlines--3up {
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.nd-cashout-headlines--3up .nd-cashout-headline--cash {
  grid-row: span 2;
  justify-content: center;
}

.nd-cashout-headline {
  padding: 16px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nd-cashout-headline--cash {
  background: var(--vs-olive);
  border-color: var(--vs-olive);
}

.nd-cashout-headline__label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-cashout-headline--cash .nd-cashout-headline__label {
  color: rgba(255, 255, 255, 0.78);
}

.nd-cashout-headline__value {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-hero);
  line-height: 1;
  letter-spacing: -0.8px;
  color: var(--vs-ink);
  margin: 0;
  font-feature-settings: "tnum" 1;
}

.nd-cashout-headline--cash .nd-cashout-headline__value {
  color: #fff;
}

.nd-cashout-headline__value--small {
  font-size: var(--portal-text-card-title);
  font-weight: 600;
  letter-spacing: -0.2px;
}

.nd-cashout-headline__value--mid {
  font-size: var(--portal-text-section);
  letter-spacing: -0.5px;
}

/* "You save" tile — olive outline + olive text (counter to the filled cash tile) */
.nd-cashout-headline--savings {
  background: #e8eed7;
  border-color: var(--vs-olive);
}

.nd-cashout-headline--savings .nd-cashout-headline__label {
  color: var(--vs-olive);
}

.nd-cashout-headline--savings .nd-cashout-headline__value {
  color: var(--vs-olive);
}

.nd-cashout-asterisk {
  margin-left: 2px;
  color: var(--vs-olive);
  font-weight: 700;
}

@media (max-width: 720px) {
  .nd-cashout-headlines--3up {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .nd-cashout-headlines--3up .nd-cashout-headline--cash { grid-row: auto; }
  .nd-cashout-headline__value { font-size: var(--portal-text-hero); }
}

.nd-offer-card--cashout .nd-cashout-summary {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 8px 0 12px;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.nd-cashout-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nd-cashout-row:last-child {
  border-bottom: 0;
}

.nd-cashout-row dt {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  line-height: 1.35;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.nd-cashout-row dd {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.3;
  color: var(--vs-ink);
  margin: 0;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* "New monthly payment" row — emphasised */
.nd-cashout-row--new {
  margin-top: 4px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--vs-olive);
  border-radius: 10px;
  border-bottom: 0;
}

.nd-cashout-row--new dt {
  color: var(--vs-ink);
  font-weight: 600;
}

.nd-cashout-row--new dd {
  font-size: var(--portal-text-body);
  color: var(--vs-olive);
  font-weight: 700;
}

/* (.nd-cashout-savings — removed; the "You save" number now lives in the
   headlines row at the top of the card via .nd-cashout-headline--savings.) */

@media (max-width: 480px) {
  .nd-cashout-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .nd-cashout-row dd { text-align: left; }
}

/* ----- Centred stage (loader) ----- */

.nd-stage-block--center {
  align-items: center;
  text-align: center;
  padding: 12px 0;
}

.nd-loader {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
}

.nd-loader__spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--vs-olive);
  animation: ndSpin 800ms linear infinite;
}

@keyframes ndSpin {
  to { transform: rotate(360deg); }
}

.nd-loader__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  line-height: 1.3;
  color: var(--vs-ink);
  margin: 0;
}

.nd-loader__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
  max-width: 340px;
}

@media (prefers-reduced-motion: reduce) {
  .nd-loader__spinner { animation-duration: 2400ms; }
}

/* ----- "View and download letter" CTA ----- */

.nd-letter-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(87, 96, 56, 0.08);
  color: var(--vs-olive);
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  text-decoration: none;
  transition: background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.nd-letter-cta:hover {
  background: rgba(87, 96, 56, 0.16);
}

.nd-letter-cta:active {
  transform: scale(0.98);
}

.nd-letter-cta:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 3px;
}

.nd-letter-cta__icon {
  display: inline-flex;
}

/* ----- Fine-print disclaimer block on pre-approval / approval cards ----- */

.nd-stage-block__fineprint {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid var(--vs-olive);
  border-radius: 4px 10px 10px 4px;
}

.nd-stage-block__fineprint-label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0;
}

.nd-stage-block__fineprint-body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

/* ----- Side-column compact features (cashout right column) ----- */

.bp-features--compact .bp-features__grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bp-features--compact .bp-feature {
  padding: 16px 18px;
}

.bp-features--compact .bp-feature__icon {
  margin-bottom: 6px;
}

.bp-features--compact .bp-feature__title {
  font-size: var(--portal-text-label);
  line-height: 1.25;
  margin-bottom: 4px;
}

.bp-features--compact .bp-feature__body {
  font-size: var(--portal-text-caption);
  line-height: 1.4;
}

/* Narrow viewports — fall back to a single column so cards don't get crushed. */
@media (max-width: 1100px) {
  .bp-features--compact .bp-features__grid {
    grid-template-columns: 1fr;
  }
}

/* ----- bp-flow full-width variant (now sits below the bp-grid) ----- */

.bp-flow--full {
  margin: 56px 0 0;
}

.bp-flow--full .bp-section-head {
  margin-bottom: 24px;
}

/* ----- Consent panel (inline expand under CTA) ----- */

.nd-consent-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
  padding: 24px;
  background: #f8f5ea;
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 14px;
  animation: ndConsentIn 280ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
}

.nd-consent-panel[hidden] { display: none; }

@keyframes ndConsentIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nd-consent-panel { animation: none; }
}

.nd-consent-panel__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  line-height: 1.25;
  color: var(--vs-ink);
  margin: 0;
}

.nd-consent-panel__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.nd-consent-panel__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: var(--vs-ink);
}

.nd-consent-panel__check input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.nd-consent-panel__check-box {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background: #fff;
  border: 1.5px solid var(--vs-olive);
  border-radius: 4px;
  color: transparent;
  transition: background 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              color 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.nd-consent-panel__check input:checked ~ .nd-consent-panel__check-box {
  background: var(--vs-olive);
  color: #fff;
}

.nd-consent-panel__check input:focus-visible ~ .nd-consent-panel__check-box {
  outline: 2px solid var(--vs-olive);
  outline-offset: 2px;
}

.nd-consent-panel__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

/* ----- Toast on Continue / Save ----- */

.nd-toast {
  align-self: flex-start;
  margin-top: 8px;
  padding: 12px 18px;
  background: var(--vs-ink, #1B1D17);
  color: #fff;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  border-radius: 999px;
  animation: ndToastIn 260ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
}

.nd-toast[hidden] { display: none; }

@keyframes ndToastIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .nd-flow { padding: 24px; }
  .nd-stage-block__title { font-size: var(--portal-text-section); }
  .nd-stage-block__actions { flex-direction: column; align-items: stretch; }
  .nd-cta { width: 100%; }
  .nd-consent-panel__actions { flex-direction: column-reverse; align-items: stretch; }
}

.portal-footer__choices {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* CCPA "Your Privacy Choices" badge — proper SVG container.
   Inline SVG inside provides the canonical rounded blue rect + white
   check (yes) + white X (no). Older CSS-drawn flag was producing the
   weird "1—" artifact. */
.portal-footer__choices-flag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.portal-footer__choices-flag svg {
  display: block;
}

/* -------------------- Responsive -------------------- */

@media (max-width: 1280px) {
  .portal-nav__inner { padding: 20px 32px; gap: 20px; }
  .portal-nav__brand-tag { display: none; }
  .portal-nav__links { gap: 20px; }
  .portal-nav__link { font-size: var(--portal-text-caption); padding: 8px 12px; }
  .portal { padding: 32px 32px 64px; }
  .portal__inner { gap: 48px; }
  .portal-section__title { font-size: var(--portal-text-hero); }
  .portal-section__cta { font-size: var(--portal-text-label); }
  .portal-benefit__visual { height: 240px; }
  .portal-benefit__title { font-size: var(--portal-text-card-title); }
  .portal-benefit__list li { font-size: var(--portal-text-label); }
}

@media (max-width: 1023px) {
  .portal-nav__inner {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .portal-nav__links {
    order: 3;
    width: 100%;
    overflow-x: auto;
    gap: 8px;
    padding: 8px 0;
  }
  .portal-nav__link { font-size: var(--portal-text-caption); padding: 6px 10px; }
  .portal-nav__account-label { display: none; }
  .portal { padding: 24px 20px 48px; }
  .portal__inner { gap: 40px; }
  .portal-section__head { gap: 16px; margin-bottom: 24px; }
  .portal-section__title { font-size: var(--portal-text-section); }
  .portal-section__cta { font-size: var(--portal-text-caption); }
  .portal-concierge {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .portal-concierge__bubble {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .portal-concierge__bubble::before { display: none; }
  .portal-tiles {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* 4-tile rail stays in one row even on narrow viewports — never wraps */
  .portal-tiles--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .portal-tiles--4 .portal-tile {
    min-height: 140px;
    padding: 14px;
    gap: 10px;
  }
  .portal-tiles--4 .portal-tile__icon { width: 32px; height: 32px; }
  .portal-tiles--4 .portal-tile__label { font-size: var(--portal-text-caption); line-height: 1.25; }
  .portal-tiles--4 .portal-tile__check { top: 8px; left: 8px; width: 16px; height: 16px; }
  .portal-tile { padding: 24px; min-height: 0; }
  .portal-tile__label { font-size: var(--portal-text-body); }
  .portal-benefits {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .portal-benefit__visual { height: 200px; }
  .portal-benefit__body { padding: 24px; gap: 20px; }
  .portal-footer { padding: 32px 20px 24px; }
  .portal-footer__top { flex-wrap: wrap; }
  .portal-footer__bottom { flex-direction: column; align-items: flex-start; }
  .portal-footer__legal { align-items: flex-start; }
}

@media (max-width: 600px) {
  .portal-btn { padding: 14px 20px; font-size: var(--portal-text-caption); }
  .portal-concierge__person { padding: 0; }
  .portal-concierge__avatar { width: 72px; height: 72px; }
  .portal-concierge__name { font-size: var(--portal-text-body); }
  .portal-concierge__role { font-size: var(--portal-text-caption); }
  .portal-concierge__msg { font-size: var(--portal-text-label); }
  .portal-section__title { font-size: var(--portal-text-section); }
  .portal-tile__label { font-size: var(--portal-text-label); }
  .portal-benefit__title { font-size: var(--portal-text-body); }
  .portal-benefit__list li { font-size: var(--portal-text-caption); padding-left: 18px; }
}

/* ============================================================
   My Account page
   ============================================================ */

.account {
  background: #ffffff;
  padding: 0 0 96px;
}

.account__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 40px 0;
}

.account-hero {
  padding: 24px 0 40px;
}

.account-hero__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0 0 12px;
}

.account-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--vs-ink, #1B1D17);
  margin: 0 0 16px;
  max-width: 720px;
}

.account-hero__title strong {
  font-weight: 500;
}

.account-hero__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink, #1B1D17);
  margin: 0;
  max-width: 600px;
}

/* Overview card */
.account-overview {
  margin-bottom: 40px;
}

.account-overview__card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  background: #f5f5f3;
  border-radius: 16px;
  border: 1px solid #e6e6e0;
}

.account-overview__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--vs-olive);
  color: #ffffff;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-card-title);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.account-overview__info {
  flex: 1 1 auto;
  min-width: 0;
}

.account-overview__name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink, #1B1D17);
  margin: 0 0 8px;
}

.account-overview__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

.account-overview__meta li {
  margin: 0;
}

.account-overview__sep {
  width: 4px;
  height: 4px;
  background: #c4c4be;
  border-radius: 50%;
  display: inline-block;
}

/* Plan chip migrated to the canonical .portal-chip (portal.css §18,
   Sprint 9h) — the hardcoded green dialect is gone. */

.account-overview__actions {
  flex-shrink: 0;
}

.account-overview__edit {
  appearance: none;
  border: 1.5px solid var(--vs-ink, #1B1D17);
  background: transparent;
  color: var(--vs-ink, #1B1D17);
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.04em;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.account-overview__edit:hover {
  background: var(--vs-ink, #1B1D17);
  color: #ffffff;
}

/* Tabs */
.account-tabs {
  margin-top: 8px;
}

.account-tabs__head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1.5px solid #e6e6e0;
  margin-bottom: 32px;
}

.account-tabs__rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  flex: 1 1 auto;
  min-width: 0;
}

.account-tabs__logout {
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.01em;
  color: var(--vs-ink-muted, #5C5E58);
  padding: 16px 4px 16px 20px;
  cursor: pointer;
  border-left: 1px solid #e6e6e0;
  white-space: nowrap;
  transition: color 180ms ease;
}

.account-tabs__logout:hover {
  color: #b53b2c;
}

.account-tabs__logout svg {
  display: block;
  flex-shrink: 0;
}

.account-tabs__logout:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 2px;
  border-radius: 6px;
}

.account-tabs__rail::-webkit-scrollbar { height: 4px; }
.account-tabs__rail::-webkit-scrollbar-thumb { background: #c4c4be; border-radius: 2px; }

.account-tabs__tab {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  letter-spacing: 0.01em;
  color: var(--vs-ink-muted, #5C5E58);
  padding: 16px 20px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 180ms ease;
}

.account-tabs__tab:hover {
  color: var(--vs-ink, #1B1D17);
}

.account-tabs__tab[aria-selected="true"] {
  color: var(--vs-olive);
  font-weight: 600;
}

.account-tabs__tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1.5px;
  height: 2.5px;
  background: var(--vs-olive);
  border-radius: 2px 2px 0 0;
}

.account-tabs__tab:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: -4px;
  border-radius: 6px;
}

.account-tabs__panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.account-tabs__panel[hidden] {
  display: none;
}

/* Block (card-like) */
.account-block {
  background: #ffffff;
  border: 1px solid #e6e6e0;
  border-radius: 16px;
  padding: 32px;
}

.account-block__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.account-block__head > div {
  flex: 1 1 auto;
  min-width: 0;
}

.account-block__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.25;
  letter-spacing: -1px;
  color: var(--vs-ink, #1B1D17);
  margin: 0 0 8px;
}

.account-block__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.55;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
  max-width: 640px;
}

/* Description list (Profile) */
.account-dl {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.account-dl__row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid #ededeb;
}

.account-dl__row:first-child {
  border-top: 0;
}

.account-dl__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.01em;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.account-dl__value {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.account-dl__hint {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
  text-align: right;
}

.account-dl__hint a,
.account-link {
  display: inline;
  color: var(--vs-olive);
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
  border-radius: 0;
  transition: opacity 180ms ease;
}

.account-dl__hint a:hover,
.account-link:hover {
  opacity: 0.7;
}

/* Stack of rows */
.account-stack {
  display: flex;
  flex-direction: column;
}

.account-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #ededeb;
}

.account-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.account-row__main {
  flex: 1 1 auto;
  min-width: 0;
}

.account-row__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: var(--vs-ink, #1B1D17);
  margin: 0 0 4px;
}

.account-row__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

/* Buttons */
.account-btn {
  appearance: none;
  cursor: pointer;
  font-family: var(--vs-font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.account-btn--ghost {
  border: 1.5px solid var(--vs-ink, #1B1D17);
  background: transparent;
  color: var(--vs-ink, #1B1D17);
  padding: 10px 22px;
  font-size: var(--portal-text-caption);
  border-radius: 999px;
}

.account-btn--ghost:hover {
  background: var(--vs-ink, #1B1D17);
  color: #ffffff;
}

.account-btn--filled {
  border: 0;
  background: var(--vs-olive);
  color: #ffffff;
  padding: 12px 24px;
  font-size: var(--portal-text-caption);
  border-radius: 999px;
}

.account-btn--filled:hover {
  background: var(--vs-olive-deep, #3F4828);
}

.account-btn--text {
  border: 0;
  background: transparent;
  color: var(--vs-olive);
  padding: 6px 0;
  font-size: var(--portal-text-caption);
  font-weight: 500;
  letter-spacing: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}

.account-btn--text:hover {
  opacity: 0.7;
}

/* Toggle */
.account-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.account-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.account-toggle__track {
  width: 44px;
  height: 24px;
  background: #c4c4be;
  border-radius: 999px;
  position: relative;
  transition: background 180ms ease;
}

.account-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 180ms ease;
}

.account-toggle input:checked + .account-toggle__track {
  background: var(--vs-olive);
}

.account-toggle input:checked + .account-toggle__track .account-toggle__thumb {
  transform: translateX(20px);
}

/* Pills */
.account-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.account-pill--on {
  background: #e8eed7;
  color: #4a5530;
}

.account-pill--off {
  background: #f0f0ec;
  color: #5C5E58;
}

.account-pill--strong {
  background: var(--vs-olive);
  color: #ffffff;
}

/* Session / doc / card icons */
.account-session-icon,
.account-doc-icon,
.account-card-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #f5f5f3;
  border: 1px solid #e6e6e0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  color: var(--vs-ink, #1B1D17);
  flex-shrink: 0;
}

.account-card-brand {
  width: auto;
  padding: 0 12px;
  height: 36px;
}

/* Empty state */
.account-empty {
  text-align: center;
  padding: 32px 24px;
  background: #fafaf8;
  border-radius: 12px;
  border: 1px dashed #d8d8d2;
}

.account-empty__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  color: var(--vs-ink, #1B1D17);
  margin: 0 0 8px;
}

.account-empty__body {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Billing table */
.account-table-wrap {
  overflow-x: auto;
}

.account-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
}

.account-table th,
.account-table td {
  text-align: left;
  padding: 14px 16px;
  border-top: 1px solid #ededeb;
}

.account-table th {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
  border-top: 0;
  border-bottom: 1.5px solid #e6e6e0;
}

.account-table td {
  color: var(--vs-ink, #1B1D17);
}

.account-table td a {
  color: var(--vs-olive);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Membership */
.account-membership {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.account-membership__plan {
  background: #f5f5f3;
  border-radius: 12px;
  padding: 28px;
}

.account-membership__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0 0 8px;
}

.account-membership__name {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink, #1B1D17);
  margin: 0 0 4px;
}

.account-membership__since {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0 0 16px;
}

.account-membership__cost {
  margin: 0 0 20px;
}

.account-membership__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.account-membership__list li {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink, #1B1D17);
  padding: 8px 0 8px 24px;
  position: relative;
}

.account-membership__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--vs-olive);
  border-bottom: 2px solid var(--vs-olive);
  transform: rotate(-45deg);
}

/* Veteran Strong Plus upsell — matches the gold accent palette of /vs-plus.html.
   Same gradient + #fac957 highlight + canonical Stratum 2 button as the
   .benefits-plus--full pattern on /all-benefits. */
.account-membership__upsell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 200% at 100% 50%, rgba(250, 201, 87, 0.18) 0%, rgba(250, 201, 87, 0) 35%),
    linear-gradient(135deg, #1a1604 0%, #0a0703 100%);
  color: #ffffff;
  border-radius: 16px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.account-membership__upsell-mark {
  position: absolute;
  right: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0.18;
  z-index: 0;
}

.account-membership__upsell-mark svg {
  width: 100%;
  height: 100%;
}

.account-membership__upsell-tag,
.account-membership__upsell-title,
.account-membership__upsell-body,
.account-membership__upsell-btn {
  position: relative;
  z-index: 1;
}

.account-membership__upsell-tag {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.account-membership__upsell-title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-hero);
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin: 0;
  max-width: 18ch;
}

.account-membership__upsell-title strong {
  color: #fac957;
  font-weight: 500;
}

.account-membership__upsell-body {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 360px;
}

/* CTA — uses the canonical .agero-btn typography tokens (display font, 18px,
   700 weight, uppercase, 0.04em tracking, 18×28 padding, 12px radius) with
   the gold color of /vs-plus.html. Matches /all-benefits VS Plus upsell. */
.account-membership__upsell-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  width: auto;
  background: #fac957;
  color: #1a1402;
  border: 0;
  border-radius: 12px;
  padding: 18px 28px;
  margin-top: 12px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease-out;
}

.account-membership__upsell-btn:hover {
  background: #fdd884;
}

/* Responsive */
@media (max-width: 1024px) {
  .account__inner { padding: 24px 32px 0; }
  .account-hero__title { font-size: var(--portal-text-hero); }
}

@media (max-width: 768px) {
  .account__inner { padding: 20px 20px 0; }
  .account { padding-bottom: 64px; }
  .account-hero__title { font-size: var(--portal-text-hero); }
  .account-hero__body { font-size: var(--portal-text-label); }

  .account-overview__card {
    flex-wrap: wrap;
    padding: 20px;
  }

  .account-overview__actions {
    width: 100%;
  }

  .account-overview__edit {
    width: 100%;
  }

  .account-tabs__tab {
    padding: 14px 14px;
    font-size: var(--portal-text-caption);
  }

  .account-block {
    padding: 24px 20px;
  }

  .account-block__head {
    flex-direction: column;
    gap: 16px;
  }

  .account-dl__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .account-dl__hint {
    text-align: left;
  }

  .account-row {
    flex-wrap: wrap;
  }

  .account-membership {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Credit activation page (.ca-*)
   ============================================================ */

.ca-page {
  background: #ffffff;
  padding: 0 0 96px;
}

.ca-page__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 40px 0;
}

/* Marketing hero banner (uses .vsp-hero classes, with olive accent override) */
.ca-marketing-hero {
  margin: 24px 0 0;
  background:
    radial-gradient(120% 200% at 100% 50%, rgba(122, 138, 74, 0.22) 0%, rgba(122, 138, 74, 0) 35%),
    linear-gradient(135deg, #1a2110 0%, #0a0d05 100%);
}

.ca-marketing-hero .vsp-hero__title strong {
  color: #aab87a;
}

.ca-marketing-hero .vsp-hero__title sup {
  font-size: 0.45em;
  vertical-align: super;
  font-weight: 500;
}

/* Hero: 2-column */
.ca-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  padding: 32px 0 80px;
  align-items: start;
}

.ca-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
}

.ca-hero__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0;
}

.ca-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.ca-hero__title strong {
  font-weight: 500;
  color: var(--vs-olive);
}

.ca-hero__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.3;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.ca-hero__trust {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ca-trust {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  background: #f5f5f3;
  border: 1px solid #e6e6e0;
  border-radius: 14px;
  min-width: 0;
}

.ca-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--vs-olive);
  color: #ffffff;
  flex-shrink: 0;
}

.ca-trust__icon svg {
  width: 24px;
  height: 24px;
}

.ca-trust > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ca-trust__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.ca-trust__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.ca-form-card {
  background: #f5f5f3;
  border: 1px solid #e6e6e0;
  border-radius: 20px;
  padding: 32px;
  position: relative;
}

.ca-form-card__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1B1D17;
  border-radius: 14px;
  padding: 24px 32px;
  margin: -8px 0 24px;
}

.ca-form-card__brand-logo {
  display: block;
  width: auto;
  height: 40px;
  max-width: 100%;
  object-fit: contain;
}

.ca-form-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

/* The ONE system eyebrow spec (caption / 600 / 0.16em / olive, no box).
   Was a boxed tinted chip with 0.08em tracking — read as crude next to
   every other label in the system (Sprint 9g). */
.ca-form-card__pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0;
  background: transparent;
  color: var(--portal-olive);
  border-radius: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ca-form-card__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.ca-form-card__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.ca-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ca-form[hidden] { display: none; }

.ca-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.ca-field__label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.ca-field__hint {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 6px 0 0;
}

.ca-input {
  appearance: none;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: #ffffff;
  border: 1.5px solid #d8d8d2;
  border-radius: 10px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  color: var(--vs-ink, #1B1D17);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.ca-input::placeholder {
  color: #a4a49e;
  font-weight: 400;
}

.ca-input:hover { border-color: #b4b4ac; }
.ca-input:focus {
  outline: 0;
  border-color: var(--vs-olive);
  box-shadow: 0 0 0 4px rgba(89, 102, 56, 0.15);
}

.ca-dob {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.ca-dob__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 60px;
  min-width: 0;
}

.ca-dob__cell--year { flex: 1.6 1 100px; }

.ca-dob__hint {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
}

.ca-dob__sep {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  color: #c4c4be;
  margin-top: 18px;
  pointer-events: none;
  user-select: none;
}

.ca-input--cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.ca-ssn { position: relative; }

.ca-input--ssn {
  padding-right: 52px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.ca-ssn__toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--vs-ink-muted, #5C5E58);
  cursor: pointer;
  border-radius: 8px;
  transition: color 180ms ease, background 180ms ease;
}

.ca-ssn__toggle:hover {
  color: var(--vs-ink, #1B1D17);
  background: rgba(0, 0, 0, 0.04);
}

.ca-ssn__toggle[aria-pressed="true"] { color: var(--vs-olive); }

.ca-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  cursor: pointer;
}

.ca-consent input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #c4c4be;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  position: relative;
  transition: background 180ms ease, border-color 180ms ease;
}

.ca-consent input[type="checkbox"]:checked {
  background: var(--vs-olive);
  border-color: var(--vs-olive);
}

.ca-consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4.5px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ca-form__submit {
  appearance: none;
  border: 0;
  background: var(--vs-olive);
  color: #ffffff;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  letter-spacing: 0.02em;
  height: 52px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 200ms ease;
}

.ca-form__submit:hover { background: var(--vs-olive-deep, #3F4828); }

.ca-form__legal {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.ca-form__legal a {
  color: var(--vs-olive);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.ca-form-card--processing { min-height: 360px; }

.ca-form-card__processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 64px 24px;
}

.ca-form-card__processing[hidden] { display: none; }

.ca-form-card__spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #d8d8d2;
  border-top-color: var(--vs-olive);
  animation: ca-spin 800ms linear infinite;
}

@keyframes ca-spin {
  to { transform: rotate(360deg); }
}

.ca-form-card__processing-title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.ca-form-card__processing-sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

/* ----- credit-activate: 2-step wizard ----- */

.ca-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 12px 0 20px;
  padding: 0;
  width: 100%;
}

.ca-stepper__item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
}

.ca-stepper__item::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.12);
  transition: background 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.ca-stepper__item:last-child::after {
  display: none;
}

.ca-stepper__item--done::after {
  background: var(--vs-olive);
}

.ca-stepper__num {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: rgba(0, 0, 0, 0.55);
  transition: background 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              border-color 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              color 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.ca-stepper__num-text,
.ca-stepper__check {
  grid-area: 1 / 1;
  transition: opacity 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.ca-stepper__check {
  opacity: 0;
  transform: scale(0.6);
}

.ca-stepper__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.ca-stepper__item--active .ca-stepper__num {
  background: var(--vs-olive);
  border-color: var(--vs-olive);
  color: #fff;
}

.ca-stepper__item--active .ca-stepper__label {
  color: var(--vs-ink, #1B1D17);
  font-weight: 600;
}

.ca-stepper__item--done .ca-stepper__num {
  background: #e8eed7;
  border-color: var(--vs-olive);
  color: var(--vs-olive);
}

.ca-stepper__item--done .ca-stepper__num-text {
  opacity: 0;
  transform: scale(0.6);
}

.ca-stepper__item--done .ca-stepper__check {
  opacity: 1;
  transform: scale(1);
}

.ca-stepper__item--done .ca-stepper__label {
  color: rgba(0, 0, 0, 0.72);
}

/* Terminus segment — the trailing "goal" indicator after Identity.
   No number, no label, just a small olive check circle to anchor the line. */
.ca-stepper__item--terminus {
  flex: 0 0 auto;
}

.ca-stepper__num--terminus {
  background: #e8eed7;
  border-color: var(--vs-olive);
  color: var(--vs-olive);
}

/* View container — each step's body. One-shot fade-in on activation. */
.ca-form-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: caViewIn 280ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
}

.ca-form-view[hidden] {
  display: none;
}

@keyframes caViewIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ca-form-view { animation: none; }
  .ca-stepper__num,
  .ca-stepper__label,
  .ca-stepper__item::after,
  .ca-stepper__num-text,
  .ca-stepper__check { transition: none; }
}

/* Back + Submit row in the identity view */
.ca-form__actions {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 4px;
  width: 100%;
  min-width: 0;
}

/* Primary Activate button: takes remaining flex space, can shrink to fit */
.ca-form__actions .vs-form__submit {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  padding-left: 20px;
  padding-right: 20px;
  font-size: var(--portal-text-body);
  letter-spacing: 0.02em;
  white-space: normal;
}

/* Back button: fixed width to its content, doesn't grow */
.ca-form__actions .vs-form__submit--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  flex: 0 0 auto;
  padding-left: 16px;
  padding-right: 18px;
  font-size: var(--portal-text-body);
}

.ca-form__actions .vs-form__submit--secondary svg {
  flex-shrink: 0;
}

/* Inline "(optional)" hint inside a label */
.vs-form-field__optional {
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  margin-left: 6px;
  letter-spacing: 0;
  text-transform: none;
}

/* Readonly input styling — keeps fields legible while signaling non-edit */
.vs-form-field__input[readonly] {
  background: rgba(0, 0, 0, 0.025);
  cursor: default;
}

.vs-form-field__input[readonly]:hover,
.vs-form-field__input[readonly]:focus {
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
  outline: 0;
}

@media (max-width: 560px) {
  .ca-form__actions { flex-direction: column-reverse; align-items: stretch; }
  .ca-form__actions .vs-form__submit { width: 100%; justify-content: center; }
  .ca-stepper__label { display: none; }
  .ca-stepper__item { gap: 0; }
}

.ca-section__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  max-width: 720px;
}

.ca-section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;
}

.ca-section__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0;
}

.ca-section__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.ca-features {
  padding: 64px 0;
  border-top: 1px solid #ededeb;
}

.ca-features__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ca-feature {
  background: #f5f5f3;
  border: 1px solid #e6e6e0;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ca-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--vs-ink, #1B1D17);
  color: #ffffff;
  margin-bottom: 4px;
}

.ca-feature__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.3;
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.ca-feature__copy {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.ca-how {
  padding: 64px 0;
  border-top: 1px solid #ededeb;
}

.ca-how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ca-how__step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e6e6e0;
}

.ca-how__num {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-display);
  line-height: 1;
  letter-spacing: -1px;
  color: var(--vs-olive);
}

.ca-how__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.3;
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.ca-how__copy {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.ca-equifax { padding: 32px 0; }

.ca-equifax__panel {
  background: var(--vs-ink, #1B1D17);
  color: #ffffff;
  border-radius: 20px;
  padding: 56px 48px;
  display: flex;
  align-items: center;
}

.ca-equifax__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}

.ca-equifax__brand {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.18em;
  color: #d8d8d2;
}

.ca-equifax__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.2;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0;
}

.ca-equifax__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.ca-stat {
  text-align: center;
  padding: 48px 0;
  border-top: 1px solid #ededeb;
  border-bottom: 1px solid #ededeb;
}

.ca-stat__num {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-num-feature);
  line-height: 1;
  letter-spacing: -2px;
  color: var(--vs-olive);
  margin: 0;
}

.ca-stat__num span { color: var(--vs-ink, #1B1D17); }

.ca-stat__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  letter-spacing: 0.01em;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 12px 0 0;
}

/* (Legacy .ca-faq* rules removed — credit-activate now uses the canonical
   .vs-faq design-system component above.) */

.ca-help { padding: 32px 0 0; }

.ca-help__panel {
  background: #f5f5f3;
  border: 1px solid #e6e6e0;
  border-radius: 20px;
  padding: 48px;
}

.ca-help__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.ca-help__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0;
}

.ca-help__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-display);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.ca-help__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.ca-help__cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.ca-help__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--vs-ink, #1B1D17);
  color: #ffffff;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.02em;
  padding: 14px 22px;
  border-radius: 999px;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease;
}

.ca-help__btn:hover { background: var(--vs-olive); }

.ca-help__btn--ghost {
  background: transparent;
  color: var(--vs-ink, #1B1D17);
  border: 1.5px solid var(--vs-ink, #1B1D17);
}

.ca-help__btn--ghost:hover {
  background: var(--vs-ink, #1B1D17);
  color: #ffffff;
}

@media (max-width: 1024px) {
  .ca-page__inner { padding: 24px 32px 0; }
  .ca-hero { grid-template-columns: 1fr; gap: 40px; padding-bottom: 56px; }
  .ca-hero__title { font-size: var(--portal-text-display); }
  .ca-features__grid,
  .ca-how__steps { grid-template-columns: repeat(2, 1fr); }
  .ca-equifax__title { font-size: var(--portal-text-section); }
  .ca-equifax__panel { padding: 40px 32px; }
  .ca-help__panel { padding: 40px 32px; }
  .ca-stat__num { font-size: var(--portal-text-display); }
}

@media (max-width: 640px) {
  .ca-page__inner { padding: 16px 20px 0; }
  .ca-hero__title { font-size: var(--portal-text-hero); }
  .ca-section__title { font-size: var(--portal-text-hero); }
  .ca-features__grid,
  .ca-how__steps { grid-template-columns: 1fr; }
  .ca-form-card { padding: 24px; }
  .ca-stat__num { font-size: var(--portal-text-display); }
}

/* ============================================================================
   FORMS — Design System
   ============================================================================
   Canonical form patterns derived from vs-plus-checkout. Every form on the
   site should use these classes. Patterns covered:

   • Form container + section header + body
   • Field (label + input/select/textarea)        — .vs-form-field
   • Size variants: --lg (default 77px), --md (60px), --sm (48px)
   • States: focus, error, disabled, with-icon, masked
   • Row layout: 2-col, 3-col
   • Submit button + ghost/secondary
   • Show/hide password
   • Checkbox / radio
   • Radio plan/option card                        — .vs-form-radio-card
   • Collapsible section (accordion)               — .vs-form-section
   • Order summary card                            — .vs-form-summary
   • Processing state                              — .vs-form-processing
   • Success state                                 — .vs-form-success

   Color tokens used:
     Platinum 40% bg          rgba(230, 230, 224, 0.4)
     Border default           rgba(0, 0, 0, 0.2)
     Border focus / active    var(--vs-olive)
     Text primary             #000000
     Text placeholder         rgba(0, 0, 0, 0.6)
     Error                    #b53b2c
   ============================================================================ */

/* ===== Form container ===== */
.vs-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

.vs-form[hidden] { display: none; }

.vs-form__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.vs-form__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.vs-form__legal {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

.vs-form__legal a {
  color: var(--vs-olive);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ===== Field ===== */
.vs-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.vs-form-field[hidden] { display: none; }

.vs-form-field__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: #000000;
  opacity: 0.8;
  margin: 0;
}

.vs-form-field__input {
  appearance: none;
  width: 100%;
  height: 77px;
  padding: 0 30px;
  background: rgba(230, 230, 224, 0.4);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.3;
  color: #000000;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.vs-form-field__input::placeholder {
  color: rgba(0, 0, 0, 0.6);
}

.vs-form-field__input:hover {
  border-color: rgba(0, 0, 0, 0.32);
}

.vs-form-field__input:focus {
  outline: 0;
  border-color: var(--vs-olive);
  box-shadow: 0 0 0 4px rgba(89, 102, 56, 0.18);
}

.vs-form-field__input:disabled {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.4);
  cursor: not-allowed;
}

/* Textarea variant */
textarea.vs-form-field__input {
  height: auto;
  min-height: 120px;
  padding: 22px 30px;
  resize: vertical;
}

/* Select variant */
select.vs-form-field__input,
.vs-form-field__input--select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1 L6 6 L11 1' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 12px 8px;
  padding-right: 56px;
  cursor: pointer;
}

/* Size variants */
.vs-form-field--md .vs-form-field__input {
  height: 60px;
  padding: 0 22px;
  font-size: var(--portal-text-body);
}

.vs-form-field--sm .vs-form-field__input {
  height: 48px;
  padding: 0 16px;
  font-size: var(--portal-text-label);
}

/* Hint + error message */
.vs-form-field__hint {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 4px 0 0;
}

.vs-form-field__error {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: #b53b2c;
  margin: 4px 0 0;
}

.vs-form-field--error .vs-form-field__input {
  border-color: #b53b2c;
}

.vs-form-field--error .vs-form-field__input:focus {
  box-shadow: 0 0 0 4px rgba(181, 59, 44, 0.18);
}

/* Locked / read-only field */
.vs-form-field--locked .vs-form-field__input {
  background: var(--vs-surface-alt, #f4f0e3);
  color: var(--vs-ink-muted, #5c5e58);
  border-color: var(--vs-line, #e4e0d6);
  cursor: default;
}
.vs-form-field--locked .vs-form-field__input:hover,
.vs-form-field--locked .vs-form-field__input:focus {
  border-color: var(--vs-line, #e4e0d6);
  box-shadow: none;
}
.vs-form-field__lock-wrap {
  position: relative;
}
.vs-form-field__lock-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--vs-ink-subtle, #9a9a8e);
  pointer-events: none;
}

/* Field with leading or trailing icon (e.g. password show/hide) */
.vs-form-field__group {
  position: relative;
}

.vs-form-field__group--trailing .vs-form-field__input {
  padding-right: 88px;
}

.vs-form-field__icon-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  border-radius: 8px;
  transition: color 180ms ease, background 180ms ease;
}

.vs-form-field__icon-btn:hover {
  color: #000000;
  background: rgba(0, 0, 0, 0.04);
}

.vs-form-field__icon-btn[aria-pressed="true"] {
  color: var(--vs-olive);
}

/* ===== Row layouts ===== */
.vs-form__row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.vs-form__row > * {
  flex: 1 1 0;
  min-width: 0;
}

.vs-form__row--2 > * { flex: 1 1 calc(50% - 10px); }
.vs-form__row--3 > * { flex: 1 1 calc(33.333% - 14px); }

@media (max-width: 600px) {
  .vs-form__row { flex-direction: column; gap: 16px; }
}

/* ===== Submit + secondary buttons ===== */
.vs-form__submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  background: var(--vs-olive);
  color: #ffffff;
  font-family: 'Stratum2', var(--vs-font-display, var(--vs-font-body));
  font-weight: 900;
  font-size: var(--portal-text-section);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 24px 40px;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  transition: background 200ms ease, opacity 200ms ease;
}

.vs-form__submit:hover {
  background: var(--vs-olive-deep, #3F4828);
}

.vs-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vs-form__submit--secondary {
  background: transparent;
  color: var(--vs-ink, #1B1D17);
  border: 2px solid var(--vs-ink, #1B1D17);
}

.vs-form__submit--secondary:hover {
  background: var(--vs-ink, #1B1D17);
  color: #ffffff;
}

.vs-form__submit--inline {
  width: auto;
}

/* ===== Checkbox ===== */
.vs-form-check {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink, #1B1D17);
  cursor: pointer;
}

.vs-form-check__input {
  appearance: none;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(0, 0, 0, 0.32);
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 0;
  cursor: pointer;
  position: relative;
  transition: background 180ms ease, border-color 180ms ease;
}

.vs-form-check__input:hover {
  border-color: rgba(0, 0, 0, 0.5);
}

.vs-form-check__input:checked {
  background: var(--vs-olive);
  border-color: var(--vs-olive);
}

.vs-form-check__input:checked::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 9px;
  width: 7px;
  height: 13px;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ===== Radio plan/option card ===== */
.vs-form-radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.vs-form-radio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.vs-form-radio-card:hover {
  border-color: rgba(0, 0, 0, 0.28);
}

.vs-form-radio-card--selected {
  border-color: var(--vs-ink, #1B1D17);
  background: #fafaf8;
}

.vs-form-radio-card__radio {
  appearance: none;
  position: absolute;
  top: 28px;
  left: 28px;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 2px solid rgba(0, 0, 0, 0.32);
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.vs-form-radio-card__radio-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
  transition: background 180ms ease;
}

.vs-form-radio-card--selected .vs-form-radio-card__radio {
  border-color: var(--vs-ink, #1B1D17);
}

.vs-form-radio-card--selected .vs-form-radio-card__radio-dot {
  background: var(--vs-ink, #1B1D17);
}

.vs-form-radio-card__badge {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.04em;
  color: var(--vs-ink, #1B1D17);
}

.vs-form-radio-card__name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink, #1B1D17);
  margin: 32px 0 0;
}

.vs-form-radio-card__price {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.vs-form-radio-card__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

/* ===== Collapsible section (accordion) ===== */
.vs-form-section {
  border-bottom: 1px solid #ededeb;
}

.vs-form-section:last-child {
  border-bottom: 0;
}

.vs-form-section__head {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.3;
  color: var(--vs-ink, #1B1D17);
  text-align: left;
  cursor: pointer;
}

.vs-form-section__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--vs-ink, #1B1D17);
  transition: transform 200ms ease;
}

.vs-form-section--open .vs-form-section__chev {
  transform: rotate(180deg);
}

.vs-form-section__body {
  padding-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vs-form-section__body[hidden] {
  display: none;
}

.vs-form-section__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.55;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

/* ===== Summary card (sticky sidebar) ===== */
.vs-form-summary {
  background: #f5f5f3;
  border: 1px solid #e6e6e0;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}

.vs-form-summary__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.vs-form-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  color: var(--vs-ink, #1B1D17);
}

.vs-form-summary__row--muted {
  color: var(--vs-ink-muted, #5C5E58);
}

.vs-form-summary__rule {
  border: 0;
  border-top: 1px solid #e0e0d8;
  margin: 4px 0;
}

.vs-form-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  color: var(--vs-ink, #1B1D17);
}

/* ===== Processing state ===== */
.vs-form-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 80px 24px;
}

.vs-form-processing[hidden] { display: none; }

.vs-form-processing__spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid #d8d8d2;
  border-top-color: var(--vs-olive);
  animation: vs-form-spin 800ms linear infinite;
}

@keyframes vs-form-spin {
  to { transform: rotate(360deg); }
}

.vs-form-processing__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-card-title);
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.vs-form-processing__sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
}

/* ===== Success state ===== */
.vs-form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: 64px 32px;
}

.vs-form-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(89, 102, 56, 0.1);
  color: var(--vs-olive);
}

.vs-form-success__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink, #1B1D17);
  margin: 0;
}

.vs-form-success__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
  margin: 0;
  max-width: 480px;
}

/* ===== Date-of-birth: 3 separate cells (MM / DD / YYYY) ===== */
.vs-form-dob {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.vs-form-dob > .vs-form-field__input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  flex: 1 1 60px;
  min-width: 0;
  padding: 0 16px;
}

.vs-form-dob > .vs-form-field__input--year {
  flex: 1.6 1 100px;
}

.vs-form-dob__sep {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  color: rgba(0, 0, 0, 0.32);
  pointer-events: none;
  user-select: none;
}

/* Centered text variant for narrow numeric inputs */
.vs-form-field__input--center {
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ===== Code-cell input (e.g. 6-digit OTP) ===== */
.vs-form-code {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  width: 100%;
}

.vs-form-code__cell {
  appearance: none;
  width: 100%;
  height: 64px;
  padding: 0;
  background: rgba(230, 230, 224, 0.4);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  text-align: center;
  color: #000000;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.vs-form-code__cell:focus {
  outline: 0;
  border-color: var(--vs-olive);
  box-shadow: 0 0 0 4px rgba(89, 102, 56, 0.18);
}

@media (max-width: 600px) {
  .vs-form-code { gap: 8px; }
  .vs-form-code__cell { height: 56px; font-size: var(--portal-text-section); }
}

/* =========================================================================
   My Assets — /my-assets.html
   Premium financial profile: net worth, 10 sections, mask-by-default.
   ========================================================================= */

/* Page sits on the design-system white portal body — matches account.html. */
.ma-body { background: var(--vs-surface, #ffffff); }

.ma { padding: 32px 0 96px; }
.ma__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Hero — cream-tinted to lift off the white body */
.ma-hero {
  margin: 24px 0 32px;
  padding: 40px 48px;
  background: var(--vs-surface-alt, #f4f0e3);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.ma-hero__eyebrow {
  margin: 0 0 16px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-olive, #5a6b3f);
}
.ma-hero__title {
  margin: 0 0 20px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink, #0e0f0c);
}
.ma-hero__title strong { font-weight: 500; color: var(--vs-ink, #0e0f0c); }
.ma-hero__body {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-section);
  line-height: 1.5;
  color: var(--vs-ink, #0e0f0c);
  max-width: 620px;
}
.ma-hero__privacy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
  background: var(--vs-surface, #ffffff);
  border-radius: 16px;
  border: 1px solid var(--vs-line, #e4e0d6);
}
.ma-hero__mask {
  appearance: none;
  border: 1.5px solid var(--vs-ink, #0e0f0c);
  background: var(--vs-ink, #0e0f0c);
  color: #ffffff;
  border-radius: 999px;
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  font-weight: 500;
  line-height: 1.2;
  transition: background 180ms ease, transform 180ms ease;
}
.ma-hero__mask:hover { background: var(--vs-olive-deep, #3f4a2a); border-color: var(--vs-olive-deep, #3f4a2a); }
.ma-hero__mask-icon { display: inline-flex; align-items: center; }
.ma-hero__mask-svg { color: #ffffff; }
.ma-hero__mask-svg--on { display: none; }
.ma-hero__mask-svg--off { display: inline-block; }
.ma-body:not(.is-masked) .ma-hero__mask-svg--on { display: inline-block; }
.ma-body:not(.is-masked) .ma-hero__mask-svg--off { display: none; }
.ma-hero__privacy-note {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink, #0e0f0c);
}

/* Net worth strip */
.ma-networth {
  margin: 0 0 40px;
  padding: 32px 40px;
  background: var(--vs-panel-dark, #0e1410);
  border-radius: 20px;
  color: #ffffff;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.ma-networth::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 100% 50%, rgba(122, 138, 74, 0.22) 0%, rgba(122, 138, 74, 0) 60%);
  pointer-events: none;
}
.ma-networth > * { position: relative; }
.ma-networth__eyebrow {
  margin: 0 0 12px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.ma-networth__value {
  margin: 0 0 12px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.1;
  letter-spacing: -1px;
  color: #ffffff;
  font-feature-settings: "tnum" 1;
}
.ma-networth__asof {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.ma-networth__split {
  margin: 0;
  display: grid;
  gap: 16px;
}
.ma-networth__split-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ma-networth__split-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ma-networth__split-label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ma-networth__dot {
  width: 8px; height: 8px; border-radius: 999px;
}
.ma-networth__dot--up { background: #aab87a; }
.ma-networth__dot--down { background: #c98c5e; }
.ma-networth__split-value {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: 0;
  color: #ffffff;
  font-feature-settings: "tnum" 1;
}
.ma-networth__detail-link {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}
.ma-networth__detail-link:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}
.ma-networth__trend {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ma-networth__trend svg { width: 100%; height: 80px; display: block; }
.ma-networth__trend-caption {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-align: right;
}

/* Floating sticky sidebar — fixed in the left whitespace beside the centered content.
   Sections stay at their full 1280px max-width; sidebar lives entirely outside.
   Used on /my-assets and /all-benefits. */
.ma-rail {
  position: fixed;
  /* Sit 24px before the centered content's left edge.
     1280 / 2 = 640. Floor at 24px from viewport edge (kicks in once content shifts right). */
  left: max(24px, calc(50% - 640px - 180px - 24px));
  /* 96px portal nav + 24px breathing */
  top: 120px;
  width: 180px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 12px;
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  max-height: calc(100vh - 144px);
  overflow-y: auto;
}
.ma-rail__label {
  margin: 0 8px 4px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-rail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ma-rail__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  font-weight: 600;
  line-height: 1.2;
  color: var(--vs-ink-muted, #5c5e58);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.ma-rail__num {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 1px;
  color: var(--vs-ink-subtle, #9a9a8e);
  font-feature-settings: "tnum" 1;
  flex-shrink: 0;
  min-width: 20px;
}
.ma-rail__text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ma-rail__link:hover {
  background: var(--vs-surface-alt, #f4f0e3);
  color: var(--vs-ink, #0e0f0c);
}
.ma-rail__link:hover .ma-rail__num { color: var(--vs-ink-muted, #5c5e58); }
.ma-rail__link--active {
  background: var(--vs-surface-alt, #f4f0e3);
  color: var(--vs-ink, #0e0f0c);
  border-left-color: var(--vs-olive, #5a6b3f);
}
.ma-rail__link--active .ma-rail__num {
  color: var(--vs-olive-deep, #3f4a2a);
}

/* Section primitive */
.ma-section {
  margin: 0 0 56px;
  position: relative;
}
/* Thin divider rule shown ABOVE every section that follows another section */
.ma-section + .ma-section {
  padding-top: 56px;
}
.ma-section + .ma-section::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--vs-line, #d6d1c2) 12%, var(--vs-line, #d6d1c2) 88%, transparent 100%);
}

/* Insurance premium — labeled stat shown on each row */
.ma-ins-premium {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin: 12px 0 0;
  padding: 10px 16px;
  background: var(--vs-surface-alt, #f4f0e3);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  white-space: nowrap;
}
.ma-ins-premium__label {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-ins-premium__value {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.ma-ins-premium__per {
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.3px;
  color: var(--vs-ink-muted, #5c5e58);
}

/* Section total banner — single horizontal tile shown above an items list */
.ma-section-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 16px;
  padding: 18px 28px;
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-left: 4px solid var(--vs-olive, #5a6b3f);
  border-radius: 14px;
}
.ma-section-total--debt { border-left-color: #c98c5e; }
.ma-section-total__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ma-section-total__label {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-section-total__count {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: var(--vs-ink, #0e0f0c);
}
.ma-section-total__value {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-hero);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* Dual-cadence total (used by Insurance — shows monthly + yearly side-by-side) */
.ma-section-total__cadences {
  margin: 0;
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.ma-section-total__cadence {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 12px;
  background: var(--vs-surface-alt, #f4f0e3);
  border: 1px solid var(--vs-line, #e4e0d6);
  min-width: 124px;
}
.ma-section-total__cadence dt {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-section-total__cadence dd {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-section);
  line-height: 1.1;
  letter-spacing: -0.3px;
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.ma-section-total__per {
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.3px;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-anchor {
  /* Account for the 96px sticky portal-nav + 24px breathing room. */
  scroll-margin-top: 120px;
}
.ma-section__head {
  margin: 0 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.ma-section__eyebrow {
  margin: 0 0 12px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-olive-deep, #3f4a2a);
}
.ma-section__title {
  margin: 0 0 16px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--vs-ink, #0e0f0c);
}
.ma-section__intro {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-card-title);
  line-height: 1.5;
  color: var(--vs-ink, #0e0f0c);
  max-width: 720px;
}

/* Add button */
.ma-add {
  appearance: none;
  border: 1.5px solid var(--vs-ink, #0e0f0c);
  background: transparent;
  color: var(--vs-ink, #0e0f0c);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.ma-add:hover { background: var(--vs-ink, #0e0f0c); color: #ffffff; }
.ma-add--small { padding: 8px 16px; font-size: var(--portal-text-caption); }

/* Card primitive */
.ma-card {
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  padding: 28px 32px;
  margin: 0 0 16px;
}
.ma-card__head {
  margin: 0 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.ma-card__eyebrow {
  margin: 0 0 8px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vs-olive-deep, #3f4a2a);
}
.ma-card__title {
  margin: 0 0 8px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--vs-ink, #0e0f0c);
}
.ma-card__sub {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-card__cta {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--vs-line, #e4e0d6);
}

/* Stats grid inside cards */
.ma-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.ma-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ma-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ma-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ma-stats__chip { display: flex; align-items: center; }
.ma-stats > div { margin: 0; }
.ma-stats dt {
  margin: 0 0 8px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-stats dd {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ma-grid {
  display: grid;
  gap: 16px;
}
.ma-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ma-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Detail definition list (used in vehicle cards) */
.ma-detail-list {
  margin: 0 0 24px;
  padding: 20px 24px;
  background: var(--vs-surface-alt, #f4f0e3);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}
.ma-detail-list > div {
  display: block;
  min-width: 0;
}
.ma-detail-list dt {
  margin: 0 0 4px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-detail-list dd {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  line-height: 1.3;
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ma-detail-list__sub {
  display: block;
  margin-top: 4px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.3;
  letter-spacing: 0.3px;
  color: var(--vs-ink-muted, #5c5e58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Vehicle card extras */
.ma-vehicle { padding: 28px 32px; }
.ma-vehicle__warranty-note {
  margin: -4px 0 24px;
  font-size: var(--portal-text-label);
  font-weight: 500;
  font-style: normal;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-vehicle__finance {
  margin: 24px 0 0;
  padding: 20px 24px;
  background: var(--vs-panel-dark, #0e1410);
  color: #ffffff;
  border-radius: 12px;
}
.ma-vehicle__finance-eyebrow {
  margin: 0 0 6px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.ma-vehicle__finance-title {
  margin: 0 0 18px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: #ffffff;
}
.ma-vehicle__finance .ma-stats { gap: 16px; }
.ma-vehicle__finance .ma-stats dt {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 1px;
}
.ma-vehicle__finance .ma-stats dd {
  color: #ffffff;
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ma-vehicle__finance .ma-money { color: #ffffff; }
.is-masked .ma-vehicle__finance .ma-money { color: rgba(255, 255, 255, 0.45); }

.ma-vehicle__foot {
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--vs-line, #e4e0d6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
}
.ma-vehicle__foot-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--vs-ink, #0e0f0c);
}
.ma-vehicle__foot-label {
  font-weight: 600;
  color: var(--vs-ink, #0e0f0c);
}

/* Row primitive (used by bank, investments, loans, insurance, income, docs) */
.ma-rows {
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  overflow: hidden;
}
.ma-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
}
.ma-row:last-child { border-bottom: 0; }
.ma-row--ins,
.ma-row--inc { grid-template-columns: minmax(0, 1fr) auto; }
.ma-row--ins { align-items: flex-start; }
.ma-row__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Renewal chip — prominent days-left indicator */
.ma-renewal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-family: var(--vs-font-body);
  line-height: 1.1;
  white-space: nowrap;
  min-width: 124px;
}
.ma-renewal__label {
  font-weight: 700;
  font-size: var(--portal-text-caption);
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.ma-renewal__count {
  margin-top: 8px;
  font-weight: 600;
  font-size: var(--portal-text-hero);
  line-height: 1;
  letter-spacing: -0.5px;
  font-feature-settings: "tnum" 1;
}
.ma-renewal__unit {
  margin-top: 4px;
  font-weight: 500;
  font-size: var(--portal-text-caption);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: lowercase;
}
.ma-renewal__date {
  margin-top: 10px;
  padding-top: 10px;
  width: 100%;
  text-align: center;
  border-top: 1px solid currentColor;
  font-weight: 500;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 0.3px;
}
.ma-renewal--calm {
  background: var(--vs-info-bg, #e1e4dc);
  color: var(--vs-ink-muted, #5c5e58);
  border-color: var(--vs-line, #e4e0d6);
}
.ma-renewal--info {
  background: rgba(122, 138, 74, 0.12);
  color: var(--vs-olive-deep, #3f4a2a);
  border-color: rgba(122, 138, 74, 0.3);
}
.ma-renewal--warn {
  background: var(--vs-warn-bg, #fceac9);
  color: var(--vs-warn-ink, #7a4f12);
  border-color: rgba(122, 79, 18, 0.28);
}
.ma-renewal--danger {
  background: var(--vs-danger-bg, #f7d9c9);
  color: var(--vs-danger-ink, #7c3416);
  border-color: rgba(124, 52, 22, 0.28);
}
.ma-renewal--expired {
  background: var(--vs-line, #e4e0d6);
  color: var(--vs-ink-muted, #5c5e58);
  border-color: var(--vs-ink-subtle, #9a9a8e);
}
.ma-renewal--expired .ma-renewal__label {
  color: var(--vs-danger-ink, #7c3416);
  opacity: 1;
}

/* Policy attached badge */
.ma-policy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--vs-line, #e4e0d6);
  background: transparent;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  appearance: none;
  text-align: left;
}
.ma-policy svg { flex-shrink: 0; width: 16px; height: 16px; }
.ma-policy__main {
  font-weight: 600;
}
.ma-policy__sep {
  opacity: 0.5;
  font-weight: 400;
}
.ma-policy__meta {
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ma-policy--has {
  color: var(--vs-olive-deep, #3f4a2a);
  border-color: rgba(122, 138, 74, 0.4);
  background: rgba(122, 138, 74, 0.08);
}
.ma-policy--has:hover {
  background: rgba(122, 138, 74, 0.16);
  border-color: rgba(122, 138, 74, 0.6);
}
.ma-policy--missing {
  color: var(--vs-ink-muted, #5c5e58);
  border-style: dashed;
  border-color: var(--vs-ink-subtle, #9a9a8e);
  appearance: none;
}
.ma-policy--missing:hover {
  color: var(--vs-ink, #0e0f0c);
  border-color: var(--vs-ink, #0e0f0c);
  background: var(--vs-surface-alt, #f4f0e3);
}
.ma-row__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--vs-surface-alt, #f4f0e3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--vs-olive-deep, #3f4a2a);
}
.ma-row__icon--inv { background: rgba(122, 138, 74, 0.16); color: var(--vs-olive-deep, #3f4a2a); }
.ma-row__icon--loan { background: rgba(201, 140, 94, 0.18); color: #7c3416; }
.ma-row__icon--doc { background: rgba(14, 20, 16, 0.08); color: var(--vs-ink, #0e0f0c); }
.ma-row__main { min-width: 0; }
.ma-row__title {
  margin: 0 0 6px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-card-title);
  line-height: 1.3;
  color: var(--vs-ink, #0e0f0c);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ma-row__sub {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-row__note {
  margin: 10px 0 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  font-style: normal;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-row__note--warn {
  color: #7c3416;
  font-style: normal;
}
.ma-row__value {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* Value aside — value + last-updated + edit button stacked on the right */
.ma-row--with-aside { align-items: flex-start; }
.ma-row__value-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}
.ma-row__updated {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: var(--vs-ink-muted, #5c5e58);
  white-space: nowrap;
}
.ma-row__edit {
  appearance: none;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin: -4px -8px 0 0;
  border-radius: 6px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  color: var(--vs-olive-deep, #3f4a2a);
  cursor: pointer;
  transition: background 160ms ease;
  white-space: nowrap;
}
.ma-row__edit:hover { background: rgba(122, 138, 74, 0.10); }
.ma-row__edit svg { flex-shrink: 0; }
.ma-row__unit {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  font-weight: 500;
  color: var(--vs-ink-muted, #5c5e58);
  margin-left: 4px;
}
.ma-row--gap { background: rgba(247, 217, 201, 0.18); }

/* Insurance grid */
.ma-ins-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ma-ins-block {
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  padding: 24px;
}
.ma-ins-block__head {
  margin: 0 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
}
.ma-ins-block__title {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-card-title);
  line-height: 1.2;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vs-ink, #0e0f0c);
}
.ma-ins-block .ma-rows {
  border: 0;
  border-radius: 0;
}
.ma-ins-block .ma-row {
  padding: 16px 0;
}

/* Income totals tiles */
.ma-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 16px;
}
.ma-totals__tile {
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  padding: 24px 28px;
}
.ma-totals__tile--vet {
  background: rgba(122, 138, 74, 0.08);
  border-color: rgba(122, 138, 74, 0.32);
}
.ma-totals__label {
  margin: 0 0 12px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-totals__value {
  margin: 0 0 8px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
}
.ma-totals__sub {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-olive-deep, #3f4a2a);
}

/* Estate checklist */
.ma-checklist {
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  overflow: hidden;
}
.ma-check {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
}
.ma-check:last-child { border-bottom: 0; }
.ma-check__icon {
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  line-height: 1;
}
.ma-check--ok .ma-check__icon { background: var(--vs-success-bg, #e8efd7); color: var(--vs-success-ink, #3f5a1a); }
.ma-check--gap .ma-check__icon { background: var(--vs-danger-bg, #f7d9c9); color: var(--vs-danger-ink, #7c3416); }
.ma-check--stale .ma-check__icon { background: var(--vs-watch-bg, #fbf2d2); color: var(--vs-watch-ink, #7b6b14); }
.ma-check__main { min-width: 0; }
.ma-check__title {
  margin: 0 0 4px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  line-height: 1.3;
  color: var(--vs-ink, #0e0f0c);
}
.ma-check__sub {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-check__note {
  margin: 8px 0 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  font-style: italic;
  color: var(--vs-ink-subtle, #9a9a8e);
}
.ma-check--gap .ma-check__note { color: var(--vs-danger-ink, #7c3416); font-style: normal; }
.ma-check--stale .ma-check__note { color: var(--vs-watch-ink, #7b6b14); font-style: normal; }

/* People */
.ma-person {
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  gap: 16px;
  position: relative;
}
.ma-person__main { flex: 1; min-width: 0; }
.ma-person .ma-edit { align-self: flex-start; }
.ma-person__avatar {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--vs-ink, #0e0f0c);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  line-height: 1;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.ma-person__name {
  margin: 0 0 6px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-card-title);
  line-height: 1.3;
  color: var(--vs-ink, #0e0f0c);
}
.ma-person__rel {
  margin: 0 0 12px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-person__roles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ma-person__roles li {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  line-height: 1.2;
  letter-spacing: 0.3px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--vs-surface-alt, #f4f0e3);
  color: var(--vs-ink, #0e0f0c);
}

/* Tags / pills */
.ma-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ma-tag--vet { background: rgba(122, 138, 74, 0.18); color: var(--vs-olive-deep, #3f4a2a); }
.ma-tag--on { background: var(--vs-success-bg, #e8efd7); color: var(--vs-success-ink, #3f5a1a); }
.ma-tag--off { background: var(--vs-line, #e4e0d6); color: var(--vs-ink-muted, #5c5e58); }
.ma-pill--ghost {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--vs-line, #e4e0d6);
  background: transparent;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5c5e58);
}

/* Notes / flags */
.ma-note {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ma-note--vet {
  background: rgba(122, 138, 74, 0.10);
  color: var(--vs-olive-deep, #3f4a2a);
  border: 1px solid rgba(122, 138, 74, 0.24);
}
.ma-note__icon {
  font-size: var(--portal-text-label);
  line-height: 1;
  margin-top: 2px;
}
.ma-flag {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--vs-warn-bg, #fceac9);
  color: var(--vs-warn-ink, #7a4f12);
  margin-left: 8px;
}
.ma-muted { color: var(--vs-ink-subtle, #9a9a8e); }

/* Edit / link buttons */
.ma-edit {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  font-weight: 600;
  line-height: 1.2;
  color: var(--vs-olive-deep, #3f4a2a);
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background 160ms ease;
  white-space: nowrap;
}
.ma-edit:hover { background: rgba(122, 138, 74, 0.10); }
.ma-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  font-weight: 600;
  line-height: 1.2;
  color: var(--vs-olive-deep, #3f4a2a);
  text-decoration: none;
  border: none;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;
  background: transparent;
  padding: 0 0 2px;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
}
.ma-link:hover { color: var(--vs-ink, #0e0f0c); }

/* Empty state */
.ma-empty {
  background: var(--vs-surface-alt, #f4f0e3);
  border: 1px dashed var(--vs-line, #e4e0d6);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
}
.ma-empty__title {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5c5e58);
}

/* Money values + masking */
.ma-money {
  font-family: var(--vs-font-body);
  font-feature-settings: "tnum" 1;
}
.is-masked .ma-money,
.is-masked [data-mask-value] {
  letter-spacing: 1px;
  color: var(--vs-ink-subtle, #9a9a8e);
}

/* Tablet ≤ 1024 — collapse the sidebar into a horizontal sticky rail */
@media (max-width: 1024px) {
  .ma__inner { padding: 0 24px; }
  .ma-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px;
  }
  .ma-hero__title { font-size: var(--portal-text-display); }
  .ma-section__title { font-size: var(--portal-text-hero); }
  .ma-networth {
    grid-template-columns: 1fr 1fr;
    padding: 24px 28px;
  }
  .ma-networth__value { font-size: var(--portal-text-display); }
  .ma-networth__trend { grid-column: 1 / -1; }
  .ma-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ma-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ma-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ma-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ma-totals { grid-template-columns: 1fr; }
  /* Below this breakpoint, the page has no left whitespace to host a floating sidebar.
     Switch to a horizontal sticky bar at the top of the content. */
  .ma-rail {
    position: sticky;
    left: auto;
    /* Sit just below the 96px portal nav so it doesn't overlap. */
    top: 96px;
    width: auto;
    max-height: none;
    overflow: visible;
    flex-direction: column;
    gap: 8px;
    margin: 0 -24px 24px;
    padding: 12px 24px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
  }
  .ma-rail__label { display: none; }
  .ma-rail__list {
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 4px;
    margin-bottom: -4px;
  }
  .ma-rail__link {
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 3px solid transparent;
    padding: 8px 14px;
    border-radius: 999px;
  }
  .ma-rail__link--active {
    border-left: 0;
    border-bottom-color: var(--vs-olive, #5a6b3f);
  }
  /* Portal nav (96px) + sticky horizontal rail (~64px) + breathing */
  .ma-anchor { scroll-margin-top: 180px; }
}

/* Mobile ≤ 720 */
@media (max-width: 720px) {
  .ma { padding: 24px 0 64px; }
  .ma__inner { padding: 0 16px; }
  .ma-hero { padding: 24px; }
  .ma-hero__eyebrow { font-size: var(--portal-text-body); }
  .ma-hero__title { font-size: var(--portal-text-hero); letter-spacing: -0.5px; }
  .ma-hero__body { font-size: var(--portal-text-body); }
  .ma-networth {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }
  .ma-networth__value { font-size: var(--portal-text-hero); letter-spacing: -0.5px; }
  .ma-rail {
    margin-left: -16px;
    margin-right: -16px;
    padding: 8px 16px;
    overflow-x: auto;
  }
  .ma-rail__list { flex-wrap: nowrap; }
  .ma-rail__link { white-space: nowrap; }
  .ma-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .ma-section__eyebrow { font-size: var(--portal-text-body); }
  .ma-section__title { font-size: var(--portal-text-section); letter-spacing: -0.5px; }
  .ma-section__intro { font-size: var(--portal-text-body); }
  .ma-card { padding: 20px; }
  .ma-card__title { font-size: var(--portal-text-card-title); }
  .ma-stats { grid-template-columns: 1fr; }
  .ma-stats--3 { grid-template-columns: 1fr; }
  .ma-stats--4 { grid-template-columns: 1fr; }
  .ma-detail-list { grid-template-columns: 1fr; }
  .ma-stats dd { font-size: var(--portal-text-card-title); }
  .ma-vehicle { padding: 20px; }
  .ma-grid--2, .ma-grid--3 { grid-template-columns: 1fr; }
  .ma-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }
  .ma-row__value {
    grid-column: 1 / -1;
    text-align: right;
    font-size: var(--portal-text-card-title);
  }
  .ma-row__value-aside {
    grid-column: 1 / -1;
    align-items: flex-end;
  }
  .ma-row--ins { grid-template-columns: 1fr; }
  .ma-row__aside {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
  }
  .ma-row--ins .ma-edit {
    text-align: left;
    padding-left: 0;
  }
  .ma-ins-grid { grid-template-columns: 1fr; }
  .ma-check {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
  }
  .ma-check .ma-edit {
    grid-column: 1 / -1;
    text-align: left;
    padding-left: 0;
  }
  .ma-totals__value { font-size: var(--portal-text-section); }
  .ma-section-total {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
  }
  .ma-section-total__value { font-size: var(--portal-text-section); }
  .ma-section-total__cadences { width: 100%; }
  .ma-section-total__cadence { flex: 1; min-width: 0; }
  .ma-section-total__cadence dd { font-size: var(--portal-text-section); }
}

/* Mid-viewport: not enough left whitespace for the sidebar with content centered.
   Push the content all the way to the right side and pin the sidebar to the left.
   Applies to .ma__inner (my-assets) and .benefits__inner (all-benefits). */
@media (min-width: 1520px) and (max-width: 1687px) {
  .ma__inner,
  .benefits__inner {
    margin-left: auto;
    margin-right: 24px;
  }
  .ma-rail {
    left: 24px;
  }
}

/* Below 1520px there isn't even enough room to host the sidebar after pushing
   content right. Fall back to a horizontal sticky bar at the top. */
@media (max-width: 1519px) and (min-width: 1025px) {
  .ma-rail {
    position: sticky;
    left: auto;
    /* Sit just below the 96px portal nav so it doesn't overlap. */
    top: 96px;
    width: auto;
    max-height: none;
    overflow: visible;
    margin: 0 -32px 24px;
    padding: 12px 32px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
  }
  .ma-rail__label { display: none; }
  .ma-rail__list {
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
  }
  .ma-rail__link {
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 3px solid transparent;
    padding: 8px 14px;
    border-radius: 999px;
  }
  .ma-rail__link--active {
    border-left: 0;
    border-bottom-color: var(--vs-olive, #5a6b3f);
  }
  .ma-anchor { scroll-margin-top: 180px; }
}

/* =========================================================================
   All Benefits — category sections (used with .ma-rail sidebar)
   ========================================================================= */

.bf-sections {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-top: 16px;
}
.bf-cat { scroll-margin-top: 120px; }
.bf-cat__head {
  margin: 0 0 24px;
  max-width: 720px;
}
.bf-cat__eyebrow {
  margin: 0 0 12px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-olive-deep, #3f4a2a);
}
.bf-cat__title {
  margin: 0 0 12px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--vs-ink, #0e0f0c);
}
.bf-cat__intro {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5c5e58);
}
.bf-cat__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.bf-cat__empty {
  padding: 40px 32px;
  border: 1px dashed var(--vs-line, #e4e0d6);
  border-radius: 16px;
  text-align: center;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted, #5c5e58);
  background: var(--vs-surface-alt, #f4f0e3);
}
.bf-cat__empty p { margin: 0; }
/* Veteran Strong Plus upsell — matches the gold accent palette of /vs-plus.html
   (background gradient + #fac957 highlight) instead of the olive theme. */
.benefits-plus--full {
  margin: 16px 0 0;
  padding: 40px 48px;
  background:
    radial-gradient(120% 200% at 100% 50%, rgba(250, 201, 87, 0.18) 0%, rgba(250, 201, 87, 0) 35%),
    linear-gradient(135deg, #1a1604 0%, #0a0703 100%);
  color: #ffffff;
  border-radius: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.benefits-plus--full .benefits-plus__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
.benefits-plus--full .benefits-plus__title {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-hero);
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: #ffffff;
  max-width: 720px;
}
.benefits-plus--full .benefits-plus__title strong {
  color: #fac957;
  font-weight: 500;
}
.benefits-plus--full .benefits-plus__body {
  margin: 0;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
}
/* CTA — uses the canonical .agero-btn typography tokens (display font, 18px,
   700 weight, uppercase, 0.04em tracking, 18×28 padding, 12px radius) but with
   the gold color of /vs-plus.html. Width auto so the button hugs the label,
   not the panel. */
.benefits-plus--full .benefits-plus__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: auto;
  background: #fac957;
  color: #1a1402;
  border: 0;
  border-radius: 12px;
  padding: 18px 28px;
  margin-top: 8px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease-out;
}
.benefits-plus--full .benefits-plus__btn:hover {
  background: #fdd884;
}

@media (max-width: 1024px) {
  .bf-cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-cat__title { font-size: var(--portal-text-hero); }
}
@media (max-width: 1024px) {
  .benefits-hero { padding: 72px 32px; min-height: 280px; }
  .benefits-hero__title { font-size: var(--portal-text-display); }
}
@media (max-width: 720px) {
  .bf-sections { gap: 40px; }
  .bf-cat__grid { grid-template-columns: 1fr; }
  .bf-cat__title { font-size: var(--portal-text-section); }
  .benefits-plus--full { padding: 32px 24px; }
  .benefits-plus--full .benefits-plus__title { font-size: var(--portal-text-section); }
  .benefits-hero { padding: 56px 24px; min-height: 240px; gap: 16px; border-radius: 16px; }
  .benefits-hero__title { font-size: var(--portal-text-hero); letter-spacing: -0.5px; }
  .benefits-hero__body { font-size: var(--portal-text-label); }
}

/* =========================================================================
   My Assets — Drawer (add/edit forms) + Toast
   ========================================================================= */

.ma-drawer[hidden] { display: none; }
.ma-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}
.ma-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 15, 12, 0.32);
  backdrop-filter: blur(2px);
  animation: ma-drawer-fade 200ms ease-out;
}
@keyframes ma-drawer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ma-drawer-slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.ma-drawer__panel {
  position: relative;
  width: min(560px, 100vw);
  height: 100%;
  background: var(--vs-surface, #ffffff);
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 48px rgba(14, 15, 12, 0.16);
  animation: ma-drawer-slide 280ms cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .ma-drawer__backdrop, .ma-drawer__panel { animation: none; }
}
.ma-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
}
.ma-drawer__eyebrow {
  margin: 0 0 6px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--vs-olive-deep, #3f4a2a);
}
.ma-drawer__title {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--vs-ink, #0e0f0c);
}
.ma-drawer__close {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vs-ink-muted, #5c5e58);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms ease, color 160ms ease;
}
.ma-drawer__close:hover {
  background: var(--vs-surface-alt, #f4f0e3);
  color: var(--vs-ink, #0e0f0c);
}
.ma-drawer__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.ma-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ma-drawer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 32px;
  border-top: 1px solid var(--vs-line, #e4e0d6);
  background: var(--vs-surface-alt, #f4f0e3);
}
.ma-drawer__foot-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
}
.ma-drawer__cancel,
.ma-drawer__save,
.ma-drawer__delete {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.ma-drawer__cancel {
  background: transparent;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  color: var(--vs-ink, #0e0f0c);
}
.ma-drawer__cancel:hover {
  border-color: var(--vs-ink, #0e0f0c);
  background: var(--vs-surface, #ffffff);
}
.ma-drawer__save {
  background: var(--vs-olive, #5a6b3f);
  color: #ffffff;
}
.ma-drawer__save:hover { background: var(--vs-olive-deep, #3f4a2a); }
.ma-drawer__delete {
  background: transparent;
  border: 1.5px solid var(--vs-danger-bg, #f7d9c9);
  color: var(--vs-danger-ink, #7c3416);
}
.ma-drawer__delete:hover {
  background: var(--vs-danger-bg, #f7d9c9);
  border-color: var(--vs-danger-ink, #7c3416);
}
.ma-drawer__delete[hidden] { display: none; }

/* Form fields */
.ma-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ma-field--row {
  flex-direction: row;
  gap: 16px;
  align-items: flex-end;
}
.ma-field--row > .ma-field { flex: 1; }
.ma-field__label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  letter-spacing: 0.4px;
  color: var(--vs-ink, #0e0f0c);
}
.ma-field__hint {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.4;
  color: var(--vs-ink-muted, #5c5e58);
}
.ma-field__required {
  color: var(--vs-danger-ink, #7c3416);
  margin-left: 2px;
}
.ma-field__input,
.ma-field__select,
.ma-field__textarea {
  appearance: none;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: var(--vs-ink, #0e0f0c);
  background: var(--vs-surface, #ffffff);
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  padding: 12px 16px;
  width: 100%;
  font-feature-settings: "tnum" 1;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ma-field__input:focus,
.ma-field__select:focus,
.ma-field__textarea:focus {
  outline: none;
  border-color: var(--vs-olive, #5a6b3f);
  box-shadow: 0 0 0 3px rgba(122, 138, 74, 0.18);
}
.ma-field__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none'><path d='M1 1 L6 6 L11 1' stroke='%235c5e58' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 7px;
  padding-right: 44px;
}
.ma-field__textarea {
  resize: vertical;
  min-height: 80px;
}
.ma-field__prefix-wrap {
  position: relative;
}
.ma-field__prefix {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  font-weight: 500;
  color: var(--vs-ink-muted, #5c5e58);
  pointer-events: none;
}
.ma-field__prefix-wrap .ma-field__input { padding-left: 32px; }
.ma-field__suffix-wrap { position: relative; }
.ma-field__suffix {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  font-weight: 500;
  color: var(--vs-ink-muted, #5c5e58);
  pointer-events: none;
}
.ma-field__suffix-wrap .ma-field__input { padding-right: 36px; }
.ma-field__check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  color: var(--vs-ink, #0e0f0c);
}
.ma-field__check input {
  width: 20px;
  height: 20px;
  accent-color: var(--vs-olive, #5a6b3f);
}
.ma-field__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

/* Toast */
.ma-toast[hidden] { display: none; }
.ma-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--vs-ink, #0e0f0c);
  color: #ffffff;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  font-weight: 500;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(14, 15, 12, 0.24);
  z-index: 200;
  animation: ma-toast-in 240ms cubic-bezier(0.2, 0, 0, 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
@keyframes ma-toast-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.ma-toast__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--vs-olive, #5a6b3f);
}
@media (max-width: 720px) {
  .ma-drawer__panel { width: 100vw; }
  .ma-drawer__head { padding: 20px 20px 16px; }
  .ma-drawer__body { padding: 20px; }
  .ma-drawer__foot { padding: 16px 20px; flex-wrap: wrap; }
  .ma-drawer__title { font-size: var(--portal-text-section); }
  .ma-field--row { flex-direction: column; gap: 20px; }
}

/* =========================================================================
   /portal-activated.html — post-onboarding dashboard
   3-col concierge board · credit + net-worth · recommendations · activated benefits
   ========================================================================= */

/* ---- Section 1: Concierge board (3 columns) ---- */
.pact-board {
  margin: 32px 0;
}
.pact-board__head {
  margin: 0 0 16px;
}
.pact-board__title {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink, #0e0f0c);
}
.pact-board__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: 24px;
}
.pact-board__col {
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

/* Concierge chat (col 1) */
.pact-chat__head {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}
.pact-chat__avatar {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.pact-chat__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pact-chat__online {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: #2f7a3d;
  border: 2.5px solid #ffffff;
  border-radius: 999px;
}
.pact-chat__id { min-width: 0; }
.pact-chat__name {
  margin: 0 0 4px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  line-height: 1.2;
  color: var(--vs-ink, #0e0f0c);
}
.pact-chat__phone {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  line-height: 1.2;
  color: var(--vs-ink-muted, #5c5e58);
}
.pact-chat__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.pact-chat__btn {
  appearance: none;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 10px 12px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.2;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.pact-chat__btn--primary {
  background: var(--vs-olive, #5a6b3f);
  color: #ffffff;
}
.pact-chat__btn--primary:hover { background: var(--vs-olive-deep, #3f4a2a); }
.pact-chat__btn--ghost {
  background: transparent;
  color: var(--vs-ink, #0e0f0c);
  border-color: var(--vs-line, #e4e0d6);
}
.pact-chat__btn--ghost:hover { border-color: var(--vs-ink, #0e0f0c); }
.pact-chat__bubble {
  flex: 1;
  background: var(--vs-surface-alt, #f4f0e3);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.pact-chat__bubble p {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label); /* portal-text-label */
  line-height: 1.4;
  color: var(--vs-ink, #0e0f0c);
}
.pact-chat__compose {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pact-chat__input {
  flex: 1;
  appearance: none;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 999px;
  padding: 12px 18px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  background: var(--vs-surface, #ffffff);
  color: var(--vs-ink, #0e0f0c);
  transition: border-color 160ms ease;
}
.pact-chat__input:focus {
  outline: none;
  border-color: var(--vs-olive, #5a6b3f);
}
.pact-chat__send {
  appearance: none;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--vs-olive, #5a6b3f);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms ease;
}
.pact-chat__send:hover { background: var(--vs-olive-deep, #3f4a2a); }

/* Last meeting summary (col 2) */
.pact-meeting__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
  margin-bottom: 4px;
}
.pact-meeting__title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.2;
  color: var(--vs-ink, #0e0f0c);
}
.pact-meeting__icon {
  display: inline-flex;
  align-items: center;
  color: var(--vs-olive-deep, #3f4a2a);
}
.pact-meeting__date {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.5px;
  color: var(--vs-ink-muted, #5c5e58);
}
.pact-meeting__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.pact-meeting__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
}
.pact-meeting__item:last-child { border-bottom: 0; }
.pact-meeting__item-text {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: var(--vs-ink, #0e0f0c);
}
.pact-meeting__plus {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--vs-olive, #5a6b3f);
  cursor: pointer;
  padding: 4px;
  border-radius: 999px;
  transition: background 160ms ease;
}
.pact-meeting__plus:hover { background: rgba(122, 138, 74, 0.10); }

/* Action items (col 3) */
.pact-actions__head {
  display: flex;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
  margin-bottom: 16px;
}
.pact-actions__title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.2;
  color: var(--vs-ink, #0e0f0c);
}
.pact-actions__icon {
  display: inline-flex;
  align-items: center;
  color: var(--vs-olive-deep, #3f4a2a);
}
.pact-actions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pact-actions__item {
  background: var(--vs-surface-alt, #f4f0e3);
  border-radius: 14px;
  padding: 16px 20px;
}
.pact-actions__item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.pact-actions__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  line-height: 1.3;
  color: var(--vs-ink, #0e0f0c);
}
.pact-actions__btn {
  appearance: none;
  border: 1.5px solid var(--vs-ink, #0e0f0c);
  background: var(--vs-ink, #0e0f0c);
  color: #ffffff;
  border-radius: 999px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease;
}
.pact-actions__btn:hover { background: var(--vs-olive-deep, #3f4a2a); border-color: var(--vs-olive-deep, #3f4a2a); }
.pact-actions__meta {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5c5e58);
}

/* ---- Section 2: Credit + net worth summary ---- */
.pact-summary {
  margin: 40px 0;
}
.pact-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
}
.pact-summary__title {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink, #0e0f0c);
}
.pact-summary__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-olive-deep, #3f4a2a);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}
.pact-summary__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 16px;
}
.pact-summary__score {
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 20px;
  padding: 28px 32px;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pact-summary__score-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 4px;
}
.pact-summary__score-num {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-num-feature);
  line-height: 1;
  letter-spacing: -3px;
  color: var(--vs-olive-deep, #3f4a2a);
  font-feature-settings: "tnum" 1;
}
.pact-summary__score-delta {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-success-ink, #3f5a1a);
}
.pact-summary__score-band {
  margin: 0 0 24px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-body);
  color: var(--vs-ink-muted, #5c5e58);
}
.pact-summary__rail {
  position: relative;
}
.pact-summary__rail-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #c98c5e 0%,
    #d6a85e 25%,
    #c9b14a 50%,
    #aab87a 75%,
    #5a6b3f 100%
  );
  position: relative;
}
.pact-summary__rail-thumb {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  background: var(--vs-ink, #0e0f0c);
  border: 3px solid #ffffff;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(14, 15, 12, 0.24);
}
.pact-summary__rail-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.3px;
  color: var(--vs-ink-muted, #5c5e58);
}

.pact-stat {
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 20px;
  padding: 24px 28px;
}
.pact-stat__label {
  margin: 0 0 6px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5c5e58);
}
.pact-stat__value {
  margin: 0 0 6px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
}
.pact-stat__sub {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-caption);
  line-height: 1.4;
  color: var(--vs-ink-muted, #5c5e58);
}

/* ---- Section 3: Recommended for You ---- */
.pact-recs {
  margin: 40px 0;
}
.pact-recs__intro {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 20px;
}
.pact-recs__photo {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  object-fit: cover;
}
.pact-recs__eyebrow {
  margin: 0 0 4px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-eyebrow);
  letter-spacing: 0.5px;
  color: var(--vs-ink-muted, #5c5e58);
}
.pact-recs__title {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink, #0e0f0c);
}
.pact-recs__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.pact-rec {
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.pact-rec__eyebrow {
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-olive-deep, #3f4a2a);
}
.pact-rec__amount-label {
  margin: 0 0 4px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.5px;
  color: var(--vs-ink-muted, #5c5e58);
}
.pact-rec__amount {
  margin: 0 0 16px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-display);
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--vs-ink, #0e0f0c);
}
.pact-rec__copy {
  margin: 0 0 20px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5c5e58);
  flex: 1;
}
.pact-rec__copy strong {
  color: var(--vs-ink, #0e0f0c);
  font-weight: 600;
}
.pact-rec__partner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--vs-line, #e4e0d6);
  margin-bottom: 16px;
}
.pact-rec__partner-label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.3px;
  color: var(--vs-ink-muted, #5c5e58);
}
.pact-rec__partner-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
}
.pact-rec__btn {
  align-self: flex-start;
  background: var(--vs-olive, #5a6b3f);
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  text-decoration: none;
  transition: background 160ms ease;
}
.pact-rec__btn:hover { background: var(--vs-olive-deep, #3f4a2a); }

/* ---- Section 4: Activated benefits ---- */
.pact-active {
  margin: 40px 0;
}
.pact-active__head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 20px;
}
.pact-active__title {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink, #0e0f0c);
  flex-shrink: 0;
}
.pact-active__rule {
  flex: 1;
  height: 1px;
  background: var(--vs-line, #e4e0d6);
}
.pact-active__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-olive-deep, #3f4a2a);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  flex-shrink: 0;
}
.pact-active__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.pact-active-card {
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 20px;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 24px;
  align-items: center;
}
.pact-active-card__visual {
  background: #b51a23;
  border-radius: 16px;
  height: 200px;
  display: grid;
  place-items: center;
  padding: 32px;
}
.pact-active-card__visual img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pact-active-card__visual--fox { background: #044193; }
.pact-active-card__title {
  margin: 0 0 16px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-card-title);
  line-height: 1.3;
  color: var(--vs-ink, #0e0f0c);
}
.pact-active-card__meta {
  margin: 0 0 20px;
  padding-top: 16px;
  border-top: 1px solid var(--vs-line, #e4e0d6);
  display: flex;
  flex-direction: column;
}
.pact-active-card__meta > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
}
.pact-active-card__meta > div:last-child { border-bottom: 0; }
.pact-active-card__meta dt {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.3px;
  color: var(--vs-ink-muted, #5c5e58);
}
.pact-active-card__meta dt svg { color: var(--vs-olive-deep, #3f4a2a); flex-shrink: 0; }
.pact-active-card__meta dd {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink, #0e0f0c);
}
.pact-active-card__btn {
  display: inline-flex;
  align-self: flex-start;
  background: var(--vs-ink, #0e0f0c);
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  text-decoration: none;
  transition: background 160ms ease;
}
.pact-active-card__btn:hover { background: var(--vs-olive-deep, #3f4a2a); }

/* ---- Section 5: More FREE Benefits ---- */
.pact-more {
  margin: 40px 0;
}
.pact-more__head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 20px;
}
.pact-more__title {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  color: var(--vs-ink, #0e0f0c);
  flex-shrink: 0;
}
.pact-more__rule {
  flex: 1;
  height: 1px;
  background: var(--vs-line, #e4e0d6);
}
.pact-more__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-olive-deep, #3f4a2a);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  flex-shrink: 0;
}
.pact-more__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.pact-more-card {
  background: var(--vs-surface, #ffffff);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pact-more-card__visual {
  position: relative;
  height: 280px;
  display: grid;
  place-items: center;
}
.pact-more-card__visual > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pact-more-card__logo {
  position: relative;
  max-width: 200px;
  max-height: 80px;
  object-fit: contain;
}
.pact-more-card__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pact-more-card__title {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  line-height: 1.3;
  color: var(--vs-ink, #0e0f0c);
}
.pact-more-card__copy {
  margin: 0 0 8px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5c5e58);
}
.pact-more-card__btn {
  align-self: flex-start;
  background: var(--vs-ink, #0e0f0c);
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  text-decoration: none;
  transition: background 160ms ease;
}
.pact-more-card__btn:hover { background: var(--vs-olive-deep, #3f4a2a); }

/* ---- Section 8: VS Plus upsell ---- */
.pact-plus {
  margin: 40px 0 0;
  padding: 64px 56px;
  background:
    radial-gradient(120% 200% at 100% 50%, rgba(122, 138, 74, 0.22) 0%, rgba(122, 138, 74, 0) 35%),
    linear-gradient(135deg, #1a2110 0%, #0a0d05 100%);
  border-radius: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.pact-plus__eyebrow {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.pact-plus__title {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-display);
  line-height: 1.1;
  letter-spacing: -1px;
  color: #ffffff;
  max-width: 800px;
}
.pact-plus__title strong {
  color: #aab87a;
  font-weight: 500;
}
.pact-plus__body {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 720px;
}
.pact-plus__btn {
  display: inline-block;
  margin-top: 12px;
  background: var(--vs-olive, #5a6b3f);
  color: #ffffff;
  padding: 16px 40px;
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  text-decoration: none;
  transition: background 160ms ease;
}
.pact-plus__btn:hover { background: var(--vs-olive-deep, #3f4a2a); }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .pact-board__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pact-summary__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .pact-summary__score { grid-column: 1 / -1; grid-row: auto; }
  .pact-recs__grid,
  .pact-active__grid,
  .pact-more__grid { grid-template-columns: 1fr; }
  .pact-active-card { grid-template-columns: 1fr; }
  .pact-active-card__visual { height: 160px; padding: 24px; }
}
@media (max-width: 720px) {
  .pact-board__col { padding: 20px; }
  .pact-summary__grid { grid-template-columns: 1fr; }
  .pact-summary__score-num { font-size: var(--portal-text-display); letter-spacing: -2px; }
  .pact-stat__value { font-size: var(--portal-text-hero); }
  .pact-rec__amount { font-size: var(--portal-text-display); }
  .pact-plus { padding: 48px 24px; border-radius: 16px; }
  .pact-plus__title { font-size: var(--portal-text-hero); }
}

/* =========================================================================
   Support page — Help & Support hero, concierge card, video guides, FAQs
   ========================================================================= */

.vs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.support-body {
  background: linear-gradient(180deg, rgba(87, 96, 56, 0.07) 0%, rgba(255, 255, 255, 0) 320px), #ffffff;
}

.support {
  padding: 32px 0 80px;
}
.support__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Hero */
.support-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
  padding: 24px 0 8px;
}
.support-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 100px);
  line-height: 1;
  letter-spacing: -1px;
  color: var(--vs-ink, #0e0f0c);
  margin: 0;
}
.support-hero__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: var(--vs-ink, #0e0f0c);
  max-width: 880px;
  margin: 0;
}
.support-hero__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
  margin-top: 4px;
}
.support-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-section);
  color: var(--vs-ink, #0e0f0c);
  text-decoration: none;
  transition: color 160ms ease;
}
.support-hero__link:hover { color: var(--vs-olive-deep, #3f4828); }
.support-hero__link-icon {
  display: inline-flex;
  color: var(--vs-olive-deep, #3f4828);
}

/* Concierge + Message card */
.support-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  background: #e6e6e0;
  border-radius: 20px;
  padding: 20px;
  overflow: hidden;
  align-items: stretch;
}
.support-card__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
}
.support-card__panel--photo {
  overflow: hidden;
  min-height: 380px;
  justify-content: flex-end;
  padding: 32px;
  isolation: isolate;
}
.support-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  z-index: 0;
}
.support-card__panel--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(360deg, rgba(0, 0, 0, 0.85) 12%, rgba(0, 0, 0, 0) 60%);
  border-radius: 12px;
  z-index: 1;
}
.support-card__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #ffffff;
}
.support-card__panel--form {
  padding: 36px 40px;
  gap: 32px;
  justify-content: flex-start;
}
.support-card__heading {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-display);
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0;
}
.support-card__heading--dark { color: var(--vs-ink, #0e0f0c); }
.support-card__sub {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-body);
  line-height: 1.4;
  margin: 0;
  max-width: 420px;
}

/* Message form */
.support-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.support-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 22px 26px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-body);
  color: var(--vs-ink, #0e0f0c);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.support-input:focus {
  outline: none;
  border-color: var(--vs-olive, #576038);
  box-shadow: 0 0 0 3px rgba(87, 96, 56, 0.18);
}
.support-input--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 10' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M2 2 L10 9 L18 2' stroke='%23576038' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 26px center;
  background-size: 18px 9px;
  padding-right: 60px;
  cursor: pointer;
}
.support-input--textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.4;
}
.support-input::placeholder { color: rgba(14, 15, 12, 0.4); }
.support-submit {
  appearance: none;
  background: var(--vs-olive, #576038);
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  padding: 22px 32px;
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-card-title);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease;
}
.support-submit:hover { background: var(--vs-olive-deep, #3f4828); }
.support-form__success {
  margin: 0;
  padding: 12px 16px;
  background: rgba(87, 96, 56, 0.1);
  border: 1px solid rgba(87, 96, 56, 0.3);
  border-radius: 10px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-olive-deep, #3f4828);
}

/* Section heading shared by Video Guides + FAQs */
.support-section-head {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px 0;
}
.support-section-head__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-hero);
  line-height: 1.2;
  margin: 0;
  color: var(--vs-ink, #0e0f0c);
  white-space: nowrap;
}
.support-section-head__rule {
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
}

/* Video Guides carousel */
.support-videos {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.support-videos__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.support-videos__viewport::-webkit-scrollbar { display: none; }
.support-videos__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
}
.support-video {
  scroll-snap-align: start;
  height: 340px;
}
.support-video__btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  display: block;
  text-align: left;
}
.support-video__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.support-video__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.85) 100%);
  z-index: 1;
}
.support-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: transform 200ms ease;
}
.support-video__btn:hover .support-video__play { transform: translate(-50%, -50%) scale(1.06); }
.support-video__meta {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #ffffff;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-body);
  line-height: 1.3;
}
.support-video__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.support-video__time {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
}

.support-videos__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}
.support-videos__dot {
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 180ms ease, width 180ms ease;
  padding: 0;
}
.support-videos__dot--active {
  background: var(--vs-olive, #576038);
  width: 28px;
  border-radius: 999px;
}

/* FAQs */
.support-faqs {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.support-faqs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
}
.support-faq {
  background: rgba(230, 230, 224, 0.4);
  border-radius: 12px;
  padding: 0;
}
.support-faq[open] { background: rgba(230, 230, 224, 0.7); }
.support-faq__head {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  cursor: pointer;
  user-select: none;
}
.support-faq__head::-webkit-details-marker { display: none; }
.support-faq__q {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-section);
  letter-spacing: -0.5px;
  color: var(--vs-ink, #0e0f0c);
  line-height: 1.25;
  flex: 1;
}
.support-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--vs-olive-deep, #3f4828);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease, background 200ms ease;
}
.support-faq__icon::before,
.support-faq__icon::after {
  content: "";
  position: absolute;
  background: var(--vs-olive-deep, #3f4828);
  border-radius: 1px;
}
.support-faq__icon::before { width: 14px; height: 2px; }
.support-faq__icon::after  { width: 2px;  height: 14px; transition: opacity 180ms ease; }
.support-faq[open] .support-faq__icon { transform: rotate(180deg); }
.support-faq[open] .support-faq__icon::after { opacity: 0; }
.support-faq__a {
  margin: 0;
  padding: 0 28px 24px 28px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink, #0e0f0c);
}
.support-faq__a a { color: var(--vs-olive-deep, #3f4828); }

/* Responsive */
@media (max-width: 1023px) {
  .support-card { grid-template-columns: 1fr; gap: 16px; }
  .support-card__panel--photo { min-height: 280px; }
  .support-card__panel--form { padding: 24px 8px 8px; }
  .support-card__heading { font-size: var(--portal-text-hero); }
  .support-hero__title { font-size: clamp(48px, 11vw, 80px); }
  .support-hero__link { font-size: var(--portal-text-card-title); }
  .support-videos__track { grid-auto-columns: calc((100% - 20px) / 2); }
  .support-faqs__grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .support__inner { padding: 0 20px; gap: 40px; }
  .support-hero__links { gap: 28px; }
  .support-hero__link { font-size: var(--portal-text-body); }
  .support-card__panel--form { padding: 20px 4px 4px; }
  .support-card__heading { font-size: var(--portal-text-hero); }
  .support-section-head { gap: 20px; }
  .support-section-head__title { font-size: var(--portal-text-hero); }
  .support-videos__track { grid-auto-columns: calc(100% - 12px); }
  .support-video { height: 260px; }
  .support-video__meta { font-size: var(--portal-text-label); bottom: 16px; left: 16px; right: 16px; }
  .support-faq__head { padding: 18px 20px; }
  .support-faq__q { font-size: var(--portal-text-body); }
  .support-faq__a { padding: 0 20px 20px; font-size: var(--portal-text-label); }
}

/* =========================================================================
   Referral Program page
   ========================================================================= */

.referral-body {
  background: linear-gradient(180deg, rgba(87, 96, 56, 0.07) 0%, rgba(255, 255, 255, 0) 320px), #ffffff;
}

.ref {
  padding: 32px 0 80px;
  position: relative;
}
.ref__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  position: relative;
}

/* Hero */
.ref-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  padding: 16px 0 16px;
  max-width: 880px;
  margin: 0 auto;
}
.ref-hero__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vs-ink, #0e0f0c);
  margin: 0;
}
.ref-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: clamp(40px, 6.6vw, 72px);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--vs-ink, #0e0f0c);
  margin: 0;
}
.ref-hero__title strong { font-weight: 500; }
.ref-hero__body {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-body);
  line-height: 1.45;
  color: var(--vs-ink, #0e0f0c);
  margin: 0;
}

/* Primary CTA — used in hero + as copy-link button */
.ref-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 32px;
  background: var(--vs-olive, #576038);
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
  text-decoration: none;
}
.ref-cta:hover { background: var(--vs-olive-deep, #3f4828); }
.ref-cta:active { transform: scale(0.985); }
.ref-cta__icon { display: inline-flex; }

/* How it works */
.ref-how {
  background: rgba(230, 230, 224, 0.32);
  border-radius: 24px;
  padding: 64px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
.ref-how__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink, #0e0f0c);
  margin: 0;
  text-align: center;
}
.ref-how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  width: 100%;
  max-width: 1080px;
}
.ref-how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.ref-how-step__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: var(--vs-ink, #0e0f0c);
}
.ref-how-step__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.15;
  margin: 0;
  color: var(--vs-ink, #0e0f0c);
}
.ref-how-step__body {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.4;
  margin: 0;
  color: var(--vs-ink, #0e0f0c);
}

/* Start Referring Today */
.ref-start {
  position: relative;
  background: rgba(230, 230, 224, 0.45);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: stretch;
  min-height: 520px;
}
.ref-start__media {
  position: relative;
  overflow: hidden;
}
.ref-start__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}
.ref-start__copy {
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.ref-start__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--vs-ink, #0e0f0c);
  margin: 0;
  text-align: center;
}
.ref-start__title strong { font-weight: 500; }
.ref-start__sub {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: var(--vs-ink, #0e0f0c);
  margin: 0;
  text-align: center;
}

/* Invite-link block */
.ref-link-block { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.ref-link-block__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-card-title);
  margin: 0;
  color: var(--vs-ink, #0e0f0c);
  text-align: center;
}
.ref-link-form {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
  max-width: 540px;
}
.ref-link-form__input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 16px 22px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  color: var(--vs-ink, #0e0f0c);
  min-width: 0;
}
.ref-link-form__input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(87, 96, 56, 0.18);
}
.ref-link-form__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--vs-olive, #576038);
  color: #ffffff;
  border: 0;
  padding: 14px 22px;
  border-radius: 0;
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease;
  flex-shrink: 0;
}
.ref-link-form__btn:hover { background: var(--vs-olive-deep, #3f4828); }

/* Share directly */
.ref-share-block { display: flex; flex-direction: column; gap: 22px; align-items: center; }
.ref-share-block__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-card-title);
  margin: 0;
  color: var(--vs-ink, #0e0f0c);
  text-align: center;
}
.ref-share-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}
.ref-share-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  width: 124px;
  color: var(--vs-ink, #0e0f0c);
  transition: transform 160ms ease;
}
.ref-share-btn:hover { transform: translateY(-2px); }
.ref-share-btn__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--vs-olive, #576038);
  transition: background 160ms ease;
}
.ref-share-btn:hover .ref-share-btn__icon { background: var(--vs-olive-deep, #3f4828); }
.ref-share-btn__label {
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  color: var(--vs-ink-muted, #5c5e58);
}

/* Tracker + Premium row */
.ref-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.ref-tracker {
  background: var(--vs-surface-alt, #e6e6e0);
  border-radius: 20px;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
  align-items: center;
}
.ref-tracker__head { display: flex; flex-direction: column; gap: 12px; }
.ref-tracker__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14, 15, 12, 0.6);
  margin: 0;
}
.ref-tracker__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-hero);
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--vs-ink, #0e0f0c);
  margin: 0;
}
.ref-tracker__badges {
  display: flex;
  gap: 24px;
  margin-top: 8px;
}
.ref-tracker__badge {
  width: 116px;
  height: 96px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.ref-tracker__badge[data-state="done"] {
  background: var(--vs-olive, #576038);
  color: #ffffff;
}
.ref-tracker__badge[data-state="pending"] {
  background: transparent;
  border: 2px solid rgba(14, 15, 12, 0.32);
  color: rgba(14, 15, 12, 0.4);
}
.ref-tracker__count {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-label);
  letter-spacing: -0.4px;
  color: var(--vs-ink, #0e0f0c);
  margin: 0;
}
.ref-tracker__message {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.35;
  letter-spacing: -0.4px;
  color: var(--vs-ink, #0e0f0c);
  margin: 4px 0 0;
}
.ref-tracker__message strong { font-weight: 600; }

/* Premium card */
.ref-premium {
  position: relative;
  background:
    radial-gradient(680px 360px at -10% -10%, rgba(87, 96, 56, 0.55) 0%, rgba(87, 96, 56, 0) 60%),
    #0e0f0c;
  border-radius: 20px;
  padding: 44px 48px;
  color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ref-premium__plus {
  position: absolute;
  top: 18px;
  right: 28px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  /* Decorative graphic glyph — uses the largest token (num-display). */
  font-size: var(--portal-num-display);
  line-height: 1;
  color: #fac957;
  pointer-events: none;
  user-select: none;
}
.ref-premium__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  text-align: center;
}
.ref-premium__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-hero);
  line-height: 1.15;
  letter-spacing: -1px;
  margin: 0;
  text-align: center;
  color: #ffffff;
}
.ref-premium__title strong {
  font-weight: 500;
  color: #fac957;
}
.ref-premium__body {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.4;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
}
.ref-premium__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ref-premium__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: #ffffff;
}
.ref-premium__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
}

/* Toast */
.ref-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--vs-olive-deep, #3f4828);
  color: #ffffff;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  animation: ref-toast-rise 200ms ease-out;
}
.ref-toast[hidden] { display: none; }
@keyframes ref-toast-rise {
  from { transform: translate(-50%, 12px); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}

/* Responsive */
@media (max-width: 1023px) {
  .ref-how { padding: 48px 24px; gap: 40px; }
  .ref-how__steps { gap: 36px; }
  .ref-start { grid-template-columns: 1fr; min-height: 0; }
  .ref-start__media { min-height: 240px; }
  .ref-start__copy { padding: 32px 28px; }
  .ref-grid { grid-template-columns: 1fr; gap: 20px; }
  .ref-tracker { padding: 36px 28px; }
}
@media (max-width: 640px) {
  .ref__inner { padding: 0 20px; gap: 40px; }
  .ref-how__steps { grid-template-columns: 1fr; gap: 32px; }
  .ref-link-form { flex-direction: column; align-items: stretch; }
  .ref-link-form__input { padding: 16px 18px; }
  .ref-link-form__btn { padding: 14px 18px; justify-content: center; }
  .ref-share-list { gap: 20px; }
  .ref-share-btn { width: 100px; }
  .ref-share-btn__icon { width: 48px; height: 48px; }
  .ref-share-btn__label { font-size: var(--portal-text-caption); }
  .ref-tracker__badges { gap: 14px; }
  .ref-tracker__badge { width: 92px; height: 80px; }
  .ref-tracker__message { font-size: var(--portal-text-label); }
  .ref-premium { padding: 32px 24px; }
  .ref-premium__plus { font-size: var(--portal-text-display); top: 12px; right: 18px; }
}

/* =========================================================================
   Benefit-page visual blocks (newday-home redesign)
   ========================================================================= */

/* Hero highlight boxes — 4 equal-width tiles in one row */
.bp-hero__pills {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
/* Crisp stat tiles — solid dark panels, no glass blur, and no hover
   affordance (they are not interactive). */
.bp-hero__pills li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  background: rgba(10, 12, 7, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  color: #ffffff;
  text-align: center;
  min-width: 0;
}
.bp-hero__pill-dot { display: none; }
.bp-hero__pill-value {
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-num-stat);
  line-height: 1;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}
/* Dashboard stat-tile label language: sentence case, calm. */
.bp-hero__pill-label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.85);
}

/* Section heading shared by all new bp-* blocks */
.bp-section-head {
  margin-bottom: 24px;
}
.bp-section-head__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
  color: var(--vs-ink, #0e0f0c);
}
.bp-section-head__sub {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  line-height: 1.4;
  margin: 0;
  color: var(--vs-ink-muted, #5c5e58);
}

/* Stat strip */
.bp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 0 12px;
}
.bp-stat {
  background: var(--vs-surface-alt, #f4f0e3);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bp-stat__value {
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-display);
  line-height: 1;
  letter-spacing: -1px;
  margin: 0;
  color: var(--vs-olive-deep, #3f4828);
  font-feature-settings: "tnum" 1;
}
.bp-stat__suffix {
  font-size: var(--portal-text-section);
  letter-spacing: 0;
  color: var(--vs-olive, #576038);
  margin-left: 4px;
}
.bp-stat__label {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.02em;
  color: var(--vs-ink-muted, #5c5e58);
  text-transform: uppercase;
}

/* Feature grid (2x3) */
.bp-features {
  background: transparent;
  padding: 0;
  margin: 0;
}
.bp-features__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* Inside the 2-col rail layout the main column is ~700px — three
   feature columns crush the copy. Two is the floor for readability. */
.bp-grid .bp-features__grid {
  grid-template-columns: repeat(2, 1fr);
}
/* Renders the .portal-quick-tile--feature spec (§7): 56px olive-tint
   icon coin, card-title/card-body type — one feature-card language. */
.bp-feature {
  background: var(--portal-surface);
  border: 1px solid var(--portal-hairline);
  border-radius: 14px;
  padding: var(--portal-space-10);
  display: flex;
  flex-direction: column;
  gap: var(--portal-space-5);
  transition: border-color var(--portal-dur-base) var(--portal-ease-out), transform var(--portal-dur-base) var(--portal-ease-out);
}
.bp-feature:hover {
  border-color: var(--portal-hairline-strong);
  transform: translateY(-1px);
}
.bp-feature__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--portal-radius-card-lg);
  background: var(--portal-olive-tint);
  color: var(--portal-olive);
}
.bp-feature__icon svg {
  width: 28px;
  height: 28px;
}
.bp-feature__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-card-title);
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin: 0;
  color: var(--portal-ink);
}
.bp-feature__body {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-card-body);
  line-height: 1.55;
  margin: 0;
  color: var(--portal-ink-muted);
}

/* Flow / How it works — big-number steps with title only */
/* Renders the .portal-steps spec (§17): open card-less timeline with
   olive number coins + hairline connector. Replaced the near-black
   glow boxes (Sprint 9j). */
.bp-flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--portal-space-8);
}
.bp-flow-step {
  position: relative;
  background: transparent;
  color: inherit;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--portal-space-5);
  min-height: 0;
  overflow: visible;
}
.bp-flow-step::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 60px;
  right: calc(-1 * var(--portal-space-6));
  height: 1px;
  background: var(--portal-hairline-strong);
}
.bp-flow-step:last-child::before { display: none; }
.bp-flow-step__num {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--portal-olive);
  color: #ffffff;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-num-data);
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bp-flow-step__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-card-title);
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin: 0;
  color: var(--portal-ink);
}

.bp-flow-step__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--portal-text-body);
  line-height: 1.55;
  color: var(--portal-ink-secondary);
  margin: 0;
}

/* Comparison — single unified panel with VS divider */
.bp-compare-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--vs-line, #e4e0d6);
  background: var(--vs-surface, #ffffff);
  isolation: isolate;
}
.bp-compare-panel__side {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 36px 40px;
  background: var(--vs-surface-alt, #f4f0e3);
}
/* Winning side — light olive tint (matches .nd-letter-savings on
   /newday-cashout) so it reads as a calm benefit highlight and does
   NOT compete with the dark-olive primary CTA. */
.bp-compare-panel__side--win {
  background: #e8eed7;
  color: var(--vs-olive);
}
.bp-compare-panel__side > * { position: relative; z-index: 1; }
.bp-compare-panel__vs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  color: var(--vs-ink, #0e0f0c);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.bp-compare-panel__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
  color: var(--vs-ink-muted, #5c5e58);
}
.bp-compare-panel__side--win .bp-compare-panel__eyebrow { color: var(--vs-olive); }
.bp-compare-panel__value {
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-num-headline);
  line-height: 1;
  letter-spacing: -2px;
  margin: 8px 0 0;
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
}
.bp-compare-panel__side--win .bp-compare-panel__value { color: var(--vs-olive); }
.bp-compare-panel__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 4px 0 0;
  color: var(--vs-ink-muted, #5c5e58);
}
.bp-compare-panel__side--win .bp-compare-panel__label { color: var(--vs-olive); opacity: 0.78; }
.bp-compare-panel__note {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  line-height: 1.45;
  margin: 14px 0 0;
  color: var(--vs-ink-muted, #5c5e58);
}
.bp-compare-panel__side--win .bp-compare-panel__note { color: var(--vs-olive); opacity: 0.78; }

/* Trustpilot section */
.bp-trustpilot {
  background: var(--vs-surface-alt, #f4f0e3);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 20px;
  padding: 28px 32px;
}
.bp-trustpilot .trustpilot-widget {
  min-height: 140px;
  display: block;
}
.bp-trustpilot__fallback {
  margin: 0;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  color: var(--vs-olive-deep, #3f4828);
}
.bp-trustpilot__fallback a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* Eligibility chips */
.bp-eligibility__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bp-elig-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  background: var(--vs-surface, #ffffff);
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink, #0e0f0c);
}
.bp-elig-chip__check {
  display: inline-flex;
  color: var(--vs-olive, #576038);
}

/* Social proof */
.bp-social {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  background: var(--vs-surface-alt, #f4f0e3);
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  padding: 24px 28px;
}
.bp-social__score {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 28px;
  border-right: 1px solid var(--vs-line, #e4e0d6);
}
.bp-social__star {
  display: inline-flex;
  color: #fac957;
  margin: 0;
}
.bp-social__rating {
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-section);
  line-height: 1;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--vs-ink, #0e0f0c);
}
.bp-social__meta {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  margin: 4px 0 0;
  color: var(--vs-ink-muted, #5c5e58);
}
.bp-social__quote {
  font-family: var(--vs-font-display, "Stratum No2", serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--portal-text-body);
  line-height: 1.35;
  margin: 0;
  color: var(--vs-ink, #0e0f0c);
}
.bp-social__quote cite {
  display: block;
  font-style: normal;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  margin-top: 8px;
  color: var(--vs-ink-muted, #5c5e58);
}

/* Responsive */
@media (max-width: 1023px) {
  .bp-features__grid { grid-template-columns: repeat(2, 1fr); }
  .bp-flow__steps { grid-template-columns: repeat(2, 1fr); }
  .bp-flow-step::before { display: none; }
  .bp-hero__pills li { padding: 14px 10px 12px; }
  .bp-hero__pill-value { font-size: var(--portal-text-section); }
  .bp-hero__pill-label { font-size: var(--portal-text-caption); }
}
@media (max-width: 640px) {
  .bp-section-head__title { font-size: var(--portal-text-section); }
  .bp-features__grid { grid-template-columns: 1fr; }
  .bp-flow__steps { grid-template-columns: 1fr 1fr; gap: 12px; }
  .bp-flow-step { min-height: 160px; padding: 24px 20px; gap: 10px; }
  .bp-flow-step__num { font-size: var(--portal-text-display); }
  .bp-flow-step__title { font-size: var(--portal-text-label); }
  .bp-hero__pills { gap: 6px; }
  .bp-hero__pills li { padding: 12px 4px 10px; border-radius: 10px; gap: 2px; }
  .bp-hero__pill-dot { width: 5px; height: 5px; top: 8px; box-shadow: 0 0 0 2px rgba(250, 201, 87, 0.2); }
  .bp-hero__pill-value { margin-top: 8px; font-size: var(--portal-text-body); }
  .bp-hero__pill-label { font-size: var(--portal-text-caption); letter-spacing: 0.08em; }
  .bp-compare-panel { grid-template-columns: 1fr; }
  .bp-compare-panel__side { padding: 28px 24px; }
  .bp-compare-panel__value { font-size: var(--portal-text-display); }
  .bp-compare-panel__vs {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    font-size: var(--portal-text-caption);
  }
  .bp-trustpilot { padding: 20px 22px; }
}

/* =========================================================================
   Benefit-page visual form controls (newday-home)
   ========================================================================= */

/* Shared fieldset look */
.bp-pick,
.bp-toggle {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bp-pick__legend,
.bp-toggle__legend {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.02em;
  color: var(--vs-ink, #0e0f0c);
  padding: 0;
  margin: 0;
}

/* Icon-card picker — five (or four) tiles share one row */
.bp-pick__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.bp-pick__grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bp-pick__option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  background: var(--vs-surface, #ffffff);
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
  min-height: 88px;
  min-width: 0;
}
.bp-pick__option:hover {
  border-color: var(--vs-olive, #576038);
  background: rgba(87, 96, 56, 0.04);
}
.bp-pick__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.bp-pick__option:has(input:checked) {
  background: var(--vs-success-bg, #e0ead0);
  border-color: var(--vs-olive, #576038);
  box-shadow: inset 0 0 0 1px var(--vs-olive, #576038);
}
.bp-pick__icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--vs-ink-muted, #5c5e58);
  transition: color 160ms ease, transform 160ms ease;
}
.bp-pick__icon svg { width: 22px; height: 22px; }
.bp-pick__option:has(input:checked) .bp-pick__icon {
  color: var(--vs-olive-deep, #3f4828);
  transform: scale(1.05);
}
.bp-pick__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  line-height: 1.25;
  color: var(--vs-ink, #0e0f0c);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Price stepper */
.bp-stepper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-stepper__label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink, #0e0f0c);
}
.bp-stepper__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px;
  background: var(--vs-surface-alt, #f4f0e3);
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 14px;
}
.bp-stepper__btn {
  appearance: none;
  background: var(--vs-olive, #576038);
  color: #ffffff;
  border: 0;
  border-radius: 10px;
  width: 44px;
  height: 44px;
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-section);
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
}
.bp-stepper__btn:hover:not(:disabled) { background: var(--vs-olive-deep, #3f4828); }
.bp-stepper__btn:active:not(:disabled) { transform: scale(0.95); }
.bp-stepper__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.bp-stepper__value {
  flex: 1;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-hero);
  letter-spacing: -1px;
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bp-stepper__value--bump { transform: scale(1.08); }
.bp-stepper__plus {
  color: var(--vs-olive, #576038);
  font-size: var(--portal-text-section);
  margin-left: 2px;
}
.bp-stepper__plus[hidden] { display: none; }
.bp-stepper__hint {
  margin: 0;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5c5e58);
}

/* Side-by-side row inside the form */
.bp-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.bp-form__row > .bp-stepper,
.bp-form__row > .bp-toggle { min-width: 0; }
.bp-form__row .bp-stepper__btn { width: 38px; height: 38px; font-size: var(--portal-text-card-title); }
.bp-form__row .bp-stepper__value { font-size: var(--portal-text-section); }
.bp-toggle__hint {
  margin: 0;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5c5e58);
}

/* Yes / No segmented toggle */
.bp-toggle__track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--vs-surface-alt, #f4f0e3);
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.bp-toggle__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-ink-muted, #5c5e58);
  background: transparent;
  transition: background 160ms ease, color 160ms ease;
}
.bp-toggle__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.bp-toggle__option:hover { color: var(--vs-ink, #0e0f0c); }
.bp-toggle__option:has(input:checked) {
  background: var(--vs-olive, #576038);
  color: #ffffff;
}

/* Responsive tweaks for the new form — keep pickers in a single row, shrink internals */
@media (max-width: 640px) {
  .bp-pick__grid { gap: 4px; }
  .bp-pick__option { min-height: 72px; padding: 10px 2px; gap: 4px; border-radius: 8px; }
  .bp-pick__icon { width: 22px; height: 22px; }
  .bp-pick__icon svg { width: 18px; height: 18px; }
  .bp-pick__label { font-size: var(--portal-text-caption); }
  .bp-stepper__value { font-size: var(--portal-text-section); }
  .bp-stepper__btn { width: 40px; height: 40px; font-size: var(--portal-text-card-title); }
  .bp-form__row { grid-template-columns: 1fr; gap: 12px; }
  .bp-form__row .bp-stepper__value { font-size: var(--portal-text-section); }
}

/* =========================================================================
   Multi-step wizard form — used on newday-home and friends
   ========================================================================= */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bp-form--wizard {
  padding: 28px;
  gap: 0;
  /* Lock height so panel transitions don't bounce the layout */
  min-height: 460px;
}

.bp-wiz__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(14, 15, 12, 0.08);
  margin-bottom: 18px;
}

.bp-wiz__meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5c5e58);
}
.bp-wiz__step-count { color: var(--vs-olive, #576038); }
.bp-wiz__sep { opacity: 0.5; }
.bp-wiz__chapter { letter-spacing: 0.06em; }

.bp-wiz__progress {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(14, 15, 12, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.bp-wiz__progress-fill {
  position: absolute;
  inset: 0;
  width: var(--bp-progress, 20%);
  background: linear-gradient(90deg, var(--vs-olive, #576038), var(--vs-olive-deep, #3f4828));
  border-radius: inherit;
  transition: width 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bp-wiz {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

.bp-wiz__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.bp-wiz__panel[hidden] { display: none; }

.bp-wiz__title {
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-section);
  line-height: 1.18;
  letter-spacing: -0.4px;
  color: var(--vs-ink, #0e0f0c);
  margin: 0;
}
.bp-wiz__body {
  margin: -8px 0 0;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5c5e58);
}

/* Entrance animation — slide+fade */
@keyframes bp-wiz-enter {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bp-wiz-enter-back {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bp-wiz-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.bp-wiz__panel--enter { animation: bp-wiz-enter 320ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.bp-wiz__panel--enter-back { animation: bp-wiz-enter-back 320ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.bp-wiz__panel--shake { animation: bp-wiz-shake 460ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

/* Wide stepper + toggle variants for full-row use */
.bp-stepper--wide .bp-stepper__row {
  padding: 14px;
  border-radius: 18px;
}
.bp-stepper--wide .bp-stepper__btn {
  width: 52px;
  height: 52px;
  font-size: var(--portal-text-section);
  border-radius: 14px;
}
.bp-stepper--wide .bp-stepper__value { font-size: var(--portal-text-display); }
.bp-stepper--wide .bp-stepper__hint {
  text-align: center;
  margin-top: 6px;
  font-size: var(--portal-text-caption);
}
.bp-toggle--wide .bp-toggle__track { padding: 6px; gap: 6px; border-radius: 14px; }
.bp-toggle--wide .bp-toggle__option {
  padding: 18px 16px;
  font-size: var(--portal-text-label);
  border-radius: 10px;
}

/* Just-picked pulse */
@keyframes bp-pick-just {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); box-shadow: 0 0 0 4px rgba(87, 96, 56, 0.18); }
  100% { transform: scale(1); }
}
.bp-pick__option--just-picked,
.bp-toggle__option--just-picked {
  animation: bp-pick-just 380ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Contact fields */
.bp-wiz__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bp-wiz__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-wiz__field--full { grid-column: 1 / -1; }
.bp-wiz__field-label {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--vs-ink, #0e0f0c);
}
.bp-wiz__field input {
  appearance: none;
  background: var(--vs-surface, #ffffff);
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 10px;
  padding: 13px 14px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  color: var(--vs-ink, #0e0f0c);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.bp-wiz__field input:focus {
  outline: none;
  border-color: var(--vs-olive, #576038);
  box-shadow: 0 0 0 3px rgba(87, 96, 56, 0.15);
}
.bp-wiz__field input::placeholder {
  color: var(--vs-ink-muted, #5c5e58);
  opacity: 0.6;
}
.bp-wiz__consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5c5e58);
  cursor: pointer;
}
.bp-wiz__consent input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--vs-olive, #576038);
  flex-shrink: 0;
}
.bp-wiz__consent a {
  color: var(--vs-olive, #576038);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Nav row */
.bp-wiz__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.bp-wiz__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 12px;
  padding: 14px 22px;
  transition: background 160ms ease, transform 120ms ease, opacity 160ms ease;
}
.bp-wiz__btn--ghost {
  background: transparent;
  color: var(--vs-ink, #0e0f0c);
  padding: 14px 8px;
}
.bp-wiz__btn--ghost:hover { color: var(--vs-olive, #576038); }
.bp-wiz__btn--primary {
  background: var(--vs-olive, #576038);
  color: #ffffff;
  margin-left: auto;
  min-width: 160px;
}
.bp-wiz__btn--primary:hover { background: var(--vs-olive-deep, #3f4828); }
.bp-wiz__btn--primary:active { transform: scale(0.98); }
.bp-wiz__btn--primary:disabled {
  opacity: 0.6;
  cursor: wait;
}
.bp-wiz__btn--submit { background: var(--vs-olive, #576038); }
.bp-wiz__btn[hidden],
.bp-wiz__nav[hidden],
.bp-wiz__meta[hidden],
.bp-wiz__progress[hidden],
.bp-wiz__submitting[hidden] { display: none; }

/* In-flight submission strip — replaces nav while sending */
.bp-wiz__submitting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 0;
  padding: 16px 22px;
  background: var(--vs-success-bg, #e0ead0);
  border-radius: 12px;
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-olive-deep, #3f4828);
}
.bp-wiz__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(63, 72, 40, 0.25);
  border-top-color: var(--vs-olive-deep, #3f4828);
  border-radius: 50%;
  animation: bp-wiz-spin 720ms linear infinite;
}
@keyframes bp-wiz-spin {
  to { transform: rotate(360deg); }
}

/* Success state */
.bp-wiz__panel--done {
  align-items: center;
  text-align: center;
  padding: 24px 0;
  gap: 16px;
  justify-content: center;
}
.bp-wiz__check {
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--vs-success-bg, #e0ead0);
  color: var(--vs-olive-deep, #3f4828);
  margin-bottom: 4px;
  animation: bp-wiz-check-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes bp-wiz-check-pop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.bp-wiz__title--done { font-size: var(--portal-text-section); }
.bp-wiz__done-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--vs-font-display, "Stratum No2", sans-serif);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vs-olive, #576038);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}
.bp-wiz__done-link:hover { color: var(--vs-olive-deep, #3f4828); }

/* Compact mobile layout */
@media (max-width: 640px) {
  .bp-form--wizard { padding: 20px; min-height: 420px; }
  .bp-wiz__title { font-size: var(--portal-text-section); }
  .bp-wiz__fields { grid-template-columns: 1fr; }
  .bp-wiz__btn { padding: 13px 18px; font-size: var(--portal-text-caption); }
  .bp-wiz__btn--primary { min-width: 0; flex: 1; }
  .bp-stepper--wide .bp-stepper__value { font-size: var(--portal-text-hero); }
  .bp-stepper--wide .bp-stepper__btn { width: 46px; height: 46px; font-size: var(--portal-text-section); }
  .bp-toggle--wide .bp-toggle__option { padding: 14px 12px; font-size: var(--portal-text-caption); }
}

/* =========================================================================
   MY ASSETS — Senior-friendly refinements (scoped to body.ma-body)
   Goals: bigger type, higher contrast, larger touch targets, clearer
   hierarchy, less decorative noise. All overrides — no HTML changes.
   ========================================================================= */

/* Base text — bump everything to a comfortable reading size, darken muted */
.ma-body { color: #14171a; }
.ma-body p, .ma-body li, .ma-body dt, .ma-body dd {
  font-size: var(--portal-text-body);
  line-height: 1.55;
}

/* Crumbs — bigger, darker, easier to scan */

/* Hero — keep impact but improve legibility */
.ma-body .ma-hero {
  padding: 48px 56px;
  border: 2px solid #d8d3c2;
  background: #f7f3e6;
  gap: 56px;
}
.ma-body .ma-hero__eyebrow {
  font-size: var(--portal-text-label);
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #3f4a2a;
  margin-bottom: 20px;
}
.ma-body .ma-hero__title {
  font-size: var(--portal-text-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: #14171a;
  margin-bottom: 20px;
}
.ma-body .ma-hero__title strong { font-weight: 600; }
.ma-body .ma-hero__body {
  font-size: var(--portal-text-card-title);
  line-height: 1.55;
  color: #2b2d28;
  max-width: none;
}
.ma-body .ma-hero__privacy {
  padding: 28px;
  border: 2px solid #d8d3c2;
  border-radius: 18px;
  background: #ffffff;
  gap: 14px;
}
.ma-body .ma-hero__mask {
  padding: 16px 24px;
  font-size: var(--portal-text-label);
  font-weight: 600;
  min-height: 52px;
  gap: 12px;
}
.ma-body .ma-hero__mask-svg { width: 22px; height: 22px; }
.ma-body .ma-hero__privacy-note {
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: #2b2d28;
}

/* Net worth strip — keep dark, but boost contrast and number weight */
.ma-body .ma-networth {
  padding: 40px 48px;
  margin-bottom: 48px;
  gap: 48px;
  border-radius: 22px;
}
.ma-body .ma-networth__eyebrow {
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 1.6px;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 16px;
}
.ma-body .ma-networth__value {
  font-size: var(--portal-num-headline);
  font-weight: 500;
  letter-spacing: -1px;
  margin-bottom: 14px;
}
.ma-body .ma-networth__asof {
  font-size: var(--portal-text-label);
  color: rgba(255, 255, 255, 0.86);
}
.ma-body .ma-networth__split-row {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.ma-body .ma-networth__split-label {
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.96);
}
.ma-body .ma-networth__dot { width: 12px; height: 12px; }
.ma-body .ma-networth__split-value {
  font-size: var(--portal-text-hero);
  font-weight: 700;
}
.ma-body .ma-networth__trend-caption {
  font-size: var(--portal-text-caption);
  font-weight: 600;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.86);
}

/* Sticky rail — wider, larger items, easier to tap and read */
.ma-body .ma-rail {
  padding: 24px 18px;
  border-radius: 18px;
  background: #ffffff;
  border: 2px solid #e4e0d6;
  box-shadow: 0 12px 32px -24px rgba(14, 23, 26, 0.16);
}
.ma-body .ma-rail__label {
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #3f4a2a;
  margin-bottom: 16px;
  padding: 0 10px;
}
.ma-body .ma-rail__link {
  padding: 14px 14px;
  border-radius: 12px;
  font-size: var(--portal-text-label);
  font-weight: 600;
  color: #14171a;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}
.ma-body .ma-rail__link:hover {
  background: #f0ecde;
  color: #3f4a2a;
  transform: translateX(2px);
}
.ma-body .ma-rail__num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f0ecde;
  color: #3f4a2a;
  font-size: var(--portal-text-caption);
  font-weight: 700;
  flex-shrink: 0;
}
.ma-body .ma-rail__link--active {
  background: #14171a;
  color: #ffffff;
}
.ma-body .ma-rail__link--active .ma-rail__num {
  background: #fac957;
  color: #14171a;
}

/* Section headers — softer eyebrow, stronger title, more breathing room */
.ma-body .ma-section { margin-bottom: 72px; }
.ma-body .ma-section__head {
  margin-bottom: 32px;
  align-items: flex-end;
  gap: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e4e0d6;
}
.ma-body .ma-section__eyebrow {
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 1.6px;
  color: #5e6b48;
  margin-bottom: 10px;
}
.ma-body .ma-section__title {
  font-size: var(--portal-text-hero);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.4px;
  color: #14171a;
  margin-bottom: 14px;
}
.ma-body .ma-section__intro {
  font-size: var(--portal-text-body);
  line-height: 1.55;
  color: #2b2d28;
}

/* Primary Add buttons — olive, big, obvious */
.ma-body .ma-add {
  background: #3f4a2a;
  color: #ffffff;
  border: 2px solid #3f4a2a;
  padding: 14px 24px;
  font-size: var(--portal-text-label);
  font-weight: 700;
  letter-spacing: 0.4px;
  min-height: 50px;
  border-radius: 14px;
  box-shadow: 0 6px 18px -10px rgba(63, 74, 42, 0.6);
}
.ma-body .ma-add:hover {
  background: #2d361e;
  border-color: #2d361e;
  color: #ffffff;
  transform: translateY(-1px);
}
.ma-body .ma-add--small {
  padding: 10px 18px;
  font-size: var(--portal-text-caption);
  min-height: 42px;
  border-radius: 12px;
}

/* Cards — more padding, clearer borders, stronger titles */
.ma-body .ma-card {
  padding: 32px 36px;
  border: 2px solid #e4e0d6;
  border-radius: 18px;
  margin-bottom: 20px;
}
.ma-body .ma-card:hover {
  border-color: #c9c3b1;
}
.ma-body .ma-card__head {
  margin-bottom: 24px;
}
.ma-body .ma-card__eyebrow {
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 1.6px;
  color: #5e6b48;
  margin-bottom: 10px;
}
.ma-body .ma-card__title {
  font-size: var(--portal-text-section);
  font-weight: 700;
  line-height: 1.2;
  color: #14171a;
  margin-bottom: 10px;
}
.ma-body .ma-card__sub {
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: #2b2d28;
}

/* Stats grid inside cards — bigger numbers, darker labels */
.ma-body .ma-stats { gap: 28px; }
.ma-body .ma-stats dt {
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #2b2d28;
  margin-bottom: 10px;
}
.ma-body .ma-stats dd {
  font-size: var(--portal-text-section);
  font-weight: 600;
  color: #14171a;
}

/* Asset rows — generous padding, bigger title + value, clearer separator */
.ma-body .ma-rows { gap: 0; }
.ma-body .ma-row {
  padding: 22px 4px;
  border-bottom: 1.5px solid #ece8da;
  gap: 24px;
}
.ma-body .ma-row:hover {
  background: #faf7ec;
}
.ma-body .ma-row__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  flex-shrink: 0;
}
.ma-body .ma-row__icon svg { width: 28px; height: 28px; }
.ma-body .ma-row__title {
  font-size: var(--portal-text-body);
  font-weight: 700;
  line-height: 1.3;
  color: #14171a;
  margin-bottom: 6px;
}
.ma-body .ma-row__sub {
  font-size: var(--portal-text-label);
  line-height: 1.45;
  color: #2b2d28;
}
.ma-body .ma-row__note {
  font-size: var(--portal-text-caption);
  font-weight: 600;
  color: #5e6b48;
}
.ma-body .ma-row__note--warn { color: #a8531f; }
.ma-body .ma-row__value {
  font-size: var(--portal-text-section);
  font-weight: 700;
  color: #14171a;
  letter-spacing: -0.2px;
}

/* Detail definition list (vehicle details, etc.) — bigger and darker */
.ma-body .ma-detail-list {
  padding: 24px 28px;
  background: #faf7ec;
  border-radius: 14px;
  font-size: var(--portal-text-label);
}
.ma-body .ma-detail-list dt {
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #2b2d28;
  text-transform: uppercase;
}
.ma-body .ma-detail-list dd {
  font-size: var(--portal-text-label);
  font-weight: 600;
  color: #14171a;
}

/* Insurance subgrid headers */
.ma-body .ma-ins-block {
  padding: 28px 32px;
  border: 2px solid #e4e0d6;
  border-radius: 18px;
}
.ma-body .ma-ins-block__head { margin-bottom: 20px; }
.ma-body .ma-ins-block__title {
  font-size: var(--portal-text-section);
  font-weight: 700;
  color: #14171a;
}

/* Chips/pills (status badges) — bigger and stronger */
.ma-body .vs-chip,
.ma-body .ma-chip {
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 7px 14px;
  border-radius: 999px;
  min-height: 30px;
}

/* Focus rings — visible for keyboard users */
.ma-body :is(a, button, [tabindex]):focus-visible {
  outline: 3px solid #3f4a2a;
  outline-offset: 3px;
  border-radius: 8px;
}

/* Section eyebrow numbers — replace bland "Section 01" eyebrow with a
   pleasant section-anchor look by complementing the rail */
.ma-body .ma-anchor { scroll-margin-top: 140px; }

/* Print-friendly tweaks — for members who like to print their summary */
@media print {
  .ma-body .ma-rail,
  .ma-body .ma-hero__privacy,
  .ma-body .ma-add { display: none !important; }
  .ma-body .ma-row { break-inside: avoid; }
}

/* Narrow viewport — keep generous sizing but stack gracefully */
@media (max-width: 1023px) {
  .ma-body .ma-hero {
    grid-template-columns: 1fr;
    padding: 36px 28px;
    gap: 32px;
  }
  .ma-body .ma-hero__title { font-size: var(--portal-text-hero); }
  .ma-body .ma-networth {
    grid-template-columns: 1fr;
    padding: 32px 28px;
    gap: 32px;
  }
  .ma-body .ma-networth__value { font-size: var(--portal-text-display); }
  .ma-body .ma-section__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .ma-body .ma-section__title { font-size: var(--portal-text-hero); }
}
@media (max-width: 640px) {
  .ma-body .ma-hero__title { font-size: var(--portal-text-hero); }
  .ma-body .ma-section__title { font-size: var(--portal-text-section); }
  .ma-body .ma-row { flex-wrap: wrap; gap: 12px; padding: 18px 0; }
  .ma-body .ma-card { padding: 24px 20px; }
}

/* =========================================================================
   Portal onboarding bar (v2) — engagement redesign.

   Sticky tracker below the nav with progress meter + step counter +
   single CTA. Clicking it opens a tabbed wizard sheet that slides down.
   Each step submit earns a military-style badge. Driven by
   portal-onboarding.js.
   ========================================================================= */

/* ---------- Sticky bar ---------- */

/* The bar sticks BELOW the portal nav, not at viewport y=0. The nav
   itself is sticky at top: 0 with z-index 30; --vs-nav-h is its
   measured height (set by portal-onboarding.js). z-index sits below
   the nav so any nav dropdown menus open over the bar. The fallback
   color on `background` is an explicit hex (not a CSS var) so the bar
   is ALWAYS fully opaque — content scrolling underneath should never
   bleed through. */
.portal-onboarding-bar {
  position: sticky;
  top: var(--vs-nav-h, 0px);
  z-index: 25;
  background: #f4f0e3;
  background: var(--vs-surface-alt, #f4f0e3);
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
  font-family: var(--vs-font-body);
  color: var(--vs-ink, #0e0f0c);
  overflow: hidden;
  max-height: 240px;
  transition: max-height 320ms ease, opacity 240ms ease;
}

.portal-onboarding-bar--leaving {
  max-height: 0;
  opacity: 0;
  border-bottom-width: 0;
}

/* Complete state — celebratory background, persistent until dismissed.
   Solid gold→sage gradient (no alpha at the top, so content beneath
   the sticky bar never bleeds through on scroll). The warmer top color
   reads as "you did it!" rather than "you still have things to do." */
.portal-onboarding-bar--complete {
  background: linear-gradient(180deg, #f5e4b6 0%, #e8eed7 100%);
  border-bottom-color: rgba(90, 107, 63, 0.32);
}

.portal-onboarding-bar--complete .portal-onboarding-bar__title {
  color: var(--vs-olive-deep, #3F4828);
}

.portal-onboarding-bar__inner--complete {
  cursor: default;
}

.portal-onboarding-bar__inner--complete:hover {
  background: transparent;
}

/* Dismiss (X) button — only present in the complete state, sits as a
   flex sibling of the CTA inside .meta so they never overlap. */
.portal-onboarding-bar__dismiss {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(90, 107, 63, 0.35);
  background: #ffffff;
  border-radius: 999px;
  color: var(--vs-olive, #5a6b3f);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.portal-onboarding-bar__dismiss:hover {
  background: var(--vs-olive, #5a6b3f);
  color: #ffffff;
  border-color: var(--vs-olive, #5a6b3f);
  transform: scale(1.06);
}

.portal-onboarding-bar__dismiss:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 2px;
}

.portal-onboarding-bar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px;
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
  transition: background 160ms ease;
}

.portal-onboarding-bar__inner:hover {
  background: rgba(250, 201, 87, 0.10);
}

.portal-onboarding-bar__inner:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: -4px;
}

.portal-onboarding-bar__left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portal-onboarding-bar__title {
  margin: 0;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vs-olive);
}

.portal-onboarding-bar__body {
  margin: 0;
  font-size: var(--portal-text-label);
  line-height: 1.4;
  color: var(--vs-ink, #0e0f0c);
  font-weight: 500;
}

/* ---------- Mini badges (in the bar) ---------- */
/* 56px circular insignia. Larger than the previous 40px so the visual
   weight matches the bar's importance and reads clearly for older eyes.
   Each badge shows the step's military-themed silhouette at 24px. */

.portal-onboarding-bar__badges {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.portal-onb-mini-badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transition: transform 200ms cubic-bezier(0.2, 1.2, 0.4, 1);
}

.portal-onb-mini-badge__inner {
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}

.portal-onb-mini-badge--empty {
  color: rgba(90, 107, 63, 0.45);
}

.portal-onb-mini-badge--empty .portal-onb-mini-badge__inner {
  background: rgba(255, 255, 255, 0.7);
}

.portal-onb-mini-badge--done {
  color: var(--vs-olive);
  animation: portal-onb-mini-stamp 540ms cubic-bezier(0.2, 1.3, 0.4, 1) 1;
}

.portal-onb-mini-badge--done .portal-onb-mini-badge__inner {
  background: var(--vs-olive);
  border-color: var(--vs-olive);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(63, 72, 40, 0.22);
}

.portal-onb-mini-badge__tick {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: #fac957;
  color: var(--vs-olive-deep, #3F4828);
  border-radius: 50%;
  border: 2.5px solid var(--vs-surface-alt, #f4f0e3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.portal-onb-mini-badge__tick svg {
  width: 12px;
  height: 12px;
}

@keyframes portal-onb-mini-stamp {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ---------- Linear progress meter (in the bar) ---------- */
/* Continuous fill under the body copy, sitting alongside the discrete
   badge dots. Together they give both at-a-glance progress (badges)
   AND a visible "you're partway there" affordance (the fill). */

.portal-onboarding-bar__meter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.portal-onboarding-bar__meter-track {
  position: relative;
  flex: 1;
  max-width: 340px;
  height: 8px;
  border-radius: 999px;
  background: rgba(90, 107, 63, 0.18);
  overflow: hidden;
}

.portal-onboarding-bar__meter-fill {
  position: absolute;
  inset: 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, #5a6b3f 0%, #7a8b5a 100%);
  border-radius: inherit;
  transition: width 540ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.portal-onboarding-bar__meter-pct {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.04em;
  color: var(--vs-olive);
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}

@media (prefers-reduced-motion: reduce) {
  .portal-onboarding-bar__meter-fill,
  .portal-onb-mini-badge--done {
    transition: none;
    animation: none;
  }
}

/* ---------- Meta column (counter + CTA) ---------- */

.portal-onboarding-bar__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.portal-onboarding-bar__counter {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.04em;
  color: var(--vs-olive);
  white-space: nowrap;
}

.portal-onboarding-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--vs-olive);
  color: #ffffff;
  border-radius: 10px;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  min-height: 48px;
  flex-shrink: 0;
  transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}

/* When the CTA is an <a>, the global a:hover { color: var(--vs-ink) }
   from styles.css would otherwise turn the label nearly-black against
   the dark olive background. Lock the text white in all interaction
   states. */
.portal-onboarding-bar__cta,
.portal-onboarding-bar__cta:link,
.portal-onboarding-bar__cta:visited {
  color: #ffffff;
}

.portal-onboarding-bar__inner:hover .portal-onboarding-bar__cta,
.portal-onboarding-bar__cta:hover {
  background: var(--vs-olive-deep, #3F4828);
  color: #ffffff;
  transform: translateX(2px);
  box-shadow: 0 4px 14px rgba(63, 72, 40, 0.28);
}

.portal-onboarding-bar__cta:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .portal-onboarding-bar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 12px;
  }
  .portal-onboarding-bar__left { grid-column: 1; grid-row: 1; }
  .portal-onboarding-bar__meta { grid-column: 2; grid-row: 1; }
  .portal-onboarding-bar__badges { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
}

@media (max-width: 720px) {
  .portal-onboarding-bar__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
    padding: 14px 20px;
  }
  .portal-onboarding-bar__left { grid-row: 1; }
  .portal-onboarding-bar__badges { grid-row: 2; }
  .portal-onboarding-bar__meta {
    grid-row: 3;
    justify-content: space-between;
    width: 100%;
  }
  .portal-onboarding-bar__cta { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-onboarding-bar,
  .portal-onboarding-bar__cta,
  .portal-onb-mini-badge--done {
    transition: none;
    animation: none;
  }
}

/* ---------- Sheet (slide-down) ---------- */

.portal-onb-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

/* Backdrop and panel each opt in to pointer events; the container
   stays pointer-events: none so clicks above the backdrop (the bar)
   pass through to the bar itself. */
.portal-onb-sheet__backdrop {
  position: absolute;
  top: var(--vs-onb-bar-h, 0);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(14, 15, 12, 0);
  transition: background 280ms ease;
  cursor: pointer;
  pointer-events: auto;
}

.portal-onb-sheet.is-open .portal-onb-sheet__backdrop {
  background: rgba(14, 15, 12, 0.6);
}

/* Sheet panel sits flush against the bottom of the sticky bar — the
   bar's height is exposed as --vs-onb-bar-h by portal-onboarding.js
   so the panel offsets dynamically. Width matches the bar's max
   container so the two read as one continuous surface, with only the
   bottom corners rounded. */
.portal-onb-sheet__panel {
  position: absolute;
  top: var(--vs-onb-bar-h, 0px);
  left: 50%;
  transform: translate(-50%, -100%);
  width: min(1280px, calc(100vw - 32px));
  max-height: calc(100vh - var(--vs-onb-bar-h, 0px) - 24px);
  background: #ffffff;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  transition: transform 340ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.portal-onb-sheet.is-open .portal-onb-sheet__panel {
  transform: translate(-50%, 0);
}

.portal-onb-sheet__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 32px 12px;
  flex-shrink: 0;
}

/* When the head also hosts the 3 step tabs, layout becomes a 3-col row:
   [eyebrow + title]  [tabs]  [counter + close].  Saves ~120px of
   vertical space vs. stacking head → progress → tabs. */
.portal-onb-sheet__head--with-tabs {
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
}

.portal-onb-sheet__head-copy {
  min-width: 0;
}

.portal-onb-sheet__head-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.portal-onb-sheet__counter {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.04em;
  color: var(--vs-olive);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .portal-onb-sheet__head--with-tabs {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 12px;
  }
  .portal-onb-sheet__head--with-tabs .portal-onb-sheet__head-copy { grid-column: 1; grid-row: 1; }
  .portal-onb-sheet__head--with-tabs .portal-onb-sheet__head-meta  { grid-column: 2; grid-row: 1; }
  .portal-onb-sheet__head--with-tabs .portal-onb-tabs              { grid-column: 1 / -1; grid-row: 2; padding: 0; border-bottom: 0; }
}

.portal-onb-sheet__eyebrow {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-olive);
}

.portal-onb-sheet__title {
  margin: 2px 0 0;
  /* Graphik 500 per review 2026-07-09 — matches the wizard question
     titles (was display-font 700). */
  font-family: var(--portal-font-body, var(--vs-font-body));
  font-weight: 500;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--vs-ink, #0e0f0c);
}

.portal-onb-sheet__close {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  background: #ffffff;
  border-radius: 999px;
  color: var(--vs-ink, #0e0f0c);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.portal-onb-sheet__close:hover {
  background: var(--vs-surface-alt, #f4f0e3);
  border-color: var(--vs-olive);
  color: var(--vs-olive);
}

/* Floating variant — no internal sheet header, so the close button
   floats over the top-right corner of the panel. Seated on the header
   row's visual line (eyebrow + sub-step progress), not hugging the
   corner — the progress row reserves right padding for it (see
   .portal-onb-tab-body__head--with-progress). */
.portal-onb-sheet__close--floating {
  position: absolute;
  top: 40px;
  right: 36px;
  z-index: 2;
  width: 40px;
  height: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.portal-onb-sheet__close--floating:hover {
  transform: scale(1.05);
}

/* When the sheet has no internal head, the body needs its own top
   padding so the content doesn't slam into the panel's top edge. */
.portal-onb-sheet__panel:not(:has(> .portal-onb-sheet__head)) .portal-onb-sheet__body {
  padding-top: 8px;
}

.portal-onb-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  transition: opacity 180ms ease, transform 180ms ease;
}

.portal-onb-sheet__body.is-leaving { opacity: 0; transform: translateY(-6px); }
.portal-onb-sheet__body.is-entering { opacity: 0; transform: translateY(6px); }

/* ---------- Sheet progress + tabs ---------- */

.portal-onb-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 32px 12px;
  flex-shrink: 0;
}

.portal-onb-progress__track {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(90, 107, 63, 0.15);
  overflow: hidden;
}

.portal-onb-progress__fill {
  position: absolute;
  inset: 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, #5a6b3f 0%, #7a8b5a 100%);
  border-radius: inherit;
  transition: width 480ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.portal-onb-progress__label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: var(--vs-olive);
  white-space: nowrap;
}

.portal-onb-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 32px 16px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
  flex-shrink: 0;
}

/* Inline (header-embedded) variant — compact tabs in a fixed-width band
   to the right of the title. No bottom border (the head row owns it). */
.portal-onb-sheet__head--with-tabs .portal-onb-tabs {
  padding: 0;
  border-bottom: 0;
  gap: 8px;
  max-width: 520px;
  width: 100%;
}

.portal-onb-sheet__head--with-tabs .portal-onb-tab {
  padding: 8px 10px;
  gap: 8px;
  border-radius: 10px;
}

.portal-onb-sheet__head--with-tabs .portal-onb-tab__num {
  width: 26px;
  height: 26px;
  font-size: var(--portal-text-caption);
}

.portal-onb-sheet__head--with-tabs .portal-onb-tab__label {
  font-size: var(--portal-text-caption);
  line-height: 1.2;
}

.portal-onb-sheet__head--with-tabs .portal-onb-tab__sub {
  display: none;
}

.portal-onb-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  font-family: var(--vs-font-body);
  text-align: left;
  cursor: default;
  transition: border-color 160ms ease, background 160ms ease, transform 120ms ease;
}

.portal-onb-tab__num {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--portal-text-label);
  line-height: 1;
  flex-shrink: 0;
}

.portal-onb-tab__num--active {
  background: var(--vs-olive);
  color: #ffffff;
  box-shadow: 0 0 0 5px rgba(90, 107, 63, 0.18);
}

.portal-onb-tab__num--done {
  background: var(--vs-olive);
  color: #ffffff;
}

.portal-onb-tab__num--pending {
  background: transparent;
  color: var(--vs-ink-muted, #5C5E58);
  border: 1.5px solid var(--vs-line, #e4e0d6);
}

.portal-onb-tab__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.portal-onb-tab__label {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-label);
  letter-spacing: -0.1px;
  color: var(--vs-ink, #0e0f0c);
  line-height: 1.2;
}

.portal-onb-tab__sub {
  font-size: var(--portal-text-caption);
  font-weight: 500;
  color: var(--vs-ink-muted, #5C5E58);
}

.portal-onb-tab--active {
  background: rgba(90, 107, 63, 0.06);
  border-color: var(--vs-olive);
  cursor: pointer;
}

.portal-onb-tab--done .portal-onb-tab__label {
  color: var(--vs-ink-muted, #5C5E58);
  text-decoration: line-through;
  text-decoration-color: rgba(92, 94, 88, 0.4);
}

.portal-onb-tab--pending {
  opacity: 0.6;
}

@media (max-width: 720px) {
  /* Mobile: keep the 3 tabs horizontal but compact — vertical stack
     would eat 60% of the panel height and squish the form body. Sub
     labels hide; only the step number + short label remain. */
  .portal-onb-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 20px 12px;
  }
  .portal-onb-tab {
    padding: 8px 10px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  .portal-onb-tab__num { width: 28px; height: 28px; font-size: var(--portal-text-caption); }
  .portal-onb-tab__label { font-size: var(--portal-text-caption); line-height: 1.15; }
  .portal-onb-tab__sub { display: none; }
}

/* Even tighter at very narrow widths — drop padding around the head/
   progress/tabs row so the body has room. */
@media (max-width: 520px) {
  .portal-onb-sheet__head { padding: 14px 20px 8px; }
  .portal-onb-sheet__title { font-size: var(--portal-text-body); }
  .portal-onb-progress { padding: 0 20px 8px; }
  .portal-onb-tabs { padding-bottom: 8px; }
  .portal-onb-tab-body { padding: 16px 20px 20px; }
}

/* ---------- Tab body content ---------- */

.portal-onb-tab-body {
  padding: 22px 36px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.portal-onb-tab-body__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 64ch;
  padding-bottom: 4px;
  margin-bottom: 0;
}

.portal-onb-tab-body__estimate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vs-olive);
}

.portal-onb-tab-body__estimate-icon {
  display: inline-flex;
  align-items: center;
  color: var(--vs-olive);
}

.portal-onb-tab-body__heading {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-olive);
}

.portal-onb-tab-body__pitch {
  margin: 4px 0 0;
  font-size: var(--portal-text-label);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
}

.portal-onb-tab-body__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--vs-line, #e4e0d6);
  margin-top: 4px;
}

.portal-onb-tab-body__foot-note {
  font-size: var(--portal-text-caption);
  font-weight: 600;
  color: var(--vs-ink-muted, #5C5E58);
}

@media (max-width: 600px) {
  .portal-onb-tab-body__foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* ===========================================================
   Free Credit Monitoring step — centered layout + benefit boxes
   =========================================================== */

/* Whole tab body centers when --centered is applied. The header, the
   benefit grid, the reassurance row, and the footer CTA all stack
   along the cross-axis center. */
.portal-onb-tab-body--centered {
  align-items: center;
  text-align: center;
}

.portal-onb-tab-body__head--centered {
  align-items: center;
  text-align: center;
  max-width: 64ch;
  margin: 0 auto;
}

.portal-onb-tab-body__head--centered .portal-onb-tab-body__heading {
  font-size: var(--portal-text-hero);
  letter-spacing: -0.6px;
  text-align: center;
  /* Sentence case — the base heading is an uppercase eyebrow, but at
     hero size ALL CAPS shouts (round-3 note). */
  text-transform: none;
}

.portal-onb-tab-body__head--centered .portal-onb-tab-body__pitch {
  text-align: center;
  max-width: 56ch;
  margin: 4px auto 0;
  /* Balance the two lines so a single word never orphans. */
  text-wrap: balance;
}

.portal-onb-tab-body__foot--centered {
  justify-content: center;
  border-top: 0;
  padding-top: 8px;
  margin-top: 8px;
}

/* Value banner — sits under the pitch as a single olive line.
   Replaces the old card-with-bullets approach. */
.portal-onb-value-banner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 14px auto 0;
  padding: 10px 18px;
  background: rgba(250, 201, 87, 0.18);
  border-radius: 999px;
  font-family: var(--vs-font-body);
  flex-wrap: wrap;
  justify-content: center;
}

.portal-onb-value-banner__chip {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vs-olive-deep, #3F4828);
}

.portal-onb-value-banner__split {
  color: var(--vs-olive);
  opacity: 0.5;
}

.portal-onb-value-banner__price {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-label);
  color: var(--vs-olive);
}

/* 4 benefit tiles in a single row, centered as a group. Each tile is a
   self-contained card: olive icon disc → bold title → short body.
   Collapses to 2-up at <720px and 1-up at <460px. */
.portal-onb-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .portal-onb-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .portal-onb-benefit-grid { grid-template-columns: 1fr; }
}

.portal-onb-benefit-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 12px;
  background: #ffffff;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  transition: border-color 200ms ease, transform 160ms ease, box-shadow 200ms ease;
}

.portal-onb-benefit-tile:hover {
  border-color: var(--vs-olive);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(63, 72, 40, 0.10);
}

.portal-onb-benefit-tile__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(90, 107, 63, 0.12);
  color: var(--vs-olive);
}

.portal-onb-benefit-tile__icon svg { width: 24px; height: 24px; }

.portal-onb-benefit-tile__title {
  margin: 0;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-label);
  letter-spacing: -0.2px;
  color: var(--vs-ink, #0e0f0c);
  line-height: 1.2;
}

.portal-onb-benefit-tile__body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--vs-ink-muted, #5C5E58);
}

/* Center the reassurance row inside the credit body */
.portal-onb-tab-body--credit .portal-onb-reassure {
  justify-content: center;
  margin: 2px auto 0;
}

/* Reassurance row */
.portal-onb-reassure {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.portal-onb-reassure li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

.portal-onb-reassure__dot {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(90, 107, 63, 0.16);
  color: var(--vs-olive);
}

/* ---------- Form bits inside the tab body ---------- */

.portal-onb-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.portal-onb-field-row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 600px) {
  .portal-onb-field-row { grid-template-columns: 1fr; }
}

.portal-onb-field {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.portal-onb-field__label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-ink, #0e0f0c);
  padding: 0;
  margin-bottom: 2px;
}

.portal-onb-field__hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--vs-ink-muted, #5C5E58);
  margin-left: 6px;
  font-size: var(--portal-text-caption);
}

.portal-onb-field__note {
  margin: 6px 0 0;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  line-height: 1.45;
}

.portal-onb-input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  border: 1.8px solid #b9b3a3;
  border-radius: 12px;
  background: #ffffff;
  color: var(--vs-ink);
  min-height: 52px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.portal-onb-input:focus {
  outline: none;
  border-color: var(--vs-olive);
  box-shadow: 0 0 0 4px rgba(90, 107, 63, 0.16);
  background: #faf7eb;
}

/* Native <select> styling — replace the inconsistent browser-default
   chevron with a custom SVG glyph that sits 18px from the right edge.
   `padding-right: 44px` keeps the long option labels from running into
   the chevron. */
select.portal-onb-input {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none'><path d='M1 1 L6 6 L11 1' stroke='%2315171a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 7px;
  padding-right: 44px;
}

/* Credit activation — field stack inside a sub-step, plus a 3-up
   city / state / ZIP row that collapses to one column on narrow screens. */
.portal-onb-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.portal-onb-field-row--address {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.9fr);
  gap: 16px;
}
@media (max-width: 600px) {
  .portal-onb-field-row--address { grid-template-columns: 1fr; }
}

/* Credit activation spinner view. */
.portal-onb-activating {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 56px 24px 60px;
}
.portal-onb-activating__spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 4px solid var(--vs-line, #e4e0d6);
  border-top-color: var(--vs-olive, #5a6b3f);
  animation: portal-onb-spin 0.8s linear infinite;
}
@keyframes portal-onb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .portal-onb-activating__spinner { animation-duration: 2s; }
}
.portal-onb-activating__title {
  margin: 0;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-section);
  letter-spacing: -0.4px;
  color: var(--vs-ink, #0e0f0c);
}
.portal-onb-activating__body {
  margin: 0;
  max-width: 38ch;
  font-size: var(--portal-text-body);
  line-height: 1.55;
  color: var(--vs-ink-muted, #5C5E58);
}

/* Data-sharing consent — a tappable card with a custom checkbox. */
.portal-onb-consent {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 14px;
  background: #faf8f1;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.portal-onb-consent:hover { border-color: var(--vs-olive, #5a6b3f); }
.portal-onb-consent__check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.portal-onb-consent__box {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 2px solid var(--vs-line-strong, #c9c4b4);
  display: grid;
  place-items: center;
  color: #fff;
  background: #fff;
  transition: background 160ms ease, border-color 160ms ease;
}
.portal-onb-consent__box svg { opacity: 0; transition: opacity 140ms ease; }
.portal-onb-consent__check:checked ~ .portal-onb-consent__box {
  background: var(--vs-olive, #5a6b3f);
  border-color: var(--vs-olive, #5a6b3f);
}
.portal-onb-consent__check:checked ~ .portal-onb-consent__box svg { opacity: 1; }
.portal-onb-consent__check:focus-visible ~ .portal-onb-consent__box {
  outline: 2px solid var(--vs-olive, #5a6b3f);
  outline-offset: 2px;
}
.portal-onb-consent__text {
  font-size: var(--portal-text-label);
  line-height: 1.55;
  color: var(--vs-ink, #0e0f0c);
}

/* Rich variant — consolidated end-of-wizard consent with a lede,
   a bulleted list of authorizations, and a fine-print line at the
   bottom. Left-aligned inside the .portal-onb-sub centered layout so
   the six clauses read as a checklist, not as centered marketing.
   Wide max-width so bullets flow onto single lines and the block
   stays short in height (Principle 6 — respect the fold). */
.portal-onb-consent--rich {
  text-align: left;
  max-width: 960px;
  width: 100%;
  padding: 24px 28px;
}

.portal-onb-consent--rich .portal-onb-consent__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--portal-text-body);
}


.portal-onb-consent__lede {
  font-weight: 600;
  color: var(--vs-ink, #0e0f0c);
}

.portal-onb-consent__list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--portal-text-label);
  color: var(--vs-ink, #0e0f0c);
}

.portal-onb-consent__list li { line-height: 1.5; }

.portal-onb-consent__fine {
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
}

.portal-onb-consent__fine a {
  color: var(--vs-olive);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.portal-onb-pick {
  display: grid;
  gap: 10px;
}

.portal-onb-pick--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-onb-pick--four  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal-onb-pick--six   { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .portal-onb-pick--three,
  .portal-onb-pick--four,
  .portal-onb-pick--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.portal-onb-pick__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 14px;
  min-height: 64px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  line-height: 1.25;
  color: var(--vs-ink);
  background: #ffffff;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 140ms ease, box-shadow 160ms ease;
}

.portal-onb-pick__option input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.portal-onb-pick__option:hover {
  background: var(--vs-surface-alt, #f4f0e3);
  border-color: var(--vs-olive);
  transform: translateY(-1px);
}

.portal-onb-pick__option:has(input:checked) {
  background: rgba(90, 107, 63, 0.12);
  border-color: var(--vs-olive);
  color: var(--vs-olive);
  box-shadow: 0 0 0 4px rgba(90, 107, 63, 0.10);
}

.portal-onb-pick__option:focus-within {
  outline: 2px solid var(--vs-olive);
  outline-offset: 2px;
}

/* Upload zone */
.portal-onb-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 2px dashed rgba(90, 107, 63, 0.32);
  border-radius: 12px;
  background: linear-gradient(180deg, #faf7eb 0%, #f4f0e3 100%);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, transform 140ms ease;
}

.portal-onb-upload:hover {
  border-color: var(--vs-olive);
  background: #faf7eb;
  transform: translateY(-1px);
}

.portal-onb-upload__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.portal-onb-upload__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--vs-olive);
  border: 1.5px solid var(--vs-line, #e4e0d6);
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.portal-onb-upload:hover .portal-onb-upload__icon {
  transform: scale(1.06);
}

.portal-onb-upload__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.portal-onb-upload__label {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-label);
  color: var(--vs-ink);
}

.portal-onb-upload__hint {
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  line-height: 1.4;
}

.portal-onb-upload__filename {
  margin-top: 4px;
  font-size: var(--portal-text-caption);
  font-weight: 600;
  color: var(--vs-olive);
}

/* Upload row — desktop side-by-side "pick file" + "scan with phone".
   Collapses to stacked columns below 720px. Left column keeps the
   existing dropzone + selected-file list; the divider is a labelled
   "or" hairline; right column hosts the QR handoff card. */
.portal-onb-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  width: 100%;
}

.portal-onb-upload-row__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  height: 100%;
}

/* Both columns fill the row's stretched height, and the primary tile
   inside each column (dropzone on the left, QR card on the right)
   grows to match — so the two tiles line up top and bottom regardless
   of which one has more content. */
.portal-onb-upload-row__col--picker .portal-onb-upload,
.portal-onb-upload-row__col--qr .portal-onb-qr-card {
  flex: 1 1 auto;
  min-height: 0;
}

.portal-onb-upload-row__divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 40px;
}

.portal-onb-upload-row__divider-line {
  flex: 1 1 auto;
  width: 1px;
  background: var(--portal-hairline, #e4e0d6);
}

.portal-onb-upload-row__divider-word {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
}

@media (max-width: 720px) {
  .portal-onb-upload-row {
    grid-template-columns: 1fr;
  }
  .portal-onb-upload-row__divider {
    flex-direction: row;
    width: auto;
    height: 24px;
  }
  .portal-onb-upload-row__divider-line {
    height: 1px;
    width: auto;
    flex: 1 1 auto;
  }
}

/* QR-to-mobile handoff card — decorative code (mock) + short copy
   explaining what happens when the user scans it. The code area sits
   on a crisp white plaque so a phone camera reading it has strong
   black-on-white contrast; the surrounding card uses the warm surface
   so it visually rhymes with the dropzone next to it. */
.portal-onb-qr-card {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--portal-hairline, #e4e0d6);
  border-radius: 16px;
  background: linear-gradient(180deg, #faf7eb 0%, #f4f0e3 100%);
  min-height: 168px;
}

.portal-onb-qr-card__code {
  display: inline-grid;
  place-items: center;
  padding: 12px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--portal-hairline, #e4e0d6);
  flex-shrink: 0;
}

.portal-onb-qr-card__code svg {
  display: block;
  width: 140px;
  height: 140px;
}

.portal-onb-qr-card__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  text-align: left;
}

.portal-onb-qr-card__eyebrow {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-olive);
}

.portal-onb-qr-card__title {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-card-title);
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--vs-ink, #0e0f0c);
}

.portal-onb-qr-card__body {
  margin: 0;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
}

.portal-onb-qr-card__meta {
  margin: 4px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--portal-text-caption);
  font-weight: 600;
  color: var(--vs-olive);
}

@media (max-width: 520px) {
  .portal-onb-qr-card {
    flex-direction: column;
    text-align: center;
  }
  .portal-onb-qr-card__copy {
    text-align: center;
    align-items: center;
  }
}

/* Acceptable-documents disclosure (REQ-002.002 — collapsible because the
   list is 13 items + a paragraph, which would dominate the screen if
   always open). Closed by default; click reveals the full spec list. */
.portal-onb-docs-accepted {
  background: var(--portal-surface-warm);
  border: 1px solid var(--portal-hairline);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: var(--portal-text-caption);
}
.portal-onb-docs-accepted summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--portal-ink);
  list-style: none;
  position: relative;
  padding-right: 22px;
}
.portal-onb-docs-accepted summary::-webkit-details-marker { display: none; }
.portal-onb-docs-accepted summary::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform var(--portal-dur-base) var(--portal-ease-out);
}
.portal-onb-docs-accepted[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}
.portal-onb-docs-accepted__list {
  margin: 12px 0 8px;
  padding-left: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  color: var(--portal-ink-secondary);
  line-height: 1.5;
  text-align: left;
}
.portal-onb-docs-accepted__note { text-align: left; }
@media (max-width: 600px) {
  .portal-onb-docs-accepted__list { grid-template-columns: 1fr; }
}
.portal-onb-docs-accepted__note {
  margin: 0;
  color: var(--portal-ink-muted);
  line-height: 1.5;
}

/* SSN input + show/hide toggle (REQ-002.003) */
.portal-onb-ssn { position: relative; }
.portal-onb-ssn__input {
  padding-right: 52px;
  font-family: var(--portal-font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.portal-onb-ssn__toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--portal-ink-muted);
  transition: background var(--portal-dur-base) var(--portal-ease-out),
              color var(--portal-dur-base) var(--portal-ease-out);
}
.portal-onb-ssn__toggle:hover {
  background: var(--portal-olive-tint);
  color: var(--portal-ink);
}

/* 3-column DOB picker (REQ-002.003) */
.portal-onb-dob-picker {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr;
  gap: 8px;
}
@media (max-width: 520px) {
  .portal-onb-dob-picker { grid-template-columns: 1fr; }
}

/* Per-file upload list (REQ-002.002) — each item shows name + size +
   status with a remove × control. Stacks vertically below the drop zone. */
.portal-onb-upload-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portal-onb-upload-list:empty { display: none; }
.portal-onb-upload-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--portal-surface);
  border: 1px solid var(--portal-hairline);
  border-radius: 10px;
}
.portal-onb-upload-list__file {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.portal-onb-upload-list__name {
  font-weight: 600;
  color: var(--portal-ink);
  font-size: var(--portal-text-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-onb-upload-list__meta {
  font-size: var(--portal-text-caption);
  color: var(--portal-ink-muted);
}
.portal-onb-upload-list__remove {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--portal-hairline-strong);
  background: var(--portal-surface);
  color: var(--portal-ink-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--portal-dur-base) var(--portal-ease-out),
              border-color var(--portal-dur-base) var(--portal-ease-out),
              color var(--portal-dur-base) var(--portal-ease-out);
  flex-shrink: 0;
}
.portal-onb-upload-list__remove:hover {
  border-color: var(--portal-danger, #a83232);
  color: var(--portal-danger, #a83232);
  background: var(--portal-danger-bg, #fdecec);
}

/* ===========================================================
   Senior-friendly Military step — sub-step wizard with branch
   emblems, status tiles, year stepper, document upload. Four
   focused screens with Back/Continue + auto-advance on radio.
   =========================================================== */

/* Sub-step progress — 4 dots + a "N of 4" label.
   In the --right variant the label sits on the LEFT, dots on the right,
   and the whole strip is positioned in the top-right of the heading
   row. */
.portal-onb-sub-progress {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.portal-onb-sub-progress__dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.portal-onb-sub-progress__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(90, 107, 63, 0.22);
  transition: width 220ms cubic-bezier(0.2, 0.9, 0.3, 1), background 200ms ease;
}

.portal-onb-sub-progress__dot.is-done {
  background: var(--vs-olive);
}

.portal-onb-sub-progress__dot.is-active {
  width: 28px;
  background: var(--vs-olive);
}

.portal-onb-sub-progress__label {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.04em;
  color: var(--vs-olive);
  white-space: nowrap;
}

/* Tab-body head — now a two-column row when the substep wizard is on.
   Left: estimate + heading. Right: progress indicator. */
.portal-onb-tab-body__head--with-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  max-width: none;
}

.portal-onb-tab-body__head-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

@media (max-width: 720px) {
  .portal-onb-tab-body__head--with-progress {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .portal-onb-sub-progress--right {
    justify-self: flex-start;
  }
}

/* Sub-step container — fades in/out as the wizard advances. */
.portal-onb-form--substeps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* IMPORTANT: only the [data-current] sub renders. The base selector
   sets display: none so hidden subs do not stack into the form's
   scroll height. The :not selector ensures `hidden` and "not current"
   both collapse to zero box. */
.portal-onb-sub {
  display: none;
}

.portal-onb-sub[data-current] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  padding: 24px 0 12px;
  min-height: 320px;
  animation: portal-onb-sub-enter 320ms cubic-bezier(0.2, 0.9, 0.3, 1) 1;
}

@keyframes portal-onb-sub-enter {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.portal-onb-sub__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* Full width so the 48px display title can run edge-to-edge and
     avoid awkward two-line wraps. The 56ch cap used to make sense
     when the head also carried a body-copy lede beneath — that lede
     has been retired, so the constraint is gone with it. */
  max-width: none;
  width: 100%;
}

.portal-onb-sub__title {
  margin: 0;
  /* Graphik 500 per review 2026-07-09 — wizard questions read too bold
     after the number-font swap (was display-font 700). */
  font-family: var(--portal-font-body, var(--vs-font-body));
  font-weight: 500;
  font-size: var(--portal-text-display);
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--vs-ink, #0e0f0c);
  text-align: center;
  /* No max-width — 48px display copy is meant to run wide so short
     questions like "Where does your income come from?" stay on one
     line. Natural line-wrap still kicks in below ~1000px. */
  max-width: none;
}

/* Kept for backward compat — every .portal-onb-sub__lead is now hidden
   per product decision (2026-07-01). The question title alone owns the
   sub-step's copy. Leave the rule so any lingering markup collapses to
   zero box rather than showing stale copy. */
.portal-onb-sub__lead {
  display: none;
}

@media (max-width: 720px) {
  .portal-onb-sub__title { font-size: var(--portal-text-hero); letter-spacing: -0.6px; }
}

/* Shake — invalid Continue attempt */
.portal-onb-sub--shake {
  animation: portal-onb-shake 320ms ease-in-out 1;
}

@keyframes portal-onb-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* Sub-step footer — Back and Continue evenly weighted on opposite
   sides of the row. Both use the XL button style so they read as
   equal primary actions (one ghost, one filled). */
.portal-onb-substep-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--vs-line, #e4e0d6);
  margin-top: 24px;
}

@media (max-width: 720px) {
  .portal-onb-substep-foot {
    flex-wrap: wrap;
    gap: 12px;
  }
  .portal-onb-substep-foot .portal-onb-btn {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
  }
}

/* Bigger status tiles inside the sub-step view — more breathing
   room since they're the only thing on the screen. */
.portal-onb-status-pick--lg {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  gap: 16px;
}

.portal-onb-status-pick--lg .portal-onb-status-pick__option {
  min-height: 96px;
  font-size: var(--portal-text-body);
  border-radius: 16px;
}

/* Income bracket tiles (Free Tax Service substep wizard) — 4 options
   laid out 2×2 since the labels are wider ($75K – $125K). Same visual
   language as status tiles. */
.portal-onb-income-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.portal-onb-income-pick .portal-onb-status-pick__option {
  min-height: 84px;
  font-size: var(--portal-text-body);
  border-radius: 16px;
}

@media (max-width: 520px) {
  .portal-onb-income-pick { grid-template-columns: 1fr; }
  .portal-onb-income-pick .portal-onb-status-pick__option { min-height: 64px; }
}

/* Multi-select chips (REQ-002.004 — Source of income). Desktop uses a
   4-column grid so the 10 options render 4 / 4 / 2 across three rows
   instead of stacking into a tall 5 / 5 tower. Tablet collapses to 2;
   phone to 1. Olive-tinted when checked. */
.portal-onb-chip-pick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}
.portal-onb-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--portal-surface);
  border: 1.5px solid var(--portal-hairline-strong);
  border-radius: 14px;
  cursor: pointer;
  font-size: var(--portal-text-label);
  color: var(--portal-ink);
  text-align: left;
  transition: background var(--portal-dur-base) var(--portal-ease-out),
              border-color var(--portal-dur-base) var(--portal-ease-out);
  /* Fixed height so 1-line and 2-line labels render the same size —
     the grid otherwise sizes every row to its tallest label, leaving
     row 3's chips visibly taller than row 1's. The label span
     stretches so its baseline aligns whether it's one line or two. */
  min-height: 72px;
  line-height: 1.3;
}

.portal-onb-chip__label {
  flex: 1 1 auto;
  min-width: 0;
}
.portal-onb-chip:hover {
  border-color: var(--portal-olive);
}
.portal-onb-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.portal-onb-chip__box {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--portal-hairline-strong);
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: transparent;
  transition: background var(--portal-dur-base) var(--portal-ease-out),
              border-color var(--portal-dur-base) var(--portal-ease-out),
              color var(--portal-dur-base) var(--portal-ease-out);
}
.portal-onb-chip__box svg { width: 14px; height: 14px; }
.portal-onb-chip:has(input:checked) {
  background: var(--portal-olive-tint);
  border-color: var(--portal-olive);
}
.portal-onb-chip:has(input:checked) .portal-onb-chip__box {
  background: var(--portal-olive);
  border-color: var(--portal-olive);
  color: #fff;
}
@media (max-width: 880px) {
  .portal-onb-chip-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .portal-onb-chip-pick { grid-template-columns: 1fr; }
}

/* Bigger stepper inside the sub-step view. The compound selector
   (.portal-onb-stepper.portal-onb-stepper--lg) raises specificity above
   the base .portal-onb-stepper { max-width: 280px } rule defined LATER
   in this file — otherwise that cap + overflow:hidden clips the + button
   once the buttons are widened to 96px. */
.portal-onb-stepper.portal-onb-stepper--lg {
  align-self: center;
  margin: 0 auto;
  max-width: 460px;
  width: 100%;
}

/* − / + buttons are the SAME size on every stepper question (years of
   service, household size, gross income). 96×96 with 40px icons. */
.portal-onb-stepper--lg .portal-onb-stepper__btn {
  width: 96px;
  min-height: 96px;
  flex-shrink: 0;
}

.portal-onb-stepper--lg .portal-onb-stepper__btn svg {
  width: 40px;
  height: 40px;
}

.portal-onb-stepper--lg .portal-onb-stepper__value {
  min-width: 0;
  flex: 1;
  padding: 16px 28px;
}

.portal-onb-stepper--lg .portal-onb-stepper__num {
  font-size: var(--portal-text-display);
}

.portal-onb-stepper--lg .portal-onb-stepper__unit {
  font-size: var(--portal-text-body);
}

/* Money stepper — the value cell holds a typeable text input rather
   than a static display span. The input is borderless (the stepper
   frame is the border) and centered. Bigger − / + buttons than the
   plain steppers so they're easy to hit. */
/* Money variant overrides the base 280px cap so the bigger buttons +
   value cell all fit; buttons never shrink. The compound selector
   (.portal-onb-stepper.portal-onb-stepper--money) raises specificity
   above the base .portal-onb-stepper rule, which is defined LATER in
   this file and would otherwise re-cap max-width to 280px (clipping
   the + button under overflow: hidden). Full width so it can hold two
   big buttons + the value cell. */
.portal-onb-stepper.portal-onb-stepper--money {
  max-width: 460px;
  width: 100%;
}

.portal-onb-stepper--money .portal-onb-stepper__value {
  min-width: 0;
  flex: 1;
}

.portal-onb-stepper--money .portal-onb-stepper__btn {
  width: 96px;
  min-height: 96px;
  flex-shrink: 0;
}

.portal-onb-stepper--money .portal-onb-stepper__btn svg {
  width: 40px;
  height: 40px;
}

@media (max-width: 520px) {
  .portal-onb-stepper--lg .portal-onb-stepper__btn,
  .portal-onb-stepper--money .portal-onb-stepper__btn { width: 76px; min-height: 80px; }
  .portal-onb-stepper--lg .portal-onb-stepper__btn svg,
  .portal-onb-stepper--money .portal-onb-stepper__btn svg { width: 32px; height: 32px; }
}

.portal-onb-stepper__money-input {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-hero);
  letter-spacing: -0.5px;
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
  padding: 0;
}

.portal-onb-stepper__money-input:focus {
  outline: none;
  color: var(--vs-olive);
}

.portal-onb-stepper__hint {
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

/* Center the upload + reassure block in sub 4 */
.portal-onb-sub[data-sub-key="upload"] .portal-onb-upload {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.portal-onb-sub[data-sub-key="upload"] .portal-onb-reassure {
  justify-content: center;
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .portal-onb-sub[data-current],
  .portal-onb-sub--shake,
  .portal-onb-sub-progress__dot {
    animation: none;
    transition: none;
  }
}

/* The old sections layout is kept for any other place that uses it. */

.portal-onb-form--sections {
  gap: 22px;
}

.portal-onb-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.portal-onb-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-onb-section__num {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--vs-olive);
  color: #ffffff;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-caption);
  line-height: 1;
}

.portal-onb-section__title {
  margin: 0;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-label);
  line-height: 1.25;
  letter-spacing: -0.15px;
  color: var(--vs-ink, #0e0f0c);
}

.portal-onb-section__sub {
  margin: 2px 0 0;
  font-size: var(--portal-text-caption);
  line-height: 1.4;
  color: var(--vs-ink-muted, #5C5E58);
}

.portal-onb-field--bare {
  gap: 0;
}

/* ---------- Branch tiles with emblems ---------- */
/* Single row of 6 at desktop — gives the user the whole branch list at
   a glance with no scanning. Collapses to 3 cols at <900px and 2 cols
   at <520px. Sits centered with generous spread in the sub-step view. */

/* All 7 branches on a single row at desktop widths. Stays a single row
   down to ~860px (~120px per tile incl. gap); collapses to 3-up below
   that, then 2-up on phones. */
.portal-onb-branch-pick {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

@media (max-width: 860px) {
  .portal-onb-branch-pick {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 520px) {
  .portal-onb-branch-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.portal-onb-branch-pick__option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 132px;
  padding: 18px 14px;
  border: 2px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  background: #ffffff;
  color: var(--vs-ink, #0e0f0c);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 140ms ease, box-shadow 200ms ease;
}

.portal-onb-branch-pick__option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.portal-onb-branch-pick__emblem {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(90, 107, 63, 0.10);
  color: var(--vs-olive);
  transition: background 180ms ease, color 180ms ease, transform 200ms ease;
}

.portal-onb-branch-pick__emblem svg {
  width: 36px;
  height: 36px;
}

.portal-onb-branch-pick__label {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-label);
  line-height: 1.15;
  text-align: center;
  letter-spacing: -0.1px;
}

.portal-onb-branch-pick__check {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vs-olive);
  color: #ffffff;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 160ms ease, transform 200ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.portal-onb-branch-pick__check svg {
  width: 12px;
  height: 12px;
}

.portal-onb-branch-pick__option:hover {
  border-color: var(--vs-olive);
  background: var(--vs-surface-alt, #f4f0e3);
  transform: translateY(-2px);
}

.portal-onb-branch-pick__option:hover .portal-onb-branch-pick__emblem {
  background: rgba(90, 107, 63, 0.18);
  transform: scale(1.05);
}

.portal-onb-branch-pick__option:has(input:checked) {
  background: rgba(90, 107, 63, 0.12);
  border-color: var(--vs-olive);
  box-shadow: 0 0 0 4px rgba(90, 107, 63, 0.18);
}

.portal-onb-branch-pick__option:has(input:checked) .portal-onb-branch-pick__emblem {
  background: var(--vs-olive);
  color: #ffffff;
}

.portal-onb-branch-pick__option:has(input:checked) .portal-onb-branch-pick__label {
  color: var(--vs-olive);
}

.portal-onb-branch-pick__option:has(input:checked) .portal-onb-branch-pick__check {
  opacity: 1;
  transform: scale(1);
}

.portal-onb-branch-pick__option:focus-within {
  outline: 2px solid var(--vs-olive);
  outline-offset: 3px;
}

/* ---------- Status tiles (Active duty / Veteran / Reserve) ---------- */

.portal-onb-status-pick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
/* 4-option variant (e.g. military status incl. Military spouse) — balanced
   2×2 instead of 3-across-plus-orphan. Mobile collapses to 1 col below. */
.portal-onb-status-pick--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .portal-onb-status-pick { grid-template-columns: 1fr; }
}

.portal-onb-status-pick__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 14px;
  border: 2px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-label);
  letter-spacing: -0.1px;
  color: var(--vs-ink, #0e0f0c);
  transition: border-color 180ms ease, background 180ms ease, transform 140ms ease, box-shadow 200ms ease;
}

.portal-onb-status-pick__option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.portal-onb-status-pick__check {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--vs-olive);
  color: #ffffff;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 160ms ease, transform 200ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.portal-onb-status-pick__check svg { width: 14px; height: 14px; }

.portal-onb-status-pick__option:hover {
  border-color: var(--vs-olive);
  background: var(--vs-surface-alt, #f4f0e3);
  transform: translateY(-1px);
}

.portal-onb-status-pick__option:has(input:checked) {
  background: rgba(90, 107, 63, 0.12);
  border-color: var(--vs-olive);
  color: var(--vs-olive);
  box-shadow: 0 0 0 4px rgba(90, 107, 63, 0.18);
}

.portal-onb-status-pick__option:has(input:checked) .portal-onb-status-pick__check {
  opacity: 1;
  transform: scale(1);
}

.portal-onb-status-pick__option:focus-within {
  outline: 2px solid var(--vs-olive);
  outline-offset: 3px;
}

/* ---------- Stepper (years-of-service) ---------- */

.portal-onb-stepper {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: var(--vs-surface-alt, #f4f0e3);
  border: 2px solid var(--vs-line, #e4e0d6);
  border-radius: 14px;
  overflow: hidden;
  align-self: flex-start;
  max-width: 280px;
}

.portal-onb-stepper__btn {
  display: inline-grid;
  place-items: center;
  width: 56px;
  min-height: 60px;
  background: #ffffff;
  border: 0;
  color: var(--vs-olive);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}

.portal-onb-stepper__btn:hover:not(:disabled) {
  background: var(--vs-olive);
  color: #ffffff;
}

.portal-onb-stepper__btn:active:not(:disabled) {
  transform: scale(0.96);
}

.portal-onb-stepper__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.portal-onb-stepper__btn:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: -3px;
}

.portal-onb-stepper__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-width: 140px;
  padding: 10px 18px;
  border-left: 2px solid var(--vs-line, #e4e0d6);
  border-right: 2px solid var(--vs-line, #e4e0d6);
}

.portal-onb-stepper__num {
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-section);
  line-height: 1;
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
}

.portal-onb-stepper__unit {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

/* ---------- XL primary button (final-step CTAs) ---------- */

.portal-onb-btn--xl {
  padding: 18px 28px;
  font-size: var(--portal-text-label);
  min-height: 56px;
}

/* Primary / ghost buttons */
.portal-onb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  min-height: 48px;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.portal-onb-btn--primary {
  background: var(--vs-olive);
  color: #ffffff;
}

.portal-onb-btn--primary:hover {
  background: var(--vs-olive-deep, #3F4828);
  transform: translateY(-1px);
}

.portal-onb-btn--primary:active { transform: scale(0.98); }

/* Inactive state — Continue stays disabled until a required option is picked
   (and Back is disabled on the first sub-step). Dimmed + not-allowed, no lift. */
.portal-onb-btn:disabled,
.portal-onb-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.portal-onb-btn--ghost {
  background: transparent;
  color: var(--vs-ink, #0e0f0c);
  border-color: var(--vs-line, #e4e0d6);
}

.portal-onb-btn--ghost:hover {
  background: var(--vs-surface-alt, #f4f0e3);
  border-color: var(--vs-olive);
  color: var(--vs-olive);
}

/* ---------- Celebration view (badge stamp) ---------- */

.portal-onb-celebration {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 32px 40px;
  gap: 12px;
  text-align: center;
  /* Confetti pieces end their fall translated up to ~760px below the
     stamp; transformed bounds extend the sheet body's scroll height,
     leaving a long empty white scroll after the burst. Clip here so
     the celebration owns its own overflow. */
  overflow: hidden;
}

.portal-onb-celebration__stamp {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  animation: portal-onb-stamp 720ms cubic-bezier(0.2, 1.4, 0.4, 1) 1;
}

.portal-onb-celebration__stamp::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 201, 87, 0.35) 0%, rgba(250, 201, 87, 0) 70%);
  animation: portal-onb-stamp-glow 1200ms ease-out 1;
  pointer-events: none;
}

.portal-onb-celebration__eyebrow {
  margin: 8px 0 0;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vs-olive);
}

.portal-onb-celebration__title {
  margin: 4px 0 0;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-hero);
  letter-spacing: -0.4px;
  color: var(--vs-ink, #0e0f0c);
}

.portal-onb-celebration__body {
  margin: 4px 0 0;
  max-width: 44ch;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
}

.portal-onb-celebration__count {
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(250, 201, 87, 0.18);
  color: var(--vs-olive);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes portal-onb-stamp {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  50%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes portal-onb-stamp-glow {
  0%   { opacity: 0; transform: scale(0.6); }
  50%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .portal-onb-celebration__stamp,
  .portal-onb-celebration__stamp::before {
    animation: none;
  }
}

/* ---------- Body lock + reduced-motion fallbacks ---------- */

body.portal-onb-sheet-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .portal-onb-sheet__panel,
  .portal-onb-sheet__backdrop,
  .portal-onb-sheet__body {
    transition: opacity 120ms ease;
  }
}




/* =========================================================================
   My Assets — dynamic financial profile (v2)
   ========================================================================= */

.ma2-body { background: #fafaf6; }

.ma2 {
  min-height: calc(100vh - 200px);
  padding: 32px 0 80px;
}

.ma2__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ---------- Hero ---------- */
.ma2-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: 24px 28px;
  background: linear-gradient(135deg, #1f2719 0%, #3F4828 80%);
  color: #ffffff;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.ma2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 400px at 90% 10%, rgba(250, 201, 87, 0.18) 0%, transparent 60%);
  pointer-events: none;
}

.ma2-hero__copy { position: relative; z-index: 1; }

.ma2-hero__eyebrow {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fac957;
}

.ma2-hero__title {
  margin: 8px 0 0;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-hero);
  line-height: 1.15;
  letter-spacing: -0.6px;
}

.ma2-hero__title strong { color: #fac957; }

.ma2-hero__lead {
  margin: 12px 0 0;
  max-width: 64ch;
  font-size: var(--portal-text-label);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.ma2-hero__controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Streak = canonical .portal-chip--gold; Show values = canonical
   .portal-btn--ghost--sm. Their look lives on the canonical components.
   Only the page-specific eye-icon swap (show/hide) stays below. */
.ma2-streak__icon { display: inline-flex; }

.ma2-mask__svg--visible { display: none; }
.ma2-mask.is-visible .ma2-mask__svg--hidden { display: none; }
.ma2-mask.is-visible .ma2-mask__svg--visible { display: inline; }

@media (max-width: 720px) {
  .ma2-hero { grid-template-columns: 1fr; }
  .ma2-hero__title { font-size: var(--portal-text-section); }
  .ma2-hero__controls { flex-wrap: wrap; }
}

/* ---------- Strength meter ---------- */
.ma2-strength {
  padding: 22px 28px;
  background: #ffffff;
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ma2-strength__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.ma2-strength__eyebrow {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-olive);
}

.ma2-strength__pct {
  margin: 0;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-hero);
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--vs-ink);
  font-feature-settings: "tnum" 1;
}

.ma2-strength__track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(90, 107, 63, 0.15);
  overflow: hidden;
}

.ma2-strength__fill {
  position: absolute;
  inset: 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, #5a6b3f 0%, #fac957 100%);
  border-radius: inherit;
  transition: width 600ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.ma2-strength__tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.ma2-strength__tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px;
  border-radius: 12px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  background: #fafaf6;
  text-align: center;
  font-family: var(--vs-font-body);
  transition: border-color 200ms ease, background 200ms ease;
}

.ma2-strength__tier-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(90, 107, 63, 0.3);
}

.ma2-strength__tier[data-tier="bronze"] .ma2-strength__tier-dot { background: #b87333; }
.ma2-strength__tier[data-tier="silver"] .ma2-strength__tier-dot { background: #b0b0b0; }
.ma2-strength__tier[data-tier="gold"]   .ma2-strength__tier-dot { background: #d4a437; }
.ma2-strength__tier[data-tier="elite"]  .ma2-strength__tier-dot { background: linear-gradient(135deg, #fac957, #5a6b3f); background-color: #fac957; }

.ma2-strength__tier-label {
  font-weight: 700;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink);
}

.ma2-strength__tier-range {
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  letter-spacing: 0.04em;
}

.ma2-strength__tier.is-current {
  border-color: var(--vs-olive);
  background: rgba(90, 107, 63, 0.08);
}

.ma2-strength__caption {
  margin: 0;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

.ma2-strength__caption-count {
  color: var(--vs-olive);
  font-weight: 700;
}

@media (max-width: 600px) {
  .ma2-strength__tiers { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Snapshot ---------- */
.ma2-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ma2-section__title {
  margin: 0;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-section);
  letter-spacing: -0.3px;
  color: var(--vs-ink);
}

.ma2-section__sub {
  margin: 0;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

/* ---------- Net worth block ---------- */
.ma2-networth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 28px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #1f2719 0%, #3F4828 85%);
  color: #ffffff;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.ma2-networth::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 320px at 85% 0%, rgba(250, 201, 87, 0.16) 0%, transparent 60%);
  pointer-events: none;
}
.ma2-networth__main, .ma2-networth__side { position: relative; z-index: 1; }

.ma2-networth__label {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fac957;
}
.ma2-networth__value {
  margin: 6px 0 0;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-display);
  line-height: 1;
  letter-spacing: -1.5px;
  color: #ffffff;
  font-feature-settings: "tnum" 1;
}
.ma2-networth__sub {
  margin: 8px 0 0;
  font-size: var(--portal-text-caption);
  color: rgba(255, 255, 255, 0.78);
}
.ma2-networth__trend { margin: 16px 0 0; }
.ma2-networth__trend svg { width: 100%; height: 56px; display: block; }
.ma2-networth__trend-cap {
  margin: 4px 0 0;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.ma2-networth__side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}
.ma2-networth__split { display: flex; flex-direction: column; gap: 6px; }
.ma2-networth__split-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ma2-networth__split-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--portal-text-caption);
  color: rgba(255, 255, 255, 0.82);
}
.ma2-networth__dot { width: 8px; height: 8px; border-radius: 50%; }
.ma2-networth__dot--up { background: #fac957; }
.ma2-networth__dot--down { background: #d98b6a; }
.ma2-networth__split-value {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-body);
  color: #ffffff;
  font-feature-settings: "tnum" 1;
}
.ma2-networth__bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  margin-bottom: 4px;
}
.ma2-networth__bar-fill {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  border-radius: inherit;
  transition: width 600ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.ma2-networth__bar-fill--assets { background: #fac957; }
.ma2-networth__bar-fill--liabs { background: #d98b6a; }

.ma2-networth__gauges {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ma2-networth__gauge { text-align: center; }
.ma2-networth__gauge-viz { background: transparent; border-radius: 0; padding: 0; }
.ma2-networth__gauge-label {
  margin: 4px 0 0;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.ma2-networth__cashflow { flex: 1; min-width: 140px; }
.ma2-networth__cashflow-label {
  margin: 0;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.ma2-networth__cashflow-value {
  margin: 4px 0 0;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-section);
  color: #fac957;
  font-feature-settings: "tnum" 1;
}
.ma2-networth__cashflow.is-negative .ma2-networth__cashflow-value { color: #f0a58c; }
.ma2-networth__cashflow-detail {
  margin: 2px 0 0;
  font-size: var(--portal-text-caption);
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 720px) {
  .ma2-networth { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .ma2-networth__value { font-size: var(--portal-text-display); }
}

/* ---------- Recommendations rail ---------- */
.ma2-recs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.ma2-rec {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  background: #ffffff;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-left-width: 4px;
  border-left-color: var(--vs-olive);
  border-radius: 14px;
}
.ma2-rec--gold { border-left-color: #c19a2c; }
.ma2-rec--alert { border-left-color: #b3402f; }
/* Visuals come from the canonical .portal-iconbtn--sm--ghost; positioning hook only. */
.ma2-rec__dismiss { position: absolute; top: 12px; right: 12px; }
.ma2-rec__head { display: flex; align-items: center; gap: 10px; padding-right: 28px; }
.ma2-rec__headtext { display: flex; flex-direction: column; gap: 2px; }
.ma2-rec__eyebrow {
  margin: 0;
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
}
.ma2-rec__value {
  margin: 0;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(250, 201, 87, 0.2);
  color: var(--vs-olive-deep, #3F4828);
  border-radius: 999px;
  font-size: var(--portal-text-caption);
  font-weight: 700;
  font-feature-settings: "tnum" 1;
}
.ma2-rec__icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(90, 107, 63, 0.12);
  color: var(--vs-olive);
  flex-shrink: 0;
}
.ma2-rec__title {
  margin: 0;
  /* Graphik — Stratum left the portal type system (round 3); rec titles
     were the last holdout. */
  font-family: var(--portal-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  letter-spacing: -0.2px;
  color: var(--vs-ink, #0e0f0c);
}
.ma2-rec__body {
  margin: 0;
  font-size: var(--portal-text-caption);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
}
/* Visuals come from the canonical .portal-btn--primary--sm; layout hook only. */
.ma2-rec__cta { margin-top: auto; align-self: flex-start; }

/* Feature variant — used on the activated dashboard (portal-activated): a
   larger offer title (label -> card-title) plus a recommended-partner logo
   footer. The base .ma2-rec is unchanged so My Assets renders as before.
   Extra breathing room + a subtle warm surface so the card reads as a
   "recommendation" rather than a compact list row.

   Round-3 redesign (2026-07-09): ONE type family (Graphik), ONE overline,
   and the estimated value moved from a tinted display band into a quiet
   "receipt line" (.ma2-rec__stat) above the footer. Reading order:
   what is it (icon + eyebrow + title) → why (body) → what it's worth
   (stat) → what to do (partner + CTA). Severity speaks through the left
   rail + the stat number's colour only. */
.ma2-rec--feature {
  padding: 24px 24px 20px;
  gap: 14px;
  background: var(--portal-surface, #fff);
  transition: transform var(--portal-dur-base) var(--portal-ease-out),
              box-shadow var(--portal-dur-base) var(--portal-ease-out);
}
.ma2-rec--feature:hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 0 rgba(14, 15, 12, 0.03),
    0 12px 28px -18px rgba(74, 91, 45, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .ma2-rec--feature { transition: none; }
  .ma2-rec--feature:hover { transform: none; box-shadow: none; }
}
.ma2-rec--feature .ma2-rec__head { padding-right: 0; gap: 14px; }
.ma2-rec--feature .ma2-rec__eyebrow { font-weight: 600; }
.ma2-rec--feature .ma2-rec__icon {
  width: 44px;
  height: 44px;
}
.ma2-rec--feature .ma2-rec__title {
  font-size: var(--portal-text-card-title);
  line-height: 1.25;
}
.ma2-rec--feature .ma2-rec__body {
  font-size: var(--portal-text-body);
  color: var(--portal-ink-secondary);
}
/* Receipt line — label left, value right, on one baseline. The single
   place the estimated value appears (replaces the old tinted hero band). */
.ma2-rec__stat {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--portal-hairline, #e4e0d6);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ma2-rec__stat-label {
  font-size: var(--portal-text-body);
  font-weight: 500;
  color: var(--portal-ink-secondary);
}
.ma2-rec__stat-value {
  font-family: var(--portal-font-body);
  font-weight: 600;
  font-size: var(--portal-num-data);
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  color: var(--portal-olive-deep);
  white-space: nowrap;
}
.ma2-rec__stat-unit {
  font-size: var(--portal-text-body);
  font-weight: 500;
  color: var(--portal-ink-secondary);
  margin-left: 2px;
}
/* Severity speaks through the number (and the left rail) — nothing else. */
.ma2-rec--gold .ma2-rec__stat-value { color: #8a6d1f; }
.ma2-rec--alert .ma2-rec__stat-value { color: #b3402f; }
.ma2-rec--feature .ma2-rec__value {
  align-self: flex-start;
  padding: 6px 14px;
  font-size: var(--portal-text-caption);
}
/* Footer row (Sprint 10 hierarchy pass) — ONE bottom line: recommended-
   partner badge + logo on the left, a compact primary CTA on the right.
   Replaces the stacked partner label + full-width button, which gave the
   card two competing bottom blocks and an oversized action. */
.ma2-rec--feature .ma2-rec__foot {
  padding-top: 12px;
  /* Solid, matching the stat line above — one rule style per card. Cards
     without a stat row (no hero value) still pin the foot to the bottom. */
  border-top: 1px solid var(--portal-hairline, #e4e0d6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ma2-rec--feature .ma2-rec__stat + .ma2-rec__foot { margin-top: 0; }
.ma2-rec--feature .ma2-rec__body + .ma2-rec__foot { margin-top: auto; }
.ma2-rec--feature .ma2-rec__cta {
  margin-top: 0;
  margin-left: auto;
  align-self: auto;
}
.ma2-rec__partner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
}
.ma2-rec--feature .ma2-rec__partner { margin: 0; }
.ma2-rec__partner-badge {
  /* Plain caption, not a pill — the footer already carries a logo and a
     button; a third chip shape was one style too many (round 3). */
  display: inline-flex;
  align-items: center;
  color: var(--portal-ink-muted, #5C5E58);
  font-size: var(--portal-text-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ma2-rec__partner-badge svg { flex: 0 0 auto; }
.ma2-rec__partner-label {
  font-size: var(--portal-text-caption);
  font-weight: 600;
  color: var(--vs-ink-muted, #5C5E58);
}
.ma2-rec__partner img {
  /* Pastel #308 — was 22/96, "looks really insignificant". */
  max-height: 32px;
  max-width: 148px;
  width: auto;
  object-fit: contain;
  /* Partner marks ship white-on-transparent (benefit-card media) — flatten
     to an ink mark so they read on the white card. */
  filter: brightness(0);
  opacity: 0.82;
}

/* ---------- Document vault (Phase F) ---------- */
/* One-line carousel of document tiles (same pattern as the achievements rail). */
.ma2-vault__list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.ma2-vault__list::-webkit-scrollbar { display: none; }
.ma2-vault__nav { display: inline-flex; align-items: center; gap: 10px; }
.ma2-doc {
  flex: 0 0 190px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 22px 16px 18px;
  background: #ffffff;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
}
.ma2-doc.is-on { border-color: rgba(90, 107, 63, 0.4); }
.ma2-doc__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--vs-surface-alt, #f4f0e3);
  color: var(--vs-ink-muted, #5C5E58);
  flex-shrink: 0;
}
.ma2-doc.is-on .ma2-doc__icon { background: rgba(90, 107, 63, 0.12); color: var(--vs-olive); }
.ma2-doc__badge, .ma2-doc__via, .ma2-doc__add { margin-top: auto; }
.ma2-doc__text { flex: 1; min-width: 0; }
.ma2-doc__label { margin: 0; font-weight: 700; font-size: var(--portal-text-label); color: var(--vs-ink, #0e0f0c); }
.ma2-doc__status {
  margin: 2px 0 0;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  word-break: break-word;
}
.ma2-doc__badge {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(90, 107, 63, 0.12);
  color: var(--vs-olive);
  font-size: var(--portal-text-caption);
  font-weight: 700;
}
.ma2-doc__via { flex-shrink: 0; font-size: var(--portal-text-caption); color: var(--vs-ink-muted, #5C5E58); }
/* Visuals come from the canonical .portal-btn--ghost--sm (see my-assets.js).
   This class is now a layout hook only — bottom-aligns the button in the tile. */
.ma2-doc__add { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .ma2-networth__bar-fill { transition: none; }
  .ma2-rec__cta,
  .ma2-rec__dismiss { transition: none; }
  .ma2-rec__cta:hover { transform: none; }
  .ma2-doc__add,
  .ma2-print-btn { transition: none; }
}

/* ---------- Print / export summary (Phase G) ---------- */
.ma2-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  transition: background 160ms ease, border-color 160ms ease;
}
.ma2-print-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.36); }
.ma2-print { display: none; }
/* Even though .ma2-print is hidden on screen, its descendants exist in the
   DOM and contribute to the typography audit. Pin h1/h2 to the scale so a
   bare `<h2>` doesn't inherit the browser's 1.5em (27px) default. */
.ma2-print__title { font-size: var(--portal-text-section); }
.ma2-print__block h2 { font-size: var(--portal-text-caption); }

@media print {
  /* Hide everything on the page, then reveal only the summary block. */
  body { visibility: hidden; background: #ffffff; }
  .ma2-print, .ma2-print * { visibility: visible; }
  .ma2-print {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0 8px;
    color: #0e0f0c;
    font-family: var(--vs-font-body, Arial, sans-serif);
  }
  .ma2-print__head {
    border-bottom: 2px solid #3F4828;
    padding-bottom: 8px;
    margin-bottom: 16px;
  }
  .ma2-print__brand {
    margin: 0;
    font-size: var(--portal-text-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5a6b3f;
  }
  .ma2-print__title { margin: 4px 0 0; font-size: var(--portal-text-section); }
  .ma2-print__date { margin: 2px 0 0; font-size: var(--portal-text-caption); color: #555555; }
  .ma2-print__block { margin-bottom: 14px; break-inside: avoid; }
  .ma2-print__block h2 {
    margin: 0 0 4px;
    font-size: var(--portal-text-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3F4828;
    border-bottom: 1px solid #dddddd;
    padding-bottom: 2px;
  }
  .ma2-print table { width: 100%; border-collapse: collapse; font-size: var(--portal-text-caption); }
  .ma2-print td { padding: 3px 0; vertical-align: top; }
  .ma2-print td:last-child { text-align: right; font-weight: 700; font-feature-settings: "tnum" 1; }
  .ma2-print__foot { margin-top: 16px; font-size: var(--portal-text-caption); color: #777777; }
}

/* ---------- Manage list / per-item editing (Phase H) ---------- */
.ma2-manage__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ma2-manage__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--vs-surface-alt, #f4f0e3);
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
}
.ma2-manage__info { flex: 1; min-width: 0; }
.ma2-manage__summary {
  margin: 0;
  font-weight: 700;
  font-size: var(--portal-text-label);
  color: var(--vs-ink, #0e0f0c);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ma2-manage__tag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(90, 107, 63, 0.12);
  color: var(--vs-olive);
  font-size: var(--portal-text-caption);
  font-weight: 700;
}
.ma2-manage__actions { display: flex; gap: 6px; flex-shrink: 0; }
.ma2-manage__btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 10px;
  background: #ffffff;
  color: var(--vs-olive);
  cursor: pointer;
  transition: background 140ms ease-out, border-color 140ms ease-out, transform 140ms ease-out;
}
.ma2-manage__btn:active { transform: scale(0.97); }
.ma2-manage__btn--danger { color: #b3402f; }
.ma2-manage__empty {
  margin: 0 0 8px;
  padding: 14px 16px;
  color: var(--vs-ink-muted, #5C5E58);
  font-size: var(--portal-text-caption);
}
.ma2-manage__add { width: 100%; justify-content: center; }
.ma2-sheet__foot--single { justify-content: flex-end; }
@media (hover: hover) and (pointer: fine) {
  .ma2-manage__btn:hover { background: var(--vs-surface-alt, #f4f0e3); border-color: var(--vs-olive); }
  .ma2-manage__btn--danger:hover { border-color: #b3402f; background: rgba(179, 64, 47, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .ma2-manage__btn { transition: none; }
  .ma2-manage__btn:active { transform: none; }
}

/* ---------- Category grid ---------- */
.ma2-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px) {
  .ma2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ma2-grid { grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */
.ma2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
  background: #ffffff;
  border-radius: 18px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  transition: border-color 200ms ease, transform 160ms ease, box-shadow 200ms ease;
  min-height: 220px;
}

.ma2-card:hover {
  border-color: var(--vs-olive);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(63, 72, 40, 0.10);
}

.ma2-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ma2-card__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(90, 107, 63, 0.10);
  color: var(--vs-olive);
  flex-shrink: 0;
}

.ma2-card__title {
  margin: 0;
  flex: 1;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-label);
  letter-spacing: -0.2px;
  color: var(--vs-ink);
  line-height: 1.2;
}

.ma2-card__done {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--vs-olive);
  color: #ffffff;
}

.ma2-card__edit,
.ma2-card__iconbtn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  background: #ffffff;
  border-radius: 50%;
  color: var(--vs-ink-muted, #5C5E58);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.ma2-card__edit:hover,
.ma2-card__iconbtn:hover {
  background: var(--vs-olive);
  color: #ffffff;
  border-color: var(--vs-olive);
}

/* ---------- Detail view modal (read-only "see everything collected") ---------- */
.ma2-detail {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.ma2-detail:not([hidden]) { pointer-events: auto; }

.ma2-detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 15, 12, 0);
  cursor: pointer;
  transition: background 240ms ease;
}
.ma2-detail.is-open .ma2-detail__backdrop { background: rgba(14, 15, 12, 0.55); }

.ma2-detail__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 240ms ease, transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.ma2-detail.is-open .ma2-detail__panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.ma2-detail__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
}
.ma2-detail__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(90, 107, 63, 0.10);
  color: var(--vs-olive);
}
.ma2-detail__eyebrow {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vs-olive);
}
.ma2-detail__title {
  margin: 2px 0 0;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-card-title);
  letter-spacing: -0.3px;
  color: var(--vs-ink, #0e0f0c);
}
.ma2-detail__close {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  background: #ffffff;
  border-radius: 50%;
  color: var(--vs-ink, #0e0f0c);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ma2-detail__close:hover { background: var(--vs-surface-alt, #f4f0e3); border-color: var(--vs-olive); color: var(--vs-olive); }

.ma2-detail__body {
  padding: 16px 24px 8px;
  overflow-y: auto;
}
.ma2-detail__group-title {
  margin: 16px 0 8px;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.02em;
  color: var(--vs-olive);
}
.ma2-detail__group-title:first-child { margin-top: 0; }
.ma2-detail__rows { margin: 0 0 8px; }
.ma2-detail__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
}
.ma2-detail__row:last-child { border-bottom: 0; }
.ma2-detail__row dt {
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}
.ma2-detail__row dd {
  margin: 0;
  font-size: var(--portal-text-label);
  font-weight: 700;
  color: var(--vs-ink, #0e0f0c);
  text-align: right;
  font-feature-settings: "tnum" 1;
}
.ma2-detail__empty {
  padding: 20px;
  text-align: center;
  color: var(--vs-ink-muted, #5C5E58);
}

/* Comparison table (e.g. Debts) inside the detail view. */
.ma2-detail-table-wrap { overflow-x: auto; }
.ma2-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--portal-text-caption);
}
.ma2-detail-table th,
.ma2-detail-table td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
  white-space: nowrap;
}
.ma2-detail-table th {
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-ink-muted, #5C5E58);
}
.ma2-detail-table td { color: var(--vs-ink, #0e0f0c); }
.ma2-detail-table td:first-child { font-weight: 600; }
.ma2-detail-table .is-num { text-align: right; font-feature-settings: "tnum" 1; }
.ma2-detail-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--vs-line, #e4e0d6);
  border-bottom: none;
}
.ma2-detail__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--vs-line, #e4e0d6);
}
.ma2-detail__meta { font-size: var(--portal-text-caption); color: var(--vs-ink-muted, #5C5E58); }

@media (prefers-reduced-motion: reduce) {
  .ma2-detail__panel, .ma2-detail__backdrop { transition: opacity 120ms ease; }
}

.ma2-card__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(250, 201, 87, 0.22);
  color: var(--vs-olive-deep, #3F4828);
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.06em;
}

.ma2-card__pitch {
  margin: 0;
  font-size: var(--portal-text-caption);
  line-height: 1.45;
  color: var(--vs-ink-muted, #5C5E58);
}

.ma2-card__get {
  margin: 0;
  font-size: var(--portal-text-caption);
  font-weight: 600;
  color: var(--vs-olive);
}

.ma2-card__get-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 4px;
}

/* Visuals come from the canonical .portal-btn--primary; layout hook only. */
.ma2-card__cta { margin-top: auto; align-self: flex-start; }

.ma2-card__time {
  margin: 6px 0 0;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
  text-align: center;
}

.ma2-card__locked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 10px 12px;
  background: var(--vs-surface-alt, #f4f0e3);
  color: var(--vs-ink-muted, #5C5E58);
  border-radius: 10px;
  font-size: var(--portal-text-caption);
  font-weight: 600;
}

.ma2-card__link {
  background: transparent;
  border: 0;
  color: var(--vs-olive);
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-caption);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
  align-self: flex-start;
}

.ma2-card--empty {
  border-style: dashed;
  border-color: rgba(90, 107, 63, 0.32);
  background: #fafaf6;
}

.ma2-card--collecting {
  border-color: var(--vs-olive);
  border-width: 2px;
  background: rgba(90, 107, 63, 0.06);
}

.ma2-card--filled .ma2-card__head { gap: 10px; }

.ma2-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.ma2-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ma2-card__stat-value {
  margin: 0;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-section);
  letter-spacing: -0.4px;
  color: var(--vs-ink);
  font-feature-settings: "tnum" 1;
}

.ma2-card__stat-label {
  margin: 0;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

.ma2-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ma2-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--vs-surface-alt, #f4f0e3);
  color: var(--vs-ink, #0e0f0c);
  border-radius: 999px;
  font-size: var(--portal-text-caption);
  font-weight: 600;
}

.ma2-card__chip--ok {
  background: rgba(90, 107, 63, 0.12);
  color: var(--vs-olive);
}

/* Attention chip — a gentle prompt (e.g. SBP not enrolled), not an alarm. */
.ma2-card__chip--warn {
  background: rgba(217, 139, 106, 0.16);
  color: #9a4a2c;
}

/* Key/value rows inside a filled card (e.g. Home: value + mortgage).
   Visual rank rule: the .ma2-card__stat-value is the hero. These rows
   are SECONDARY — labels muted, values medium weight, no bold. The
   user complaint was that filled cards felt "scary" with every number
   competing for attention; demoting these row values restores the
   single-glance read. */
.ma2-card__rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--portal-space-1);
}

.ma2-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ma2-card__row dt {
  font-size: var(--portal-text-caption);
  color: var(--portal-ink-muted, #6b6e66);
}

.ma2-card__row dd {
  margin: 0;
  font-size: var(--portal-text-caption);
  font-weight: 500;
  color: var(--portal-ink-secondary, #2a2c2a);
  font-feature-settings: "tnum" 1;
}

/* Cap the visible rows to keep the card calm. Anything past the third
   row collapses behind a "Show all details" toggle (data attribute is
   set by my-assets.js when the user clicks). Tiles already lean to
   2-3 rows, so this is a safety net for unusually busy categories. */
.ma2-card__rows .ma2-card__row:nth-child(n + 4) {
  display: none;
}
.ma2-card--expanded .ma2-card__rows .ma2-card__row:nth-child(n + 4) {
  display: flex;
}

/* Eligibility / activation nudge. Demoted from the previous "shouty"
   gold pill — same gold accent, but quieter padding, regular weight,
   smaller dot indicator so it stops competing with the primary stat. */
.ma2-card__insight {
  margin: 0;
  padding: 6px 10px;
  background: rgba(250, 201, 87, 0.12);
  color: var(--vs-olive-deep, #3F4828);
  border-radius: 8px;
  font-size: var(--portal-text-caption);
  font-weight: 500;
  letter-spacing: 0;
}

/* Equity bar — demote the visual weight so the bar reads as a soft
   indicator, not the focal point. (Bar geometry is unchanged.) */
.ma2-card__equity { opacity: 0.85; }
.ma2-card__meta { color: var(--portal-ink-muted, #6b6e66); }
/* Active/on state (olive) vs the gold "eligible" nudge above. */
.ma2-card__insight--on { background: rgba(90, 107, 63, 0.14); }

/* Vehicle card hero — silhouette thumbnail + value/name. */
.ma2-vehcard { display: flex; align-items: center; gap: 14px; }
.ma2-vehcard__thumb {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--vs-surface-alt, #f4f0e3);
  color: var(--vs-olive);
}
.ma2-vehcard__thumb svg { width: 40px; height: 40px; }
.ma2-vehcard__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Banking: checking vs savings split bar. */
.ma2-cashsplit { display: flex; flex-direction: column; gap: 8px; }
.ma2-cashsplit__bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--vs-surface-alt, #f4f0e3); }
.ma2-cashsplit__seg { display: block; width: var(--pct, 0%); height: 100%; }
.ma2-cashsplit__seg--checking { background: var(--vs-olive); }
.ma2-cashsplit__seg--savings { background: #fac957; }
.ma2-cashsplit__legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--portal-text-caption); color: var(--vs-ink-muted, #5C5E58); }
.ma2-cashsplit__item { display: inline-flex; align-items: center; gap: 6px; }
.ma2-cashsplit__item strong { color: var(--vs-ink, #0e0f0c); font-feature-settings: "tnum" 1; }
.ma2-cashsplit__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ma2-cashsplit__dot--checking { background: var(--vs-olive); }
.ma2-cashsplit__dot--savings { background: #fac957; }
/* Income guaranteed-vs-variable variant (same bar, retirement-income colours). */
.ma2-cashsplit__seg--guar { background: var(--vs-olive); }
.ma2-cashsplit__seg--var { background: #fac957; }
.ma2-cashsplit__dot--guar { background: var(--vs-olive); }
.ma2-cashsplit__dot--var { background: #fac957; }
/* Expenses essential-vs-discretionary variant (olive = essential, gold = nice-to-have). */
.ma2-cashsplit__seg--essential { background: var(--vs-olive); }
.ma2-cashsplit__seg--discretionary { background: #fac957; }
.ma2-cashsplit__dot--essential { background: var(--vs-olive); }
.ma2-cashsplit__dot--discretionary { background: #fac957; }

/* Investments — 360 allocation bar (multi-segment by group). */
.ma2-alloc { display: flex; flex-direction: column; gap: 10px; }
.ma2-alloc__bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--vs-surface-alt, #f4f0e3); }
.ma2-alloc__seg { display: block; width: var(--pct, 0%); height: 100%; }
.ma2-alloc__seg--retirement { background: var(--vs-olive); }
.ma2-alloc__seg--taxable { background: #fac957; }
.ma2-alloc__seg--education { background: #c98c5e; }
.ma2-alloc__seg--health { background: #aab87a; }
.ma2-alloc__seg--other { background: #b0b0b0; }
.ma2-alloc__legend { display: flex; flex-direction: column; gap: 6px; }
.ma2-alloc__item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--portal-text-caption); color: var(--vs-ink-muted, #5C5E58); }
.ma2-alloc__item strong { color: var(--vs-ink, #0e0f0c); font-feature-settings: "tnum" 1; }
.ma2-alloc__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ma2-alloc__dot--retirement { background: var(--vs-olive); }
.ma2-alloc__dot--taxable { background: #fac957; }
.ma2-alloc__dot--education { background: #c98c5e; }
.ma2-alloc__dot--health { background: #aab87a; }
.ma2-alloc__dot--other { background: #b0b0b0; }

/* Vehicle detail — pager of car profile cards (arrows + "Car X of N"). */
.ma2-carousel { display: flex; flex-direction: column; gap: 18px; }
.ma2-carousel__viewport { overflow: hidden; }
.ma2-carousel__track { display: flex; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.ma2-carousel__track > * { flex: 0 0 100%; min-width: 0; }
.ma2-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.ma2-carousel__arrow {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  background: #ffffff;
  color: var(--vs-olive);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.ma2-carousel__arrow:hover:not(:disabled) { background: var(--vs-olive); color: #ffffff; border-color: var(--vs-olive); transform: translateY(-1px); }
.ma2-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.ma2-carousel__count {
  min-width: 96px; text-align: center;
  font-family: var(--vs-font-body); font-weight: 700;
  font-size: var(--portal-text-label); color: var(--vs-ink, #0e0f0c);
  font-variant-numeric: tabular-nums;
}

.ma2-carcard {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  background: var(--vs-surface, #ffffff);
}
.ma2-carcard__hero { display: flex; align-items: center; gap: 14px; }
.ma2-carcard__thumb {
  flex-shrink: 0; display: inline-grid; place-items: center;
  width: 64px; height: 64px; border-radius: 14px;
  background: var(--vs-surface-alt, #f4f0e3); color: var(--vs-olive);
}
.ma2-carcard__thumb svg { width: 44px; height: 44px; }
.ma2-carcard__id { flex: 1; min-width: 0; }
.ma2-carcard__name { margin: 0; font-family: var(--vs-font-display, var(--vs-font-body)); font-weight: 700; font-size: var(--portal-text-card-title); color: var(--vs-ink, #0e0f0c); }
.ma2-carcard__sub { margin: 2px 0 0; font-size: var(--portal-text-caption); color: var(--vs-ink-muted, #5C5E58); }
.ma2-carcard__value { font-family: var(--vs-font-display, var(--vs-font-body)); font-weight: 700; font-size: var(--portal-text-section); color: var(--vs-ink, #0e0f0c); font-feature-settings: "tnum" 1; }
.ma2-carcard__valuerow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ma2-carcard__valuelabel { font-size: var(--portal-text-caption); font-weight: 600; color: var(--vs-ink-muted, #5C5E58); }

/* Generic item profile card (banking / investments / insurance / home / income). */
.ma2-itemcard { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1.5px solid var(--vs-line, #e4e0d6); border-radius: 16px; background: var(--vs-surface, #ffffff); }
.ma2-itemcard__head { display: flex; align-items: center; gap: 14px; }
.ma2-itemcard__thumb { flex-shrink: 0; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--vs-surface-alt, #f4f0e3); color: var(--vs-olive); }
.ma2-itemcard__thumb svg { width: 30px; height: 30px; }
.ma2-itemcard__id { flex: 1; min-width: 0; }
.ma2-itemcard__eyebrow { margin: 0; font-size: var(--portal-text-eyebrow); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vs-olive); }
.ma2-itemcard__title { margin: 2px 0 0; font-family: var(--vs-font-display, var(--vs-font-body)); font-weight: 700; font-size: var(--portal-text-card-title); color: var(--vs-ink, #0e0f0c); word-break: break-word; }
.ma2-carcard__badge { font-size: var(--portal-text-caption); font-weight: 700; color: var(--vs-olive-deep, #3F4828); background: rgba(90, 107, 63, 0.14); padding: 4px 10px; border-radius: 999px; }
.ma2-carcard__specs { margin: 0; border-top: 1px solid var(--vs-line, #e4e0d6); }
.ma2-carcard__spec { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--vs-line, #e4e0d6); }
.ma2-carcard__spec:last-child { border-bottom: 0; }
.ma2-carcard__spec dt { font-size: var(--portal-text-label); color: var(--vs-ink-muted, #5C5E58); }
.ma2-carcard__spec dd { margin: 0; text-align: right; font-weight: 700; font-size: var(--portal-text-label); color: var(--vs-ink, #0e0f0c); font-feature-settings: "tnum" 1; }

@media (prefers-reduced-motion: reduce) {
  .ma2-carousel__track { transition: none; }
  .ma2-carousel__arrow { transition: none; }
}

.ma2-card__meta {
  margin: 4px 0 0;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}
/* Upcoming-renewal flag — gentle amber, never alarming red for seniors. */
.ma2-card__meta--warn { color: var(--vs-warn-ink, #6b3f0a); font-weight: 700; }

/* ---------- Inline viz: gauge + equity bar ---------- */
.ma2-gauge { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ma2-gauge__label { margin: 0; font-size: var(--portal-text-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vs-ink-muted, #5C5E58); }

.ma2-equity {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ma2-equity__track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(90, 107, 63, 0.18);
  overflow: hidden;
}

.ma2-equity__fill {
  position: absolute;
  inset: 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, #5a6b3f 0%, #fac957 100%);
  border-radius: inherit;
  transition: width 540ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.ma2-equity__label {
  margin: 0;
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vs-olive);
}

/* ---------- Achievements ---------- */
.ma2-ach {
  padding: 22px 28px;
  background: #ffffff;
  border: 1px solid var(--vs-line, #e4e0d6);
  border-radius: 20px;
}

.ma2-ach__count {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  color: var(--vs-olive);
  white-space: nowrap;
}

/* One box of visual badges — earned in full color, locked dimmed, each with
   its "how to earn it" line. */
.ma2-ach__grid {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.ma2-ach__grid::-webkit-scrollbar { display: none; }
.ma2-ach__nav { display: inline-flex; align-items: center; gap: 10px; }

.ma2-ach__badge {
  flex: 0 0 150px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 20px 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--vs-line, #e4e0d6);
  background: #ffffff;
}

.ma2-ach__badge.is-earned {
  background: rgba(90, 107, 63, 0.06);
  border-color: rgba(90, 107, 63, 0.28);
}

.ma2-ach__medal {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
}

.ma2-ach__medal-svg { display: block; color: var(--portal-olive); transition: filter 240ms ease, opacity 240ms ease; }
.ma2-ach__badge.is-locked .ma2-ach__medal-svg { filter: grayscale(1); opacity: 0.45; }

.ma2-ach__status {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ffffff;
}
.ma2-ach__badge.is-earned .ma2-ach__status { background: var(--vs-olive); color: #ffffff; }
.ma2-ach__badge.is-locked .ma2-ach__status { background: #e4e0d6; color: var(--vs-ink-muted, #5C5E58); }
.ma2-ach__status svg { width: 13px; height: 13px; }

.ma2-ach__label {
  margin: 4px 0 0;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-label);
  color: var(--vs-ink, #0e0f0c);
}
.ma2-ach__desc { margin: 0; font-size: var(--portal-text-caption); line-height: 1.35; color: var(--vs-ink-muted, #5C5E58); }
.ma2-ach__tag {
  margin-top: 4px;
  font-size: var(--portal-text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ma2-ach__badge.is-earned .ma2-ach__tag { color: var(--vs-olive); }
.ma2-ach__badge.is-locked .ma2-ach__tag { color: var(--vs-ink-muted, #5C5E58); }

@media (prefers-reduced-motion: reduce) {
  .ma2-ach__medal-svg { transition: none; }
}

/* ---------- Trust footer ---------- */
.ma2-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 20px 28px;
  background: var(--vs-surface-alt, #f4f0e3);
  border-radius: 16px;
}

@media (max-width: 720px) { .ma2-trust { grid-template-columns: 1fr; } }

.ma2-trust__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.ma2-trust__item--link { color: inherit; }
.ma2-trust__item--link:hover .ma2-trust__label { color: var(--vs-olive); }

.ma2-trust__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--vs-olive);
  border: 1.5px solid var(--vs-line, #e4e0d6);
}

.ma2-trust__label { margin: 0; font-weight: 700; font-size: var(--portal-text-caption); color: var(--vs-ink); }
.ma2-trust__note { margin: 2px 0 0; font-size: var(--portal-text-caption); color: var(--vs-ink-muted, #5C5E58); }

/* ---------- Sheet (collection wizard) ---------- */
.ma2-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.ma2-sheet:not([hidden]) { pointer-events: auto; }

.ma2-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 15, 12, 0);
  cursor: pointer;
  transition: background 280ms ease;
}

.ma2-sheet.is-open .ma2-sheet__backdrop { background: rgba(14, 15, 12, 0.6); }

.ma2-sheet__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 280ms ease, transform 340ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.ma2-sheet.is-open .ma2-sheet__panel {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.ma2-sheet__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 28px 12px;
}

.ma2-sheet__eyebrow {
  margin: 0;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vs-olive);
}

.ma2-sheet__title {
  margin: 4px 0 0;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-section);
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--vs-ink);
}

.ma2-sheet__close {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  background: #ffffff;
  border-radius: 50%;
  color: var(--vs-ink);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ma2-sheet__close:hover { background: var(--vs-surface-alt, #f4f0e3); border-color: var(--vs-olive); color: var(--vs-olive); }

.ma2-sheet__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 28px 12px;
}

.ma2-sheet__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(90, 107, 63, 0.22);
  transition: width 220ms cubic-bezier(0.2, 0.9, 0.3, 1), background 200ms ease;
}

.ma2-sheet__dot.is-done { background: var(--vs-olive); }
.ma2-sheet__dot.is-active { width: 24px; background: var(--vs-olive); }

.ma2-sheet__progress-label {
  margin-left: auto;
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.04em;
  color: var(--vs-olive);
}

.ma2-sheet__body {
  padding: 12px 28px 0;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ma2-sheet__sub {
  margin: 0;
  font-size: var(--portal-text-caption);
  line-height: 1.5;
  color: var(--vs-ink-muted, #5C5E58);
}

.ma2-sheet__privacy {
  margin: 4px 0 0;
  padding: 10px 12px;
  background: rgba(90, 107, 63, 0.06);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--portal-text-caption);
  color: var(--vs-olive);
  width: fit-content;
  font-weight: 600;
}

.ma2-sheet__foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 28px 22px;
  border-top: 1px solid var(--vs-line, #e4e0d6);
  margin-top: 8px;
}

.ma2-sheet__skip {
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  color: var(--vs-ink-muted, #5C5E58);
  text-align: center;
  text-decoration: none;
}

.ma2-sheet__skip:hover { color: var(--vs-olive); }

body.ma2-sheet-open { overflow: hidden; }

/* ---------- Wizard inputs ---------- */
.ma2-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--portal-radius-button);
  font-family: var(--portal-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  min-height: 48px;
  transition: background-color var(--portal-dur-fast) var(--portal-ease-out), color var(--portal-dur-fast) var(--portal-ease-out), border-color var(--portal-dur-fast) var(--portal-ease-out), transform var(--portal-dur-fast) var(--portal-ease-out), box-shadow var(--portal-dur-fast) var(--portal-ease-out);
}

.ma2-btn--primary { background: var(--portal-olive); color: #ffffff; }
.ma2-btn--primary:hover { background: var(--portal-olive-hover); color: #ffffff; transform: translateY(-1px); box-shadow: 0 6px 16px -6px var(--portal-olive-shadow); }

.ma2-btn--ghost { background: transparent; color: var(--vs-ink); border-color: var(--vs-line, #e4e0d6); }
.ma2-btn--ghost:hover { background: var(--vs-surface-alt, #f4f0e3); border-color: var(--vs-olive); color: var(--vs-olive); }
.ma2-btn--ghost:disabled { opacity: 0.4; cursor: not-allowed; }
.ma2-btn--ghost:disabled:hover { background: transparent; border-color: var(--vs-line, #e4e0d6); color: var(--vs-ink); }

.ma2-input {
  display: block;
}

.ma2-input input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-label);
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  background: #ffffff;
  color: var(--vs-ink);
  min-height: 56px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.ma2-input input:focus {
  outline: none;
  border-color: var(--vs-olive);
  box-shadow: 0 0 0 4px rgba(90, 107, 63, 0.16);
  background: #faf7eb;
}

.ma2-input-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}

.ma2-input-rating input[type="range"] {
  width: 100%;
  height: 12px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(90, 107, 63, 0.18);
  border-radius: 999px;
  outline: none;
}

.ma2-input-rating input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--vs-olive);
  border: 4px solid #ffffff;
  box-shadow: 0 2px 8px rgba(63, 72, 40, 0.36);
  cursor: pointer;
}

.ma2-input-rating input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--vs-olive);
  border: 4px solid #ffffff;
  cursor: pointer;
}

.ma2-input-rating__value {
  margin: 0;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: var(--portal-text-hero);
  color: var(--vs-olive);
  font-feature-settings: "tnum" 1;
}

/* Money stepper — typeable $ input flanked by big − / + buttons. */
.ma2-money {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 14px;
  overflow: hidden;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.ma2-money__btn {
  display: inline-grid;
  place-items: center;
  width: 84px;
  min-height: 72px;
  flex-shrink: 0;
  background: #ffffff;
  border: 0;
  color: var(--vs-olive);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}

.ma2-money__btn svg { width: 34px; height: 34px; }

.ma2-money__btn:hover { background: var(--vs-olive); color: #ffffff; }
.ma2-money__btn:active { transform: scale(0.96); }

.ma2-money__input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-left: 1.5px solid var(--vs-line, #e4e0d6);
  border-right: 1.5px solid var(--vs-line, #e4e0d6);
  background: #ffffff;
  text-align: center;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-hero);
  letter-spacing: -0.5px;
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
  padding: 8px 6px;
}

.ma2-money__input:focus {
  outline: none;
  background: #faf7eb;
  color: var(--vs-olive);
}

.ma2-money__hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}

@media (max-width: 480px) {
  .ma2-money__btn { width: 64px; min-height: 64px; }
  .ma2-money__btn svg { width: 28px; height: 28px; }
  .ma2-money__input { font-size: var(--portal-text-section); }
}

/* ---------- VA composite: rating + household + live compensation ---------- */
.ma2-varate { display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* Household segmented toggle (mirrors .ma2-choice styling, buttons not radios
   so picking one recomputes the estimate without auto-advancing the screen). */
.ma2-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 420px;
}
.ma2-seg__btn {
  min-height: 56px;
  padding: 8px 12px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  background: #ffffff;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  color: var(--vs-ink, #0e0f0c);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 140ms ease;
}
.ma2-seg__btn:hover { border-color: var(--vs-olive); background: var(--vs-surface-alt, #f4f0e3); transform: translateY(-1px); }
.ma2-seg__btn:active { transform: scale(0.97); }
.ma2-seg__btn.is-active {
  background: rgba(90, 107, 63, 0.10);
  border-color: var(--vs-olive);
  color: var(--vs-olive);
  box-shadow: 0 0 0 3px rgba(90, 107, 63, 0.12);
}
/* 2-up variant — e.g. the insurance premium Monthly / Yearly toggle. */
.ma2-seg--2 { grid-template-columns: repeat(2, 1fr); }

/* Premium cost composite — cadence toggle + money stepper + live equivalent. */
.ma2-cost { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 420px; margin: 0 auto; width: 100%; }
.ma2-cost .ma2-money { margin: 0; }
.ma2-cost .ma2-money__hint { margin: 0; }
/* Native date control inside the policy paperwork screen. */
.ma2-input--date input { font-family: var(--vs-font-body); color: var(--vs-ink); cursor: pointer; }

/* Estimated-compensation card — the confirmable figure derived from rating. */
.ma2-varate__comp {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 16px;
  background: linear-gradient(180deg, #faf7eb 0%, #f4f0e3 100%);
}
.ma2-varate__comp-label {
  margin: 0;
  font-size: var(--portal-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-olive);
}
.ma2-varate__comp-note {
  margin: 0;
  text-align: center;
  font-size: var(--portal-text-caption);
  color: var(--vs-ink-muted, #5C5E58);
}
.ma2-varate__comp.is-bumped { animation: ma2-comp-bump 360ms var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1)); }
@keyframes ma2-comp-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Review step — read-back summary before save. */
.ma2-review { display: flex; flex-direction: column; gap: 16px; }
.ma2-review__list {
  margin: 0;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 14px;
  overflow: hidden;
}
.ma2-review__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--vs-line, #e4e0d6);
}
.ma2-review__row:last-child { border-bottom: 0; }
.ma2-review__row dt { font-size: var(--portal-text-label); color: var(--vs-ink-muted, #5C5E58); }
.ma2-review__row dd {
  margin: 0;
  text-align: right;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-label);
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
}

@media (prefers-reduced-motion: reduce) {
  .ma2-seg__btn { transition: none; }
  .ma2-varate__comp.is-bumped { animation: none; }
}

/* ---------- Dropdown (select) ---------- */
.ma2-select { position: relative; max-width: 420px; margin: 0 auto; width: 100%; }
.ma2-select__input {
  width: 100%;
  min-height: 56px;
  padding: 0 48px 0 16px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 14px;
  background: #ffffff;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-body);
  color: var(--vs-ink, #0e0f0c);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.ma2-select__input:focus { outline: none; border-color: var(--vs-olive); box-shadow: 0 0 0 3px rgba(90, 107, 63, 0.18); }
.ma2-select__chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--vs-olive); pointer-events: none; }

/* ---------- Number stepper ---------- */
.ma2-counter {
  display: flex;
  align-items: stretch;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 14px;
  overflow: hidden;
}
.ma2-counter__btn {
  width: 72px;
  min-height: 64px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  background: #ffffff;
  border: 0;
  color: var(--vs-olive);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}
.ma2-counter__btn svg { width: 30px; height: 30px; }
.ma2-counter__btn:hover { background: var(--vs-olive); color: #ffffff; }
.ma2-counter__btn:active { transform: scale(0.96); }
.ma2-counter__input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-left: 1.5px solid var(--vs-line, #e4e0d6);
  border-right: 1.5px solid var(--vs-line, #e4e0d6);
  background: #ffffff;
  text-align: center;
  font-family: var(--vs-font-display, var(--vs-font-body));
  font-weight: 700;
  font-size: var(--portal-text-section);
  color: var(--vs-ink, #0e0f0c);
  font-feature-settings: "tnum" 1;
  padding: 8px 6px;
}
.ma2-counter__input:focus { outline: none; background: #faf7eb; color: var(--vs-olive); }

/* ---------- Composite field stack — labelled dropdowns/steppers on one
   screen. Shared by the Vehicles (make/model/year/mileage) and Insurance
   (coverage type/provider) wizards. ---------- */
.ma2-fieldstack { display: flex; flex-direction: column; gap: 16px; max-width: 420px; margin: 0 auto; width: 100%; }
.ma2-fieldstack__field { display: flex; flex-direction: column; gap: 8px; }
.ma2-fieldstack__label {
  font-size: var(--portal-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vs-olive);
}
/* "(optional)" suffix inside a fieldstack label — quieter than the label
   so the member knows they can skip without reading twice. */
.ma2-fieldstack__optional {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--vs-ink-muted, #5C5E58);
}
.ma2-fieldstack .ma2-select, .ma2-fieldstack .ma2-counter { max-width: none; }

@media (prefers-reduced-motion: reduce) { .ma2-counter__btn { transition: none; } }

.ma2-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 520px) { .ma2-choice-grid { grid-template-columns: 1fr; } }

.ma2-choice {
  position: relative;
  padding: 14px 16px;
  border: 1.5px solid var(--vs-line, #e4e0d6);
  border-radius: 12px;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: var(--portal-text-label);
  cursor: pointer;
  background: #ffffff;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 140ms ease;
}

.ma2-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }

.ma2-choice:hover { border-color: var(--vs-olive); background: var(--vs-surface-alt, #f4f0e3); transform: translateY(-1px); }

.ma2-choice.is-checked {
  background: rgba(90, 107, 63, 0.10);
  border-color: var(--vs-olive);
  color: var(--vs-olive);
  box-shadow: 0 0 0 3px rgba(90, 107, 63, 0.12);
}

.ma2-upload {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 18px 22px;
  border: 2px dashed rgba(90, 107, 63, 0.32);
  border-radius: 14px;
  background: linear-gradient(180deg, #faf7eb 0%, #f4f0e3 100%);
  cursor: pointer;
  align-items: center;
}

.ma2-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.ma2-upload__copy { display: flex; flex-direction: column; gap: 4px; }
.ma2-upload__title { font-weight: 700; font-size: var(--portal-text-label); color: var(--vs-ink); }
.ma2-upload__hint { font-size: var(--portal-text-caption); color: var(--vs-ink-muted, #5C5E58); }
.ma2-upload__filename { font-size: var(--portal-text-caption); font-weight: 600; color: var(--vs-olive); }
/* Attached state — solid olive once a document is on file. */
.ma2-upload.is-attached { border-style: solid; border-color: var(--vs-olive); background: rgba(90, 107, 63, 0.08); }
/* Vault "add a document" slide — the item card stacked over its upload zone. */
.ma2-vault-attach { display: flex; flex-direction: column; gap: 16px; padding: 4px; }

/* Survivor & estate readiness — a "N of N in place" meter + a checklist of the
   four essentials. done = olive ✓, partial = amber, open = muted. */
.ma2-estate { display: flex; flex-direction: column; gap: 12px; }
.ma2-estate__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ma2-estate__label { margin: 0; font-size: var(--portal-text-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vs-ink-muted, #5C5E58); }
.ma2-estate__count { margin: 0; font-size: var(--portal-text-label); color: var(--vs-ink); }
.ma2-estate__count strong { font-weight: 800; color: var(--vs-olive); }
.ma2-estate__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ma2-estate__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; color: var(--vs-ink-muted, #5C5E58); }
.ma2-estate__check { display: inline-flex; }
.ma2-estate__name { font-size: var(--portal-text-label); color: var(--vs-ink); }
.ma2-estate__status { font-size: var(--portal-text-caption); font-weight: 600; text-align: right; }
.ma2-estate__item.is-done { color: var(--vs-olive); }
.ma2-estate__item.is-partial { color: #9a4a2c; }

.ma2-add-another {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ma2-add-another .ma2-btn { flex: 1; justify-content: center; min-height: 56px; }

/* ---------- Toast ---------- */
.ma2-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 16px);
  z-index: 100;
  padding: 14px 22px;
  background: var(--vs-ink, #0e0f0c);
  color: #ffffff;
  border-radius: 999px;
  font-family: var(--vs-font-body);
  font-size: var(--portal-text-caption);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.ma2-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .ma2-strength__fill, .ma2-equity__fill,
  .ma2-card, .ma2-sheet__panel, .ma2-sheet__dot,
  .ma2-choice, .ma2-btn { transition: none; }
}

/* =====================================================================
   §AUTH SHOWCASE (.auth-showcase) — canonical, Sprint 9e
   ---------------------------------------------------------------------
   The dark benefits panel beside the auth forms. ONE canonical component
   shared verbatim by login.html + signup.html — the two pages must
   render it identically (parity rule; replaces the login-carousel /
   signup__card semantic twins). Photography lives in assets/img/auth/,
   behavior in assets/js/auth-showcase.js.

   Structure:
     .auth-showcase                  <aside> — slate panel, gold top bar
       __inner                       centered column, max 560
       __head › __eyebrow + __pitch  gold caps label + on-dark headline
       __carousel [data-auth-carousel]
         __stage                     arrow / deck / arrow row
           __arrow [data-auth-prev|next]  48px round ghost control
           __deck  [data-auth-track]      380w, 5/6 photo deck
             __slide [data-auth-slide]    crossfade layers
               __card › __img / __scrim / __pill / __body
                 __body › __brand + __caption
         __count — "N of 4" live counter
       __partner › __partner-mark + __partner-text

   Spec: portal-components.md §16
   ===================================================================== */

.auth-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--portal-space-12);
  background: linear-gradient(180deg, var(--portal-slate) 0%, var(--portal-slate-deep) 100%);
  overflow: hidden;
}

/* --sticky variant: pins the showcase to the viewport so the visual
   stays centered while a tall form on the left scrolls. Applied on
   signup / forgot-password where Page 1 / Screen 3 can exceed 100vh. */
.auth-showcase--sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  align-self: start;
}

.auth-showcase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--portal-gold);
  z-index: 5;
}

/* --embed: neutralizes the full-viewport height for embedding the panel
   in docs / marketing contexts (e.g. design-system.html catalog stage). */
.auth-showcase--embed {
  min-height: 0;
  padding: var(--portal-space-16) var(--portal-space-7);
}

.auth-showcase__inner {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--portal-space-12);
}

.auth-showcase__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--portal-space-4);
}

.auth-showcase__eyebrow {
  margin: 0;
  font-family: var(--portal-font-body);
  font-weight: 600;
  font-size: var(--portal-text-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--portal-gold);
}

.auth-showcase__pitch {
  margin: 0;
  font-family: var(--portal-font-body);
  font-weight: 500;
  font-size: var(--portal-text-hero);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--portal-slate-bright);
  text-align: center;
  max-width: 24ch;
}

.auth-showcase__carousel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--portal-space-7);
}

.auth-showcase__stage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--portal-space-7);
}

.auth-showcase__arrow {
  appearance: none;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--portal-slate-line);
  color: var(--portal-slate-bright);
  transition:
    background var(--portal-dur-base) var(--portal-ease-out),
    border-color var(--portal-dur-base) var(--portal-ease-out),
    transform var(--portal-dur-fast) var(--portal-ease-out);
}

.auth-showcase__arrow:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
}

.auth-showcase__arrow:active {
  transform: scale(0.94);
}

.auth-showcase__arrow:focus-visible {
  outline: 2px solid var(--portal-gold);
  outline-offset: 2px;
}

.auth-showcase__arrow svg {
  width: 22px;
  height: 22px;
}

.auth-showcase__deck {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: min(380px, 100%);
  flex: 0 1 380px;
  aspect-ratio: 5 / 6;
}

/* Deck edges — two resting cards behind the active photo. Pure chrome,
   never content: nothing gets cropped by the panel edges. */
.auth-showcase__deck::before,
.auth-showcase__deck::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--portal-radius-card-lg);
  border: 1px solid var(--portal-slate-line);
  background: rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.auth-showcase__deck::before {
  transform: rotate(-3deg) translateX(-8px);
}

.auth-showcase__deck::after {
  transform: rotate(2deg) translateX(8px);
}

.auth-showcase__slide {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 480ms var(--portal-ease-out);
}

.auth-showcase__slide--active {
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
}

.auth-showcase__card {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--portal-radius-card-lg);
  overflow: hidden;
  background: var(--portal-slate-deep);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55);
}

.auth-showcase__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.auth-showcase__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 16, 9, 0) 38%, rgba(13, 16, 9, 0.2) 58%, rgba(13, 16, 9, 0.84) 100%);
}

.auth-showcase__pill {
  position: absolute;
  top: var(--portal-space-7);
  left: var(--portal-space-7);
  z-index: 2;
  font-family: var(--portal-font-body);
  font-weight: 700;
  /* "Free" copy restored per Pastel review 2026-07-09 (#42) — was the
     compliance-phrase "At no cost" at 11px, below the 14px floor. */
  font-size: var(--portal-text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--portal-gold);
  color: var(--portal-olive-deep);
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
}

.auth-showcase__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--portal-space-3);
  padding: var(--portal-space-8) var(--portal-space-7) var(--portal-space-7);
}

.auth-showcase__brand {
  display: block;
}

.auth-showcase__brand img {
  display: block;
  max-height: 36px;
  max-width: 200px;
  width: auto;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

/* Modifier for partner logos that ship as dark-on-transparent (e.g.
   State Farm, TaxHawk) — flips them to white so they sit cleanly on
   the dark scrim alongside the already-white Fox / Equifax marks. */
.auth-showcase__brand--invert img {
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

.auth-showcase__caption {
  margin: 0;
  font-family: var(--portal-font-body);
  font-weight: 500;
  /* Bumped label → body per Pastel review 2026-07-09 (#41) — the
     description under each partner logo was reading too small. */
  font-size: var(--portal-text-body);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

/* --cycling variant (Pastel #200/#201 — signup + the whole login flow
   as of 2 Aug) — the benefit lines moved from the cards into the cycling
   [data-auth-pitch] headline, so the partner logo alone anchors each
   card at roughly double scale. #200 says "enlarge logos AND copy": the
   eyebrow steps caption → label with wider tracking. */
.auth-showcase--cycling .auth-showcase__brand img {
  max-height: 64px;
  max-width: 300px;
}
.auth-showcase--cycling .auth-showcase__eyebrow {
  font-size: var(--portal-text-label);
  letter-spacing: 0.2em;
}
.auth-showcase--cycling .auth-showcase__pitch {
  transition: opacity var(--portal-dur-base) var(--portal-ease-out);
}
.auth-showcase--cycling .auth-showcase__pitch--swapping {
  opacity: 0;
}

.auth-showcase__count {
  margin: 0;
  font-family: var(--portal-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  letter-spacing: 0.08em;
  color: var(--portal-slate-text);
  font-variant-numeric: tabular-nums;
}

.auth-showcase__partner {
  display: inline-flex;
  align-items: center;
  gap: var(--portal-space-3);
  padding: var(--portal-space-3) var(--portal-space-5);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.auth-showcase__partner-mark {
  height: 24px;
  width: auto;
  display: block;
}

.auth-showcase__partner-text {
  font-family: var(--portal-font-body);
  font-weight: 500;
  font-size: var(--portal-text-caption);
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
}

@media (max-width: 1024px) {
  .auth-showcase {
    min-height: 0;
    padding: var(--portal-space-16) var(--portal-space-7);
  }
}

@media (max-width: 480px) {
  .auth-showcase__stage {
    gap: var(--portal-space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-showcase__slide,
  .auth-showcase__arrow {
    transition: none;
  }
}

/* =====================================================================
   §PORTAL STEPS (.portal-steps) — canonical, Sprint 9g
   ---------------------------------------------------------------------
   Numbered OPEN timeline for "how it works" narratives. Deliberately
   card-less: it sits between card grids and breaks the box-after-box
   rhythm (the credit-activate feedback that prompted it). Olive number
   coins joined by a hairline connector.

   Structure:
     <ol class="portal-steps">
       <li class="portal-steps__item">
         <span class="portal-steps__num" aria-hidden="true">1</span>
         <h3 class="portal-steps__title">…</h3>
         <p class="portal-steps__sub">…</p>
       </li>
       …
     </ol>

   Spec: portal-components.md §17
   ===================================================================== */

.portal-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--portal-space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.portal-steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--portal-space-5);
}

.portal-steps__num {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--portal-olive);
  color: #ffffff;
  font-family: var(--portal-font-display);
  font-weight: 500;
  font-size: var(--portal-num-data);
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}

/* Connector — runs from the coin across the column gap to the next
   coin. The next coin sits at z-index 2, so the line tucks under it. */
.portal-steps__item::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 60px;
  right: calc(-1 * var(--portal-space-6));
  height: 1px;
  background: var(--portal-hairline-strong);
}

.portal-steps__item:last-child::before {
  display: none;
}

.portal-steps__title {
  font-size: var(--portal-text-card-title);
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.3;
  color: var(--portal-ink);
  margin: 0;
}

.portal-steps__sub {
  font-size: var(--portal-text-body);
  line-height: 1.55;
  color: var(--portal-ink-secondary);
  margin: 0;
}

@media (max-width: 900px) {
  .portal-steps {
    grid-template-columns: 1fr;
    gap: var(--portal-space-8);
  }
  .portal-steps__item::before {
    display: none;
  }
}