/* =========================================================
   Trust Relay — Signup & Onboarding (app pages)
   Layered on top of styles-prototype.css
   ========================================================= */

/* The `hidden` attribute must always win. Components like .dash-card and
   .lapse-banner set an explicit `display:` which otherwise overrides
   [hidden]'s display:none and leaks the element into view even when JS
   set element.hidden = true. */
[hidden] { display: none !important; }

/* ---------- App shell ---------- */

.app-shell {
  min-height: calc(100vh - 84px);
  padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 120px);
}

.app-container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.app-container--wide {
  max-width: 960px;
}

/* ---------- App header (stripped down) ---------- */

.app-header { background: var(--cream); }
.app-header .header-row { justify-content: space-between; }
.app-header .app-exit {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.app-header .app-exit:hover { color: var(--oxblood); }

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

.progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: clamp(40px, 5vw, 64px);
  position: relative;
}
.progress-step {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  position: relative;
  min-width: 0;
}
.progress-step:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--paper-line);
  margin: 0 14px;
}
.progress-step.done:not(:last-child)::after {
  background: var(--oxblood);
}

.progress-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--paper-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-faint);
  background: var(--cream);
  transition: all .2s ease;
}
.progress-step.active .progress-num {
  border-color: var(--oxblood);
  color: var(--oxblood);
}
.progress-step.done .progress-num {
  border-color: var(--oxblood);
  background: var(--oxblood);
  color: var(--cream-soft);
}
.progress-step.done .progress-num::before {
  content: "✓";
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
}
.progress-step.done .progress-num span { display: none; }

.progress-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.progress-step.active .progress-label { color: var(--ink); }
.progress-step.done .progress-label { color: var(--ink-muted); }

/* ---------- Page headings inside flow ---------- */

.flow-heading {
  margin-bottom: clamp(32px, 4vw, 48px);
}
.flow-heading h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 18px;
}
.flow-heading h1 em {
  font-style: italic;
  color: var(--oxblood);
}
.flow-heading p {
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 60ch;
}
/* Activation nudge under the dashboard hero — only shown to accounts
   that have saved records but haven't activated yet. */
.hero-resume {
  margin-top: 18px;
}
/* Subscription lapse banner — loud, oxblood, top of the dashboard. */
.lapse-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding: 16px 20px;
  border: 1px solid var(--oxblood);
  border-radius: 10px;
  background: rgba(110, 37, 48, 0.06);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
.lapse-banner-action {
  font-weight: 600;
  color: var(--oxblood);
  border-bottom: 1px solid var(--oxblood);
  white-space: nowrap;
}

/* ---------- Form scaffolding ---------- */

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

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

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field-row--name {
  grid-template-columns: 1fr 72px 1fr;
  gap: 12px;
}

/* A field-row holding a single field should span the full width, not sit in
   one half-column with empty space beside it (the beneficiaries /
   onboarding-people / beneficiary forms put email + the awareness checkbox in
   single-field rows). Two-field rows and the name row are unaffected. */
.field-row:has(> .field:only-child) {
  grid-template-columns: 1fr;
}

.required-mark {
  color: var(--oxblood);
  font-weight: 600;
  margin-left: 2px;
}

.field-input[aria-invalid="true"],
.field-select[aria-invalid="true"] {
  border-color: var(--oxblood);
  box-shadow: 0 0 0 3px rgba(110, 37, 48, 0.12);
}

.field-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
}
.field-label.optional-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.optional-tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--cream-deep);
  padding: 3px 9px;
  border-radius: 999px;
}

.field-input,
.field-select,
.field-textarea {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  background: var(--cream-soft);
  border: 1px solid var(--paper-line);
  border-radius: 4px;
  padding: 16px 18px;
  width: 100%;
  transition: border-color .2s ease, background .2s ease;
  appearance: none;
  -webkit-appearance: none;
}
.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--oxblood);
  background: white;
}
.field-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}
.field-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236F6258' stroke-width='1.5'%3e%3cpath d='M5 8l5 5 5-5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 44px;
}

.field-help {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
}
/* Form error / success states. Replaces inline style="color: ..."
   attributes that were silently blocked by CSP across 13 pages. */
.field-help[data-error]   { color: var(--oxblood); }
.field-help[data-success] { color: var(--ink-soft); }

/* ---------- Checkbox ---------- */

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  cursor: pointer;
}
.check-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: var(--cream-soft);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  margin-top: 2px;
  transition: border-color .2s ease, background .2s ease;
}
.check-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 2px;
}
.check-row input[type="checkbox"]:checked {
  background: var(--oxblood);
  border-color: var(--oxblood);
}
.check-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F5EFE3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='13 4.5 6 11.5 3 8.5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}
.check-row span {
  font-size: 17px;
  color: var(--ink);
  line-height: 1.55;
}
.check-row a {
  color: var(--oxblood);
  border-bottom: 1px solid var(--oxblood);
}

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 18px 34px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.btn:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
}
.btn-primary {
  background: var(--oxblood);
  color: var(--cream-soft);
  border-color: var(--oxblood);
}
.btn-primary:hover {
  background: var(--oxblood-deep);
  border-color: var(--oxblood-deep);
}
.btn-primary span { transition: transform .2s ease; }
.btn-primary:hover span { transform: translateX(3px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--paper-line);
}
.btn-ghost:hover {
  border-color: var(--ink-soft);
  background: var(--cream-soft);
}
.btn-text {
  background: transparent;
  color: var(--ink-muted);
  padding: 14px 4px;
  border: none;
  font-weight: 500;
}
.btn-text:hover { color: var(--oxblood); }
.btn-block { width: 100%; }

