/*
 * CleverAlpha AI Advisor Wizard — visual system
 * Consumes Brand Engine tokens (Option A CSS endpoint) with static fallback.
 * See brand-engine-fallback.css for token defaults.
 */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--ca-fog);
  color: var(--ca-ink);
  font-family: var(--ca-font-primary);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Header ---------- */

.ca-header {
  background: var(--ca-paper);
  border-bottom: 1px solid var(--ca-hairline);
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ca-header__logo {
  height: 40px;
  width: auto;
}

.ca-header__nav {
  display: flex;
  gap: 32px;
  font-family: var(--ca-font-primary);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ca-ink);
}

.ca-header__nav a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Layout ---------- */

.ca-shell {
  min-height: calc(100vh - 200px);
  padding: 48px 24px;
  display: flex;
  justify-content: center;
}

.ca-card {
  background: var(--ca-paper);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-radius);
  max-width: 720px;
  width: 100%;
  padding: 0;
}

/* ---------- Progress ---------- */

.ca-progress {
  padding: 16px 40px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ca-progress__label {
  font-family: var(--ca-font-primary);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-mist);
}

.ca-progress__bar {
  height: 4px;
  background: var(--ca-hairline);
  border-radius: 0;
  overflow: hidden;
}

.ca-progress__fill {
  height: 100%;
  width: 7.14%; /* 1/14 */
  background: var(--ca-jade);
  transition: width 240ms ease-out;
}

/* ---------- Step content ---------- */

.ca-step {
  display: none;
  padding: 32px 40px 24px;
}

.ca-step--active {
  display: block;
}

.ca-step__eyebrow {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-jade);
  margin: 0 0 12px;
}

.ca-step__title {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ca-ink);
  margin: 0 0 24px;
}

.ca-step__sub {
  font-family: var(--ca-font-support);
  font-weight: 300;
  font-size: 16px;
  color: var(--ca-graphite);
  margin: 0 0 24px;
}

.ca-step__section-title {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ca-mist);
  margin: 24px 0 12px;
}

/* ---------- Fields ---------- */

.ca-field {
  margin-bottom: 24px;
}

.ca-field__label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ca-field__label {
  font-family: var(--ca-font-primary);
  font-weight: 500;
  font-size: 15px;
  color: var(--ca-ink);
}

.ca-field__helper {
  font-family: var(--ca-font-support);
  font-weight: 300;
  font-size: 13px;
  color: var(--ca-mist);
  margin: 0 0 8px;
}

.ca-field__error {
  font-family: var(--ca-font-primary);
  font-weight: 400;
  font-size: 14px;
  color: var(--ca-signal-error);
  margin: 8px 0 0;
  min-height: 20px;
}

.ca-field__optional {
  font-family: var(--ca-font-primary);
  font-weight: 400;
  font-size: 12px;
  color: var(--ca-mist);
  margin-left: 4px;
}

/* Text / number / currency inputs */
.ca-input {
  width: 100%;
  height: var(--ca-input-height);
  padding: 0 16px;
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-radius);
  background: var(--ca-paper);
  font-family: var(--ca-font-primary);
  font-size: 16px;
  color: var(--ca-ink);
  outline: none;
  transition: border-color 120ms ease;
}

.ca-input:focus {
  border-color: var(--ca-jade);
  box-shadow: 0 0 0 2px var(--ca-jade);
}

.ca-input--error {
  border-color: var(--ca-signal-error);
}

/* Textarea */
.ca-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 16px;
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-radius);
  background: var(--ca-paper);
  font-family: var(--ca-font-support);
  font-weight: 300;
  font-size: 15px;
  color: var(--ca-ink);
  outline: none;
  resize: vertical;
}

.ca-textarea:focus {
  border-color: var(--ca-jade);
  box-shadow: 0 0 0 2px var(--ca-jade);
}

/* Select (styled native) */
.ca-select {
  width: 100%;
  height: var(--ca-input-height);
  padding: 0 40px 0 16px;
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-radius);
  background: var(--ca-paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  font-family: var(--ca-font-primary);
  font-size: 16px;
  color: var(--ca-ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.ca-select:focus {
  border-color: var(--ca-jade);
  box-shadow: 0 0 0 2px var(--ca-jade);
}

/* Radio group */
.ca-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ca-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-radius);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.ca-radio:hover {
  background: var(--ca-fog);
}

.ca-radio input[type="radio"] {
  margin: 0;
  accent-color: var(--ca-jade);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ca-radio__label {
  font-family: var(--ca-font-primary);
  font-size: 15px;
  color: var(--ca-ink);
}

.ca-radio input[type="radio"]:checked ~ .ca-radio__label {
  font-weight: 500;
}

.ca-radio:has(input[type="radio"]:checked) {
  border-color: var(--ca-jade);
  background: var(--ca-jade-tint);
}

/* Checkbox group */
.ca-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ca-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-radius);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.ca-checkbox:hover {
  background: var(--ca-fog);
}

.ca-checkbox input[type="checkbox"] {
  margin: 0;
  accent-color: var(--ca-jade);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ca-checkbox__label {
  font-family: var(--ca-font-primary);
  font-size: 15px;
  color: var(--ca-ink);
}

.ca-checkbox:has(input[type="checkbox"]:checked) {
  border-color: var(--ca-jade);
  background: var(--ca-jade-tint);
}

/* Boolean toggle (yes/no pair) */
.ca-toggle {
  display: flex;
  gap: 8px;
}

.ca-toggle__option {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-radius);
  background: var(--ca-paper);
  font-family: var(--ca-font-primary);
  font-weight: 500;
  font-size: 15px;
  color: var(--ca-ink);
  cursor: pointer;
  transition: all 120ms ease;
  text-align: center;
}

.ca-toggle__option:hover {
  background: var(--ca-fog);
}

.ca-toggle__option--active {
  border-color: var(--ca-jade);
  background: var(--ca-jade-tint);
  color: var(--ca-ink);
}

/* Number stepper */
.ca-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 200px;
}

.ca-stepper__btn {
  width: 48px;
  height: 48px;
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-radius);
  background: var(--ca-paper);
  font-size: 20px;
  font-weight: 500;
  color: var(--ca-ink);
  cursor: pointer;
  transition: background 120ms ease;
}

.ca-stepper__btn:hover:not(:disabled) {
  background: var(--ca-fog);
}

.ca-stepper__btn:disabled {
  color: var(--ca-hairline);
  cursor: not-allowed;
}

.ca-stepper__value {
  flex: 1;
  text-align: center;
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 20px;
  color: var(--ca-ink);
}

/* Currency input wrapper */
.ca-currency {
  position: relative;
}

.ca-currency::before {
  content: "$";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ca-font-primary);
  font-size: 16px;
  color: var(--ca-mist);
  pointer-events: none;
}

.ca-currency .ca-input {
  padding-left: 32px;
}

/* Percent input wrapper */
.ca-percent {
  position: relative;
}

.ca-percent::after {
  content: "%";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ca-font-primary);
  font-size: 16px;
  color: var(--ca-mist);
  pointer-events: none;
}

.ca-percent .ca-input {
  padding-right: 40px;
}

/* Allocation running-total banner */
.ca-alloc-banner {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ca-paper);
  border: 1px solid var(--ca-hairline);
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background 200ms ease, border-color 200ms ease;
}

.ca-alloc-banner--under {
  background: #FFF9E6;
  border-color: #F5D989;
}

.ca-alloc-banner--over {
  background: #FEE7E7;
  border-color: var(--ca-signal-error);
}

.ca-alloc-banner--ok {
  background: #E6F5EA;
  border-color: var(--ca-signal-ok);
}

.ca-alloc-banner__label {
  font-family: var(--ca-font-primary);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ca-graphite);
}

.ca-alloc-banner__value {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  color: var(--ca-ink);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ca-alloc-banner__value-num {
  font-size: 32px;
}

.ca-alloc-banner__value-suffix {
  font-size: 20px;
  color: var(--ca-mist);
}

.ca-alloc-banner__hint {
  font-family: var(--ca-font-support);
  font-weight: 400;
  font-size: 13px;
  color: var(--ca-graphite);
  text-align: right;
  flex-shrink: 0;
}

.ca-alloc-banner--ok .ca-alloc-banner__hint {
  color: var(--ca-signal-ok);
  font-weight: 500;
}

.ca-alloc-banner--over .ca-alloc-banner__hint {
  color: var(--ca-signal-error);
  font-weight: 500;
}

.ca-alloc-banner__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ca-alloc-btn {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ca-jade);
  border-radius: var(--ca-radius);
  background: var(--ca-paper);
  color: var(--ca-jade);
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
}

.ca-alloc-btn:hover:not(:disabled) {
  background: var(--ca-jade);
  color: var(--ca-paper);
}

.ca-alloc-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Allocation row: label + bar + input */
.ca-alloc-row {
  display: grid;
  grid-template-columns: 160px 1fr 120px;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ca-hairline);
}

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

