/*
 * Ellery Grant demo brand kit for the private /private-wealth preview.
 * Every token and helper is scoped to .eg-demo so nothing outside a demo
 * wrapper changes. Trust Onion styled demo components use the .wd- prefix
 * and never read the --eg- tokens. Gallery layout uses .eg-gallery. Do not
 * add unscoped element selectors to this file.
 *
 * Contrast (WCAG AA: 4.5:1 normal text, 3:1 large text / UI outlines):
 *   navy on ivory 14.1, ivory on navy 14.1, white on navy 15.6,
 *   brass on navy 5.05, fail on ivory 5.91, white on fail 6.54,
 *   white on pass 5.05, pass on ivory 4.56.
 *   FAIL: brass on ivory 2.79, brass on white 3.09. Brass is never text on
 *   ivory or white; on light backgrounds use it only for rules and borders.
 */

.eg-demo {
  --eg-navy: #14243B;
  --eg-brass: #B08D57;
  --eg-ivory: #F7F3EC;
  --eg-ink: #14243B;
  --eg-pass: #2E7D4F;
  --eg-fail: #B3261E;
  --eg-ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

/* UI font: all app-screen and CRM text. */
.eg-demo .eg-ui {
  font-family: var(--eg-ui-font);
  color: var(--eg-ink);
}

/*
 * "Demo brand" pill. Usable inside or outside .eg-demo, so colors are
 * hardcoded rather than read from the scoped tokens. Text is navy, never
 * brass (brass text fails contrast on light backgrounds).
 */
.eg-demo-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid #B08D57;
  border-radius: 999px;
  background: transparent;
  color: #14243B;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Component gallery (review only) ---- */

.eg-gallery {
  padding: 64px 24px 96px;
}

.eg-gallery-inner {
  max-width: 64rem;
  margin: 0 auto;
}

.eg-gallery-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.eg-gallery-section {
  margin-bottom: 48px;
}

.eg-demo.eg-gallery-panel {
  background: var(--eg-ivory);
  color: var(--eg-ink);
  font-family: var(--eg-ui-font);
  border: 1px solid rgba(20, 36, 59, 0.12);
  border-radius: 16px;
  padding: 28px;
}

.eg-demo .eg-gallery-rule {
  height: 1px;
  border: 0;
  margin: 20px 0;
  background: var(--eg-brass);
}

.eg-demo .eg-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.eg-demo .eg-swatch {
  border: 1px solid rgba(20, 36, 59, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
}

.eg-demo .eg-swatch-chip {
  height: 72px;
  border-bottom: 1px solid rgba(20, 36, 59, 0.12);
}

.eg-demo .eg-swatch-meta {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
}

.eg-demo .eg-swatch-name {
  font-weight: 600;
}

.eg-demo .eg-swatch-hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.eg-demo .eg-logo-kit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
}

.eg-demo .eg-kit-logo-horizontal {
  width: 100%;
  max-width: 360px;
  height: auto;
}

.eg-demo .eg-kit-logo-compact {
  width: auto;
  height: 32px;
}

.eg-demo .eg-kit-mark {
  width: 72px;
  height: 72px;
}

.eg-demo .eg-type-ui-heading {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
}

.eg-demo .eg-type-ui-body {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

.eg-demo .eg-type-caption {
  font-size: 12px;
  margin-top: 8px;
}

.eg-demo .eg-on-navy {
  background: var(--eg-navy);
  color: var(--eg-ivory);
  border-radius: 12px;
  padding: 20px 24px;
}

.eg-demo .eg-contrast-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.eg-demo .eg-contrast-table th,
.eg-demo .eg-contrast-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(20, 36, 59, 0.12);
  vertical-align: middle;
}

.eg-demo .eg-contrast-table th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eg-demo .eg-contrast-sample {
  display: inline-block;
  min-width: 44px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(20, 36, 59, 0.12);
  font-weight: 600;
  text-align: center;
}

.eg-demo .eg-contrast-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
}

.eg-demo .eg-contrast-status-pass {
  background: var(--eg-pass);
}

.eg-demo .eg-contrast-status-fail {
  background: var(--eg-fail);
}

.eg-demo .eg-contrast-note {
  font-size: 13px;
  margin: 16px 0 0;
}

/* ---- Gallery layout for component review ---- */

.eg-gallery-subsections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 40px 24px;
  align-items: start;
}

.eg-gallery-subsection {
  min-width: 0;
}

.eg-gallery-label {
  margin: 0 0 12px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2C3E4A;
}

.eg-gallery-stack {
  display: grid;
  gap: 40px;
}

/* ==== Ellery Grant mockups (scoped to .eg-demo) ==== */

.eg-demo.eg-mock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.eg-demo .eg-mock-pill {
  display: flex;
}

.eg-demo .eg-word {
  white-space: nowrap;
}

.eg-demo .eg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--eg-ui-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.eg-demo .eg-btn-primary {
  background: var(--eg-navy);
  color: #FFFFFF;
}

.eg-demo .eg-btn-secondary {
  background: #FFFFFF;
  color: var(--eg-navy);
  border: 1.5px solid var(--eg-navy);
}

/* Phone frame */

.eg-demo .eg-phone {
  width: 300px;
  max-width: 100%;
  padding: 11px;
  border-radius: 50px;
  background: #1C1F24;
  box-shadow: 0 24px 48px rgba(20, 36, 59, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.eg-demo .eg-phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 620px;
  border-radius: 40px;
  overflow: hidden;
  background: var(--eg-ivory);
  color: var(--eg-ink);
}

.eg-demo .eg-phone-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 24px 0 32px;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.eg-demo .eg-phone-island {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 92px;
  height: 27px;
  border-radius: 20px;
  background: #0B0D10;
  transform: translateX(-50%);
}

.eg-demo .eg-phone-indicators {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.eg-demo .eg-phone-icon {
  height: 11px;
  width: auto;
  fill: currentColor;
}

.eg-demo .eg-phone-battery {
  height: 12px;
}

.eg-demo .eg-phone-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 20px 38px;
}

.eg-demo .eg-phone-home {
  position: absolute;
  bottom: 9px;
  left: 50%;
  width: 118px;
  height: 5px;
  border-radius: 3px;
  background: rgba(20, 36, 59, 0.35);
  transform: translateX(-50%);
}

/* Phone screens */

.eg-demo .eg-screen {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
}

.eg-demo .eg-app-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The mark sits where the old 34px monogram did. */
.eg-demo .eg-app-mark {
  flex: none;
  align-self: flex-start;
  width: 34px;
  height: 34px;
}

.eg-demo .eg-app-head .eg-app-mark {
  align-self: center;
}

.eg-demo .eg-app-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.eg-demo .eg-app-group {
  font-size: 13px;
  line-height: 1.3;
  color: rgba(20, 36, 59, 0.75);
}

.eg-demo .eg-screen-title {
  margin: 6px 0 0;
  font-family: var(--eg-ui-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--eg-ink);
}

.eg-demo .eg-screen-title-center,
.eg-demo .eg-screen-body-center {
  text-align: center;
}

.eg-demo .eg-screen-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.eg-demo .eg-screen-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(20, 36, 59, 0.78);
}

.eg-demo .eg-screen-cta {
  margin-top: auto;
}

/* Live words: one card holds the family label, the countdown ring with the three words flowing inside it, the timer pill, and the caption. */
.eg-demo .eg-words-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 -8px;
  padding: 16px 15px;
  border: 1px solid rgba(20, 36, 59, 0.12);
  border-radius: 24px;
  background: #FBF8F3;
}

.eg-demo .eg-family-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-family: var(--eg-ui-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  color: var(--eg-navy);
}

.eg-demo .eg-family-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--eg-navy);
}

.eg-demo .eg-words-caption {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: rgba(20, 36, 59, 0.7);
}

.eg-demo .eg-words-caption-line {
  display: block;
}

.eg-demo .eg-ring-wrap {
  position: relative;
  align-self: center;
  flex: none;
  width: 224px;
  height: 224px;
}