/* Two-tier pricing additions ------------------------------------------------ */
/* Stacked monthly + annual buttons inside an onboarding plan card. */
.plan-prices { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.plan-prices .btn { justify-content: space-between; white-space: nowrap; gap: 8px; }
/* Tier group label above the review-plan radio cards (onboarding-review). */
.review-plan-tier-label {
  grid-column: 1 / -1;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  margin: 16px 0 8px;
}
.review-plan-tier-label:first-of-type { margin-top: 0; }
/* Locked cadence option — Standard accounts can't pick quarterly/monthly. */
.cadence-option.is-locked { opacity: .55; }
.cadence-option.is-locked:hover { cursor: not-allowed; }
/* onboarding-plan: spacing + alignment moved off CSP-blocked inline styles. */
.security-strip--spaced { margin-top: 20px; }
.step-nav-hint { text-align: right; }
/* ---- Replacements for CSP-blocked inline style attributes ---- */
.flow-heading--center { text-align: center; }
.field-help--pull { margin-top: -12px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-32 { margin-top: 32px; }
.u-mt-section { margin-top: clamp(32px, 4vw, 48px); }
.form-actions-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.inline-link { color: var(--oxblood); border-bottom: 1px solid var(--oxblood); padding-bottom: 1px; }
.confirm-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 8px;
  max-width: 52ch;
}

/* ---------- Step nav (Back / Continue at bottom of each onboarding page) ---------- */

.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}
.step-nav-back {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  padding: 6px 0;
  border-bottom: 1px solid var(--paper-line);
}
.step-nav-back:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); }

/* ---------- Callouts (trust/warning text) ---------- */

.callout {
  padding: 20px 24px;
  background: var(--cream-soft);
  border-left: 3px solid var(--oxblood);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 4px;
}
.callout strong {
  font-weight: 600;
  color: var(--ink);
}
/* Note variant — for must-read footnotes that should sit quieter
   than the primary callout. Lighter background, neutral border,
   slightly smaller type. The strong tag still pulls the eye to the
   key sentence (e.g. "Do not include passwords..."). */
.callout-warn {
  border-left: 2px solid var(--paper-line);
  background: var(--cream-soft);
  font-size: 15px;
  color: var(--ink-muted);
  padding: 16px 20px;
}
.callout-warn strong { color: var(--ink); }

/* ---------- Form card (signup) ---------- */

.form-card {
  background: var(--cream-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  padding: clamp(32px, 5vw, 48px);
  max-width: 520px;
  margin: 0 auto;
}
.form-card-foot {
  text-align: center;
  margin-top: 28px;
  font-size: 14px;
  color: var(--ink-muted);
}
.form-card-foot a {
  color: var(--oxblood);
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 1px;
}

/* ---------- Welcome page step list ---------- */

.welcome-steps {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--paper-line);
  margin: clamp(40px, 5vw, 64px) 0;
}
.welcome-step {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--paper-line);
}
.welcome-step-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  color: var(--oxblood);
  opacity: 0.75;
}
.welcome-step-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.welcome-step-tag {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Added-item cards (institutions/beneficiaries/instructions) ---------- */

.item-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.item-card {
  padding: 20px 24px;
  background: var(--cream-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
  transition: border-color .2s ease;
}
.item-card:hover { border-color: var(--ink-muted); }
.item-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item-card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.008em;
}
.item-card-meta {
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.55;
}
.item-card-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oxblood);
  background: rgba(110, 37, 48, 0.06);
  padding: 4px 10px;
  border-radius: 3px;
  align-self: flex-start;
  margin-top: 4px;
}

/* Edit/Remove action cluster on the right of every item card.
   Without this base rule, the inline style="display: flex; ..." that
   used to live on every rendered card was silently blocked by CSP,
   leaving the actions stacked vertically on desktop. */
.item-card-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  align-items: flex-start;
}

/* Modifiers used by the rendered item-card-meta lines — italic notes,
   indented instruction rows under a person, the "no instructions yet"
   muted note, and the orphan-instructions warning card. All replace
   inline style="..." attributes that CSP was silently dropping. */
.item-card-meta--italic { font-style: italic; }
.item-card-meta--instruction {
  padding-top: 10px;
  border-top: 1px solid var(--paper-line-soft);
  margin-top: 10px;
}
.item-card-meta--instruction-body { margin-top: 4px; }
.item-card-meta--no-instructions {
  font-style: italic;
  color: var(--ink-muted);
  margin-top: 8px;
}
.item-card-meta--instruction-text { margin-top: 12px; }
.item-card-meta--instruction-personal {
  font-style: italic;
  margin-top: 6px;
}
.mapping-cell--instructions {
  font-style: italic;
  font-weight: 400;
}
/* Orphan-instruction card: instructions whose person was deleted. */
.item-card--orphan { border-color: var(--oxblood-soft); }
.item-card-title--orphan { color: var(--oxblood); }