.ca-alloc-row__label {
  font-family: var(--ca-font-primary);
  font-weight: 500;
  font-size: 15px;
  color: var(--ca-ink);
}

.ca-alloc-row__bar {
  position: relative;
  height: 8px;
  background: var(--ca-hairline);
  border-radius: 0;
  overflow: hidden;
}

.ca-alloc-row__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--ca-jade);
  transition: width 200ms ease;
}

.ca-alloc-row__input {
  position: relative;
}

.ca-alloc-row__input .ca-input {
  height: 44px;
  padding: 0 32px 0 12px;
  text-align: right;
  font-weight: 600;
}

.ca-alloc-row__input::after {
  content: "%";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ca-font-primary);
  font-size: 14px;
  color: var(--ca-mist);
  pointer-events: none;
}

.ca-alloc-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 20px;
}

.ca-alloc-preset {
  padding: 8px 14px;
  border: 1px solid var(--ca-hairline);
  background: var(--ca-paper);
  font-family: var(--ca-font-primary);
  font-size: 13px;
  color: var(--ca-graphite);
  cursor: pointer;
  transition: all 120ms ease;
  border-radius: var(--ca-radius);
}

.ca-alloc-preset:hover {
  border-color: var(--ca-jade);
  color: var(--ca-jade);
}

.ca-alloc-preset__label {
  font-weight: 500;
}

.ca-alloc-preset__desc {
  font-family: var(--ca-font-support);
  font-weight: 300;
  color: var(--ca-mist);
  font-size: 12px;
  margin-left: 6px;
}

@media (max-width: 640px) {
  .ca-alloc-row {
    grid-template-columns: 1fr 90px;
    grid-template-areas: "label input" "bar bar";
    gap: 8px 12px;
  }
  .ca-alloc-row__label { grid-area: label; }
  .ca-alloc-row__input { grid-area: input; }
  .ca-alloc-row__bar { grid-area: bar; margin-top: 4px; }

  .ca-alloc-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .ca-alloc-banner__hint {
    text-align: center;
  }

  .ca-alloc-banner__actions {
    justify-content: center;
  }
}

/* Context chips + textarea (step 14 · anything else) */
.ca-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ca-chip {
  padding: 8px 14px;
  border: 1px solid var(--ca-hairline);
  background: var(--ca-paper);
  font-family: var(--ca-font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--ca-graphite);
  cursor: pointer;
  transition: all 120ms ease;
  border-radius: 0;
}

.ca-chip:hover {
  border-color: var(--ca-jade);
  color: var(--ca-jade);
}

.ca-chip.is-active {
  background: var(--ca-jade);
  border-color: var(--ca-jade);
  color: var(--ca-paper);
}

.ca-textarea {
  width: 100%;
  min-height: 140px;
  padding: 14px 16px;
  font-family: var(--ca-font-support);
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  color: var(--ca-ink);
}

.ca-textarea::placeholder {
  color: var(--ca-mist);
  font-family: var(--ca-font-support);
  font-weight: 300;
  white-space: pre-line;
}

.ca-textarea-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-top: 8px;
}

.ca-textarea-count {
  font-family: var(--ca-font-primary);
  font-size: 12px;
  color: var(--ca-mist);
  white-space: nowrap;
  flex-shrink: 0;
}

.ca-context-skip {
  margin-top: 12px;
}

.ca-link-btn {
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--ca-font-primary);
  font-size: 13px;
  color: var(--ca-graphite);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ca-link-btn:hover {
  color: var(--ca-jade);
}

/* Child repeater */
.ca-child-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-radius);
  background: var(--ca-fog);
}

.ca-child-row__field {
  flex: 1;
}

.ca-child-row__field label {
  display: block;
  font-family: var(--ca-font-primary);
  font-weight: 500;
  font-size: 13px;
  color: var(--ca-graphite);
  margin-bottom: 6px;
}

/* Info button + modal */
.ca-info-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ca-jade);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
  border-radius: 0;
}

.ca-info-btn:hover,
.ca-info-btn:focus {
  background: var(--ca-jade);
  color: var(--ca-paper);
  outline: none;
}

.ca-info-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.ca-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 560px;
  width: calc(100% - 48px);
}

.ca-modal::backdrop {
  background: var(--ca-scrim);
}

.ca-modal__inner {
  background: var(--ca-paper);
  border-radius: var(--ca-radius);
  padding: 40px;
  position: relative;
}

.ca-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ca-graphite);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ca-modal__close:hover {
  color: var(--ca-ink);
}

.ca-modal__close svg {
  width: 20px;
  height: 20px;
}

.ca-modal__title {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 20px;
  color: var(--ca-ink);
  margin: 0 0 24px;
}

.ca-modal__section {
  margin-bottom: 20px;
}

.ca-modal__section-title {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-jade);
  margin: 0 0 6px;
}

.ca-modal__section-body {
  font-family: var(--ca-font-support);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ca-graphite);
}

.ca-modal__section-body ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.ca-modal__section-body li {
  margin-bottom: 6px;
}

.ca-modal__cta {
  margin-top: 8px;
}

/* Footer nav */
.ca-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  border-top: 1px solid var(--ca-hairline);
}

.ca-btn {
  height: var(--ca-button-height);
  padding: 0 24px;
  border: none;
  border-radius: var(--ca-radius);
  background: var(--ca-jade);
  color: var(--ca-paper);
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease;
  min-width: 120px;
}

.ca-btn:hover:not(:disabled) {
  background: var(--ca-jade-dark);
}

.ca-btn:disabled {
  background: var(--ca-hairline);
  color: var(--ca-mist);
  cursor: not-allowed;
}

.ca-btn--ghost {
  background: transparent;
  color: var(--ca-jade);
  border: 1px solid transparent;
}

.ca-btn--ghost:hover:not(:disabled) {
  background: var(--ca-jade-tint);
}

.ca-btn--wide {
  min-width: 220px;
}

/* Save link */
.ca-save-link {
  font-family: var(--ca-font-support);
  font-weight: 400;
  font-size: 14px;
  color: var(--ca-jade);
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
}

.ca-save-link:hover {
  text-decoration: underline;
}

.ca-save-row {
  padding: 12px 40px 0;
  text-align: right;
}

/* Trust card on step 1 — SEC-registered framing before we ask for anything */
.ca-trust {
  background: linear-gradient(135deg, var(--ca-jade-tint) 0%, #fff 100%);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-left: 3px solid var(--ca-jade);
  border-radius: 0;
  padding: 24px 28px;
  margin: 16px 0 24px;
}
.ca-trust__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ca-font-support);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-jade-dark);
  margin-bottom: 10px;
}
.ca-trust__badge svg {
  width: 14px;
  height: 14px;
}
.ca-trust__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ca-font-support);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ca-ink);
}
.ca-trust__list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
}
.ca-trust__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ca-jade);
  font-weight: 700;
}
.ca-trust__list li:last-child {
  margin-bottom: 0;
}
.ca-trust__list strong {
  font-weight: 600;
  color: var(--ca-ink);
}

/* Disclosure strip on step 1 */
.ca-disclosure {
  font-family: var(--ca-font-support);
  font-weight: 300;
  font-size: 12px;
  color: var(--ca-mist);
  margin: 24px 0 0;
  line-height: 1.5;
}

.ca-disclosure a {
  color: var(--ca-graphite);
  text-decoration: underline;
}

/* Footer */
.ca-footer {
  background: var(--ca-paper);
  border-top: 1px solid var(--ca-hairline);
  padding: 32px 40px;
  color: var(--ca-mist);
  font-family: var(--ca-font-support);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
}

.ca-footer__row {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
}

.ca-footer a {
  color: var(--ca-graphite);
  text-decoration: none;
  margin-right: 20px;
}

.ca-footer a:hover {
  text-decoration: underline;
}

/* Toast */
.ca-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  background: var(--ca-ink);
  color: var(--ca-paper);
  font-family: var(--ca-font-primary);
  font-size: 14px;
  border-radius: var(--ca-radius);
  z-index: 1000;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.ca-toast--visible {
  opacity: 1;
}