.eg-demo .eg-ring {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.eg-demo .eg-ring-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Libre Caslon Display flows as one centered line that wraps inside the ring. 30px keeps the longest allowlisted set in three lines with a 10% side margin. */
.eg-demo .eg-ring-words {
  width: 168px;
  font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: var(--eg-navy);
}

.eg-demo .eg-ring-track {
  fill: none;
  stroke: rgba(20, 36, 59, 0.12);
  stroke-width: 6;
}

.eg-demo .eg-ring-progress {
  fill: none;
  stroke: var(--eg-navy);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}

.eg-demo .eg-timer {
  align-self: center;
  margin: 0;
  padding: 8px 18px;
  border: 1px solid rgba(20, 36, 59, 0.14);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.eg-demo .eg-timer-value {
  font-weight: 600;
}

.eg-demo .eg-screen-footer {
  margin: auto 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--eg-navy);
  color: var(--eg-ivory);
  font-size: 14px;
  line-height: 1.45;
}

.eg-demo .eg-screen-welcome {
  align-items: stretch;
  padding-top: 72px;
}

.eg-demo .eg-screen-mark-lg {
  align-self: center;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
}

.eg-demo .eg-group-card {
  padding: 14px 16px;
  border: 1px solid rgba(20, 36, 59, 0.12);
  border-radius: 16px;
  background: #FFFFFF;
}

.eg-demo .eg-group-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.eg-demo .eg-group-members {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eg-demo .eg-group-member {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.eg-demo .eg-group-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(20, 36, 59, 0.4);
}

.eg-demo .eg-group-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(20, 36, 59, 0.78);
}

.eg-demo .eg-request-frame {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  margin: 6px 0;
  border: 1px solid var(--eg-brass);
  border-radius: 28px;
  background: #FFFFFF;
  color: var(--eg-navy);
}

.eg-demo .eg-request-frame svg {
  width: 80px;
  height: 80px;
}

.eg-demo .eg-photo-placeholder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-height: 290px;
  border-radius: 20px;
  overflow: hidden;
  background: #E3DFD7;
}

.eg-demo .eg-photo-placeholder svg {
  width: 70%;
  height: auto;
  fill: rgba(20, 36, 59, 0.18);
}

.eg-demo .eg-verified-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 700;
}

.eg-demo .eg-verified-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--eg-pass);
  color: #FFFFFF;
}

.eg-demo .eg-verified-check svg {
  width: 15px;
  height: 15px;
}

.eg-demo .eg-verified-line {
  margin: -6px 0 0;
  font-size: 14px;
}

.eg-demo .eg-verified-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.eg-demo .eg-verified-meta-item {
  padding: 4px 10px;
  border: 1px solid rgba(20, 36, 59, 0.14);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Client record panel: a compact CRM household record page in a Lightning-style
   look. Lightning palette: page gray #F3F3F3, text #181818, muted #747474,
   borders #DDDBDA, brand blue #0176D3, 4px radii. */

.eg-demo .eg-crm-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--eg-ink);
}

.eg-demo .eg-crm-label span {
  min-width: 0;
}

.eg-demo .eg-crm-label-logo {
  flex: none;
  width: auto;
  height: 22px;
}

.eg-demo .eg-crm-trademark {
  max-width: 560px;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: #747474;
}

.eg-demo .eg-crm-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
}

.eg-demo .eg-crm {
  display: flex;
  flex-direction: column;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid #DDDBDA;
  border-radius: 4px;
  background: #F3F3F3;
  box-shadow: 0 10px 30px rgba(24, 24, 24, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #181818;
}

.eg-demo .eg-crm svg {
  display: block;
  flex: none;
}

/* Global header: org logo, search, utility icons, avatar. */
.eg-demo .eg-crm-global {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 12px;
  border-bottom: 1px solid #DDDBDA;
  background: #FFFFFF;
}

.eg-demo .eg-crm-org-logo {
  flex: none;
  width: auto;
  height: 24px;
}

.eg-demo .eg-crm-search {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 200px;
  height: 28px;
  margin: 0 auto;
  padding: 0 10px;
  border: 1px solid #C9C9C9;
  border-radius: 4px;
  background: #FFFFFF;
  color: #747474;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
}

.eg-demo .eg-crm-search svg {
  width: 13px;
  height: 13px;
}

.eg-demo .eg-crm-utility {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #747474;
}

.eg-demo .eg-crm-utility svg {
  width: 15px;
  height: 15px;
}

.eg-demo .eg-crm-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 50%;
  background: #706E6B;
}

.eg-demo .eg-crm-avatar svg {
  width: 26px;
  height: 26px;
}

/* App navigation: launcher, app name, tabs, brand blue bottom border. */
.eg-demo .eg-crm-nav {
  display: flex;
  align-items: stretch;
  min-height: 40px;
  padding-left: 12px;
  border-bottom: 2px solid #0176D3;
  background: #FFFFFF;
}

.eg-demo .eg-crm-launcher {
  display: flex;
  flex: none;
  align-items: center;
  margin-right: 10px;
  color: #747474;
}

.eg-demo .eg-crm-launcher svg {
  width: 16px;
  height: 16px;
}

.eg-demo .eg-crm-app {
  display: flex;
  flex: none;
  align-items: center;
  margin-right: 8px;
  font-size: 14px;
  white-space: nowrap;
}

.eg-demo .eg-crm-tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.eg-demo .eg-crm-tabs::-webkit-scrollbar {
  display: none;
}

.eg-demo .eg-crm-tab {
  display: flex;
  flex: none;
  align-items: center;
  padding: 0 8px;
  font-size: 13px;
  white-space: nowrap;
}

.eg-demo .eg-crm-tab.eg-is-active {
  background: #F3F3F3;
  box-shadow: inset 0 -3px 0 #0176D3;
  font-weight: 600;
}

/* Record header: object icon, name, pill, and the field row. */
.eg-demo .eg-crm-record {
  padding: 14px 16px 16px;
  border-bottom: 1px solid #DDDBDA;
  background: #F3F3F3;
}

.eg-demo .eg-crm-record-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eg-demo .eg-crm-object-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: #0B827C;
}

.eg-demo .eg-crm-object-icon svg {
  width: 18px;
  height: 18px;
}

.eg-demo .eg-crm-object {
  font-size: 12px;
  color: #747474;
}

.eg-demo .eg-crm-record-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.eg-demo .eg-crm-record-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.eg-demo .eg-crm-pill {
  padding: 2px 8px;
  border-radius: 15px;
  background: #E5F1FB;
  color: #014486;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eg-demo .eg-crm-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  gap: 10px 24px;
  margin: 14px 0 0;
}

.eg-demo .eg-crm-fieldpair dt,
.eg-demo .eg-crm-detail-row dt {
  font-size: 12px;
  color: #747474;
}

.eg-demo .eg-crm-fieldpair dd,
.eg-demo .eg-crm-detail-row dd {
  margin: 2px 0 0;
  font-size: 13px;
  color: #181818;
}

/* Body: Details column and the verification card. The bottom padding is the
   only part of the panel the captions overlap. */
.eg-demo .eg-crm-body {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  padding: 12px 12px 24px;
}

.eg-demo .eg-crm-details,
.eg-demo .eg-crm-card {
  border: 1px solid #DDDBDA;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
}

.eg-demo .eg-crm-detail-tabs {
  display: flex;
  padding: 0 4px;
  border-bottom: 1px solid #DDDBDA;
}

.eg-demo .eg-crm-detail-tab {
  padding: 9px 6px 8px;
  color: #747474;
  font-size: 12px;
  white-space: nowrap;
}

.eg-demo .eg-crm-detail-tab.eg-is-active {
  box-shadow: inset 0 -2px 0 #0176D3;
  color: #181818;
  font-weight: 600;
}

.eg-demo .eg-crm-detail-rows {
  margin: 0;
  padding: 4px 12px;
}

.eg-demo .eg-crm-detail-row {
  padding: 8px 0;
  border-bottom: 1px solid #DDDBDA;
}

.eg-demo .eg-crm-detail-row:last-child {
  border-bottom: 0;
}

.eg-demo .eg-crm-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.eg-demo .eg-crm-card-mark {
  flex: none;
  width: 24px;
  height: 24px;
}