/* Cancel link inside the institutions/beneficiaries/instructions
   management forms — small muted text with an underline. */
.cancel-edit-link {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 1px;
}

/* Inline "Sign in" / "reset your password" links inside the duplicate-
   email error message on /signup. Oxblood text + underline so they
   read as actionable, not decorative. */
.inline-error-link {
  color: var(--oxblood);
  border-bottom: 1px solid var(--oxblood);
}
.item-card-remove {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  transition: color .2s ease;
}
.item-card-remove:hover { color: var(--oxblood); }

/* Notify-now sends a real, one-time email — style it as a distinct outlined
   action so it can't be mistaken for the plain text row actions beside it. */
.item-card-notify {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oxblood);
  background: transparent;
  border: 1px solid var(--oxblood);
  border-radius: 999px;
  cursor: pointer;
  padding: 4px 12px;
  transition: background .2s ease, color .2s ease;
}
.item-card-notify:hover { background: var(--oxblood); color: var(--cream); }

.empty-state {
  padding: 40px 28px;
  text-align: center;
  border: 1px dashed var(--paper-line);
  border-radius: 6px;
  font-size: 16px;
  color: var(--ink-muted);
  font-style: italic;
}

.add-another {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--oxblood);
  padding: 16px 24px;
  background: transparent;
  border: 1px dashed var(--oxblood);
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s ease;
}
.add-another:hover { background: rgba(110, 37, 48, 0.04); }
.add-another::before {
  content: "+";
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
}

/* ---------- Form sub-section divider ---------- */

.form-subhead {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: -0.012em;
  padding-top: 20px;
  margin-top: 20px;
  margin-bottom: 14px;
  border-top: 1px solid var(--paper-line);
}

/* ---------- Authorization page list ---------- */

/* Lead reassurance — names the why (in case you die) up front,
   set off from the timeline so users who only read this still
   walk away with the right idea. */
.verify-callout {
  padding: 22px 26px;
  margin-bottom: 36px;
  background: var(--cream-soft);
  border-left: 3px solid var(--oxblood);
  border-radius: 4px;
}
.verify-callout p {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.verify-callout em {
  font-style: italic;
  color: var(--oxblood);
}
/* Quiet line sitting under the callout — points users to where the
   cadence preference actually lives. */
.verify-callout-footnote {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-faint);
  margin: -24px 0 32px;
  padding-left: 28px;
  letter-spacing: 0.01em;
}

/* Numbered timeline. The vertical connector between numerals
   is what tells the eye "this is a sequence, in order" before
   anyone reads the numbers. */
.verify-timeline {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.verify-step {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 18px;
  padding-bottom: 28px;
}
.verify-step:last-child {
  padding-bottom: 0;
}
.verify-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 36px;
  bottom: 0;
  width: 1px;
  background: var(--paper-line);
}
.verify-step-num {
  width: 32px;
  height: 32px;
  border: 1px solid var(--oxblood);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--oxblood);
  background: var(--cream);
  position: relative;
  z-index: 1;
}
.verify-step-body {
  padding-top: 3px;
}
.verify-step-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.008em;
  margin-bottom: 6px;
}
.verify-step-text {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.verify-step-text em {
  font-style: italic;
  color: var(--ink);
}

@media (max-width: 600px) {
  .verify-callout {
    padding: 18px 20px;
  }
  .verify-callout p {
    font-size: 17px;
  }
  .verify-step {
    gap: 14px;
    grid-template-columns: 28px 1fr;
  }
  .verify-step:not(:last-child)::before {
    left: 13px;
    top: 32px;
  }
  .verify-step-num {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .verify-step-name {
    font-size: 17px;
  }
  .verify-step-text {
    font-size: 15px;
  }
}

/* ---------- Plan page (pricing cards) ---------- */

.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: clamp(32px, 4vw, 48px) 0;
  align-items: stretch;
}
.plan-card {
  position: relative;
  padding: clamp(32px, 4vw, 44px);
  background: var(--cream-soft);
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.plan-card:hover {
  border-color: var(--ink-muted);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(26, 20, 16, 0.18);
}
/* Featured (annual) card: same background as monthly — only the border and shadow distinguish it */
.plan-card.featured {
  border: 2px solid var(--oxblood);
  padding: calc(clamp(32px, 4vw, 44px) - 1px);  /* compensate for extra border */
  box-shadow: 0 16px 40px -20px rgba(110, 37, 48, 0.28);
}
.plan-card.featured:hover {
  border-color: var(--oxblood-deep);
  box-shadow: 0 20px 48px -20px rgba(110, 37, 48, 0.34);
}
.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: var(--oxblood);
  color: var(--cream-soft);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(110, 37, 48, 0.4);
}
.plan-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.plan-price-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 68px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.plan-price-per {
  font-size: 16px;
  color: var(--ink-muted);
}
.plan-sub {
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.55;
}
.plan-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--paper-line);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.plan-feature {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: baseline;
}
.plan-feature::before {
  content: "✓";
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--oxblood);
}