/* Mobile */
@media (max-width: 640px) {
  .ca-header {
    padding: 16px 20px;
  }

  .ca-header__nav {
    display: none;
  }

  .ca-shell {
    padding: 24px 12px;
  }

  .ca-progress,
  .ca-step,
  .ca-save-row,
  .ca-nav {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ca-step__title {
    font-size: 24px;
  }

  .ca-modal {
    max-width: none;
    width: 100vw;
    height: 100vh;
    margin: 0;
  }

  .ca-modal__inner {
    height: 100%;
    padding: 32px 20px;
  }

  .ca-btn {
    min-width: 100px;
  }
}

/* ============================================================
   Currency inputs and account-balance grid
   ============================================================ */
.ca-input-wrap {
  position: relative;
  display: block;
}
.ca-input-wrap--currency .ca-input-prefix {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--ca-text-muted, #64748b);
  font-weight: 500;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.ca-input--currency {
  padding-left: 28px !important;
  font-variant-numeric: tabular-nums;
}

.ca-balances__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 8px;
}
.ca-balances__row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  background: var(--ca-surface-alt, #f8fafc);
  border: 1px solid var(--ca-border, #e2e8f0);
  border-radius: 0;
}
.ca-balances__row-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ca-text, #0f172a);
}
.ca-balances__row-note {
  display: block;
  font-size: 12px;
  color: var(--ca-jade, #10b981);
  font-weight: 500;
  margin-top: 2px;
}
.ca-balances__row-input {
  position: relative;
}
.ca-balances__row-input .ca-input-prefix {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--ca-text-muted, #64748b);
  font-weight: 500;
  pointer-events: none;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ca-balances__row-input input {
  width: 100%;
  padding: 10px 12px 10px 26px;
  border: 1px solid var(--ca-border, #e2e8f0);
  border-radius: 0;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ca-balances__row-input input:focus {
  outline: none;
  border-color: var(--ca-jade, #10b981);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

@media (max-width: 640px) {
  .ca-balances__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ============================================================
   Anonymization notice — highlighted callout replacing the
   name/email/phone fields. Light-mode baseline. Dark overrides
   live in theme-dark.css.
   ============================================================ */
.ca-anon-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, rgba(64, 193, 172, 0.14) 0%, rgba(64, 193, 172, 0.04) 100%);
  border: 1px solid rgba(64, 193, 172, 0.35);
  border-left: 3px solid var(--ca-jade);
  border-radius: 0;
  padding: 14px 18px;
  margin: 12px 0 20px;
}
.ca-anon-note__icon {
  flex-shrink: 0;
  color: var(--ca-jade-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
}
.ca-anon-note__icon svg {
  width: 20px;
  height: 20px;
}
.ca-anon-note__body {
  flex: 1;
  min-width: 0;
}
.ca-anon-note__title {
  font-family: var(--ca-font-support);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ca-jade-dark);
  margin-bottom: 4px;
}
.ca-anon-note__text {
  font-family: var(--ca-font-support);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ca-ink);
}
.ca-anon-note__text strong {
  font-weight: 600;
}

/* ============================================================
 * Next-steps action tiles (scorecard CTA)
 * Token-driven so light and dark themes both look right.
 * ============================================================ */

.ca-next-tile {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--ca-paper);
  color: var(--ca-ink);
  border: 1px solid var(--ca-hairline);
  border-radius: 0;
  padding: 16px 18px;
  margin: 0 0 12px 0;
  cursor: pointer;
  font: inherit;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.ca-next-tile:hover {
  border-color: var(--ca-jade);
  transform: translateY(-1px);
}

.ca-next-tile:focus-visible {
  outline: 2px solid var(--ca-jade);
  outline-offset: 2px;
}

.ca-next-tile__title {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--ca-ink);
}

.ca-next-tile__body {
  font-family: var(--ca-font-support);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ca-graphite);
}

/* "Do all of these" — accent variant (jade fill with dark ink text for AA contrast) */
.ca-next-tile--all {
  background: var(--ca-jade);
  border-color: var(--ca-jade);
  color: #0a0a0a;
}
.ca-next-tile--all:hover {
  background: var(--ca-jade-dark);
  border-color: var(--ca-jade-dark);
}
.ca-next-tile--all .ca-next-tile__title,
.ca-next-tile--all .ca-next-tile__body {
  color: #0a0a0a;
}
.ca-next-tile--all .ca-next-tile__body {
  opacity: 0.88;
}

/* ============================================================
 * Prescriptive move tiles (click-behavior C — add to plan)
 *
 * Categories:
 *   .ca-move-tile--fund      green when checked — fund existing account
 *   .ca-move-tile--open      green when checked — open a new account
 *   .ca-move-tile--behavior  grey when checked  — user must execute
 * ============================================================ */

.ca-moves-group + .ca-moves-group {
  margin-top: 24px;
}
.ca-moves-group__head {
  margin: 0 0 12px 0;
}
.ca-moves-group__title {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ca-ink);
  margin: 0 0 6px 0;
}
.ca-moves-group__note {
  font-family: var(--ca-font-support);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ca-graphite);
  margin: 0;
  max-width: 640px;
}

.ca-moves-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin: 0;
}

.ca-move-tile {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr 32px;
  gap: 12px;
  align-items: start;
  background: var(--ca-paper);
  color: var(--ca-ink);
  border: 1px solid var(--ca-hairline);
  border-radius: 0;
  padding: 16px 16px 14px 14px;
  cursor: pointer;
  user-select: none;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  outline: none;
}
.ca-move-tile:hover {
  border-color: var(--ca-jade);
}
.ca-move-tile:focus-visible {
  outline: 2px solid var(--ca-jade);
  outline-offset: 2px;
}