.eg-demo .eg-crm-card-title {
  font-size: 14px;
  font-weight: 700;
}

.eg-demo .eg-crm-card-body {
  display: grid;
  gap: 12px;
  padding: 0 12px 14px;
}

/* Same height as the CRM buttons; sits in the shared Confirm match slot. */
.eg-demo .eg-crm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 4px;
  background: var(--eg-pass);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.eg-demo .eg-crm-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-left: 3px solid #0176D3;
  border-radius: 4px;
  background: #EEF4FF;
  font-size: 13px;
  font-weight: 600;
}

.eg-demo .eg-crm-banner-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--eg-pass);
}

.eg-demo .eg-crm-field {
  padding: 10px 12px;
  border: 1px solid #DDDBDA;
  border-radius: 4px;
}

.eg-demo .eg-crm-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #747474;
}

.eg-demo .eg-crm-words {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.eg-demo .eg-crm-timer {
  margin-top: 2px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #747474;
}

.eg-demo .eg-crm-prompt {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.eg-demo .eg-crm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #C9C9C9;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.eg-demo .eg-crm-button-neutral {
  background: #FFFFFF;
  color: #0176D3;
}

.eg-demo .eg-crm-button-brand {
  border-color: #0176D3;
  background: #0176D3;
  color: #FFFFFF;
}

.eg-demo .eg-crm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Confirm match and the Verified badge share one slot, stacked in one grid cell. */
.eg-demo .eg-crm-slot {
  display: grid;
  align-items: center;
}

.eg-demo .eg-crm-slot > * {
  grid-area: 1 / 1;
  justify-self: start;
}

/* Final state: with captions the badge replaces Confirm match. */
.eg-demo.eg-mock-crm-captions:not([data-wd-stage]) .eg-crm-confirm {
  opacity: 0;
  visibility: hidden;
}

/* Call captions */

.eg-demo.eg-captions {
  display: grid;
  gap: 8px;
  max-width: 300px;
}

.eg-demo .eg-caption {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--eg-navy);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 8px 20px rgba(20, 36, 59, 0.18);
}

.eg-demo .eg-caption-speaker {
  font-weight: 700;
  color: var(--eg-brass);
}

.eg-demo .eg-crm-stage > .eg-captions {
  position: relative;
  margin: -20px 12px 0 auto;
  width: 280px;
  max-width: calc(100% - 24px);
}

.eg-demo .eg-caption,
.eg-demo .eg-crm-badge {
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

.eg-demo .eg-crm-confirm {
  transition: opacity 0.35s ease, transform 0.2s ease, visibility 0.35s, background-color 0.2s ease, color 0.2s ease;
}

/* Caption sequence stages, set by /js/wealth-demo.js only when motion is allowed. */
.eg-demo[data-wd-stage="0"] .eg-caption,
.eg-demo[data-wd-stage="0"] .eg-crm-badge,
.eg-demo[data-wd-stage="1"] .eg-caption[data-wd-caption="2"],
.eg-demo[data-wd-stage="1"] .eg-crm-badge,
.eg-demo[data-wd-stage="2"] .eg-crm-badge,
.eg-demo[data-wd-stage="3"] .eg-crm-badge {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

/* Stage 3: Confirm match pressed. Stage 4: Verified replaces it. */
.eg-demo[data-wd-stage="3"] .eg-crm-confirm {
  border-color: #014486;
  background: #014486;
  color: #FFFFFF;
  transform: scale(0.96);
}

.eg-demo[data-wd-stage="4"] .eg-crm-confirm {
  opacity: 0;
  visibility: hidden;
}

/* Welcome letter */

.eg-demo .eg-letter {
  width: 100%;
  max-width: 640px;
  padding: 48px 52px;
  border: 1px solid rgba(20, 36, 59, 0.12);
  border-radius: 6px;
  background: var(--eg-ivory);
  box-shadow: 0 18px 40px rgba(20, 36, 59, 0.1);
  font-size: 16px;
  line-height: 1.65;
}

.eg-demo .eg-letter-head {
  display: flex;
  justify-content: flex-start;
}

.eg-demo .eg-letter-logo {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
}

.eg-demo .eg-letter-rule {
  height: 1px;
  margin: 20px 0 28px;
  border: 0;
  background: var(--eg-brass);
}

.eg-demo .eg-letter p {
  margin: 0 0 16px;
}

.eg-demo .eg-letter .eg-letter-signoff {
  margin-top: 28px;
  margin-bottom: 6px;
}

.eg-demo .eg-letter .eg-letter-signature {
  margin: 0;
  font-weight: 600;
}

/* Wider screens: captions hang off the right edge but stay below the actions row,
   so they never cover Confirm match. They only overlap the panel's bottom padding. */
@media (min-width: 640px) {
  .eg-demo .eg-crm-stage > .eg-captions {
    margin: -20px -16px 0 auto;
    max-width: none;
  }
}

@media (max-width: 639px) {
  .eg-demo .eg-letter {
    padding: 32px 24px;
  }

  /* Phone CRM: logo and avatar, record fields two per row, then the card full width. */
  .eg-demo .eg-crm {
    min-height: 0;
  }

  .eg-demo .eg-crm-global {
    justify-content: space-between;
  }

  .eg-demo .eg-crm-search,
  .eg-demo .eg-crm-utility,
  .eg-demo .eg-crm-details {
    display: none;
  }

  .eg-demo .eg-crm-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eg-demo .eg-crm-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==== Trust Onion components (wd- prefix, no demo tokens) ==== */

.wd-chain,
.wd-tiers,
.wd-security {
  font-family: "Roboto", sans-serif;
  color: #2C3E4A;
}

/* Attack chain */

.wd-chain {
  max-width: 640px;
}

.wd-chain .wd-chain-steps {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Each circle is centered on its own card. The connector is drawn per row so
 * it holds with uneven card heights: the row gap is a fixed 18px of bottom
 * padding (outside the centered content box), every row but the first draws
 * the top half from its circle's center up to the row top, and every row but
 * the last draws the bottom half from its center down through the gap. The
 * line runs from the center of circle 1 to the center of circle 4, behind the
 * circles (z-index 1 on the circle).
 */
.wd-chain .wd-chain-step {
  --wd-chain-gap: 18px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: var(--wd-chain-gap);
}

.wd-chain .wd-chain-step:not(:first-child)::before,
.wd-chain .wd-chain-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  width: 2px;
  background: rgba(91, 143, 168, 0.35);
}

.wd-chain .wd-chain-step:not(:first-child)::before {
  top: 0;
  height: calc(50% - var(--wd-chain-gap) / 2);
}

.wd-chain .wd-chain-step:not(:last-child)::after {
  top: calc(50% - var(--wd-chain-gap) / 2);
  bottom: 0;
}

.wd-chain .wd-chain-num {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid #C98A1B;
  border-radius: 50%;
  background: #FFFFFF;
  font-weight: 700;
}

.wd-chain .wd-chain-step-body {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid rgba(91, 143, 168, 0.25);
  border-radius: 12px;
  background: #FFFFFF;
}

.wd-chain .wd-chain-title {
  margin: 0 0 10px;
  font-family: "Libre Caslon Display", serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  color: #2C3E4A;
}

.wd-chain .wd-chain-body {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: #4A6070;
}

.wd-inline-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #5B8FA8;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wd-inline-link:hover {
  color: #2C3E4A;
  text-decoration-thickness: 2px;
}

.wd-inline-link:focus-visible {
  outline: 2px solid #5B8FA8;
  outline-offset: 2px;
  border-radius: 2px;
}

.wd-chain .wd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wd-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

/*
 * Amber warning style, shared by the attack chain "passed" tags and the hero
 * Voice match chip: a check that passed when it should not have.
 * Text 7A4B00 on FDF0D5 is about 6.7:1.
 */
.wd-tag-warn {
  gap: 6px;
  border: 1px solid #E8C27A;
  background: #FDF0D5;
  color: #7A4B00;
}

.wd-tag-warn .wd-warn-icon {
  flex: none;
}

.wd-chain .wd-chain-fail {
  background: #B3261E;
  color: #FFFFFF;
  margin: 2px 0 18px 56px;
  padding: 14px 18px;
  border-radius: 12px;
  font-family: "Libre Caslon Display", serif;
  font-size: 24px;
  line-height: 1.25;
}

.wd-chain .wd-chain-closing {
  margin-left: 56px;
  padding: 22px 24px;
  border-radius: 14px;
  /* White on 2E7D4F is about 5.2:1. */
  background: #2E7D4F;
  color: #FFFFFF;
}

.wd-chain .wd-chain-closing-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: "Libre Caslon Display", serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  color: #FFFFFF;
}

.wd-chain .wd-closing-icon {
  flex: none;
}

.wd-chain .wd-chain-closing-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #FFFFFF;
}