.guarantee-note {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--cream-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  text-align: center;
}
.guarantee-note h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.guarantee-note p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto;
}

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

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: clamp(32px, 4vw, 48px);
}
.dash-card {
  padding: 20px 22px 18px;
  background: var(--cream-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-card-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dash-card-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* Modifier for displaying dates / shorter text in a dash-card-num
   slot — same family/weight but sized for readable date strings
   like "April 14, 2027" instead of single-digit counts. */
.dash-card-num--date {
  font-size: 21px;
  letter-spacing: -0.012em;
}
/* Empty-state variant of the date slot — shown before activation, when
   there's no scheduled check-in yet. Reads as a quiet note, not a value. */
.dash-card-num--muted {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--ink-muted);
}
/* Oxblood action cue inside a dash-card-meta line ("Manage →", "Open →").
   Replaces inline style="color: var(--oxblood)" that was being silently
   blocked by CSP, leaving the cues in the default muted color. */
.dash-card-cue { color: var(--oxblood); }
.dash-card-meta {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.55;
  margin-top: 6px;
}
.dash-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--oxblood);
}
.dash-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oxblood);
}
/* Pre-activation status — neutral, not the active oxblood accent. */
.dash-status--pending {
  color: var(--ink-muted);
}
.dash-status--pending::before {
  background: var(--ink-faint);
}

.dash-cta {
  margin-top: 40px;
  padding: 32px 36px;
  background: var(--ink);
  color: var(--cream-soft);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.dash-cta h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--cream-soft);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.dash-cta p {
  font-size: 14px;
  color: rgba(245, 239, 227, 0.7);
  line-height: 1.5;
}
.dash-cta .btn-primary {
  background: var(--cream-soft);
  color: var(--ink);
  border-color: var(--cream-soft);
}
.dash-cta .btn-primary:hover {
  background: white;
  border-color: white;
}

/* ---------- Instructions: visual mapping (beneficiary → institution → instructions) ---------- */

.mapping {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  gap: 12px;
  align-items: center;
  padding: 18px 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.mapping-cell {
  padding: 12px 14px;
  background: var(--cream-soft);
  border: 1px solid var(--paper-line);
  border-radius: 4px;
  font-family: var(--serif);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  letter-spacing: -0.005em;
}
.mapping-arrow {
  color: var(--ink-faint);
  text-align: center;
  font-family: var(--sans);
}

/* ---------- Multi-select (institutions on instructions page) ---------- */

.multi-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--cream-soft);
  border: 1px solid var(--paper-line);
  border-radius: 4px;
  min-height: 50px;
}
.multi-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--paper-line);
  background: var(--cream);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  transition: all .2s ease;
}
.multi-option:hover { border-color: var(--ink-muted); }
.multi-option.selected {
  background: var(--oxblood);
  color: var(--cream-soft);
  border-color: var(--oxblood);
}
.multi-option-empty {
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
  padding: 6px 8px;
}

/* ---------- Three-layer instruction render (people + review + dashboard) ---------- */

/* Each saved-instruction card on /onboarding-people, /onboarding-review,
   and the dashboard renders three layers per (beneficiary, institution-set):
     1. The institution's general guidance (one block per linked institution)
     2. The per-beneficiary text
     3. The personal note (optional)
   Visually distinct so the user can scan which layer is which. */
.instr-layer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--paper-line-soft);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.instr-layer-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.instr-layer--guidance { font-style: italic; color: var(--ink-soft); }
.instr-layer--message {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oxblood);
}

/* ---------- Review page (per-person pager + plan cards) ---------- */

.review-section-lede {
  margin: 0 0 16px;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* Per-person detail panel shown beneath the pager. Contains the
   person's contact line and one block per institution / Other. */
.review-person-detail {
  margin-top: clamp(20px, 3vw, 28px);
  padding: clamp(20px, 3vw, 28px);
  background: var(--cream-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
}
.review-person-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--paper-line-soft);
}
.review-person-name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  color: var(--ink);
}
.review-person-meta {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
}
.review-person-block + .review-person-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--paper-line-soft);
}
.review-person-block-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

/* Plan card selector — three radio cards, one for monthly, one for
   annual, one for skip. Selected gets the oxblood ring. */
.review-plan-fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.review-plan-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--cream-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.review-plan-card:hover { border-color: var(--ink-muted); }
.review-plan-card input[type="radio"] {
  margin-top: 4px;
  accent-color: var(--oxblood);
}
.review-plan-card:has(input[type="radio"]:checked) {
  border-color: var(--oxblood);
  background: var(--cream);
}
.review-plan-card-body { display: flex; flex-direction: column; gap: 4px; }
.review-plan-card-title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.review-plan-card-price {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
}
.review-plan-card-cadence {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-muted);
}
.review-plan-card-meta {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.review-plan-card--skip .review-plan-card-meta {
  font-style: italic;
}

.review-callout { margin-top: clamp(32px, 4vw, 48px); }

.review-confirm-form { padding: 0; border: none; }
.review-confirm-form .op-fieldset { padding: 0; margin: 0; border: none; }

/* ---------- Beneficiary kind toggle (person vs entity) ---------- */

/* Two-pill radio group at the top of the beneficiary form. Person /
   Trust+Organization. Selected pill gets oxblood treatment. */
.ben-kind-fieldset { margin-bottom: 4px; }
.ben-kind-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  padding: 4px;
  background: var(--cream-soft);
}
.ben-kind-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ben-kind-pill input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.ben-kind-pill:has(input[type="radio"]:checked) {
  background: var(--oxblood);
  color: var(--cream-soft);
  font-weight: 500;
}
.ben-kind-pill:focus-within {
  outline: 2px solid var(--oxblood);
  outline-offset: 2px;
}