/* Green selected state — fund + open categories */
.ca-move-tile.is-selected {
  border-color: var(--ca-jade);
  background: rgba(64, 193, 172, 0.08);
  box-shadow: inset 0 0 0 1px var(--ca-jade);
}
/* Grey (muted) selected state — behavior category */
.ca-move-tile--behavior.is-selected {
  border-color: var(--ca-graphite, #4a4a4a);
  background: rgba(74, 74, 74, 0.06);
  box-shadow: inset 0 0 0 1px var(--ca-graphite, #4a4a4a);
  opacity: 0.85;
}
.ca-move-tile--behavior.is-selected .ca-move-tile__title,
.ca-move-tile--behavior.is-selected .ca-move-tile__amount {
  color: var(--ca-graphite, #4a4a4a);
}
.ca-move-tile--behavior.is-selected:hover {
  border-color: var(--ca-graphite, #4a4a4a);
}

.ca-move-tile__check {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--ca-hairline);
  background: transparent;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 2px;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.ca-move-tile__check svg {
  width: 16px;
  height: 16px;
}
.ca-move-tile.is-selected .ca-move-tile__check {
  background: var(--ca-jade);
  border-color: var(--ca-jade);
  color: #0a0a0a;
}
.ca-move-tile--behavior.is-selected .ca-move-tile__check {
  background: var(--ca-graphite, #4a4a4a);
  border-color: var(--ca-graphite, #4a4a4a);
  color: #fff;
}

/* Post-check note pill — hidden by default, shown when tile is selected */
.ca-move-tile__checked-note {
  display: none;
  margin-top: 8px;
  padding: 6px 10px;
  font-family: var(--ca-font-support);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  border-radius: 0;
  color: #fff;
  background: var(--ca-jade-dark, var(--ca-jade));
  align-self: start;
  width: max-content;
  max-width: 100%;
}
.ca-move-tile.is-selected .ca-move-tile__checked-note {
  display: inline-block;
}
.ca-move-tile--behavior.is-selected .ca-move-tile__checked-note {
  background: var(--ca-graphite, #4a4a4a);
  color: #fff;
}

.ca-move-tile__body {
  min-width: 0;
}
.ca-move-tile__title {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  margin: 0 0 6px 0;
  color: var(--ca-ink);
}
.ca-move-tile__amount {
  font-family: var(--ca-font-primary);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ca-jade-dark, var(--ca-jade));
  margin: 0 0 8px 0;
}
.ca-move-tile__rationale {
  font-family: var(--ca-font-support);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ca-graphite);
  margin: 0;
}
.ca-move-tile__info {
  align-self: start;
  margin-top: 2px;
}

/* Sticky bottom bar with counter + primary CTA */
.ca-moves-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--ca-paper);
  border: 1px solid var(--ca-hairline);
  border-radius: 0;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 48px;
}
/* Give a comfortable gap between the moves-bar (“Start these accounts”)
   and the following “Moves for you to make yourself” behavior group. */
.ca-moves-bar + .ca-moves-group { margin-top: 8px; }
.ca-moves-bar__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.ca-moves-bar__count {
  font-family: var(--ca-font-support);
  font-size: 14px;
  color: var(--ca-graphite);
  font-weight: 500;
}
.ca-moves-bar__aggregate {
  font-family: var(--ca-font-primary);
  font-weight: 700;
  font-size: 15px;
  color: var(--ca-ink);
}
.ca-moves-bar__cta {
  min-width: 240px;
}
.ca-moves-bar__cta[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .ca-moves-bar { flex-direction: column; align-items: stretch; }
  .ca-moves-bar__cta { width: 100%; min-width: 0; }
  .ca-moves-bar__meta { flex: 1 1 auto; }
}

/* ============================================================
 * Analysis CTA (top of dashboard, above KPIs)
 * States: preparing / ready / error / demo-locked
 * ============================================================ */

.ca-analysis-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin: 0 0 24px 0;
  border-radius: 0;
  background: rgba(64, 193, 172, 0.08);
  border: 1px solid rgba(64, 193, 172, 0.35);
  transition: background 200ms ease, border-color 200ms ease;
}

.ca-analysis-cta__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ca-analysis-cta__text {
  font-family: var(--ca-font-primary);
  font-weight: 500;
  font-size: 15px;
  color: var(--ca-ink);
  line-height: 1.4;
}

/* Preparing state: pulsing jade dot + solid disabled button */
.ca-analysis-cta__pulse {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ca-jade);
  animation: ca-analysis-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes ca-analysis-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

.ca-analysis-cta--ready .ca-analysis-cta__pulse {
  animation: none;
  opacity: 1;
  background: var(--ca-signal-ok, #10b981);
}

.ca-analysis-cta--error .ca-analysis-cta__pulse {
  animation: none;
  opacity: 1;
  background: var(--ca-signal-error, #ef4444);
}

.ca-analysis-cta--error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
}

.ca-analysis-cta--demo-locked {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.35);
}

/* The button */
.ca-analysis-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 0;
  border: 1px solid var(--ca-jade);
  background: var(--ca-jade);
  color: #0a0a0a;
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, opacity 120ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.ca-analysis-cta__btn:hover:not(:disabled) {
  background: var(--ca-jade-dark);
  border-color: var(--ca-jade-dark);
  transform: translateY(-1px);
}

.ca-analysis-cta__btn:disabled,
.ca-analysis-cta__btn[aria-disabled="true"] {
  background: transparent;
  color: var(--ca-mist);
  border-color: var(--ca-hairline);
  cursor: not-allowed;
  opacity: 0.85;
}

.ca-analysis-cta__btn svg {
  transition: transform 200ms ease;
}
.ca-analysis-cta__btn:hover:not(:disabled) svg {
  transform: translateX(2px);
}

/* Error state button: destructive-outlined */
.ca-analysis-cta--error .ca-analysis-cta__btn {
  background: transparent;
  color: var(--ca-signal-error, #ef4444);
  border-color: var(--ca-signal-error, #ef4444);
}
.ca-analysis-cta--error .ca-analysis-cta__btn:hover:not(:disabled) {
  background: var(--ca-signal-error, #ef4444);
  color: #fff;
}

/* Small-screen: stack the button below the text */
@media (max-width: 640px) {
  .ca-analysis-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .ca-analysis-cta__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Dashboard intro paragraph (replaces the old status text) */
.ca-dash__intro {
  font-family: var(--ca-font-support);
  font-size: 14px;
  color: var(--ca-graphite);
  margin: 4px 0 20px 0;
  line-height: 1.5;
}

/* ============================================================
 * Analysis page — Velocity L&L match
 * Uppercase tracked-out eyebrows, tight display H1, thin body,
 * square corners, jade accent line.
 * ============================================================ */

.ca-eyebrow {
  font-family: var(--ca-font-support);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ca-jade);
  margin: 0 0 8px 0;
}

/* Back-to-dashboard toolbar */
.ca-analysis-toolbar {
  padding: 20px 40px 0 40px;
  display: flex;
  align-items: center;
}
.ca-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--ca-hairline);
  background: transparent;
  color: var(--ca-graphite);
  font-family: var(--ca-font-primary);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 120ms ease;
  border-radius: 0;
}
.ca-back-btn:hover {
  border-color: var(--ca-jade);
  color: var(--ca-jade);
}
.ca-back-btn svg { transition: transform 160ms ease; }
.ca-back-btn:hover svg { transform: translateX(-2px); }

/* Hero override — L&L display treatment */
.ca-result-hero {
  padding: 40px !important;
}
.ca-result-hero h1 {
  font-family: var(--ca-font-primary);
  font-weight: 700 !important;
  font-size: 42px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
  margin: 0 0 14px !important;
}
.ca-result-hero .ca-eyebrow {
  color: rgba(255,255,255,0.85);
}

/* Hero variant with an in-banner back button */
.ca-result-hero--with-back {
  position: relative;
  padding-right: 220px !important; /* reserve space so H1 never overlaps the button */
}
.ca-back-btn--hero {
  position: absolute;
  top: 24px;
  right: 24px;
  background: #ffffff;
  color: var(--ca-jade, #40C1AC);
  border-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  z-index: 2;
}
.ca-back-btn--hero:hover,
.ca-back-btn--hero:focus-visible {
  background: var(--ca-jade, #40C1AC);
  color: #ffffff;
  border-color: #ffffff;
  outline: none;
}
@media (max-width: 720px) {
  .ca-result-hero--with-back {
    padding-right: 40px !important;
    padding-top: 68px !important; /* push hero content down so the button sits above it */
  }
  .ca-back-btn--hero {
    top: 16px;
    right: 16px;
  }
}

/* Section titles — larger, tighter, more editorial */
.ca-result-section {
  padding: 40px !important;
}
.ca-result-section__title {
  font-family: var(--ca-font-primary);
  font-weight: 600 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em;
  margin: 0 0 20px !important;
}

/* Email-me widget */
.ca-email-me {
  padding: 40px;
  border-top: 1px solid var(--ca-hairline);
  background: var(--ca-fog, #fafafa);
}
.ca-email-me__title {
  font-family: var(--ca-font-primary);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--ca-ink);
  margin: 0 0 8px;
  line-height: 1.15;
}
.ca-email-me__sub {
  font-family: var(--ca-font-support);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ca-graphite);
  margin: 0 0 20px;
  max-width: 640px;
}
.ca-email-me__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  max-width: 640px;
}
.ca-email-me__field {
  display: block;
}
.ca-email-me__field .ca-eyebrow { margin-bottom: 6px; }
.ca-email-me .ca-input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ca-hairline);
  background: var(--ca-paper);
  color: var(--ca-ink);
  font-family: var(--ca-font-support);
  font-size: 15px;
  width: 100%;
  border-radius: 0;
  transition: border-color 120ms ease;
}
.ca-email-me .ca-input:focus {
  outline: none;
  border-color: var(--ca-jade);
}
.ca-email-me .ca-btn {
  height: 44px;
  min-width: 220px;
}
.ca-email-me__status {
  font-family: var(--ca-font-support);
  font-size: 13px;
  margin: 12px 0 0;
  color: var(--ca-graphite);
}
.ca-email-me__status--ok { color: var(--ca-signal-ok, #10b981); }
.ca-email-me__status--err { color: var(--ca-signal-error, #ef4444); }
.ca-email-me__consent {
  font-family: var(--ca-font-support);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ca-mist, #B4B4BE);
  margin: 16px 0 0;
  max-width: 640px;
}
.ca-email-me__consent a {
  color: var(--ca-jade);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ca-email-me__consent a:hover { color: var(--ca-jade-dark, #2FA592); }

/* Analysis-page disclosure footer (inside the results card) */
.ca-analysis-disclosure {
  padding: 28px 40px 40px;
  border-top: 1px solid var(--ca-hairline);
  font-family: var(--ca-font-support);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ca-mist);
}
.ca-analysis-disclosure p { margin: 0 0 10px; }
.ca-analysis-disclosure p:last-child { margin: 0; }
.ca-analysis-disclosure strong { color: var(--ca-graphite); font-weight: 600; }
.ca-analysis-disclosure a { color: var(--ca-jade); text-decoration: none; }
.ca-analysis-disclosure a:hover { text-decoration: underline; }
.ca-analysis-disclosure__addr {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ca-mist);
  padding-top: 10px;
  border-top: 1px dashed var(--ca-hairline);
  margin-top: 14px !important;
}

/* Small screens */
@media (max-width: 640px) {
  .ca-analysis-toolbar,
  .ca-result-hero,
  .ca-result-section,
  .ca-email-me,
  .ca-analysis-disclosure {
    padding-left: 20px;
    padding-right: 20px;
  }
  .ca-result-hero h1 { font-size: 32px !important; }
  .ca-email-me__form { grid-template-columns: 1fr; }
  .ca-email-me .ca-btn { min-width: 0; width: 100%; }
}

/* Header microsite/marketing nav toggle */
.ca-header__report-link { display: none; }
body[data-report-mode] .ca-header__report-link { display: inline-block; }
body[data-report-mode] .ca-header__marketing-link { display: none; }
.ca-header__report-link {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ca-mist, #b4b4be);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid transparent;
  transition: all 120ms ease;
  border-radius: 0;
}
.ca-header__report-link:hover {
  color: var(--ca-jade);
  border-color: var(--ca-hairline, #282832);
}
.ca-header__report-link--active {
  color: var(--ca-jade);
  border-color: var(--ca-jade);
}

/* Hide the analysis CTA on the report KPI page — the header nav is the way in */
body[data-report-mode="kpi"] #analysisCta { display: none !important; }

/* ================================================================
   Financial-Habits tri-state pill rows (steps 15–18) + Habits-Index
   ring shared with the results dashboard. Zero corner radius.
   ================================================================ */
.ca-habits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.ca-habit-row {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--ca-hairline);
  border-radius: 0;
  background: var(--ca-paper);
  transition: border-color 120ms ease, background 120ms ease;
}
.ca-habit-row.is-answered { border-color: var(--ca-jade); }
.ca-habit-row.is-na { opacity: 0.72; }
/* Inferred-yes: wizard answers already confirm this habit.
   Gold left accent, jade tint, locked pills. */
.ca-habit-row.is-inferred {
  border-color: var(--ca-jade);
  border-left: 3px solid var(--ca-gold, #D4AF37);
  background: rgba(64, 193, 172, 0.04);
}
.ca-habit-row__inferred-msg {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 6px;
  font-size: 12px;
  font-family: var(--ca-font-support);
  color: var(--ca-jade);
  line-height: 1.4;
}
.ca-habit-row__inferred-msg svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--ca-gold, #D4AF37);
}
.ca-habit-row.is-inferred .ca-habit-pill[disabled] {
  opacity: 0.35;
  cursor: default;
}
.ca-habit-row.is-inferred .ca-habit-pill--yes.is-active {
  border-color: var(--ca-gold, #D4AF37);
  background: rgba(212, 175, 55, 0.12);
  color: var(--ca-gold, #D4AF37);
}

.ca-habit-row__label {
  font-family: var(--ca-font-primary);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ca-ink);
}
.ca-habit-row__na-hint {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ca-muted);
  font-style: italic;
}

.ca-habit-pills {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
}

.ca-habit-pill {
  padding: 10px 12px;
  border: 1px solid var(--ca-hairline);
  border-radius: 0;
  background: var(--ca-paper);
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ca-ink);
  cursor: pointer;
  transition: all 120ms ease;
  text-align: center;
  white-space: nowrap;
}
.ca-habit-pill:hover:not([disabled]) { background: var(--ca-fog); }
.ca-habit-pill.is-active { border-color: var(--ca-jade); background: var(--ca-jade-tint); }
.ca-habit-pill--na { padding-left: 10px; padding-right: 10px; font-size: 12px; letter-spacing: 0.03em; }
.ca-habit-pill--na.is-active { background: rgba(148, 148, 158, 0.14); border-color: var(--ca-muted); color: var(--ca-muted); }
.ca-habit-pill[disabled] { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 640px) {
  .ca-habit-row { grid-template-columns: 1fr; }
  .ca-habit-pills { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- Habits-Index ring for the results dashboard ---- */
.ca-habits-index {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ca-habits-index__ring {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
}
.ca-habits-index__meta { flex: 1; min-width: 0; }
.ca-habits-index__num {
  font-family: var(--ca-font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.05;
  color: var(--ca-ink);
  margin-bottom: 4px;
  white-space: nowrap;
}
.ca-habits-index__label {
  font-family: var(--ca-font-primary);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-muted);
  margin-bottom: 10px;
}
.ca-habits-index__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.ca-habits-index__pillar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  column-gap: 8px;
  row-gap: 3px;
  font-size: 12px;
}
.ca-habits-index__pillar-label {
  grid-column: 1 / -1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ca-muted);
}
.ca-habits-index__pillar-bar {
  height: 6px;
  background: var(--ca-fog);
  border-radius: 0;
  overflow: hidden;
}
.ca-habits-index__pillar-fill {
  height: 100%;
  background: var(--ca-jade);
  width: 0%;
  transition: width 500ms ease;
}
.ca-habits-index__pillar-val {
  text-align: right;
  color: var(--ca-ink);
  font-variant-numeric: tabular-nums;
}
.ca-habits-index__pillar--na .ca-habits-index__pillar-fill { background: var(--ca-muted); opacity: 0.35; }
.ca-habits-index__pillar--na .ca-habits-index__pillar-val { color: var(--ca-muted); }

/* ============================================================
 * Phase 5 — Warning callout (Step 14 privacy reminder)
 * ============================================================ */
.ca-warning-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 8px 0;
  background: transparent;
  border: 1px solid #FCA5A5;
  border-left: 4px solid var(--ca-signal-error);
  border-radius: var(--ca-radius);
  color: #7F1D1D;
  font-family: var(--ca-font-primary);
  font-size: 14px;
  line-height: 1.4;
}
.ca-warning-callout__icon {
  color: var(--ca-signal-error);
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
  margin-top: 1px;
}
.ca-warning-callout strong { font-weight: 600; }

/* ============================================================
 * Phase 6 touch-ups #5 - Results gate spacing
 * Give the AI-analysis unlock gate room to breathe:
 * label above input, breathing room between fields, more
 * space before the CTA, and privacy hint set off from the button.
 * ============================================================ */
.ca-gate { padding: 4px 0; }
.ca-gate > h2 { margin: 0 0 12px 0; }
.ca-gate > p { margin: 0 0 20px 0; }
.ca-gate__preview-list { margin: 0 0 28px 0; }

.ca-gate__form { display: block; }
.ca-gate__form .ca-field { margin-bottom: 20px; }
.ca-gate__form .ca-field:last-of-type { margin-bottom: 28px; }
.ca-gate__form .ca-field__label-row { margin-bottom: 8px; }
.ca-gate__form .ca-input { padding: 12px 14px; }

.ca-gate__form .ca-btn--wide { margin-top: 4px; }
.ca-gate__privacy { margin-top: 16px !important; line-height: 1.5; }

/* ============================================================
 * Phase 6 touch-ups #5 - Results: gold accents + collapsible sections
 * ============================================================ */

/* Gold-tint the two key headings in the moves section. */
.ca-result-section__title--gold,
.ca-moves-group__title--gold {
  color: var(--ca-gold);
}

/* Any account tile we can open/fund (green group) gets a gold account
 * title so the reader knows what CleverAlpha can execute at a glance. */
.ca-moves-group--green .ca-move-tile__title {
  color: var(--ca-gold);
}

/* Collapsible section (Gaps to close) built on native <details>/<summary>. */
.ca-collapsible {
  display: block;
}
.ca-collapsible > .ca-collapsible__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  margin: 0;
  user-select: none;
}
.ca-collapsible > .ca-collapsible__summary::-webkit-details-marker { display: none; }
.ca-collapsible__title {
  margin: 0;
  flex: 1 1 auto;
}
.ca-collapsible__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ca-gold);
  transition: transform 200ms ease;
  flex: 0 0 auto;
}
.ca-collapsible[open] > .ca-collapsible__summary .ca-collapsible__chevron {
  transform: rotate(180deg);
}
.ca-collapsible > .ca-result-body {
  margin-top: 12px;
}

/* ============================================================
 * Phase 5d — Between-step transition popups (blackout + X)
 * (Step 1 → 2:  slide-in from RIGHT, "Trust the process...")
 * (Step 13 → 14: slide-in from LEFT,  "We're almost finished...")
 * ============================================================ */
.ca-transition-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000; /* full blackout */
  opacity: 0;
  transition: opacity 300ms ease-out;
  /* Popup itself is dismissable via X; overlay swallows underlying clicks
     so the user can't accidentally advance the wizard behind it. */
  pointer-events: auto;
}
.ca-transition-popup--active { opacity: 1; }
.ca-transition-popup--out    { opacity: 0; transition: opacity 300ms ease-in; }

.ca-transition-popup__inner {
  position: relative;
  text-align: center;
  padding: 32px 48px;
  max-width: 90vw;
  opacity: 0;
  transition: opacity 400ms ease-out, transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.ca-transition-popup--active .ca-transition-popup__inner {
  opacity: 1;
  transform: translateX(0);
}

.ca-transition-popup__text {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: clamp(28px, 6vw, 48px);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #FFFFFF;
  display: inline-block;
}

/* Close (X) button */
.ca-transition-popup__close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 150ms ease;
  padding: 0;
}
.ca-transition-popup__close:hover,
.ca-transition-popup__close:focus-visible {
  opacity: 1;
  outline: 1px solid rgba(255,255,255,0.4);
  outline-offset: 2px;
}

/* Variant: first (1→2) — slide in from RIGHT */
.ca-transition-popup--first .ca-transition-popup__inner {
  transform: translateX(48px);
}

/* Variant: mid (13→14) — slide in from LEFT */
.ca-transition-popup--mid .ca-transition-popup__inner {
  transform: translateX(-48px);
}

/* Reduced-motion path — no slide/fade, immediate visibility */
.ca-transition-popup--reduced {
  opacity: 1;
  transition: none;
}
.ca-transition-popup--reduced .ca-transition-popup__inner {
  transform: none;
  opacity: 1;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .ca-transition-popup,
  .ca-transition-popup__inner {
    transition: none;
  }
  .ca-transition-popup__inner {
    transform: none;
  }
}

/* ============================================================
   PR-U15: Mid-flow prelude (Step 13 -> 14 upscale)
   Mirrors the .ca-trust-prelude visual language (jade halo,
   staged word fade-in, underline sweep, jade-dot terminal
   punctuation) so the mid-flow interstitial reads as a member
   of the same cinematic family. All rules scoped under
   .ca-mid-prelude - the .ca-trust-prelude prelude at
   index.html L67-220 is NOT modified.
   ============================================================ */
.ca-mid-prelude {
  position: fixed; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, #16211f 0%, #0d1414 55%, #080b0b 100%);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 520ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}
[data-theme="light"] .ca-mid-prelude {
  background: radial-gradient(120% 90% at 50% 45%, #f5fbfa 0%, #eef4f3 55%, #e6ecec 100%);
}
.ca-mid-prelude--in  { opacity: 1; pointer-events: auto; }
.ca-mid-prelude--out { opacity: 0; pointer-events: none; }

.ca-mid-prelude__halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 900px; height: 900px;
  max-width: 140vw; max-height: 140vw;
  transform: translate(-50%, -50%) scale(.72);
  background: radial-gradient(closest-side, rgba(64,193,172,0.22) 0%, rgba(64,193,172,0.06) 45%, rgba(64,193,172,0) 72%);
  opacity: 0;
  filter: blur(6px);
  transition: opacity 900ms ease, transform 1400ms cubic-bezier(.22,.61,.36,1);
  z-index: 0;
  pointer-events: none;
}
.ca-mid-prelude__halo--in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ca-mid-prelude__stage {
  position: relative;
  z-index: 1;
  max-width: 780px;
  text-align: center;
  transform: translateY(0) scale(1);
  transition: transform 520ms cubic-bezier(.22,.61,.36,1);
}
.ca-mid-prelude--out .ca-mid-prelude__stage {
  transform: translateY(-8px) scale(1.02);
}

.ca-mid-prelude__line {
  font-family: 'Poppins', sans-serif;
  color: var(--ca-ink, #fff);
  margin: 0;
  line-height: 1.2;
}
[data-theme="light"] .ca-mid-prelude__line { color: #0b1a17; }
.ca-mid-prelude__line--primary {
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 3.6rem);
  letter-spacing: -0.01em;
}
/* PR-U17: match --secondary to intro-kinetic body sizing (see .ca-tpl__line--secondary
   in index.html <style>). Restores body/subhead hierarchy vs --primary; supersedes
   PR-U16's visual-parity choice. */
.ca-mid-prelude__line--secondary {
  font-weight: 300;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  letter-spacing: 0.02em;
  color: var(--ca-graphite, #cfd3d6);
  margin-top: 22px;
  opacity: 0.92;
}
[data-theme="light"] .ca-mid-prelude__line--secondary { color: #0b1a17; }

.ca-mid-prelude__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(8px);
  transition: opacity 620ms cubic-bezier(.2,.7,.2,1),
              transform 620ms cubic-bezier(.2,.7,.2,1),
              filter   620ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform, filter;
}
.ca-mid-prelude__word--punct { color: var(--ca-jade, #40C1AC); }
.ca-mid-prelude__line--in .ca-mid-prelude__word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.ca-mid-prelude__underline {
  position: relative;
  display: block;
  width: 0;
  height: 2px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, rgba(64,193,172,0) 0%, var(--ca-jade, #40C1AC) 50%, rgba(64,193,172,0) 100%);
  transition: width 720ms cubic-bezier(.22,.61,.36,1);
}
.ca-mid-prelude__underline--in { width: min(320px, 62%); }

.ca-mid-prelude--rm .ca-mid-prelude__word {
  transform: none !important;
  filter: none !important;
  transition: opacity 280ms ease !important;
  transition-delay: 0ms !important;
}
.ca-mid-prelude--rm .ca-mid-prelude__halo,
.ca-mid-prelude--rm .ca-mid-prelude__underline { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ca-mid-prelude__stage { transition: none; }
}

.ca-mid-prelude__skip {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(228, 228, 234, 0.65);
  background: transparent;
  border: 1px solid rgba(228, 228, 234, 0.28);
  cursor: pointer;
  padding: 9px 22px;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
  z-index: 2;
}
.ca-mid-prelude__skip:hover,
.ca-mid-prelude__skip:focus {
  color: var(--ca-jade, #40C1AC);
  border-color: var(--ca-jade, #40C1AC);
  background: rgba(64, 193, 172, 0.08);
  outline: none;
}
[data-theme="light"] .ca-mid-prelude__skip { color: rgba(20,30,28,0.55); border-color: rgba(20,30,28,0.2); }
[data-theme="light"] .ca-mid-prelude__skip:hover,
[data-theme="light"] .ca-mid-prelude__skip:focus { color: var(--ca-jade, #40C1AC); border-color: var(--ca-jade, #40C1AC); background: rgba(64,193,172,0.10); }

/* ============================================================
   Phase 5b - Qualitative scorecard
   ============================================================ */

.ca-scorecard {
  background: var(--ca-surface, #FFFFFF);
  border: 1px solid var(--ca-border, #E5E7EB);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ca-scorecard__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.ca-scorecard__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ca-ink, #1A1A1A);
  margin: 0;
  flex: 1;
}
.ca-scorecard__info {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--ca-border, #E5E7EB);
  background: transparent;
  color: var(--ca-ink, #1A1A1A);
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ca-scorecard__info:hover {
  background: var(--ca-jade-tint, #E6F6F3);
  border-color: var(--ca-jade, #40C1AC);
}
.ca-scorecard__band {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #F9FAFB;
}
.ca-scorecard__band-label {
  font-size: 20px;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.ca-scorecard__band-blurb {
  margin: 0;
  color: #4B5563;
  font-size: 14px;
  line-height: 1.4;
}
.ca-scorecard__pillars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.ca-scorecard__pillars li {
  padding: 8px 10px;
  border-radius: 6px;
  background: #FAFBFC;
  font-size: 14px;
  color: var(--ca-ink, #1A1A1A);
  line-height: 1.4;
}
.ca-scorecard__dot {
  display: inline-block;
  margin-right: 6px;
  font-size: 15px;
}
.ca-scorecard__note {
  color: #4B5563;
}

/* -------------------------------------------------------------- */
/* Phase 6 touch-ups #6: scorecard accounts cell                   */
/* -------------------------------------------------------------- */
/* The scorecard cell "Accounts we can help you open" reuses the   */
/* same .ca-move-tile markup as the AI-analysis grid but sits in a */
/* narrower card, so we tighten the tile grid + reduce paddings.   */
.ca-chart-card--accounts .ca-scorecard-accounts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
.ca-chart-card--accounts .ca-move-tile {
  padding: 12px 14px;
}
.ca-chart-card--accounts .ca-move-tile__title {
  font-size: 14px;
}
.ca-chart-card--accounts .ca-move-tile__amount {
  font-size: 13px;
}
.ca-chart-card--accounts .ca-move-tile__rationale {
  font-size: 12px;
  line-height: 1.4;
}
.ca-chart-card--accounts .ca-scorecard-accounts__bar {
  margin-top: 14px;
}
.ca-chart-card--accounts .ca-moves-bar__count {
  font-size: 12px;
}
.ca-chart-card--accounts .ca-moves-bar__cta {
  min-height: 40px;
  line-height: 40px;
  font-size: 13px;
}
/* Gold titles on the scorecard accounts cell to match the AI-analysis green group. */
.ca-chart-card--accounts .ca-move-tile__title { color: var(--ca-gold, #D4AF37); }
/* Empty-state note stays subtle (default .ca-chart-card__sub color). */


/* ---- Surgical updates 2026-08-24 ---- */

/* #4: moves h2 sub-line (smaller, muted, sits below the headline) */
.ca-result-section__subtitle {
  font-family: var(--ca-font-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ca-muted);
  margin: -12px 0 20px;
}

/* #1: paycheck-to-paycheck toggle (step 14) */
.ca-alloc-paycheck {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ca-hairline);
  border-radius: 4px;
  background: var(--ca-paper);
  cursor: pointer;
  margin: 0 0 20px;
  transition: border-color 160ms ease, background 160ms ease;
}
.ca-alloc-paycheck:hover { border-color: var(--ca-ink); }
.ca-alloc-paycheck__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.ca-alloc-paycheck__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ca-hairline);
  border-radius: 3px;
  background: var(--ca-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  margin-top: 2px;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.ca-alloc-paycheck__box svg { width: 14px; height: 14px; display: block; }
.ca-alloc-paycheck__input:checked ~ .ca-alloc-paycheck__box {
  background: var(--ca-jade);
  border-color: var(--ca-jade);
  color: #fff;
}
.ca-alloc-paycheck__input:focus-visible ~ .ca-alloc-paycheck__box {
  outline: 2px solid var(--ca-jade);
  outline-offset: 2px;
}
.ca-alloc-paycheck__text { display: flex; flex-direction: column; gap: 4px; }
.ca-alloc-paycheck__title {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 15px;
  color: var(--ca-ink);
  line-height: 1.3;
}
.ca-alloc-paycheck__sub {
  font-family: var(--ca-font-primary);
  font-weight: 400;
  font-size: 13px;
  color: var(--ca-muted);
  line-height: 1.4;
}
.ca-alloc-paycheck:has(.ca-alloc-paycheck__input:checked) {
  border-color: var(--ca-jade);
  background: var(--ca-jade-tint);
}

/* #1: collapse the allocation UI when paycheck-to-paycheck is on */
.ca-alloc-collapsible.is-collapsed,
.ca-field__helper.is-collapsed {
  display: none !important;
}

/* #3 & #5: "Accounts we can help you open" attention treatment.
   Breathing outline on the section, stronger gold pulse on the CTA.
   Auto-quiets when data-attention is removed (on first tile selection). */
.ca-accounts-attention[data-attention="active"] {
  position: relative;
  isolation: isolate;
}
.ca-accounts-attention[data-attention="active"]::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  border: 2px solid var(--ca-jade);
  pointer-events: none;
  z-index: -1;
  animation: caAccountsBreathe 3s ease-in-out infinite;
}
@keyframes caAccountsBreathe {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.005); }
}

/* Gold pulse CTA. Uses --ca-gold fill (not outline), stronger halo. */
.ca-btn--gold-attention {
  background: var(--ca-gold) !important;
  border-color: var(--ca-gold) !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
  animation: caGoldPulse 2s ease-in-out infinite;
}
.ca-btn--gold-attention:hover:not([disabled]) {
  filter: brightness(1.08);
}
.ca-btn--gold-attention[disabled] { opacity: 0.55; animation: none; }
/* When the attention wrapper is quieted, kill the button animation too. */
.ca-accounts-attention:not([data-attention="active"]) .ca-btn--gold-attention {
  animation: none;
}
@keyframes caGoldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55); }
  50%      { box-shadow: 0 0 0 12px rgba(212, 175, 55, 0); }
}

/* Respect reduced motion — keep gold color, drop both animations. */
@media (prefers-reduced-motion: reduce) {
  .ca-accounts-attention[data-attention="active"]::before,
  .ca-btn--gold-attention { animation: none !important; }
  .ca-accounts-attention[data-attention="active"]::before { opacity: 0.35; }
}

/* 2026-08-25 (Rick): kill green breathing outline on the
   "Moves we can handle for you" group. The gold CTA pulse and
   the accounts-cell attention treatment stay put. */
.ca-moves-group--green.ca-accounts-attention[data-attention="active"]::before,
.ca-moves-group.ca-accounts-attention[data-attention="active"]::before {
  display: none !important;
  animation: none !important;
}

/* ============================================================
   Inputs-considered transparency card (dashboard)
   ------------------------------------------------------------
   Collapsible <details> with grouped, read-only rendering of
   every non-null field from submission.input. Groups are
   Household, Income & filing, Retirement, Health, Kids,
   Habits, Preferences.
   ============================================================ */
.ca-inputs-considered {
  max-width: 960px;
  margin: 24px auto 0;
  padding: 0;
  background: var(--ca-surface-1, #14141a);
  border: 1px solid var(--ca-hairline, #282832);
  border-radius: 14px;
  overflow: hidden;
}
.ca-inputs-considered__summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ca-jade, #40C1AC);
  font-weight: 500;
  font-size: 15px;
  transition: background .2s ease;
}
.ca-inputs-considered__summary::-webkit-details-marker { display: none; }
.ca-inputs-considered__summary:hover { background: rgba(64, 193, 172, 0.06); }
.ca-inputs-considered__chevron {
  display: inline-flex;
  transition: transform .2s ease;
}
.ca-inputs-considered[open] .ca-inputs-considered__chevron { transform: rotate(180deg); }
.ca-inputs-considered__body {
  padding: 0 20px 20px;
  border-top: 1px solid var(--ca-hairline, #282832);
}
.ca-inputs-considered__group {
  padding: 16px 0;
  border-bottom: 1px solid var(--ca-hairline, #282832);
}
.ca-inputs-considered__group:last-child { border-bottom: none; }
.ca-inputs-considered__group-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-text-dim, #9a9aa8);
  margin: 0 0 12px;
}
.ca-inputs-considered__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 24px;
}
.ca-inputs-considered__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  font-size: 14px;
  border-bottom: 1px dotted var(--ca-hairline, #282832);
}
.ca-inputs-considered__label {
  color: var(--ca-text-dim, #9a9aa8);
  flex: 0 1 auto;
}
.ca-inputs-considered__value {
  color: var(--ca-text, #e7e7f0);
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex: 0 1 auto;
  word-break: break-word;
}
.ca-inputs-considered__empty {
  padding: 24px;
  text-align: center;
  color: var(--ca-text-dim, #9a9aa8);
  font-size: 14px;
}


/* --------------------------------------------------------------------
   Global right-angle corners (2026-08-25 per Rick).
   Applies to every element in the app: containers, sections, cards,
   pills, buttons, inputs, images, canvases. Universal !important so
   inline styles and later files can't reintroduce rounded corners.
   If we later need to preserve specific circular indicators (brand
   halo, avatars) add narrow overrides below this rule.
   -------------------------------------------------------------------- */
*, *::before, *::after { border-radius: 0 !important; }

/* ============================================================
   PR-U1 - Wizard surface parity with /results (Alex-Chen UI).
   Audit reference: workspace-comms/wizard-ui-audit-2026-08-25.md
   CSS-only + markup-only in index.html. Zero JS/logic changes.
   ============================================================ */

/* Gap 1 - Italic light display headline (matches results.html
   .ca-result-hero h1 recipe: Poppins 300 italic, negative tracking,
   tight leading). Scoped to .ca-step so we don't disturb other h1s. */
.ca-step .ca-step__title {
  font-family: var(--ca-font-primary);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ca-ink);
  margin: 0 0 24px;
}

/* Gap 2 - Two-tone emphasis. The whole headline is already italic, so
   .ca-emph only needs to color the word jade. Kept italic explicitly
   so it survives any future non-italic headline override. */
.ca-step .ca-step__title .ca-emph {
  font-style: italic;
  color: var(--ca-jade);
  font-weight: inherit;
}

/* Gap 3 - Subtle dark-jade radial glow behind the wizard shell.
   Two soft glows (top-left + mid-right) at very low opacity so the
   surface reads as depth-having-black, not flat-black. Scoped to the
   wizard body (index.html loads wizard.css; results.html has its own). */
body {
  background:
    radial-gradient(ellipse 60% 45% at 12% 8%, rgba(64, 193, 172, 0.08) 0%, rgba(64, 193, 172, 0) 60%),
    radial-gradient(ellipse 50% 40% at 88% 42%, rgba(64, 193, 172, 0.06) 0%, rgba(64, 193, 172, 0) 60%),
    var(--ca-fog);
  background-attachment: fixed;
}

/* Gap 5 - Jade left-stripe callout treatment on info-heavy sub-panels.
   Applies to: the anon-note callout on step 3-single, and to habits
   step sections (15-18) which are the mid-flow transition template.
   Uses 3px left border + 24px left padding, matching the /results
   .ca-email-me + .ca-analysis-disclosure pattern. */
.ca-anon-note {
  border-left: 3px solid var(--ca-jade);
  padding-left: 24px;
}
.ca-step[data-habits-slide] {
  border-left: 3px solid var(--ca-jade);
  padding-left: 36px;
}
@media (max-width: 720px) {
  .ca-step[data-habits-slide] { padding-left: 24px; }
}

/* Gap 7 - Native <select> polish. .ca-select already has a styled
   chevron in theme-dark.css; this pass ensures the wizard's <select>
   (step 3 spouse-retirement-plan is the only one) matches the rest
   of the .ca-input surface family: same paper background, same
   graphite text, same jade focus ring. No layout change. */
.ca-step select.ca-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--ca-paper);
  color: var(--ca-graphite);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B4B4BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}
.ca-step select.ca-input:focus {
  outline: none;
  border-color: var(--ca-jade);
  box-shadow: 0 0 0 2px var(--ca-jade);
}

/* end PR-U1 */
/* ============================================================
   PR-U3: Intent gate (new Step 1, pre-numbered-wizard)
   Shown when wizardState.data.intent is unset. Sits inside the
   same .ca-card shell as the wizard steps below it. Zero
   coupling to numbered-step render logic; toggled by JS via
   .ca-intent-gate--active.
   ============================================================ */
.ca-intent-gate {
  display: none;
}
.ca-intent-gate.ca-intent-gate--active {
  display: block;
}

/* Hero: matches wizard .ca-step__title recipe */
.ca-intent-hero {
  padding: 32px 40px 24px;
  border-bottom: 1px solid var(--ca-hairline);
  margin-bottom: 24px;
}
.ca-intent-eyebrow {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-jade);
  margin: 0 0 12px;
}
.ca-intent-h1 {
  font-family: var(--ca-font-primary);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ca-ink);
  margin: 0 0 16px;
}
.ca-intent-h1 em {
  font-style: italic;
  color: var(--ca-jade);
  font-weight: inherit;
}
.ca-intent-sub {
  font-family: var(--ca-font-support);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ca-graphite);
  margin: 0;
}

/* PR-1: two-archetype lanes.  Each lane is a labeled sub-section wrapping a
   3-card grid; the eyebrow ("Get a plan" / "I know what I want") sits above
   its grid.  Lanes handle horizontal padding so nested grids stay flush. */
.ca-intent-lane {
  padding: 0 40px;
  margin-bottom: 28px;
}
.ca-intent-lane:last-of-type { margin-bottom: 0; padding-bottom: 40px; }
.ca-intent-lane-eyebrow {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ca-mist);
  margin: 0 0 14px;
  padding-left: 2px;
}
.ca-intent-lane--analysis .ca-intent-lane-eyebrow { color: var(--ca-jade); }
.ca-intent-lane--action   .ca-intent-lane-eyebrow { color: var(--ca-mist); }

/* 3-card grid.  Renders inside .ca-intent-lane (PR-1); the lane owns the
   horizontal padding so the grid itself is clean. */
.ca-intent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 0;
}
.ca-intent-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 28px 32px;
  background: var(--ca-paper);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-radius);
  cursor: pointer;
  text-align: left;
  color: var(--ca-ink);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  min-height: 200px;
  font: inherit;
}
.ca-intent-card:hover,
.ca-intent-card:focus-visible {
  border-color: var(--ca-jade);
  box-shadow: 0 0 0 1px var(--ca-jade), 0 8px 24px rgba(64,193,172,0.20);
  outline: none;
}
.ca-intent-icon {
  width: 32px;
  height: 32px;
  color: var(--ca-jade);
  margin-bottom: 8px;
}
.ca-intent-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ca-intent-verb {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-jade);
  margin: 0;
}
.ca-intent-card-h {
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ca-ink);
  margin: 0;
}
.ca-intent-card-sub {
  font-family: var(--ca-font-support);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ca-mist);
  margin: 8px 0 0;
}
/* PR-U4: step-count promise on each intent card. */
.ca-intent-card-steps {
  font-family: var(--ca-font-support);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-jade, #40C1AC);
  margin: 12px 0 0;
  opacity: 0.85;
}
.ca-intent-card-steps--inline {
  display: inline;
  margin: 0 0 0 6px;
  font-size: 11px;
  opacity: 0.75;
}

/* Divider */
.ca-intent-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 40px 40px 24px;
  font-family: var(--ca-font-primary);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-mist);
}
.ca-intent-divider::before,
.ca-intent-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ca-hairline);
}

/* Holistic full-width row */
.ca-intent-holistic {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
  margin: 0 40px 24px;
  background: var(--ca-paper);
  border: 1px solid var(--ca-hairline);
  border-left: 3px solid var(--ca-jade);
  border-radius: var(--ca-radius);
  cursor: pointer;
  text-align: left;
  color: var(--ca-ink);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  font: inherit;
  width: calc(100% - 80px);
}
.ca-intent-holistic:hover,
.ca-intent-holistic:focus-visible {
  border-color: var(--ca-jade);
  border-left-color: var(--ca-jade);
  box-shadow: 0 0 0 1px var(--ca-jade), 0 8px 24px rgba(64,193,172,0.20);
  outline: none;
}
.ca-intent-holistic .ca-intent-icon { margin-bottom: 0; }
.ca-intent-holistic-body { flex: 1; min-width: 0; }
.ca-intent-holistic-body .ca-intent-verb { margin-bottom: 4px; }
.ca-intent-holistic-body .ca-intent-card-h { margin-bottom: 6px; }
.ca-intent-holistic-body .ca-intent-card-sub { margin-top: 0; }
.ca-intent-holistic-arrow {
  flex-shrink: 0;
  color: var(--ca-jade);
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: transform 180ms ease;
}
.ca-intent-holistic:hover .ca-intent-holistic-arrow { transform: translateX(3px); }

/* PR-Basket-1: 7th tile - full-width landscape "BUILD THE WHOLE PLAN".
   Sits at the bottom of the action lane; mirrors .ca-intent-holistic layout
   but uses the mist accent (not jade) so it reads as a distinct power path
   rather than competing with the analysis flagship. Flag-gated in HTML with
   inline display:none; wizard.js flips to '' when ca_flag_multiaccount is on. */
.ca-intent-multiaccount {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
  margin: 24px 0 0;
  background: var(--ca-paper);
  border: 1px solid var(--ca-hairline);
  border-left: 3px solid var(--ca-mist);
  border-radius: var(--ca-radius);
  cursor: pointer;
  text-align: left;
  color: var(--ca-ink);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  font: inherit;
  width: 100%;
}
.ca-intent-multiaccount:hover,
.ca-intent-multiaccount:focus-visible {
  border-color: var(--ca-mist);
  border-left-color: var(--ca-mist);
  box-shadow: 0 0 0 1px var(--ca-mist), 0 8px 24px rgba(90,120,140,0.18);
  outline: none;
}
.ca-intent-multiaccount .ca-intent-icon { margin-bottom: 0; }
.ca-intent-multiaccount-body { flex: 1; min-width: 0; }
.ca-intent-multiaccount-body .ca-intent-verb { margin-bottom: 4px; }
.ca-intent-multiaccount-body .ca-intent-card-h { margin-bottom: 6px; }
.ca-intent-multiaccount-body .ca-intent-card-sub { margin-top: 0; }
.ca-intent-multiaccount-arrow {
  flex-shrink: 0;
  color: var(--ca-mist);
  font-family: var(--ca-font-primary);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: transform 180ms ease;
  text-align: right;
}
.ca-intent-multiaccount:hover .ca-intent-multiaccount-arrow { transform: translateX(3px); }
.ca-intent-multiaccount-arrow .ca-intent-card-steps--inline { display: block; margin-top: 4px; }

/* "Change what you're here for" affordance on Step 1 */
.ca-intent-change {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 16px;
  font-family: var(--ca-font-support);
  font-weight: 400;
  font-size: 13px;
  color: var(--ca-mist);
  cursor: pointer;
  transition: color 180ms ease;
}
.ca-intent-change:hover,
.ca-intent-change:focus-visible {
  color: var(--ca-jade);
  outline: none;
}

/* Responsive */
@media (max-width: 960px) {
  .ca-intent-lane { padding: 0 32px; margin-bottom: 22px; }
  .ca-intent-lane:last-of-type { padding-bottom: 32px; }
  .ca-intent-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 0; }
  .ca-intent-hero { padding: 28px 32px 22px; }
  .ca-intent-divider { margin: 32px 32px 22px; }
  /* PR-Basket-1: multiaccount tile collapses to stacked layout on narrow screens */
  .ca-intent-multiaccount { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 24px; }
  .ca-intent-multiaccount-arrow { text-align: left; }
  .ca-intent-holistic { margin: 0 32px 22px; width: calc(100% - 64px); }
}
@media (max-width: 640px) {
  .ca-intent-lane { padding: 0 22px; margin-bottom: 18px; }
  .ca-intent-lane:last-of-type { padding-bottom: 28px; }
  .ca-intent-grid { grid-template-columns: 1fr; gap: 16px; padding: 0; }
  .ca-intent-hero { padding: 24px 22px 20px; margin-bottom: 20px; }
  .ca-intent-card { padding: 22px 22px 26px; min-height: 0; }
  .ca-intent-divider { margin: 24px 22px 18px; }
  .ca-intent-holistic { margin: 0 22px 18px; padding: 22px 24px; gap: 18px; width: calc(100% - 44px); }
  .ca-intent-holistic-arrow { display: none; }
}