.wd-chain .wd-chain-item {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.wd-chain .wd-chain-item.wd-is-pending {
  opacity: 0;
  transform: translateY(16px);
}

/* Tier cards */

.wd-tiers .wd-tiers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.wd-tiers .wd-tier-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid rgba(91, 143, 168, 0.25);
  border-radius: 16px;
  background: #FFFFFF;
}

/* Same 1px border on both cards; the Elevated accent is an inset shadow, so
   both cards' content starts at the same height. */
.wd-tiers .wd-tier-card-elevated {
  box-shadow: inset 0 4px 0 #2C3E4A;
}

.wd-tiers .wd-tier-description {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #4A6070;
}

.wd-tiers .wd-tier-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4A6070;
}

.wd-tiers .wd-tier-title {
  margin: 0;
  font-family: "Libre Caslon Display", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: #2C3E4A;
}

.wd-tiers .wd-tier-when-label {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.wd-tiers .wd-tier-when {
  margin: 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  list-style: disc;
}

.wd-tiers .wd-tier-threshold {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(91, 143, 168, 0.25);
  font-size: 14px;
  color: #4A6070;
}

.wd-tiers .wd-tier-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #F2F6F3;
  font-size: 16px;
  font-weight: 600;
}

.wd-tiers .wd-tier-check-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2E7D4F;
  color: #FFFFFF;
}

.wd-tiers .wd-tier-check-icon svg {
  width: 14px;
  height: 14px;
}

.wd-tiers .wd-tiers-footer {
  margin: 16px 0 0;
  font-size: 15px;
  text-align: center;
  color: #4A6070;
}

/* Security grid: 1 column, then 2 on tablet, then 3 (3x2) on desktop. */

.wd-security .wd-security-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wd-security .wd-security-item {
  display: flex;
}

.wd-security .wd-security-cell {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(91, 143, 168, 0.25);
  border-radius: 14px;
  background: #FFFFFF;
  color: #2C3E4A;
  text-decoration: none;
}

.wd-security .wd-security-cell-link {
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wd-security .wd-security-cell-link:hover {
  border-color: #5B8FA8;
  box-shadow: 0 8px 24px rgba(44, 62, 74, 0.1);
  transform: translateY(-2px);
}

.wd-security .wd-security-cell-link:focus-visible {
  outline: 3px solid #5B8FA8;
  outline-offset: 3px;
}

.wd-security .wd-security-title {
  margin: 0;
  font-family: "Libre Caslon Display", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #2C3E4A;
}

.wd-security .wd-security-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #4A6070;
}

.wd-security .wd-security-detail {
  max-width: 68ch;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #4A6070;
}

.wd-security .wd-security-detail.wd-security-policy {
  margin-top: 8px;
}

.wd-security .wd-security-policy-link {
  color: #2C3E4A;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wd-security .wd-security-policy-link:hover {
  color: #1E2C36;
}

.wd-security .wd-security-policy-link:focus-visible {
  outline: 3px solid #5B8FA8;
  outline-offset: 2px;
}

.wd-security .wd-security-link {
  margin-top: auto;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #2C3E4A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 640px) {
  .wd-security .wd-security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  /* The grid defines the seven card rows (label, title, description, when label,
     list, threshold, check) and each card spans them with a subgrid, so both cards
     line up row for row. The 12px row gap matches the card gap. Below 768px the
     cards stay single-column flex stacks. */
  @supports (grid-template-rows: subgrid) {
    .wd-tiers .wd-tiers-grid {
      grid-template-rows: repeat(7, auto);
      row-gap: 12px;
    }

    .wd-tiers .wd-tier-card {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
    }
  }
}

@media (min-width: 1024px) {
  .wd-security .wd-security-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .wd-chain .wd-chain-fail,
  .wd-chain .wd-chain-closing {
    margin-left: 0;
  }
}

/*
 * Assembled /private-wealth page. Trust Onion styling: cream background,
 * Libre Caslon Display headlines, Roboto body, #5B8FA8 accent. Mobile first.
 * Ellery Grant styling stays inside the mockups (.eg-demo).
 */

.wd-page {
  background: #FDF8F6;
  color: #2C3E4A;
  font-family: "Roboto", sans-serif;
  overflow-x: clip;
}

.wd-page .wd-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.wd-page .wd-section {
  position: relative;
  padding: 64px 0;
}

.wd-page .wd-section-head {
  max-width: 720px;
  margin-bottom: 40px;
}

.wd-page .wd-section-head-centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.wd-page .wd-eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  /* Darker than the #5B8FA8 accent so small text clears 4.5:1 on cream (about 5.3:1). */
  color: #3F6E85;
}

.wd-page .wd-headline {
  margin: 0 0 18px;
  font-family: "Libre Caslon Display", serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  color: #2C3E4A;
}

/* Hero H1: the only size rule for it. Homepage scale (tight leading and tracking), sized to fit the hero copy column. */
.wd-page h1.wd-headline-h1 {
  margin: 0 0 28px;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.wd-page .wd-subtitle {
  max-width: 30ch;
  margin: 0 0 24px;
  font-family: "Libre Caslon Display", serif;
  font-size: 24px;
  line-height: 1.3;
  /* #2C3E4A at 85% opacity: about 7:1 on cream. */
  color: rgba(44, 62, 74, 0.85);
}

.wd-page .wd-punchline {
  margin: 0 0 32px;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #2C3E4A;
}

.wd-page .wd-punchline-bold {
  display: block;
  margin-top: 14px;
  font-weight: 600;
}

.wd-page .wd-lead {
  margin: 0 0 18px;
  font-size: 19px;
  line-height: 1.55;
  color: #2C3E4A;
}

.wd-page .wd-body {
  max-width: 640px;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.7;
  color: #4A6070;
}

.wd-page .wd-section-head-centered .wd-body {
  margin-left: auto;
  margin-right: auto;
}

.wd-page .wd-item-title {
  font-weight: 700;
  color: #2C3E4A;
}

/* Calls to action: deep slate with white text (contrast 11:1). */
.wd-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 999px;
  background: #2C3E4A;
  color: #FFFFFF;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.wd-cta:hover {
  background: #1E2C36;
}

.wd-cta:focus-visible {
  outline: 3px solid #5B8FA8;
  outline-offset: 3px;
}

.wd-cta.wd-cta-small {
  padding: 10px 16px;
  font-size: 14px;
}

.wd-cta.wd-cta-on-dark {
  background: #FFFFFF;
  color: #2C3E4A;
}

.wd-cta.wd-cta-on-dark:hover {
  background: #E8EEF1;
}

.wd-cta.wd-cta-on-dark:focus-visible {
  outline-color: #FFFFFF;
}

.wd-page .wd-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

/* Small text links in the page palette (header and hero jump links). */
.wd-text-link {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #2C3E4A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wd-text-link:hover {
  color: #1E2C36;
}

.wd-text-link:focus-visible {
  outline: 3px solid #5B8FA8;
  outline-offset: 3px;
  border-radius: 2px;
}

.wd-page .wd-hero-security-link {
  display: block;
  width: fit-content;
  margin-top: 16px;
}

/* Jump to the security section: keep its heading clear of the header. */
.wd-page .wd-section-security {
  scroll-margin-top: 72px;
}