/* Inline kind badge that appears next to entity beneficiary names */
.pw-card-kind-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oxblood);
  background: rgba(110, 37, 48, 0.08);
  border-radius: 3px;
  vertical-align: middle;
}

/* ---------- People + Institutions combined step ---------- */

/* The "Other" pill — visually distinct from institution pills so users
   see it as the off-the-books escape hatch, not just another option. */
.multi-option--other {
  border-style: dashed;
  font-style: italic;
}
.multi-option--other.selected {
  border-style: solid;
}

/* Pending-new institutions: shown as already-selected pills with a "+"
   prefix and × suffix to indicate "newly added, click to remove." */
.multi-option em {
  font-style: italic;
  margin-right: 4px;
  opacity: 0.7;
}

/* Per-card institution chips on the saved-people list. Visually
   distinct from regular item-card meta — these are tag-like badges. */
.pw-card-insts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.pw-card-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px solid var(--paper-line);
  padding: 4px 10px;
  border-radius: 999px;
}
.pw-card-insts--empty {
  font-style: italic;
  color: var(--ink-muted);
  font-size: 13px;
}

/* ---------- Dashboard "Your people" hero ---------- */

/* People-first dashboard: a vertical list of every person you've
   added, with their name + relationship + guidance-path count.
   Each row links to /beneficiaries (eventually to a per-person
   workspace). Empty-state link shown when no people exist. */
.people-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.people-summary-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--cream-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.people-summary-row:hover {
  border-color: var(--oxblood);
  background: var(--cream);
}
.people-summary-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}
.people-summary-rel {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-left: 12px;
}
.people-summary-status {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.people-summary-status--warn { color: var(--oxblood); font-weight: 500; }

@media (max-width: 480px) {
  .people-summary-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 16px;
  }
  .people-summary-rel { margin-left: 0; display: block; }
}

/* ---------- Onboarding-guidance (step 3) ---------- */

/* People pager: horizontal strip of buttons, one per person.
   Current person is oxblood-highlighted; people with guidance saved
   get a check mark in the corner. Click any to jump to that person. */
.guidance-pager {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.guidance-pager-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.guidance-pager-item:hover { border-color: var(--ink-muted); color: var(--ink); }
.guidance-pager-item--active {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--cream-soft);
  font-weight: 500;
}
.guidance-pager-item--done .guidance-pager-check {
  color: var(--oxblood);
  font-weight: 600;
}
.guidance-pager-item--active .guidance-pager-check {
  color: var(--cream-soft);
}
.guidance-pager-name { white-space: nowrap; }

/* Workspace section: chapter-header + form. */
.guidance-workspace { display: block; }
.guidance-workspace[hidden] { display: none; }
.guidance-done[hidden] { display: none; }

/* Per-person workspace header. Reads like a chapter break:
   small eyebrow, serif name (italic accent), then a meta line
   that tells the user *what they're about to write about*
   (relationship + connected institutions). */
.guidance-active-header {
  margin-bottom: clamp(24px, 3vw, 32px);
}
.guidance-active-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 6px;
}
.guidance-active-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 8px;
}
.guidance-active-name em {
  font-style: italic;
  color: var(--oxblood);
}
.guidance-active-meta {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  margin: 0;
}

/* Demoted secondary link for "Save for later" — quieter than the
   primary submit, but still tappable. Smaller, ink-faint, no
   underline until hover. */
.guidance-skip-link {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.guidance-skip-link:hover {
  color: var(--oxblood);
  border-bottom-color: var(--oxblood);
}

/* Per-institution textarea blocks, rendered one per selected institution.
   Each gets its own label so the user always knows which institution
   they're writing about. */
.guidance-textareas {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 28px);
  margin-top: clamp(20px, 3vw, 28px);
}
.guidance-textarea-wrap .field-label em {
  font-style: italic;
  color: var(--oxblood);
}
.guidance-empty-prompt {
  font-style: italic;
  color: var(--ink-muted);
  margin-top: 8px;
}

/* Form-actions row: submit + secondary link side by side. */
.form-actions {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .guidance-pager-item { padding: 8px 12px; font-size: 13px; }
}

/* ---------- Onboarding-people institution fieldset ---------- */

/* Fieldsets get default browser styling (border + padding); strip it. */
.op-fieldset {
  border: none;
  padding: 0;
}
.op-legend {
  padding: 0;
  margin-bottom: 8px;
}
.op-legend-help { margin-bottom: 8px; }