/* ============================================================
   PR-1 (2026-09-01) kids earned-income repeater  — REMOVED in PR-3
   PR-2 (2026-09-01) Trump Account per-child repeater — REMOVED in PR-3
   ============================================================

   PR-3 (2026-09-01) privacy doctrine correction. The .ca-kids-earn__ and
   .ca-trump__ class families used a hardcoded light-jade panel background
   (var(--ca-surface-alt, #f8fafc) with dark field labels) that produced a
   near-invisible label-on-light-background render in dark mode. Root cause:
   the panel color came from the light-mode surface token with no
   [data-theme="dark"] override, and the label color inherited the default
   dark-text style.

   With the underlying repeater DOM deleted (see index.html and wizard.js)
   both class families are unreachable and have been removed wholesale.
   .ca-chip-group is kept below because it is a generic wrapper reused by
   other slides (life_events chips, life-event chip picker).

   If a future feature needs a similar panel, use the wizard dark-mode
   tokens (see theme-dark.css) and provide an explicit
   html[data-theme="dark"] override for both background and label color. */

/* Generic chip-group wrapper - kept generic so future slides can reuse. */
.ca-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Optional-field hint styling. The previous rule was scoped to the removed
   .ca-kids-earn__repeater; the generic .ca-field__hint rule survives so any
   remaining <p class="ca-field__hint"> in the wizard still styles correctly. */
.ca-field__hint {
  margin: 8px 0 0;
  font-family: var(--ca-font-support);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ca-graphite, #475569);
}