/* Smooth jumps only without a reduced-motion preference, and only on the assembled page. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.wd-page) {
    scroll-behavior: smooth;
  }
}

/* Minimal page chrome (this page only) */

.wd-chrome-header {
  position: relative;
  z-index: 10;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(44, 62, 74, 0.08);
}

.wd-chrome-header-inner,
.wd-chrome-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
}

.wd-chrome-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 20px;
}

@media (max-width: 639px) {
  .wd-chrome-actions .wd-chrome-security-link {
    display: none;
  }
}

.wd-chrome-logo {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  height: 32px;
  max-width: 45%;
  object-fit: contain;
  object-position: left center;
}

.wd-chrome-footer {
  background: #FFFFFF;
  border-top: 1px solid rgba(91, 143, 168, 0.2);
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #4A6070;
}

.wd-chrome-footer-inner {
  flex-wrap: wrap;
  padding-top: 24px;
  padding-bottom: 24px;
}

.wd-chrome-copyright {
  margin: 0;
}

.wd-chrome-links {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wd-chrome-links a {
  color: #2C3E4A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Image placeholders: fixed ratio, soft neutral fill. */

.wd-image-slot {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, #EDE6E1 0%, #E2E8EB 100%);
}

.wd-image-slot.wd-image-slot-4x5 {
  aspect-ratio: 4 / 5;
}

.wd-image-slot.wd-image-slot-3x2 {
  aspect-ratio: 3 / 2;
}

.wd-image-slot.wd-image-slot-16x9 {
  aspect-ratio: 16 / 9;
}

/* A real photo fills the same box; the figure's ratio and corners clip it. */
.wd-image-slot .wd-image-slot-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.wd-image-slot .wd-image-slot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1. Hero */

.wd-page .wd-section-hero {
  padding-top: 56px;
}

/* Tighter gap after the hero caption; 56px from 768px up (see the wider-screen rule). */
.wd-page #ground-shifted {
  padding-top: 40px;
}

/* The next section already has its own top padding; the extra class beats the wider-screen .wd-section padding. */
.wd-page .wd-section.wd-section-hero {
  padding-bottom: 0;
}

.wd-page .wd-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}