/* "Add a new institution" block — spacing folded out of an inline style
   attribute (CSP forbids style="..." on site/*.html). */
.pw-add-inline { margin-top: 14px; }

/* Inline preview of every picked institution's general guidance.
   Sits beneath the multi-select pills so the user sees the
   institution-level layer as they're writing the per-beneficiary layer.
   Hidden when no institutions are picked or none have guidance. */
.guidance-preview {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--cream-soft);
  border-left: 2px solid var(--oxblood);
  border-radius: 0 4px 4px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.guidance-preview-item + .guidance-preview-item {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--paper-line-soft);
}
.guidance-preview-name {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 4px;
}
.guidance-preview-text {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
}
.guidance-preview-empty {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 13px;
}

/* ---------- Institution typeahead ---------- */

.typeahead-wrap {
  position: relative;
}
.typeahead-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-top: none;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 12px 24px -12px rgba(26, 20, 16, 0.18);
}
.typeahead-result {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--paper-line-soft);
  font-family: var(--sans);
}
.typeahead-result:last-child {
  border-bottom: none;
}
.typeahead-result:hover,
.typeahead-result.active,
.typeahead-result.is-active,
.typeahead-result--custom.is-active {
  background: var(--cream-soft);
}
.typeahead-result-name {
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}
.typeahead-result-category {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}
.typeahead-result--custom {
  padding: 12px 16px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--oxblood);
  font-style: italic;
  background: var(--cream-soft);
  border-top: 1px solid var(--paper-line);
}
.typeahead-result--custom:hover {
  background: var(--cream);
  color: var(--oxblood-deep);
}

/* ---------- Form footer (final submit area) ---------- */

.form-final {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--paper-line);
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  /* Hide non-active step labels on small screens; keep the active label visible so the user always knows where they are. */
  .progress-step:not(.active) .progress-label { display: none; }
  .progress-step { flex: 0 0 auto; }
  .progress-step.active { flex: 1 1 auto; min-width: 0; }
  .progress-step:not(:last-child)::after { margin: 0 8px; }
  .field-row { grid-template-columns: 1fr; }
  /* .field-row--name keeps its 3-column layout at all widths so first / M.I. / last stay on one row. */
  .field-row--name { grid-template-columns: 1fr 56px 1fr; gap: 8px; }
  .plan-grid { grid-template-columns: 1fr; }
  .review-plan-fieldset { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .mapping { grid-template-columns: 1fr; gap: 6px; }
  .mapping-arrow { transform: rotate(90deg); height: 16px; }
  .dash-cta { flex-direction: column; align-items: flex-start; }

  /* Item cards: stack the actions below the body on mobile so Edit
     and Remove are tappable without crowding the metadata. */
  .item-card { grid-template-columns: 1fr; }
  .item-card-actions { width: 100%; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--paper-line-soft); padding-top: 12px; }

  /* Bump touch targets for the small text buttons on mobile so they
     meet the 44x44 tap-area minimum. The visual treatment stays the
     same (small uppercase text); only the hit area grows. */
  .item-card-remove {
    padding: 12px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* App-nav links on authenticated pages — give them tappable padding
     and let the nav wrap if it gets too long. */
  .app-header .header-row { flex-wrap: wrap; gap: 8px 16px; }
  .app-nav { flex-wrap: wrap; }
  .app-header .app-exit {
    padding: 10px 4px;
    font-size: 12px;
  }

  /* Container padding tightens slightly on mobile */
  .container, .app-container { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 480px) {
  .dash-grid { grid-template-columns: 1fr; }
  /* Reduce the dashboard greeting size slightly so the welcome card
     doesn't dominate the viewport */
  .flow-heading h1 { font-size: clamp(28px, 7vw, 36px); }

  /* Onboarding progress: tighten connector margins now that we have
     three steps competing for ~335px of viewport width. */
  .progress-step:not(:last-child)::after,
  ol.progress li:not(:last-child)::after { margin: 0 6px; }

  /* Name row: shrink the middle M.I. column and gap so First/Last
     keep meaningful width on a 375px phone. */
  .field-row--name { grid-template-columns: 1fr 44px 1fr; gap: 6px; }
  .field-row--name .field-input { padding: 14px 12px; }

  /* Item cards: keep Edit/Remove tightly clustered on the right rather
     than spreading across the row. */
  .item-card { padding: 16px 18px; }
  .item-card-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

  /* Typeahead: prevent any chance of horizontal overflow and shorten
     the dropdown so it doesn't eclipse the keyboard. */
  .typeahead-results { max-height: 240px; overflow-y: auto; overflow-x: hidden; }
  .typeahead-result-name { font-size: 14px; }
  .typeahead-result-category { font-size: 10px; }

  /* Header on onboarding pages: let the wordmark and the single nav
     action (Save & continue later / Sign out) flex together cleanly. */
  .app-header .header-row { gap: clamp(8px, 2vw, 16px); }
}

/* =========================================================
   Accessibility additions (2026-05-21 review pass)
   ========================================================= */

/* Visually hidden — for screen reader only labels (progress state, etc.) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Focus-visible on every interactive surface that didn't have one */
.multi-option:focus-visible,
.item-card-remove:focus-visible,
.step-nav-back:focus-visible,
.app-exit:focus-visible,
.add-another:focus-visible,
[data-choose-plan]:focus-visible,
.field-input:focus-visible,
.field-select:focus-visible,
.field-textarea:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 2px;
}

/* Non-color indicator for selected multi-option (a11y: not color-only) */
.multi-option.selected::before {
  content: "✓";
  font-weight: 700;
  margin-right: 4px;
}

/* Progress: support semantic <ol> markup */
ol.progress { list-style: none; padding: 0; margin: 0 0 clamp(40px, 5vw, 64px); }
ol.progress li { display: flex; align-items: center; gap: 12px; flex: 1; position: relative; min-width: 0; }
ol.progress li:not(:last-child)::after {
  content: ""; flex: 1; height: 1px; background: var(--paper-line); margin: 0 14px;
}
ol.progress li.done:not(:last-child)::after { background: var(--oxblood); }

/* =========================================================
   Auth-page nav layout
   ========================================================= */

/* The .app-nav lives in every authenticated page header. Replaces
   inline style="display:flex; gap:..." attributes that were
   silently blocked by CSP. */
.app-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}

/* =========================================================
   Settings page sections (Subscription, Account, sign-out)
   ========================================================= */

/* Section spacing modifier used on the Subscription / Email /
   Account / Password section headings. */
.form-subhead--spaced { margin-top: clamp(48px, 6vw, 72px); }

/* Standalone p that mirrors a dd's typography — used by the
   "Current email" display in the profile section. */
.settings-value {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}

/* Two-column label/value definition list used by the Subscription
   and Account info sections. */
.settings-list {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px 32px;
  margin: 0;
}
.settings-list dt {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.settings-list dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}

/* Italic supporting copy under a settings section (e.g. plan
   meta + the read-only-billing note). */
.settings-meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-muted);
  margin-top: 16px;
  max-width: 56ch;
}
.settings-meta + .settings-meta { margin-top: 8px; }
/* Lede variant — non-italic, slightly larger, sits as preamble
   under a section heading. Used to set context before a form
   (e.g. "How often should we check in?"). */
.settings-meta--lede {
  font-style: normal;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 12px;
  margin-bottom: 24px;
  max-width: 60ch;
}

/* ---------- Check-in cadence picker (Settings) ---------- */

.cadence-fieldset {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 0;
  padding: 0;
  margin: 0;
}
.cadence-option {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 22px;
  background: var(--cream);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cadence-option:hover {
  border-color: var(--ink-muted);
}
.cadence-option:has(input:checked) {
  border-color: var(--oxblood);
  background: var(--cream-soft);
}
.cadence-option input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--oxblood);
  cursor: pointer;
}
.cadence-option-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cadence-option-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.008em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cadence-option-desc {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}
/* The grace-period note — quieter than the description so users
   read the *what* before the *what if you miss one*. Avoids
   reframing the choice as a deadline. */
.cadence-option-meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}

/* Bottom Sign-out block with a separator line above. */
.settings-signout {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--paper-line);
  margin-bottom: clamp(48px, 6vw, 80px);
}

/* On phones, collapse settings-list to single column. */
@media (max-width: 720px) {
  .settings-list { grid-template-columns: 1fr; gap: 4px 0; }
  .settings-list dd { margin-bottom: 12px; }
}

/* =========================================================
   Security strip — persistent reassurance under progress bar
   ========================================================= */

.security-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 14px 20px;
  margin-bottom: clamp(32px, 4vw, 48px);
  background: var(--cream-soft);
  border: 1px solid var(--paper-line-soft);
  border-left: 3px solid var(--oxblood);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.005em;
}
.security-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.security-strip-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oxblood);
  flex-shrink: 0;
}

/* =========================================================
   Toast (Save & exit confirmation)
   ========================================================= */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--ink);
  color: var(--cream-soft);
  padding: 14px 24px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 12px 32px -12px rgba(26, 20, 16, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 60;
  max-width: 90vw;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast::before {
  content: "✓";
  display: inline-block;
  margin-right: 10px;
  color: var(--cream);
  font-weight: 700;
}

/* =========================================================
   Resume banner (welcome-back / signup with state)
   ========================================================= */

.resume-banner {
  margin-bottom: clamp(32px, 4vw, 48px);
  padding: 20px 24px;
  background: var(--cream-soft);
  border: 1px solid var(--paper-line);
  border-left: 3px solid var(--oxblood);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.resume-banner-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.resume-banner-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.resume-banner-meta {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* =========================================================
   Review page (summary before activation)
   ========================================================= */

.review-section {
  border-top: 1px solid var(--paper-line);
  padding: clamp(28px, 4vw, 40px) 0;
}
.review-section:last-child { border-bottom: 1px solid var(--paper-line); }
.review-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  gap: 16px;
}
.review-section-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.review-edit-link {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--oxblood);
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 1px;
}
.review-edit-link:hover { color: var(--oxblood-deep); }
.review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-list-item {
  font-size: 16px;
  color: var(--ink-soft);
  padding: 4px 0;
}
.review-list-item strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}
.review-empty {
  font-size: 15px;
  color: var(--ink-muted);
  font-style: italic;
  padding: 4px 0;
}