.wd-page .wd-hero-media {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/*
 * Split-screen call. Two 4:5 photos side by side; the bubbles share the grid so
 * below 640px they fall into rows under the photos, and from 640px they sit
 * over the lower part of their own photo.
 */
.wd-page .wd-hero-call {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 12px;
}

.wd-page .wd-call-pane {
  position: relative;
  grid-row: 1;
  min-width: 0;
}

.wd-page .wd-call-pane-client {
  grid-column: 1;
}

.wd-page .wd-call-pane-advisor {
  grid-column: 2;
}

.wd-page .wd-call-photo .wd-image-slot-img {
  object-position: center top;
}

.wd-page .wd-call-pill {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #2C3E4A;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.wd-page .wd-call-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 20px);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

/*
 * Speech bubbles: the homepage hero scenario bubble (views/pages/home.ejs),
 * copied and scoped here. The one deliberate difference is the label color:
 * #3F6E85 instead of #5B8FA8, which fails 4.5:1 at this size.
 */
.wd-page .wd-hero-call .hero-scenario-bubble {
  position: relative;
  z-index: 2;
  max-width: min(260px, 100%);
  padding: 14px 16px 15px;
  border: 1px solid rgba(19,19,19,0.12);
  border-radius: 18px 18px 5px 18px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 12px 28px rgba(19,19,19,0.16);
  color: #131313;
  font-size: 0.84rem;
  line-height: 1.35;
}

.wd-page .wd-hero-call .hero-scenario-bubble::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: -9px;
  width: 16px;
  height: 16px;
  border-right: 1px solid rgba(19,19,19,0.12);
  border-bottom: 1px solid rgba(19,19,19,0.12);
  background: rgba(255,255,255,0.94);
  transform: skewY(35deg) rotate(35deg);
}

.wd-page .wd-hero-call .hero-scenario-bubble__label {
  display: block;
  margin-bottom: 5px;
  color: #3F6E85;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wd-page .wd-hero-call .hero-scenario-bubble__text {
  display: block;
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.12;
}

/* Below 640px: a two line chat under the photos, client left, advisor right. */
.wd-page .wd-hero-call .wd-call-bubble-client {
  grid-column: 1 / -1;
  justify-self: start;
  border-radius: 18px 18px 18px 5px;
}

.wd-page .wd-hero-call .wd-call-bubble-advisor {
  grid-column: 1 / -1;
  justify-self: end;
}

/* Chat tails point up at their own photo: the client tail sits under Richard's photo (left half), the advisor tail under the advisor's photo (right half). */
.wd-page .wd-hero-call .wd-call-bubble-client {
  border-radius: 5px 18px 18px 18px;
}

.wd-page .wd-hero-call .wd-call-bubble-advisor {
  border-radius: 18px 5px 18px 18px;
}

.wd-page .wd-hero-call .wd-call-bubble-client::after,
.wd-page .wd-hero-call .wd-call-bubble-advisor::after {
  top: -9px;
  bottom: auto;
}

.wd-page .wd-hero-call .wd-call-bubble-client::after {
  right: auto;
  left: 28px;
  transform: scale(-1, -1) skewY(35deg) rotate(35deg);
}

.wd-page .wd-hero-call .wd-call-bubble-advisor::after {
  right: 28px;
  left: auto;
  transform: scaleY(-1) skewY(35deg) rotate(35deg);
}

.wd-page .wd-call-caption {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  color: #2C3E4A;
}

/* One time fade-in. armHeroCall adds data-wd-armed (motion allowed only); without it both bubbles show. */
.wd-page .wd-hero-call[data-wd-armed] .wd-call-bubble {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.wd-page .wd-hero-call[data-wd-armed] .wd-call-bubble.wd-is-shown {
  opacity: 1;
  transform: none;
}

@media (min-width: 640px) {
  /* Bubbles overlay the lower part of their own photo; tails point up toward each speaker. */
  .wd-page .wd-hero-call .wd-call-bubble-client,
  .wd-page .wd-hero-call .wd-call-bubble-advisor {
    grid-row: 1;
    align-self: end;
    border-radius: 5px 18px 18px 18px;
  }

  .wd-page .wd-hero-call .wd-call-bubble-client {
    grid-column: 1;
    justify-self: start;
    margin: 0 0 76px 10px;
    /* Narrow photos: the bubble ends 10px into the 12px gap, never touching the advisor photo. */
    width: min(260px, 100%);
    max-width: min(260px, 100%);
  }

  .wd-page .wd-hero-call .wd-call-bubble-advisor {
    grid-column: 2;
    justify-self: end;
    margin: 0 10px 50px 0;
    width: 260px;
    max-width: calc(100% - 20px);
  }

  /* The same tail, turned around to point up at the speaker. */
  .wd-page .wd-hero-call .wd-call-bubble-client::after,
  .wd-page .wd-hero-call .wd-call-bubble-advisor::after {
    top: -9px;
    bottom: auto;
    right: auto;
    left: 28px;
    transform: scale(-1, -1) skewY(35deg) rotate(35deg);
  }
}

/* 2. Ground shifted */

/* Threat callout between the section lead and the attack chain: the page's dark slate as the navy accent. */
.wd-page .wd-callout {
  max-width: 640px;
  margin: 0 auto 32px;
  padding: 20px 24px;
  border-left: 4px solid #2C3E4A;
  border-radius: 0 12px 12px 0;
  background: #FFFFFF;
  /* 17px at every width (it also carries .wd-lead, 19px, which other sections keep). */
  font-size: 17px;
  text-align: left;
}

.wd-page .wd-chain-wrap {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

/*
 * Ground shifted layout: one column below 1100px (callout, chain, then the
 * synced visual after the green card); from 1100px a 56/44 grid with the
 * visual in the right column. The visual is sticky only when armSyncedWords
 * finds the whole figure fits the viewport below the 96px offset and adds
 * wd-is-sticky; without that class (or without JS) it scrolls normally, so it
 * is never cut off.
 */
.wd-page .wd-gs-visual {
  margin-top: 48px;
  text-align: left;
}

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

/*
 * Synced visual: the compact CRM at the back, Richard's phone at the front
 * over its lower-right corner. From 640px the figure is a grid: bubble A
 * above the CRM, the CRM in rows 2-3, the phone in rows 3-4 (row 3 is the
 * fixed overlap), bubble B beside the phone under the CRM, bubble C under it
 * all. The phone is 52% of the figure wide and overlaps the CRM by 20% of its
 * own width (the 10.4fr column). The overlap row is shorter than the space
 * under the CRM words, so the phone never covers them.
 */
.wd-page .wd-sync {
  --wd-sync-overlap: 48px;
  position: relative;
  max-width: 576px;
  margin: 0 auto;
}

.wd-page .wd-sync .eg-mock-pill {
  display: none;
}

.wd-page .wd-sync .eg-mock-crm-compact {
  gap: 0;
}

.wd-page .wd-sync .eg-mock-crm-compact .eg-crm {
  min-height: 0;
  box-shadow: 0 10px 30px rgba(24, 24, 24, 0.1);
}

.wd-page .wd-sync .eg-mock-crm-compact .eg-crm-global {
  justify-content: space-between;
}

.wd-page .wd-sync .eg-mock-crm-compact .eg-crm-org-logo {
  height: 20px;
}

.wd-page .wd-sync .eg-mock-crm-compact .eg-crm-record {
  padding: 12px 14px;
}

.wd-page .wd-sync .eg-mock-crm-compact .eg-crm-record-name {
  font-size: 16px;
}

.wd-page .wd-sync .eg-mock-crm-compact .eg-crm-body {
  grid-template-columns: minmax(0, 1fr);
  padding: 10px 10px 20px;
}

.wd-page .wd-sync .eg-mock-crm-compact .eg-crm-words {
  font-size: 16px;
}

/* The phone keeps its native 300px layout and is scaled to the column; armSyncedWords sets the exact scale and height. */
.wd-page .wd-sync-phone {
  --wd-sync-scale: 0.81;
  position: relative;
  z-index: 2;
  height: calc(var(--wd-sync-phone-h, 642px) * var(--wd-sync-scale));
}

.wd-page .wd-sync-phone .eg-mock-phone {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  transform: scale(var(--wd-sync-scale));
  transform-origin: 0 0;
}

/* Soft floating-card shadow, like the trustonion.io hero cards. */
.wd-page .wd-sync .eg-phone {
  zoom: 1;
  box-shadow: 0 28px 56px rgba(19, 19, 19, 0.22), 0 8px 18px rgba(19, 19, 19, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.wd-page .wd-sync-crm {
  position: relative;
  z-index: 1;
}

/* Bubbles: the hero scenario bubble look, scoped here. */
.wd-page .wd-sync-bubbles {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wd-page .wd-sync-bubble {
  position: relative;
  z-index: 3;
  max-width: min(260px, 100%);
  padding: 14px 16px 15px;
  border: 1px solid rgba(19,19,19,0.12);
  border-radius: 18px 18px 5px 18px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 12px 28px rgba(19,19,19,0.16);
  color: #131313;
  font-size: 0.84rem;
  line-height: 1.35;
}

.wd-page .wd-sync-bubble::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: -9px;
  width: 16px;
  height: 16px;
  border-right: 1px solid rgba(19,19,19,0.12);
  border-bottom: 1px solid rgba(19,19,19,0.12);
  background: rgba(255,255,255,0.96);
  transform: skewY(35deg) rotate(35deg);
}

.wd-page .wd-sync-bubble-label {
  display: block;
  margin-bottom: 5px;
  color: #3F6E85;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wd-page .wd-sync-bubble-text {
  display: block;
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.12;
}

/* Below 640px: CRM full width, phone 55% over its bottom-right corner, bubbles stacked as a chat list under the composition. */
@media (max-width: 639px) {
  .wd-page .wd-sync-phone {
    --wd-sync-scale: 0.62;
    width: 55%;
    margin: calc(-1 * var(--wd-sync-overlap)) 0 0 auto;
  }

  .wd-page .wd-sync-bubbles {
    display: grid;
    gap: 14px;
    margin-top: 24px;
  }

  .wd-page .wd-sync-bubble-crm,
  .wd-page .wd-sync-bubble-rotation {
    justify-self: start;
    border-radius: 5px 18px 18px 18px;
  }

  .wd-page .wd-sync-bubble-phone {
    justify-self: end;
    border-radius: 18px 5px 18px 18px;
  }

  .wd-page .wd-sync-bubble::after {
    top: -9px;
    bottom: auto;
  }

  .wd-page .wd-sync-bubble-crm::after,
  .wd-page .wd-sync-bubble-rotation::after {
    right: auto;
    left: 28px;
    transform: scale(-1, -1) skewY(35deg) rotate(35deg);
  }

  .wd-page .wd-sync-bubble-phone::after {
    right: 28px;
    transform: scaleY(-1) skewY(35deg) rotate(35deg);
  }
}

@media (min-width: 640px) {
  .wd-page .wd-sync {
    display: grid;
    grid-template-columns: minmax(0, 48fr) minmax(0, 10.4fr) minmax(0, 41.6fr);
    grid-template-rows: auto auto var(--wd-sync-overlap) auto auto;
  }

  .wd-page .wd-sync-stage,
  .wd-page .wd-sync-bubbles {
    display: contents;
  }

  .wd-page .wd-sync-crm {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    align-self: end;
  }

  .wd-page .wd-sync-phone {
    --wd-sync-scale: 0.998;
    grid-column: 2 / 4;
    grid-row: 3 / 5;
    align-self: start;
  }

  /* A: top-left, above the CRM, tail pointing down at it. */
  .wd-page .wd-sync-bubble-crm {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: start;
    margin: 0 0 18px;
    border-radius: 18px 18px 18px 5px;
  }

  .wd-page .wd-sync-bubble-crm::after {
    right: auto;
    left: 28px;
    transform: scaleX(-1) skewY(35deg) rotate(35deg);
  }

  /* B: right beside the phone, under the CRM, tail pointing at the phone. */
  .wd-page .wd-sync-bubble-phone {
    grid-column: 1;
    grid-row: 4;
    align-self: center;
    justify-self: end;
    margin: 0 18px 0 0;
  }

  /* C: under the whole composition, tail pointing up at the phone. */
  .wd-page .wd-sync-bubble-rotation {
    grid-column: 1 / 4;
    grid-row: 5;
    justify-self: end;
    max-width: min(340px, 100%);
    margin: 28px 0 0;
    border-radius: 18px 5px 18px 18px;
  }

  .wd-page .wd-sync-bubble-rotation::after {
    top: -9px;
    bottom: auto;
    right: 28px;
    transform: scaleY(-1) skewY(35deg) rotate(35deg);
  }
}

@media (min-width: 1100px) {
  .wd-page .wd-gs-layout {
    display: grid;
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    column-gap: 56px;
    align-items: start;
  }

  /* The left column fills its track instead of the centered 640px wrappers. */
  .wd-page .wd-gs-main .wd-callout,
  .wd-page .wd-gs-main .wd-chain-wrap,
  .wd-page .wd-gs-main .wd-chain {
    max-width: none;
  }

  .wd-page .wd-gs-main .wd-callout {
    margin: 0 0 32px;
  }

  .wd-page .wd-gs-visual {
    margin-top: 0;
  }

  .wd-page .wd-gs-visual.wd-is-sticky {
    position: sticky;
    top: 96px;
  }

  .wd-page .wd-sync {
    max-width: none;
  }

  .wd-page .wd-sync-phone {
    --wd-sync-scale: 0.75;
  }
}

@media (min-width: 1200px) {
  .wd-page .wd-sync-phone {
    --wd-sync-scale: 0.81;
  }
}

/*
 * One time entrance. armSyncedWords adds data-wd-armed (motion allowed and
 * IntersectionObserver only); without it everything shows in its final state.
 */
.wd-page .wd-sync[data-wd-armed] [data-wd-sync-part="crm"] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.wd-page .wd-sync[data-wd-armed] [data-wd-sync-part="phone"] {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.wd-page .wd-sync[data-wd-armed] [data-wd-sync-bubble] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wd-page .wd-sync[data-wd-armed] .wd-is-shown {
  opacity: 1;
  transform: none;
}

/* 3 and 9. Cards and item lists */

.wd-page .wd-cards,
.wd-page .wd-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wd-page .wd-card,
.wd-page .wd-item {
  padding: 24px;
  border: 1px solid rgba(91, 143, 168, 0.25);
  border-radius: 16px;
  background: #FFFFFF;
  font-size: 16px;
  line-height: 1.6;
  color: #4A6070;
}

/* 3 and 4. Copy beside an image (Section 3); stacked copy, image on mobile. */

.wd-page .wd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 48px;
}

.wd-page .wd-split .wd-section-head {
  margin-bottom: 0;
}

/* 4. New standard: heading, four steps, then a row of three captioned phones. */

.wd-page .wd-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0 0 56px;
  padding: 0;
  list-style: none;
}

.wd-page .wd-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.wd-page .wd-step-num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid #5B8FA8;
  border-radius: 50%;
  background: #FFFFFF;
  font-weight: 700;
  color: #2C3E4A;
}

.wd-page .wd-step-text {
  margin: 6px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #4A6070;
}

.wd-page .wd-phone-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
}

.wd-page .wd-phone-caption {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: #4A6070;
}

/*
 * Swipe rows (Sections 4 and 6). Below each row's breakpoint the phones scroll
 * sideways inside the row, which bleeds to the screen edges with side padding
 * equal to the page gutter, so the page itself never scrolls sideways. The
 * next phone peeks in from the right. Native scrolling only; arrow keys scroll
 * the focused row. The hint shows at the breakpoint; wealth-demo.js hides it
 * when a row fits without scrolling.
 */

.wd-page .wd-swipe-row {
  display: flex;
  align-items: flex-start;
}

.wd-page .wd-swipe-row:focus-visible {
  outline: 3px solid #5B8FA8;
  outline-offset: -3px;
  border-radius: 12px;
}

.wd-page .wd-swipe-row > * {
  flex: none;
}

.wd-page .wd-swipe-hint {
  display: none;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: #4A6070;
}

.wd-page .wd-swipe.wd-swipe-fits .wd-swipe-hint {
  display: none;
}

.wd-page .wd-step-phones {
  justify-content: safe center;
  gap: 24px;
}

/*
 * Step 4, verified: a static Proofie card in place of the third phone. The
 * figures in this row stretch to one height and every caption is pushed to the
 * bottom, so the three captions share a baseline. The card figure is exactly
 * one phone figure wide (300px, 260px on phones), so the row needs no extra
 * width; the corner pills overhang by 14px, less than the scrolling row's side
 * padding, so they are never clipped and add no scroll width. The card names
 * Ellery Grant, so like each phone it sits under the shared Demo pill (an
 * .eg-mock column: pill, 12px gap, then the slot). The slot fills the height
 * left under the pill, the same height as a phone frame, so the card centers
 * on the frames, not on frame plus pill.
 */
.wd-page .wd-step-phones {
  align-items: stretch;
}

.wd-page .wd-step-phones > .wd-phone-figure > .wd-phone-caption {
  margin-top: auto;
}

.wd-page .wd-proofie-figure {
  width: 300px;
}

.wd-page .wd-proofie-mock {
  flex: 1 0 auto;
  align-self: stretch;
}

.wd-page .wd-proofie-slot {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.wd-page .wd-proofie-card {
  --wd-proofie-ink: #2C3E4A;
  --wd-proofie-muted: #6B7A85;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border: 1px solid rgba(44, 62, 74, 0.08);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 12px 32px rgba(20, 36, 59, 0.14);
  color: var(--wd-proofie-ink);
  font-family: "Roboto", sans-serif;
  text-align: left;
}

.wd-page .wd-proofie-card p {
  margin: 0;
}

.wd-page .wd-proofie-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: #E8EEF1;
}

.wd-page .wd-proofie-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wd-page .wd-proofie-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 999px;
  line-height: 1.2;
}

.wd-page .wd-proofie-pill svg {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * Half outside the card's left edge at the top of the photo, over the background
 * beside Richard's head. The photo starts at the card's 16px padding; top puts
 * the 36px pill's center 14px below the photo's top edge (16 + 14 - 18).
 */
.wd-page .wd-proofie-pill-unlock {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: -14px;
  padding: 6px 14px 6px 6px;
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(20, 36, 59, 0.16);
  color: #2C3E4A;
  font-size: 13px;
  font-weight: 500;
}

.wd-page .wd-proofie-pill-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #E8EEF4;
  color: #2C3E4A;
}

.wd-page .wd-proofie-pill-watermark {
  position: absolute;
  left: 10px;
  bottom: 10px;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #2C3E4A;
  font-size: 12px;
  font-weight: 500;
}

.wd-page .wd-proofie-watermark-icon {
  flex: none;
  width: 14px;
  height: 14px;
}

.wd-page .wd-proofie-qr {
  position: absolute;
  right: 10px;
  bottom: 10px;
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  padding: 6px;
  border-radius: 8px;
  background: #FFFFFF;
}

.wd-page .wd-proofie-qr img {
  display: block;
  width: 100%;
  height: 100%;
}

.wd-page .wd-proofie-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.wd-page .wd-proofie-wordmark {
  font-family: "Libre Caslon Display", serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  color: #2C3E4A;
}

.wd-page .wd-proofie-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.2;
  color: #6B7A85;
  white-space: nowrap;
}

.wd-page .wd-proofie-rows {
  margin: 8px 0 0;
}

.wd-page .wd-proofie-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.35;
}

.wd-page .wd-proofie-row + .wd-proofie-row {
  border-top: 1px solid rgba(44, 62, 74, 0.1);
}

.wd-page .wd-proofie-row dt {
  flex: none;
  color: #6B7A85;
}

.wd-page .wd-proofie-row dd {
  margin: 0;
  min-width: 0;
  text-align: right;
  font-weight: 500;
  color: #2C3E4A;
}

.wd-page .wd-proofie-nowrap {
  white-space: nowrap;
}

/* Half outside the card's bottom-right corner, like the reference. */
.wd-page .wd-proofie-pill-verified {
  position: absolute;
  right: -14px;
  bottom: -18px;
  padding: 8px 14px 8px 10px;
  background: #2E7D4F;
  box-shadow: 0 6px 16px rgba(20, 36, 59, 0.18);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
}

.wd-page .wd-proofie-verified-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

/* Phones zoom to 260px wide here; the card stays one phone wide, and the QR tile drops to 52px. */
@media (max-width: 639px) {
  .wd-page .wd-proofie-figure {
    width: 260px;
  }

  .wd-page .wd-proofie-card {
    max-width: 260px;
  }

  .wd-page .wd-proofie-qr {
    width: 52px;
    height: 52px;
  }

  /* 12px rows in the 226px content width. */
  .wd-page .wd-proofie-row {
    font-size: 12px;
  }

  /* A block number ("Arbitrum One" / "#472,918,305") takes two lines here, broken only before "#". */
  .wd-page .wd-proofie-dd-number > .wd-proofie-nowrap {
    display: block;
  }

  /* Keeps a clear gap between the watermark pill and the QR tile in the 228px photo. */
  .wd-page .wd-proofie-pill-watermark {
    gap: 5px;
    padding: 4px 8px 4px 6px;
    font-size: 11px;
  }
}

/* 5. CRM: copy then panel on mobile; copy left, panel right on desktop. */

.wd-page .wd-crm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "panel";
  gap: 40px;
}

.wd-page .wd-crm-copy {
  grid-area: copy;
}

.wd-page .wd-crm-panel {
  grid-area: panel;
  min-width: 0;
}

/* 6. Clients */

.wd-page .wd-items-2 {
  margin-bottom: 48px;
}

/* Phones 1b and 1c in their own row; the welcome letter is a sibling after it. */
.wd-page .wd-client-mockups {
  margin-bottom: 48px;
}