/* =========================================================
   Success / celebration page
   ========================================================= */

.success-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(80px, 12vw, 140px) 0;
  gap: 28px;
}
.success-mark {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--oxblood);
  display: grid;
  place-items: center;
  color: var(--cream-soft);
  font-size: 36px;
  font-weight: 700;
  box-shadow: 0 16px 40px -12px rgba(110, 37, 48, 0.4);
  animation: success-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes success-pop {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}
.success-shell h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 20ch;
}
.success-shell h1 em { font-style: italic; color: var(--oxblood); }
.success-shell p {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 52ch;
}
.success-actions {
  margin-top: 12px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Standardize card radius to 4px (was 6px in several places) */
.form-card,
.item-card,
.empty-state,
.plan-card,
.guarantee-note,
.dash-card,
.security-strip,
.resume-banner,
.callout,
.tm-note { border-radius: 4px; }

/* ---------- Beneficiary notification status pill ---------- */
.ben-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: rgba(0, 0, 0, 0.04);
  padding: 4px 10px;
  border-radius: 3px;
}
.ben-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
}
/* Not Notified — neutral (default colors above). */
.ben-status--pending { color: var(--oxblood); background: rgba(110, 37, 48, 0.06); }
.ben-status--pending::before { background: var(--oxblood); }
.ben-status--acknowledged { color: #2f6b3a; background: rgba(47, 107, 58, 0.08); }
.ben-status--acknowledged::before { background: #2f6b3a; }
.ben-status--opted_out { color: var(--ink-faint); background: rgba(0, 0, 0, 0.04); }
.ben-status--opted_out::before { background: var(--ink-faint); }

/* ===== People-first redesign: Person page + hub ===== */

/* Back link at the top of the Person page. */
.back-link {
  display: inline-block;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
  text-decoration: none;
}
.back-link:hover { color: var(--oxblood); }

/* Person switcher: jump to another person, or add one, from the Person editor. */
.person-switcher {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.person-switcher-select { max-width: 280px; }
.person-switcher-add {
  font-size: 0.9rem;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
.person-switcher-add:hover { color: var(--oxblood); }

/* Up-front plan step: single centered membership card + cadence toggle + add-on. */
.plan-single { max-width: 480px; margin: 1.5rem auto 0; }
.plan-cadence { margin-top: 1.25rem; }
.plan-addon { max-width: 480px; margin: 1.25rem auto 0; }

/* One-line per-person summary on the People hub. */
.person-summary {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.person-summary--incomplete { color: var(--oxblood); }

/* "Needs a note or an institution" hint on the Person page. */
.person-incomplete-hint { color: var(--oxblood); }

/* Person-page institution cards sit a touch tighter than the form fields. */
[data-person-institutions] { margin-bottom: 0.75rem; }
[data-person-institutions] .item-card { margin-bottom: 0.5rem; }

/* Soft "add a note or an institution" nudge on the onboarding plan step. */
.onboarding-nudge {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--paper-line);
  border-left: 3px solid var(--oxblood);
  border-radius: 6px;
  background: var(--cream-soft);
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.onboarding-nudge a { color: var(--oxblood); }

/* Person page: per-institution guidance card. */
.person-inst-card .person-inst-general {
  margin: 0.35rem 0 0.5rem;
  color: var(--ink-soft);
  font-style: italic;
}
/* Compact the per-institution guidance fields (matches the add-people step):
   smaller textarea than the full-size .field-input, and the long "What should
   [Name] do about [X]?" label wraps instead of overflowing the nowrap default. */
.person-inst-card .person-inst-note { margin-top: 0.25rem; font-size: 16px; padding: 10px 14px; }
/* display:block (not the .optional-label flex/space-between) so the text flows
   as one sentence and "Optional" trails the "?" inline, instead of the words
   being spread across the full width. */
.person-inst-card .field-label { margin-top: 0.5rem; display: block; white-space: normal; }
.person-inst-card .optional-tag { margin-left: 6px; }

/* Onboarding-success heartfelt pull-quote (was an inline style -> CSP-blocked). */
.success-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink);
  line-height: 1.45;
  margin-top: 16px;
  max-width: 32ch;
}

/* Onboarding add-person: per-institution guidance textareas (one per selected
   institution). Compact treatment — these are a repeated list of short optional
   notes, not primary form fields, so they shed the full-size input scale/padding
   and the gaps tighten. The label is allowed to wrap, since a long institution
   name ("What should they do about Bank of America?") overflowed the nowrap
   field-label on narrow screens. */
.pw-guidance { margin-top: 4px; }
.pw-guidance-field { margin-top: 10px; gap: 6px; }
.pw-guidance-field .field-input { font-size: 16px; padding: 10px 14px; }
/* See .person-inst-card .field-label note: block flow, not spread-apart flex. */
.pw-guidance-field .field-label { display: block; white-space: normal; }
.pw-guidance-field .optional-tag { margin-left: 6px; }