.wd-page .wd-client-phones {
  gap: 24px;
}

.wd-page .wd-wide-photo {
  max-width: 880px;
  margin: 0 auto;
}

.wd-page .wd-mockup-letter {
  min-width: 0;
  margin-top: 32px;
}

/* 7. Tiers */

/* One centered container, so the cards and the "At both tiers" line share a center. */
.wd-page .wd-tiers-wrap {
  max-width: 880px;
  margin: 0 auto;
}

/* 8. Security: decorative placeholder as a full-width background band. */

/* overflow: clip, not hidden: hidden makes the section a scroll container, which makes browsers ignore its scroll-margin-top. */
.wd-page .wd-section-security {
  overflow: clip;
}

.wd-page .wd-image-slot.wd-security-band {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
  opacity: 0.55;
}

.wd-page .wd-security-content {
  position: relative;
  z-index: 1;
}

/* 9. Return */

.wd-page .wd-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 20px;
}

.wd-page .wd-stat {
  display: block;
}

.wd-page .wd-stat-figure {
  display: block;
  margin-bottom: 6px;
  font-family: "Libre Caslon Display", serif;
  font-size: 64px;
  line-height: 1;
  color: #5B8FA8;
}

.wd-page .wd-stat-text {
  font-size: 18px;
  line-height: 1.55;
}

.wd-page .wd-source {
  margin: 0 0 40px;
  font-size: 14px;
  line-height: 1.5;
  color: #4A6070;
}

/* 10. Next step: contrasting band. */

.wd-page .wd-section-band {
  background: #2C3E4A;
  color: #FFFFFF;
}

.wd-page .wd-section-band .wd-container {
  max-width: 760px;
}

.wd-page .wd-section-band .wd-eyebrow {
  color: #BFD5E0;
}

.wd-page .wd-section-band .wd-headline,
.wd-page .wd-section-band .wd-lead {
  color: #FFFFFF;
}

.wd-page .wd-section-band .wd-body {
  color: #E8EEF1;
}

/* Phones only: smaller phones, a shorter hero image, swipe rows. */
@media (max-width: 639px) {
  /*
   * Phone frames scale from 300px to 260px. zoom scales the layout box too, so
   * no blank gap is left; every phone size is a fixed px value, so the ring,
   * words, and timer keep their proportions. The Demo pill stays full size.
   */
  .wd-page .eg-phone {
    zoom: 0.8667;
  }

  .wd-page .wd-swipe-clients .wd-swipe-row {
    margin: 0 -24px;
    padding: 0 24px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px;
  }

  .wd-page .wd-swipe-clients .wd-swipe-row > * {
    scroll-snap-align: center;
  }

  .wd-page .wd-swipe-clients .wd-swipe-hint {
    display: block;
  }
}

/*
 * Below 1100px the three Section 4 phones may not fit side by side: the row
 * needs 940px, and a 1024px window with a 17px scrollbar leaves only 927px of
 * content width. When the row does fit, safe centering keeps it centered and
 * wealth-demo.js hides the hint.
 */
@media (max-width: 1099px) {
  .wd-page .wd-swipe-steps .wd-swipe-row {
    margin: 0 -24px;
    padding: 0 24px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px;
  }

  .wd-page .wd-swipe-steps .wd-swipe-row > * {
    scroll-snap-align: center;
  }

  .wd-page .wd-swipe-steps .wd-swipe-hint {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .wd-page .wd-swipe-steps .wd-swipe-row {
    margin: 0 -40px;
    padding: 0 40px 8px;
    scroll-padding: 0 40px;
  }
}

@media (min-width: 640px) {
  .wd-page .wd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 32px;
  }

  /* Two phones side by side and centered; they wrap if the gutter is too narrow. */
  .wd-page .wd-client-phones {
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
  }

  .wd-page .wd-mockup-letter {
    display: flex;
    justify-content: center;
  }

  .wd-page .wd-items-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Keep the captions' 16px overhang inside a 24px gutter. */
  .wd-page .wd-crm-panel {
    padding-right: 24px;
  }
}

@media (min-width: 768px) {
  .wd-page .wd-section {
    padding: 96px 0;
  }

  .wd-page #ground-shifted {
    padding-top: 56px;
  }

  .wd-page .wd-container {
    padding: 0 40px;
  }

  .wd-page .wd-headline {
    font-size: 40px;
  }

  .wd-page .wd-cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wd-page .wd-items-2,
  .wd-page .wd-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .wd-page .wd-items-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Copy 45%, photo pair 55% of the width left after the gap. */
  .wd-page .wd-hero-grid {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    column-gap: 48px;
    align-items: center;
  }

  .wd-page .wd-hero-media {
    max-width: none;
    margin: 0;
  }

  .wd-page .wd-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    margin-bottom: 56px;
  }

  /* Four steps in one row: number above the text. */
  .wd-page .wd-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
  }

  .wd-page .wd-step {
    flex-direction: column;
    gap: 12px;
  }

  .wd-page .wd-step-text {
    margin-top: 0;
  }

  /* The three captioned phones in one row (centered by the base rule). */
  .wd-page .wd-step-phones {
    gap: 20px;
  }

  /* Phones and letter share one row once the letter has 400px; until then it sits centered below. */
  .wd-page .wd-client-mockups {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 32px 40px;
  }

  .wd-page .wd-client-phones {
    flex-wrap: nowrap;
  }

  .wd-page .wd-mockup-letter {
    flex: 1 1 400px;
    max-width: 640px;
    margin-top: 0;
  }

  .wd-page .wd-crm-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 584px);
    grid-template-areas: "copy panel";
    column-gap: 56px;
    align-items: start;
  }
}

@media (min-width: 1240px) {
  /* The layout balances headings; at this size natural wrapping keeps "Your Client Risk" together on line two. */
  .wd-page h1.wd-headline-h1 {
    text-wrap: wrap;
  }

  /*
   * Copy column keeps its 45% width inside the 1200px container (1120px of content less the 48px gap);
   * the photo pair takes the rest and bleeds into the right margin. The bleed is 80px at most and
   * never leaves the photos closer than 40px to the viewport edge. 100cqw is the hero width without
   * a classic scrollbar; the vw fallback leaves room for one.
   */
  .wd-page .wd-section-hero {
    container-type: inline-size;
  }

  .wd-page .wd-hero-grid {
    grid-template-columns: calc((1120px - 48px) * 0.45) minmax(0, 1fr);
  }

  /* width: auto lets the negative margin widen the item past its grid column. */
  .wd-page .wd-hero-media {
    width: auto;
    margin-right: calc(-1 * min(80px, max(0px, (100vw - 1220px) / 2)));
    margin-right: calc(-1 * min(80px, max(0px, (100cqw - 1200px) / 2)));
  }
}

@media (min-width: 1200px) {
  .wd-page .wd-step-phones {
    gap: 48px;
  }
}

/* Reduced motion: static states only. Animation scripts stay idle; the live words clock still runs, with the ring moving in steps. */
@media (prefers-reduced-motion: reduce) {
  .eg-demo .eg-ring-progress,
  .eg-demo .eg-caption,
  .eg-demo .eg-crm-badge,
  .eg-demo .eg-crm-confirm,
  .wd-chain .wd-chain-item,
  .wd-hero-call .wd-call-bubble,
  .wd-security .wd-security-cell-link {
    transition: none;
  }

  /* The synced visual shows in its final state. */
  .wd-page .wd-sync[data-wd-armed] [data-wd-sync-part],
  .wd-page .wd-sync[data-wd-armed] [data-wd-sync-bubble] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Both bubbles show at once. */
  .wd-page .wd-hero-call[data-wd-armed] .wd-call-bubble {
    opacity: 1;
    transform: none;
  }

  .eg-demo[data-wd-stage] .eg-caption,
  .eg-demo[data-wd-stage] .eg-crm-badge,
  .wd-chain .wd-chain-item.wd-is-pending {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* Static final state: Verified shows, Confirm match never does. */
  .eg-demo[data-wd-stage] .eg-crm-confirm {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
  }

  .wd-security .wd-security-cell-link:hover {
    transform: none;
  }
}