/* AUTO-GENERATED by scripts/build-marketing.js — DO NOT EDIT BY HAND */

/* ============================================================
 * .wf-app — base surface
 * ============================================================ */
.wf-app {
  position: relative;
  display: block;
  font-size: 13px;
  line-height: 1.4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  container-name: wfapp;
}
.wf-app--bordered { border: 1px solid var(--border); box-shadow: var(--shadow-card); }

/* ============================================================
 * App shell: sidebar + topbar (mini)
 * ============================================================ */
.wf-shell {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  grid-template-rows: 40px 1fr;
  min-height: 480px;
  background: var(--bg-void);
  max-width: 100%;
  /* Independent size container so the dashboard adapts when the shell is
   * embedded inside a small bezel (e.g. .wf-bezel--mbp screen ≈ 580px wide).
   * Without this, the KPI cards/topbar render at desktop sizes and clip. */
  container-type: inline-size;
  container-name: wfshell;
}
/* min-width: 0 lets flex/grid children shrink below their content's intrinsic
 * min-size — without it, the KPI row/pipeline push the shell wider than its
 * container, which was causing the hero preview to overflow the viewport. */
.wf-shell > * { min-width: 0; }
.wf-main { min-width: 0; }
.wf-kpi-card { min-width: 0; }
.wf-sidebar {
  grid-row: 1 / span 2;
  background: var(--bg-base);
  border-right: 1px solid var(--border);
  padding: 16px 10px;
  display: flex; flex-direction: column; gap: 14px;
}
.wf-brand {
  padding: 4px 8px 10px;
  border-bottom: 1px solid var(--border);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 3px;
}
.wf-brand .wm-watch { color: var(--gold); }
.wf-brand .wm-flow { color: var(--white); }
.wf-brand-tag { font-family: 'DM Sans', sans-serif; display: block; margin-top: 4px; font-size: 7px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-dim); }
.wf-nav-label { font-size: 8px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); padding: 0 8px; }
.wf-nav { display: flex; flex-direction: column; gap: 2px; }
.wf-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  color: var(--off-white); font-size: 11.5px;
  cursor: default; position: relative; transition: background .15s, color .15s;
}
.wf-nav-item svg { width: 12px; height: 12px; flex: 0 0 12px; }
.wf-nav-item.active { background: var(--bg-raised); color: var(--white); }
.wf-nav-item.active::before {
  content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 2px;
  background: var(--gold); border-radius: 0 2px 2px 0;
}
.wf-topbar {
  border-bottom: 1px solid var(--border);
  background: var(--bg-void);
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
}
.wf-topbar-title { font-family: 'Cormorant Garamond', serif; font-size: 15px; color: var(--white); letter-spacing: 0.5px; white-space: nowrap; }
.wf-search {
  flex: 1; max-width: 240px; min-width: 0; height: 26px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px;
  padding: 0 10px 0 26px; font-size: 11px; color: var(--off-white); position: relative;
  display: flex; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-search::before {
  content: ''; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border: 1.2px solid var(--muted); border-radius: 50%;
}
.wf-search::after {
  content: ''; position: absolute; left: 17px; top: 13px;
  width: 5px; height: 1.2px; background: var(--muted); transform: rotate(45deg);
}
.wf-topbar-btn {
  height: 26px; padding: 0 10px; border-radius: 14px;
  background: var(--bg-raised); border: 1px solid var(--border);
  color: var(--off-white); font-size: 10.5px; letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; flex-shrink: 0;
}
.wf-topbar-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.wf-topbar-btn.primary { background: var(--gold); color: #fff; border-color: var(--gold); }
.wf-main { padding: 14px; overflow: hidden; }

/* ============================================================
 * KPI grid (dashboard)
 * ============================================================ */
.wf-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wf-kpi-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}
.wf-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.wf-kpi-card[data-tint="inventory"] { background: var(--tint-inventory); border-color: var(--tint-inventory-border); }
.wf-kpi-card[data-tint="deals"]     { background: var(--tint-deals);     border-color: var(--tint-deals-border); }
.wf-kpi-card[data-tint="revenue"]   { background: var(--tint-revenue);   border-color: var(--tint-revenue-border); }
.wf-kpi-card[data-tint="contacts"]  { background: var(--tint-contacts);  border-color: var(--tint-contacts-border); }
.wf-kpi-label { font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding-right: 28px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-kpi-value { font-family: 'DM Mono', monospace; font-size: 22px; color: var(--white); letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-kpi-value.gold { color: var(--gold); }
.wf-kpi-change { font-size: 10.5px; color: var(--off-white); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-kpi-change.up { color: var(--green); }
.wf-kpi-change.down { color: var(--red); }
.wf-kpi-icon {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(139,115,85,0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.wf-kpi-icon svg { width: 12px; height: 12px; }

/* ============================================================
 * Card + activity feed
 * ============================================================ */
.wf-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.wf-card-header {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.wf-card-title { font-family: 'Cormorant Garamond', serif; font-size: 15px; color: var(--white); letter-spacing: 0.4px; }
.wf-card-sub { font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.wf-card-body { padding: 10px 14px; }

.wf-feed-item {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border-light);
}
.wf-feed-item:last-child { border-bottom: none; }
.wf-feed-thumb {
  width: 40px; height: 40px; border-radius: 8px; background: var(--bg-panel);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.wf-feed-thumb img { width: 100%; height: 100%; object-fit: contain; background: #f5f2ed; }
.wf-feed-body { min-width: 0; }
.wf-feed-brand { font-size: 12px; color: var(--white); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-feed-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.wf-feed-price { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--white); text-align: right; }
.wf-feed-time { font-size: 9.5px; color: var(--muted); margin-top: 2px; text-align: right; }

/* ============================================================
 * Badges / status chips
 * ============================================================ */
.wf-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px;
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.4px;
  background: var(--bg-panel); color: var(--off-white);
  border: 1px solid var(--border-light);
  white-space: nowrap;
}
.wf-badge.green { background: rgba(76,175,133,0.12); color: var(--green); border-color: rgba(76,175,133,0.25); }
.wf-badge.amber { background: rgba(212,150,58,0.12); color: var(--amber); border-color: rgba(212,150,58,0.25); }
.wf-badge.red   { background: rgba(224,92,92,0.12);  color: var(--red);   border-color: rgba(224,92,92,0.25); }
.wf-badge.blue  { background: rgba(107,159,212,0.12); color: var(--blue); border-color: rgba(107,159,212,0.25); }
.wf-badge.gold  { background: rgba(139,115,85,0.12); color: var(--gold); border-color: rgba(139,115,85,0.25); }
.wf-badge.dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* ============================================================
 * Listings / inventory table
 * ============================================================ */
.wf-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-raised); }
.wf-table { width: 100%; border-collapse: collapse; }
.wf-table thead th {
  text-align: left; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); padding: 9px 10px; background: var(--bg-base);
  border-bottom: 1px solid var(--border); font-weight: 500;
}
.wf-table tbody td {
  padding: 9px 10px; font-size: 11.5px; color: var(--off-white);
  border-bottom: 1px solid var(--border-light);
}
.wf-table tbody tr:last-child td { border-bottom: none; }
.wf-table tbody tr { transition: background .12s; }
.wf-table tbody tr:hover { background: var(--bg-hover); }
.wf-table .mono { font-family: 'DM Mono', monospace; color: var(--white); }
.wf-table .watch-thumb {
  width: 28px; height: 28px; border-radius: 6px; background: var(--bg-panel);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  vertical-align: middle;
}
.wf-table .watch-thumb img { width: 90%; height: 90%; object-fit: contain; }
.wf-table .watch-name { display: flex; align-items: center; gap: 8px; }
.wf-table .watch-name b { color: var(--white); font-weight: 500; }

/* ============================================================
 * Pipeline board (Kanban)
 * ============================================================ */
.wf-pipeline {
  display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px; align-items: start;
}
.wf-pipe-col {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px;
  display: flex; flex-direction: column; gap: 8px; min-height: 240px;
}
.wf-pipe-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid var(--border-light);
}
.wf-pipe-col-title { display: flex; align-items: center; gap: 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--off-white); }
.wf-pipe-col-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.wf-pipe-col[data-stage="lead"] .wf-pipe-col-title::before { background: var(--blue); }
.wf-pipe-col[data-stage="negotiate"] .wf-pipe-col-title::before { background: var(--amber); }
.wf-pipe-col[data-stage="agreed"] .wf-pipe-col-title::before { background: var(--gold); }
.wf-pipe-col[data-stage="closed"] .wf-pipe-col-title::before { background: var(--green); }
.wf-pipe-count { font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--muted); }

.wf-pipe-card {
  background: var(--bg-void); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s, border-color .2s;
  cursor: default;
}
.wf-pipe-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--gold-dim); }
.wf-pipe-card-head { display: flex; gap: 8px; align-items: center; }
.wf-pipe-card-thumb { width: 36px; height: 36px; border-radius: 6px; background: var(--bg-panel); overflow: hidden; display: flex; align-items: center; justify-content: center; flex: 0 0 36px; }
.wf-pipe-card-thumb img { width: 90%; height: 90%; object-fit: contain; }
.wf-pipe-card-watch { font-size: 11.5px; color: var(--white); font-weight: 500; }
.wf-pipe-card-buyer { font-size: 10px; color: var(--muted); margin-top: 2px; }
.wf-pipe-card-price { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--gold); }
.wf-pipe-card-meta { display: flex; justify-content: space-between; align-items: center; }

/* ============================================================
 * Wizard step bar
 * ============================================================ */
.wf-steps { display: flex; align-items: center; gap: 0; padding: 6px 0 14px; }
.wf-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; position: relative; }
.wf-step-dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-raised); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted);
}
.wf-step.done .wf-step-dot { background: var(--gold-dim); border-color: var(--gold-dim); color: #fff; }
.wf-step.done .wf-step-dot::after { content: '✓'; color: #fff; font-size: 11px; }
.wf-step.done .wf-step-dot span { display: none; }
.wf-step.active .wf-step-dot { background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: 0 0 0 4px rgba(139,115,85,0.15); }
.wf-step-label { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.wf-step.active .wf-step-label, .wf-step.done .wf-step-label { color: var(--off-white); }
.wf-step-conn { flex: 1; height: 1px; background: var(--border); margin: 0 8px; align-self: center; margin-bottom: 18px; }
.wf-step.done + .wf-step-conn, .wf-step-conn.done { background: var(--gold-dim); }

/* ============================================================
 * Contact card (CRM)
 * ============================================================ */
.wf-contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.wf-contact-card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.wf-contact-card:hover { transform: translateY(-1px); border-color: var(--gold-dim); box-shadow: var(--shadow-sm); }
.wf-contact-head { display: flex; align-items: center; gap: 10px; }
.wf-contact-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dim), var(--gold));
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: center;
}
.wf-contact-avatar.seller { background: linear-gradient(135deg, #1e3d30, var(--green)); }
.wf-contact-avatar.dealer { background: linear-gradient(135deg, #3d2e14, var(--amber)); }
.wf-contact-name { font-size: 12.5px; color: var(--white); font-weight: 500; }
.wf-contact-role { font-size: 10px; color: var(--muted); }
.wf-contact-tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* ============================================================
 * Invoice preview (paper)
 * ============================================================ */
.wf-invoice {
  background: #fefdfb; color: #2a2620;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 18px 20px; box-shadow: var(--shadow-card);
  font-family: 'DM Sans', sans-serif; font-size: 11px;
  aspect-ratio: 8.5 / 11; overflow: hidden;
}
.wf-app[data-theme="obsidian-rose"] .wf-invoice,
.wf-app[data-theme="royal-navy"] .wf-invoice,
.wf-app[data-theme="midnight-gold"] .wf-invoice,
.wf-app[data-theme="carbon-titanium"] .wf-invoice {
  background: #1a1814; color: #e8e3db; border-color: #2a2a30;
}
.wf-invoice-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid rgba(139,115,85,0.3); padding-bottom: 10px; margin-bottom: 12px; }
.wf-invoice-brand { font-family: 'Cormorant Garamond', serif; font-size: 16px; letter-spacing: 2.5px; color: #8b7355; }
.wf-invoice-meta { text-align: right; }
.wf-invoice-number { font-family: 'DM Mono', monospace; font-size: 10px; color: #8b7355; letter-spacing: 1px; }
.wf-invoice-label { font-size: 8px; letter-spacing: 1.2px; text-transform: uppercase; color: #7a7468; margin-bottom: 2px; }
.wf-invoice-to { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 10px; }
.wf-invoice-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.wf-invoice-table th { text-align: left; border-bottom: 1px solid rgba(139,115,85,0.25); padding: 4px 0; font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: #7a7468; font-weight: 500; }
.wf-invoice-table td { padding: 6px 0; border-bottom: 1px dotted rgba(139,115,85,0.15); }
.wf-invoice-table .right { text-align: right; font-family: 'DM Mono', monospace; }
.wf-invoice-totals { margin-top: 10px; padding-top: 8px; border-top: 1.5px solid rgba(139,115,85,0.4); display: flex; justify-content: flex-end; }
.wf-invoice-totals-grid { display: grid; grid-template-columns: auto auto; gap: 4px 18px; font-size: 10px; }
.wf-invoice-totals-grid .lbl { color: #7a7468; text-align: right; }
.wf-invoice-totals-grid .val { font-family: 'DM Mono', monospace; text-align: right; }
.wf-invoice-total-row .lbl { color: #2a2620; font-weight: 600; font-size: 11px; }
.wf-invoice-total-row .val { color: #8b7355; font-weight: 600; font-size: 12px; }

/* ============================================================
 * Payment ring + receipts
 * ============================================================ */
.wf-pay-summary { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.wf-ring { width: 88px; height: 88px; position: relative; }
.wf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wf-ring-track { stroke: var(--bg-panel); stroke-width: 8; fill: none; }
.wf-ring-prog  { stroke: var(--gold); stroke-width: 8; fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1); }
.wf-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.wf-ring-pct { font-family: 'DM Mono', monospace; font-size: 17px; color: var(--white); }
.wf-ring-sub { font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }

.wf-pay-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wf-receipt {
  position: relative; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px 14px;
}
.wf-receipt::before, .wf-receipt::after {
  content: ''; position: absolute; bottom: -6px; width: 12px; height: 12px;
  background: var(--bg-void); border-radius: 50%;
}
.wf-receipt::before { left: -6px; border-right: 1px solid var(--border); }
.wf-receipt::after  { right: -6px; border-left: 1px solid var(--border); }
.wf-receipt-label { font-size: 8.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.wf-receipt-value { font-family: 'DM Mono', monospace; font-size: 16px; color: var(--white); margin-top: 3px; }
.wf-receipt-value.gold { color: var(--gold); }
.wf-receipt-value.green { color: var(--green); }
.wf-receipt-value.amber { color: var(--amber); }
.wf-receipt-bar { height: 3px; background: var(--bg-panel); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.wf-receipt-bar-fill { height: 100%; background: currentColor; }

/* ============================================================
 * Distribution flow (listing → social platforms)
 * ============================================================ */
.wf-dist {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items: center; padding: 18px;
  background: var(--bg-void); border: 1px solid var(--border); border-radius: var(--radius);
}
.wf-dist-card {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; display: flex; gap: 10px; align-items: center;
}
.wf-dist-card-thumb { width: 40px; height: 40px; border-radius: 6px; background: var(--bg-panel); overflow: hidden; display: flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.wf-dist-card-thumb img { width: 90%; height: 90%; object-fit: contain; }
.wf-dist-card-title { font-size: 11.5px; color: var(--white); font-weight: 500; }
.wf-dist-card-price { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gold); margin-top: 2px; }

.wf-dist-arrow {
  width: 42px; height: 2px; background: var(--gold-dim); position: relative;
  animation: wf-dist-arrow-flow 2.4s ease-in-out infinite;
}
.wf-dist-arrow::after {
  content: ''; position: absolute; right: -4px; top: -4px;
  width: 10px; height: 10px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold);
  transform: rotate(45deg);
}
@keyframes wf-dist-arrow-flow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.wf-dist-channels { display: flex; flex-direction: column; gap: 8px; }
.wf-dist-channel {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px;
  position: relative; opacity: 0; transform: translateX(10px);
  animation: wf-dist-channel-in .5s cubic-bezier(.4,0,.2,1) forwards;
}
.wf-dist-channel:nth-child(1) { animation-delay: 0.3s; }
.wf-dist-channel:nth-child(2) { animation-delay: 0.6s; }
.wf-dist-channel:nth-child(3) { animation-delay: 0.9s; }
@keyframes wf-dist-channel-in {
  to { opacity: 1; transform: translateX(0); }
}
.wf-dist-channel-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; flex: 0 0 28px;
}
.wf-dist-channel-icon.whatsapp { background: #25D366; }
.wf-dist-channel-icon.telegram { background: #229ED9; }
.wf-dist-channel-icon.instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.wf-dist-channel-icon svg { width: 14px; height: 14px; }
.wf-dist-channel-name { font-size: 11px; color: var(--white); }
.wf-dist-channel-status { font-size: 9.5px; color: var(--green); margin-top: 1px; display: flex; align-items: center; gap: 4px; }
.wf-dist-channel-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: wf-pulse 1.8s ease-in-out infinite; }
@keyframes wf-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================
 * Message Preview card — WhatsApp / Telegram / Shopify tabs,
 * dark preview canvas. Mirrors the real app's Posting screen.
 * ============================================================ */
.wf-mp {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 520px;
  margin: 0 auto;
}
.wf-mp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border-light);
}
.wf-mp-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.3px;
  color: var(--white);
}
.wf-mp-chan {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.wf-mp-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
  background: var(--bg-base);
}
.wf-mp-tab {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--muted);
  position: relative;
  transition: color .18s;
  cursor: default;
}
.wf-mp-tab:hover { color: var(--off-white); }
.wf-mp-tab.active { color: var(--white); }
.wf-mp-tab.active::after {
  content: ''; position: absolute;
  left: 20%; right: 20%; bottom: -1px;
  height: 2px; background: var(--gold);
  border-radius: 2px 2px 0 0;
}
.wf-mp-tab-icon { display: inline-flex; width: 14px; height: 14px; }
.wf-mp-tab-icon svg { width: 100%; height: 100%; }
.wf-mp-tab:not(.active) .wf-mp-tab-icon { opacity: 0.55; }
.wf-mp-canvas {
  background: #1b3453;       /* the dark-blue preview panel in the real app */
  background-image: radial-gradient(ellipse 380px 200px at 50% 0%, rgba(255,255,255,0.06), transparent 70%);
  padding: 24px 24px 20px;
  color: #fff;
  min-height: 280px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.wf-mp-watch {
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45));
}
.wf-mp-watch img { width: 100%; height: 100%; object-fit: contain; }
.wf-mp-caption {
  width: 100%;
  padding-top: 6px;
  color: #fff;
}
.wf-mp-cap-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #fff;
  margin-bottom: 8px;
}
.wf-mp-cap-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin-bottom: 10px;
}
.wf-mp-cap-meta {
  font-size: 12.5px;
  color: rgba(255,255,255,0.92);
  margin-bottom: 6px;
}
.wf-mp-cap-price {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: #d7e2ee;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 10px;
  margin-top: 4px;
}

/* Mobile variant — tighter padding, smaller image */
.wf-m-mp-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.wf-m-mp-head {
  padding: 10px 12px 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border-light);
}
.wf-m-mp-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
  background: var(--bg-base);
}
.wf-m-mp-tab {
  display: flex; align-items: center; justify-content: center;
  gap: 3px;
  padding: 8px 2px 7px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--muted);
  position: relative;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.wf-m-mp-tab.active { color: var(--white); }
.wf-m-mp-tab.active::after {
  content: ''; position: absolute;
  left: 22%; right: 22%; bottom: -1px;
  height: 2px; background: var(--gold);
  border-radius: 2px 2px 0 0;
}
.wf-m-mp-tab-icon { display: inline-flex; width: 11px; height: 11px; flex: 0 0 auto; }
.wf-m-mp-tab-icon svg { width: 100%; height: 100%; }
.wf-m-mp-tab-label { overflow: hidden; text-overflow: ellipsis; }
.wf-m-mp-tab:not(.active) .wf-m-mp-tab-icon { opacity: 0.55; }
.wf-m-mp-canvas {
  background: #1b3453;
  background-image: radial-gradient(ellipse 240px 140px at 50% 0%, rgba(255,255,255,0.05), transparent 70%);
  padding: 14px 14px 14px;
  color: #fff;
}
.wf-m-mp-watch {
  width: 110px; height: 110px;
  margin: 0 auto 8px;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.4));
}
.wf-m-mp-watch img { width: 100%; height: 100%; object-fit: contain; }
.wf-m-mp-cap-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: #fff;
  margin-bottom: 6px;
}
.wf-m-mp-cap-body {
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  margin-bottom: 8px;
}
.wf-m-mp-cap-meta {
  font-size: 10.5px;
  color: rgba(255,255,255,0.9);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 8px;
}

/* ============================================================
 * Caption tone selector
 * ============================================================ */
.wf-tones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.wf-tone {
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg-raised); border: 1.5px solid var(--border);
  cursor: default; transition: border-color .2s, background .2s, transform .2s;
}
.wf-tone.active { border-color: var(--gold); background: var(--bg-raised); box-shadow: 0 0 0 3px rgba(139,115,85,0.12); }
.wf-tone-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.wf-tone.active .wf-tone-label { color: var(--gold); }
.wf-tone-name { font-size: 13px; color: var(--white); font-weight: 500; }

.wf-caption {
  background: var(--bg-void); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; font-size: 12px; color: var(--off-white); line-height: 1.55;
  min-height: 92px; position: relative;
}
.wf-caption-type {
  display: inline-block;
  border-right: 2px solid var(--gold);
  animation: wf-caret 0.8s step-end infinite;
  padding-right: 1px;
}
@keyframes wf-caret { 50% { border-color: transparent; } }

/* ============================================================
 * Theme switcher swatches
 * ============================================================ */
.wf-theme-swatches { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wf-theme-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid transparent; transition: border-color .2s, transform .2s;
}
.wf-theme-swatch:hover { transform: translateY(-2px); }
.wf-theme-swatch.active { border-color: var(--gold); }
.wf-theme-swatch-disc {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.08);
}
.wf-theme-swatch-disc > span { flex: 1; }
.wf-theme-swatch-label { font-size: 10px; letter-spacing: 0.8px; color: var(--off-white); }

/* ============================================================
 * RESPONSIVE — container queries
 * .wf-app is a size-container, so every preview scales to its
 * parent's inline size, regardless of viewport. Desktop hero,
 * narrow bento tile, and mobile inline-chapter preview all
 * share the same responsive rules.
 * ============================================================ */

/* ---- <= 760px container: stack sidebar over content, shrink pad ---- */
@container wfapp (max-width: 760px) {
  .wf-shell {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 440px;
  }
  .wf-sidebar { padding: 12px 6px; gap: 10px; }
  .wf-brand {
    font-size: 0; padding: 4px 0 10px;
    text-align: center;
  }
  .wf-brand .wm-watch, .wf-brand .wm-flow { font-size: 14px; }
  .wf-brand .wm-flow { display: none; }
  .wf-brand-tag { display: none; }
  .wf-nav-label { display: none; }
  .wf-nav-item {
    justify-content: center; padding: 8px 0; font-size: 0;
  }
  .wf-nav-item svg { width: 14px; height: 14px; flex: 0 0 14px; }
  .wf-nav-item.active::before { left: 0; }
  .wf-topbar { padding: 0 10px; gap: 8px; }
  .wf-topbar-title { font-size: 13px; }
  .wf-search { max-width: none; min-width: 0; }
  .wf-topbar-btn { padding: 0 8px; font-size: 10px; }
  .wf-main { padding: 10px; }

  .wf-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wf-kpi-value { font-size: 18px; }

  .wf-pipeline {
    grid-template-columns: repeat(4, 78%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .wf-pipe-col { scroll-snap-align: start; min-height: 200px; }

  .wf-pay-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  .wf-dist {
    grid-template-columns: 1fr;
    gap: 10px; padding: 14px;
  }
  .wf-dist-arrow {
    width: 2px; height: 28px; justify-self: center;
    animation-name: wf-dist-arrow-flow-v;
  }
  .wf-dist-arrow::after {
    right: -4px; top: auto; bottom: -4px; left: -4px;
    transform: rotate(135deg);
  }
  @keyframes wf-dist-arrow-flow-v {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }

  .wf-contact-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }

  .wf-tones { grid-template-columns: repeat(2, 1fr); }

  .wf-steps { gap: 0; padding: 4px 0 10px; overflow-x: auto; }
  .wf-step-conn { min-width: 18px; }

  .wf-pay-summary { grid-template-columns: auto 1fr; gap: 10px; }
  .wf-ring { width: 68px; height: 68px; }
  .wf-ring-pct { font-size: 14px; }
}

/* ---- <= 540px container: single-column, compact ---- */
@container wfapp (max-width: 540px) {
  .wf-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 38px 1fr;
    min-height: 380px;
  }
  .wf-sidebar {
    display: none;
  }
  .wf-topbar { grid-column: 1; }
  .wf-main { padding: 10px; grid-column: 1; }

  .wf-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .wf-kpi-card { padding: 9px; }
  .wf-kpi-label { font-size: 8.5px; letter-spacing: 1.1px; padding-right: 22px; }
  .wf-kpi-value { font-size: 16px; }
  .wf-kpi-change { font-size: 9.5px; }
  .wf-kpi-icon { width: 18px; height: 18px; top: 8px; right: 8px; }
  .wf-kpi-icon svg { width: 10px; height: 10px; }

  .wf-card-title { font-size: 13px; }
  .wf-feed-item { grid-template-columns: 32px 1fr auto; gap: 8px; padding: 6px 0; }
  .wf-feed-thumb { width: 32px; height: 32px; }
  .wf-feed-brand { font-size: 11.5px; }
  .wf-feed-sub { font-size: 10px; }
  .wf-feed-price { font-size: 11px; }

  .wf-pipeline {
    grid-template-columns: repeat(4, 85%);
  }

  .wf-pay-cards { grid-template-columns: 1fr; }

  .wf-contact-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  .wf-table-wrap { overflow-x: auto; }
  .wf-table { min-width: 480px; }

  .wf-tones { grid-template-columns: 1fr; }

  .wf-invoice { padding: 14px 14px; font-size: 10px; }
  .wf-invoice-brand { font-size: 14px; letter-spacing: 1.8px; }

  .wf-theme-swatch-disc { width: 28px; height: 28px; }
}

/* ---- <= 380px container: micro (tiny bento previews, etc.) ---- */
@container wfapp (max-width: 380px) {
  .wf-shell { min-height: 320px; grid-template-rows: 34px 1fr; }
  .wf-topbar { padding: 0 8px; }
  .wf-topbar-title { font-size: 12px; letter-spacing: 0.3px; }
  .wf-topbar-btn { font-size: 9.5px; padding: 0 6px; height: 22px; }
  .wf-main { padding: 8px; }
  .wf-kpi-grid { gap: 6px; }
  .wf-kpi-value { font-size: 14px; }
  .wf-pipeline { grid-template-columns: repeat(4, 92%); }
  .wf-pipe-col { padding: 8px; }
}

/* ────────────────────────────────────────────────────────────────
 * .wf-shell as its own size container — kicks in when the dashboard
 * is embedded inside a small device bezel (e.g. the hero MacBook,
 * which gives the shell ~580px to work with). Independent of the
 * outer .wf-app wfapp container queries (which only fire when the
 * shell is wrapped in .wf-app, e.g. on /features). The MacBook hero
 * embeds the shell directly inside .wf-bezel-screen with no .wf-app.
 * ────────────────────────────────────────────────────────────── */

/* ---- shell <= 720px: tighten the dashboard so it fits the laptop bezel ---- */
@container wfshell (max-width: 720px) {
  .wf-shell { grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: 36px 1fr; }
  .wf-sidebar { padding: 12px 8px; gap: 10px; }
  .wf-brand { font-size: 13px; letter-spacing: 2px; padding: 2px 6px 8px; }
  .wf-brand-tag { font-size: 6.5px; }
  .wf-nav-item { font-size: 10.5px; padding: 5px 6px; gap: 6px; }
  .wf-nav-item svg { width: 11px; height: 11px; flex: 0 0 11px; }

  .wf-topbar { padding: 0 10px; gap: 8px; }
  .wf-topbar-title { font-size: 13px; }
  .wf-search { max-width: 150px; height: 22px; font-size: 10px; padding: 0 8px 0 22px; }
  .wf-search::before { left: 7px; width: 8px; height: 8px; }
  .wf-search::after { left: 13px; top: 11px; width: 4px; }
  .wf-topbar-btn { height: 22px; padding: 0 8px; font-size: 9.5px; gap: 4px; }
  .wf-topbar-btn svg { width: 10px; height: 10px; }

  .wf-main { padding: 10px; }
  .wf-kpi-grid { gap: 6px; }
  .wf-kpi-card { padding: 9px; gap: 4px; }
  .wf-kpi-label { font-size: 8px; letter-spacing: 1px; padding-right: 18px; }
  .wf-kpi-value { font-size: 14px; }
  .wf-kpi-change { font-size: 8.5px; gap: 3px; }
  .wf-kpi-icon { width: 16px; height: 16px; top: 7px; right: 7px; }
  .wf-kpi-icon svg { width: 9px; height: 9px; }

  .wf-card-header { padding: 8px 12px; }
  .wf-card-title { font-size: 13px; }
  .wf-card-sub { font-size: 9px; }
  .wf-card-body { padding: 8px 12px; }
  .wf-feed-item { grid-template-columns: 32px 1fr auto; gap: 8px; padding: 6px 0; }
  .wf-feed-thumb { width: 32px; height: 32px; }
  .wf-feed-brand { font-size: 11px; }
  .wf-feed-sub { font-size: 9.5px; }
  .wf-feed-price { font-size: 11px; }
  .wf-feed-time { font-size: 9px; }
  .wf-badge { font-size: 8.5px; padding: 1px 6px; }
}

/* ---- shell <= 520px: even tighter, but still keep sidebar visible ---- */
@container wfshell (max-width: 520px) {
  .wf-shell { grid-template-columns: 120px minmax(0, 1fr); }
  .wf-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-kpi-value { font-size: 13px; }
}

/* ---- Fallback: viewport-based rules for older browsers ---- */
@supports not (container-type: inline-size) {
  @media (max-width: 540px) {
    .wf-shell { grid-template-columns: 1fr; }
    .wf-sidebar { display: none; }
    .wf-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .wf-pay-cards { grid-template-columns: 1fr; }
    .wf-dist { grid-template-columns: 1fr; }
    .wf-pipeline { overflow-x: auto; grid-template-columns: repeat(4, 78%); }
  }
}

/* ============================================================
 * .wf-mobile — real iPhone 17 Pro bezel (Apple Design Resources)
 * ----------------------------------------------------------------
 * The device chrome is the actual Apple-provided iPhone 17 Pro PNG
 * (Deep Blue) with a transparent screen region. Our app UI is
 * rendered BEHIND that PNG, positioned to the exact screen inset
 * Apple publishes: L5.33% / T7.97% / W89.33% / H89.53%. The
 * Dynamic Island and home indicator are baked into the PNG, so no
 * fake notch or indicator glyphs are needed.
 * Source: https://developer.apple.com/design/resources/#products-bezels
 * ============================================================ */
.wf-mobile {
  --wm-w: 320px;
  --wm-topbar-h: 72px; /* includes Dynamic Island safe-area (~36px) + 36px nav */
  --wm-bottom-h: 64px; /* includes home-indicator safe-area */
  width: var(--wm-w);
  /* PNG is 1350x2760 — lock the aspect to the real device */
  aspect-ratio: 1350 / 2760;
  position: relative;
  font-family: 'DM Sans', sans-serif;
  color: var(--white);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.38)) drop-shadow(0 8px 16px rgba(0,0,0,0.22));
  flex-shrink: 0;
}
/* Apple bezel overlay — sits on top of the app UI */
.wf-mobile-frame {
  position: absolute; inset: 0;
  background: url('/marketing/assets/bezels/iphone17-pro-portrait.png') center/100% 100% no-repeat;
  z-index: 20;
  pointer-events: none;
  /* belt & braces for a few older Safari builds that chomped object-fit on bg */
  -webkit-mask-image: none;
}
/* The screen region — inset exactly to the transparent pixels in the PNG */
.wf-mobile-screen {
  position: absolute;
  /* Measured against the Apple iPhone 17 Pro PNG (1350×2760):
     transparent screen window spans x=72–1277 (L5.33%, W89.33%)
     and y=69–2690 (T2.50%, H94.96%). Matching this exactly is what
     eliminates the cream gap above the in-app topbar and the
     clipped bottom-nav — the screen div now fills the entire
     transparent region of the PNG, so nothing of the page shows
     through. The Dynamic Island (baked into the PNG) is cleared by
     an extra padding-top inside .wf-m-topbar. */
  left: 5.33%; top: 2.50%;
  width: 89.33%; height: 94.96%;
  background: var(--bg-void);
  /* iPhone 17 Pro has ~54px corner radius on a 1206px-wide screen
     ≈ 4.48% horizontal · 2.19% vertical */
  border-radius: 4.48% / 2.19%;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: var(--wm-topbar-h) 1fr var(--wm-bottom-h);
  container-type: inline-size;
  container-name: wfmob;
  z-index: 1;
}
/* Legacy notch div — the Apple PNG has the Dynamic Island baked in */
.wf-mobile-notch { display: none; }

/* ============================================================
 * .wf-bezel — additional Apple device frames (iPad Air, MacBook
 * Pro, iMac). Same overlay pattern as .wf-mobile: the transparent
 * PNG sits on top, the real app UI is positioned to the exact
 * screen inset. All four PNGs live in /marketing/assets/bezels/.
 * ============================================================ */
.wf-bezel {
  position: relative;
  display: block;
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
  color: var(--white);
}
.wf-bezel-chrome {
  position: absolute; inset: 0;
  z-index: 20;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.wf-bezel-screen {
  position: absolute;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-void);
  z-index: 1;
}

/* MacBook Pro 16" M5 (Space Black) — PNG 4260×2840
   Screen inset: L9.44% T12.92% W81.13% H76.41% (16:10 panel) */
.wf-bezel--mbp {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 4260 / 2840;
  filter: drop-shadow(0 32px 60px rgba(0,0,0,0.34)) drop-shadow(0 10px 22px rgba(0,0,0,0.18));
}
.wf-bezel--mbp .wf-bezel-chrome {
  background-image: url('/marketing/assets/bezels/mbp16-spaceblack.png');
}
.wf-bezel--mbp .wf-bezel-screen {
  left: 9.44%; top: 12.92%;
  width: 81.13%; height: 76.41%;
}

/* iPad Air 13" (M4) Space Gray — PNG 2300×2980 (portrait)
   Screen inset: L5.48% T4.16% W89.04% H91.68% */
.wf-bezel--ipad {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 2300 / 2980;
  margin: 0 auto;
  filter: drop-shadow(0 28px 56px rgba(0,0,0,0.32)) drop-shadow(0 10px 20px rgba(0,0,0,0.16));
}
.wf-bezel--ipad .wf-bezel-chrome {
  background-image: url('/marketing/assets/bezels/ipad-air-13-portrait.png');
}
.wf-bezel--ipad .wf-bezel-screen {
  left: 5.48%; top: 4.16%;
  width: 89.04%; height: 91.68%;
  border-radius: 2%;
}
/* iPad landscape variant */
.wf-bezel--ipad-land {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 2980 / 2300;
  margin: 0 auto;
}
.wf-bezel--ipad-land .wf-bezel-chrome {
  background-image: url('/marketing/assets/bezels/ipad-air-13-landscape.png');
}
.wf-bezel--ipad-land .wf-bezel-screen {
  left: 4.16%; top: 5.48%;
  width: 91.68%; height: 89.04%;
  border-radius: 2%;
}

/* iMac 24" M4 (Silver) — PNG 4760×4050 (includes stand)
   Screen inset: L2.94% T3.70% W94.12% H62.22% */
.wf-bezel--imac {
  width: 100%;
  max-width: 860px;
  aspect-ratio: 4760 / 4050;
  margin: 0 auto;
  filter: drop-shadow(0 40px 72px rgba(0,0,0,0.34)) drop-shadow(0 14px 24px rgba(0,0,0,0.2));
}
.wf-bezel--imac .wf-bezel-chrome {
  background-image: url('/marketing/assets/bezels/imac24-silver.png');
}
.wf-bezel--imac .wf-bezel-screen {
  left: 2.94%; top: 3.70%;
  width: 94.12%; height: 62.22%;
}

/* A .wf-shell placed inside a bezel screen needs to fit — force it
   to 100% of the screen region and remove any external shadow. */
.wf-bezel-screen > .wf-shell,
.wf-mobile-screen > .wf-shell {
  width: 100%; height: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* -- Top bar --
   The screen div now fills the PNG's transparent window exactly (T=2.50%),
   so the Dynamic Island (baked into the PNG at ~y=112–220 / ~5.7% of screen
   height) overlaps the top of the topbar. We reserve that space with
   padding-top so the wordmark sits BELOW the island, not behind it.
   Background = --bg-void (same as screen) → no contrasting band visible
   through the island's transparent perimeter. */
.wf-m-topbar {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: end;
  padding: 36px 12px 6px; /* 36px top = Dynamic Island clearance at 320px frame */
  background: var(--bg-void);
  border-bottom: 1px solid var(--border);
  z-index: 5;
}
.wf-m-iconbtn {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--off-white);
  border: none;
  aspect-ratio: 1 / 1;
}
.wf-m-iconbtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.wf-m-wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13.5px; font-weight: 400;
  text-align: center; letter-spacing: 2.2px;
  text-transform: uppercase;
  align-self: center;
  line-height: 1;
}
.wf-m-wordmark .wm-watch { color: var(--gold); }
.wf-m-wordmark .wm-flow  { color: var(--white); }
/* Real-app wordmark: WATCHFLOW spaced wide, single colour, serif.
   Matches the actual mobile topbar in public/index.html. */
.wf-m-wordmark--caps {
  color: var(--white);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 4px;
}

/* -- Content scroll region -- */
.wf-m-content {
  padding: 12px 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-void);
  overflow: hidden;
}

/* -- Bottom nav --
   Mirrors .mobile-bottom-nav / .mobile-nav-item in public/index.html
   (line 15150 area). Five items in one row, icon above Title-Cased label.
   Background matches the screen (--bg-void) — no contrasting "shelf". */
.wf-m-bottomnav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  background: var(--bg-void);
  border-top: 1px solid var(--border);
  /* Extra bottom padding = home-indicator safe area. The iPhone 17 Pro PNG
     has no home indicator baked in, but we leave room so labels don't sit
     right on the bottom bezel edge. */
  padding: 6px 0 20px;
  z-index: 5;
  min-width: 0;
}
.wf-m-tab {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  background: transparent; border: 0;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  /* Smaller/tighter than before so the longest label ("Inventory" → INVENTORY)
     fits even when the phone is scaled to ~200px. 0 letter-spacing is
     deliberate — the uppercase already reads as a nav label. */
  font-size: 7px; letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 0;
  min-width: 0;
  overflow: hidden;
}
.wf-m-tab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.wf-m-tab.active { color: var(--gold); }
.wf-m-tab.active svg { stroke-width: 2; }
.wf-m-tab-icon { display: inline-flex; flex: 0 0 auto; }
.wf-m-tab-label {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  /* Keep the label truly centred in its 1fr slot */
  text-align: center;
}
.wf-m-tab-fab {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg-void);
  margin: -12px auto 0;
  box-shadow: 0 4px 12px rgba(139,115,85,0.35);
  display: flex; align-items: center; justify-content: center;
}
.wf-m-tab-fab svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; }

/* ============================================================
 * .wf-mobile content primitives (per-page authentic layouts)
 * ============================================================ */
.wf-m-head {
  display: flex; flex-direction: column; gap: 1px;
  margin-bottom: 2px;
}
.wf-m-head .wf-m-greet {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 300;
  color: var(--white); line-height: 1.05;
  letter-spacing: 0.3px;
}
.wf-m-head .wf-m-sub {
  font-size: 10px; color: var(--off-white);
  letter-spacing: 0.3px;
}

/* KPI row (2-up on mobile — matches real app at ≤768px) */
.wf-m-kpis {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.wf-m-kpi {
  padding: 8px 9px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 0;
}
.wf-m-kpi-label {
  font-size: 8px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--off-white); font-weight: 500;
  margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-kpi-value {
  font-family: 'DM Mono', monospace;
  font-size: 14px; color: var(--white);
  font-weight: 500; letter-spacing: -0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-kpi-delta {
  margin-top: 2px;
  font-family: 'DM Mono', monospace;
  font-size: 9px; color: var(--green);
}

/* Section card (wraps a mini-list on mobile) */
.wf-m-card {
  padding: 10px 10px 8px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.wf-m-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.wf-m-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px; color: var(--white);
  letter-spacing: 0.4px;
}
.wf-m-card-link {
  font-size: 9px; color: var(--gold);
  letter-spacing: 0.8px; text-transform: uppercase;
}

/* Horizontal-scroll watch carousel */
.wf-m-carousel {
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  margin: 0 -12px; padding: 0 12px 4px;
  scroll-snap-type: x mandatory;
}
.wf-m-carousel::-webkit-scrollbar { display: none; }
.wf-m-carousel-card {
  flex: 0 0 124px;
  scroll-snap-align: start;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 5px;
}
.wf-m-carousel-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-raised) 100%);
  overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
}
/* contain — the carousel leads with nobg hero shots that need breathing
   room around the case so the dial reads cleanly at 124px wide. */
.wf-m-carousel-thumb img {
  width: 92%; height: 92%; object-fit: contain;
}
.wf-m-carousel-brand {
  font-size: 9.5px; font-weight: 600; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-carousel-model {
  font-size: 8.5px; color: var(--off-white); opacity: 0.85;
  margin-top: -3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-carousel-price {
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--gold);
  font-weight: 500;
}

/* Feed row — listing or activity */
.wf-m-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light, var(--border));
}
.wf-m-row:last-child { border-bottom: 0; }
.wf-m-row-thumb {
  width: 32px; height: 32px;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-raised) 100%);
  display: flex; align-items: center; justify-content: center;
}
/* object-fit: contain so the stripped-background hero photos (transparent
   PNG, watch centred with breathing room) aren't zoomed + clipped. The
   scraped fallbacks still look clean under contain. */
.wf-m-row-thumb img { width: 96%; height: 96%; object-fit: contain; }
.wf-m-row-body { min-width: 0; }
.wf-m-row-brand {
  font-size: 10.5px; font-weight: 600; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-row-sub {
  font-size: 9px; color: var(--off-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-row-right {
  text-align: right;
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--gold);
  font-weight: 500;
}
.wf-m-row-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 7.5px; letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 2px;
}
.wf-m-row-badge.green { background: rgba(74,168,126,0.15); color: var(--green); }
.wf-m-row-badge.amber { background: rgba(212,165,82,0.15); color: var(--amber); }
.wf-m-row-badge.blue  { background: rgba(122,147,180,0.15); color: var(--blue); }
.wf-m-row-badge.gold  { background: rgba(139,115,85,0.18);  color: var(--gold); }
.wf-m-row-badge.red   { background: rgba(224,92,92,0.15);   color: var(--red); }

/* ─────────────────────────────────────────────────────────────
 * Inventory page preview — matches the real app's Inventory view
 * (search pill + status chips + selectable piece cards + bulk bar)
 * ───────────────────────────────────────────────────────────── */
.wf-m-inv-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-base);
}
.wf-m-inv-search-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--off-white);
  font-size: 9.5px;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-inv-search-pill svg { width: 11px; height: 11px; flex: 0 0 auto; color: var(--gold); opacity: 0.7; }
.wf-m-inv-done {
  padding: 5px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px; font-weight: 500;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 999px;
  white-space: nowrap;
}
.wf-m-inv-filters {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
}
.wf-m-inv-filters::-webkit-scrollbar { display: none; }
.wf-m-inv-chip {
  display: inline-flex; align-items: center; gap: 4px;
  flex: 0 0 auto;
  padding: 4px 9px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px; font-weight: 500;
  color: var(--off-white);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
}
.wf-m-inv-chip.active {
  color: var(--gold);
  border-color: var(--gold);
}
.wf-m-inv-chip-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--muted);
}
.wf-m-inv-chip-dot.green { background: var(--green); }
.wf-m-inv-chip-dot.red   { background: var(--red); }
.wf-m-inv-chip-dot.amber { background: var(--amber); }
.wf-m-inv-chip-dot.muted { background: var(--off-white); opacity: 0.55; }

/* Inventory cards */
.wf-m-inv-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.wf-m-inv-card {
  display: grid;
  grid-template-columns: 18px 48px 1fr auto;
  gap: 7px;
  align-items: center;
  padding: 8px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 11px;
}
.wf-m-inv-check {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg-void);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
}
.wf-m-inv-check.on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-void);
}
.wf-m-inv-check svg { width: 9px; height: 9px; }

.wf-m-inv-thumb {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-raised) 100%);
  display: flex; align-items: center; justify-content: center;
}
.wf-m-inv-thumb img { width: 96%; height: 96%; object-fit: contain; }
.wf-m-inv-tier {
  position: absolute;
  left: 2px; bottom: 2px;
  padding: 1px 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 6.5px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--green);
  background: rgba(74,168,126,0.22);
  border-radius: 4px;
}

.wf-m-inv-body { min-width: 0; overflow: hidden; }
.wf-m-inv-row1 {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
}
.wf-m-inv-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px; font-weight: 500;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-inv-sku {
  flex: 0 0 auto;
  padding: 1px 4px;
  font-family: 'DM Mono', monospace;
  font-size: 7.5px; letter-spacing: 0.4px;
  color: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-raised);
}
.wf-m-inv-model {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 10px; color: var(--off-white);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-inv-row-status {
  display: flex; align-items: center; gap: 4px;
  margin-top: 3px;
  font-family: 'DM Sans', sans-serif;
  font-size: 8px; letter-spacing: 0.3px;
  color: var(--off-white);
}
.wf-m-inv-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--muted);
}
.wf-m-inv-dot.green { background: var(--green); }
.wf-m-inv-dot.red   { background: var(--red); }
.wf-m-inv-dot.amber { background: var(--amber); }

.wf-m-inv-right {
  position: relative;
  text-align: right;
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.wf-m-inv-sold {
  font-family: 'DM Sans', sans-serif;
  font-size: 7.5px; font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--red);
}
.wf-m-inv-ask {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; font-weight: 600;
  color: var(--white);
}
.wf-m-inv-cost {
  font-family: 'DM Sans', sans-serif;
  font-size: 8px;
  color: var(--off-white);
}
.wf-m-inv-kebab {
  margin-top: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--off-white);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  aspect-ratio: 1 / 1;
}
.wf-m-inv-kebab svg { width: 10px; height: 10px; }

/* Floating bulk-selection action bar */
.wf-m-inv-selbar {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  gap: 5px;
  align-items: center;
  padding: 6px;
  background: var(--bg-base);
  border: 1px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.wf-m-inv-selcount {
  padding: 0 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: var(--off-white);
  white-space: nowrap;
}
.wf-m-inv-selcount em {
  font-style: normal;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-weight: 500;
  color: var(--gold);
  margin-right: 3px;
}
.wf-m-inv-selbtn {
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  padding: 5px 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px; font-weight: 500;
  color: var(--white);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  white-space: nowrap;
}
.wf-m-inv-selbtn svg { width: 11px; height: 11px; flex: 0 0 auto; color: var(--gold); }
.wf-m-inv-selx {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--red);
  background: rgba(224,92,92,0.08);
  color: var(--red);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  aspect-ratio: 1 / 1;
}
.wf-m-inv-selx svg { width: 11px; height: 11px; }

/* Deals pipeline: vertical stack (the REAL mobile pattern).
   Each column carries a coloured bar + dot matching the real app's
   .pipeline-col[data-stage="…"] ::after accents (index.html L17857-17863):
     Inquiry → blue | Negotiating → amber | Deposit Received → gold
     Paid/Shipped → green | Closed → muted */
.wf-m-pipe-col {
  --stage-accent: var(--gold);
  position: relative;
  padding: 8px 10px 8px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.wf-m-pipe-col::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--stage-accent);
}
.wf-m-pipe-col[data-stage="inquiry"]     { --stage-accent: var(--blue); }
.wf-m-pipe-col[data-stage="negotiating"] { --stage-accent: var(--amber); }
.wf-m-pipe-col[data-stage="reserved"]    { --stage-accent: var(--amber); }
.wf-m-pipe-col[data-stage="deposit"]     { --stage-accent: var(--gold); }
.wf-m-pipe-col[data-stage="paid"]        { --stage-accent: var(--green); }
.wf-m-pipe-col[data-stage="shipped"]     { --stage-accent: var(--green); }
.wf-m-pipe-col[data-stage="closed"]      { --stage-accent: var(--muted); }
.wf-m-pipe-col-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}
.wf-m-pipe-col-title {
  font-size: 9px; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--stage-accent);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.wf-m-pipe-col-title::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--stage-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--stage-accent) 18%, transparent);
  flex: 0 0 auto;
}
.wf-m-pipe-col-count {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--stage-accent);
  font-weight: 600;
}
.wf-m-pipe-card {
  padding: 6px 8px;
  background: var(--bg-void);
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid; grid-template-columns: 1fr auto; gap: 6px;
  align-items: center;
  margin-top: 5px;
}
.wf-m-pipe-card-name {
  font-size: 10px; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-pipe-card-sub {
  font-size: 8.5px; color: var(--off-white);
}
.wf-m-pipe-card-val {
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--gold); font-weight: 500;
}

/* Contacts grid (2-col on mobile, matches real app) */
.wf-m-contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.wf-m-contact {
  padding: 9px 6px;
  text-align: center;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.wf-m-contact-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  margin: 0 auto 5px;
  background: linear-gradient(135deg, var(--gold-dim), var(--gold));
  color: var(--bg-void);
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.5px;
}
.wf-m-contact-name {
  font-size: 10px; color: var(--white); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-contact-meta {
  font-size: 8.5px; color: var(--off-white); margin-top: 1px;
}
.wf-m-contact-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 7.5px; letter-spacing: 0.5px;
  text-transform: uppercase; font-weight: 500;
  background: rgba(139,115,85,0.15);
  color: var(--gold);
}

/* Distribution platform list (stacked on mobile) */
.wf-m-dist {
  display: flex; flex-direction: column; gap: 5px;
}
.wf-m-dist-row {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 8px;
  align-items: center;
  padding: 7px 9px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.wf-m-dist-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--bg-panel);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.wf-m-dist-icon svg { width: 15px; height: 15px; }
.wf-m-dist-body { min-width: 0; }
.wf-m-dist-name {
  font-size: 10.5px; color: var(--white); font-weight: 600;
}
.wf-m-dist-sub {
  font-size: 8.5px; color: var(--off-white);
}
.wf-m-dist-toggle {
  width: 28px; height: 16px;
  border-radius: 999px;
  background: var(--gold);
  position: relative;
}
.wf-m-dist-toggle::after {
  content: '';
  position: absolute; top: 2px; right: 2px;
  width: 12px; height: 12px;
  background: var(--bg-void);
  border-radius: 50%;
}
.wf-m-dist-toggle.off {
  background: var(--bg-panel);
}
.wf-m-dist-toggle.off::after {
  right: auto; left: 2px;
}

/* Invoice sheet (mobile paper) */
.wf-m-invoice {
  padding: 10px;
  background: #fdfcf8;
  color: #1a1814;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
}
.wf-m-invoice-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-weight: 500;
  letter-spacing: 2px;
  color: #1a1814;
}
.wf-m-invoice-num {
  font-family: 'DM Mono', monospace;
  font-size: 9px; color: #5a544a;
  margin-top: 2px; letter-spacing: 0.8px;
}
.wf-m-invoice-line {
  display: flex; justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 9.5px;
  color: #1a1814;
}
.wf-m-invoice-line:last-child { border-bottom: 0; }
.wf-m-invoice-total {
  display: flex; justify-content: space-between;
  margin-top: 6px; padding-top: 6px;
  border-top: 2px solid #1a1814;
  font-family: 'DM Mono', monospace;
  font-size: 12px; font-weight: 600;
}

/* Caption preview card */
.wf-m-caption {
  padding: 9px 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.wf-m-caption-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
  font-size: 9px; color: var(--off-white);
  letter-spacing: 0.8px; text-transform: uppercase;
}
.wf-m-caption-head .dot {
  display: inline-block; width: 4px; height: 4px;
  border-radius: 50%; background: var(--gold);
}
.wf-m-caption-body {
  font-size: 10px; line-height: 1.4;
  color: var(--white);
}
.wf-m-caption-body em {
  color: var(--gold); font-style: normal;
}

/* ============================================================
 * .ft-dual-showcase — desktop frame + phone frame, same data
 * ----------------------------------------------------------------
 * On ≥1024px: desktop frame dominates, phone angled foreground-right.
 * On 900–1023px: only the phone (centered, natural size).
 * On <900px: only the phone (fit to container).
 * ============================================================ */
.ft-dual-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'stack';
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 100%;
}
.ft-dual-showcase > .ft-dual-desktop,
.ft-dual-showcase > .ft-dual-mobile {
  grid-area: stack;
}
/* Desktop frame — reuse .wf-app-wrap for styling, provided by features.css */
.ft-dual-showcase .ft-dual-desktop {
  width: 100%;
  max-width: 720px;
  transition: transform .5s ease, opacity .3s ease;
}
.ft-dual-showcase .ft-dual-mobile {
  transition: transform .5s ease, opacity .3s ease;
  z-index: 2;
}

/* ≥1024px: side-by-side composition */
@media (min-width: 1024px) {
  .ft-dual-showcase {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'stack';
    justify-items: stretch;
    min-height: 440px;
  }
  .ft-dual-showcase .ft-dual-desktop {
    justify-self: start;
    width: 92%;
    max-width: 680px;
    transform: translateX(-4%);
  }
  .ft-dual-showcase .ft-dual-mobile {
    justify-self: end;
    transform: translateX(6%) rotate(2.5deg);
    transform-origin: center center;
  }
}

/* 900–1023px and below: desktop hidden, phone centered */
@media (max-width: 1023px) {
  .ft-dual-showcase .ft-dual-desktop {
    display: none;
  }
  .ft-dual-showcase .ft-dual-mobile {
    transform: none;
  }
}

/* Mobile frame size adapts to container width */
@media (max-width: 540px) {
  .wf-mobile { --wm-w: min(280px, 84vw); }
}

/* ────────────────────────────────────────────────────────────
   REAL-APP MOBILE PREVIEWS — faithful renditions of the actual
   WatchFlow mobile screens. Every class below maps 1:1 to a
   real .dash- / .inv- / .pay- / .contact- / .pipeline- / .caption-
   surface in public/index.html. Do not invent fields.
   ──────────────────────────────────────────────────────────── */

/* Dashboard (Home) — matches .dash-greeting / .dash-quick-action */
.wf-m-dash-head { padding: 12px 4px 8px; }
.wf-m-dash-greet {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: 400;
  color: var(--white); line-height: 1.1;
}
.wf-m-dash-date {
  font-size: 10px; color: var(--off-white);
  margin-top: 4px; letter-spacing: 0.2px;
}
.wf-m-dash-rule {
  height: 1px; border: 0; background: var(--border);
  margin: 8px 0 0; width: 40px;
}
.wf-m-dash-qa {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin: 10px 0 0;
}
.wf-m-dash-qa-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 66px;
}
.wf-m-dash-qa-icon {
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(201,169,110,0.16), rgba(201,169,110,0.04));
  border: 1px solid rgba(201,169,110,0.22);
}
.wf-m-dash-qa-icon.amber {
  background: linear-gradient(145deg, rgba(212,150,58,0.14), rgba(212,150,58,0.04));
  border-color: rgba(212,150,58,0.28);
}
.wf-m-dash-qa-icon.green {
  background: linear-gradient(145deg, rgba(76,175,133,0.14), rgba(76,175,133,0.04));
  border-color: rgba(76,175,133,0.28);
}
.wf-m-dash-qa-icon svg { width: 14px; height: 14px; }
.wf-m-dash-qa-label {
  font-size: 9.5px; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--off-white);
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-dash-qa-value {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--white);
  font-weight: 500; margin-top: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-dash-sep {
  height: 1px; border: 0; background: var(--border);
  margin: 12px 0;
}

/* Inventory — matches .inv-mobile-header / .inv-qa-card / .inv-card */
.wf-m-inv-header { padding: 10px 0 2px; }
.wf-m-inv-eyebrow {
  font-size: 9px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--gold);
  font-weight: 600; margin-bottom: 4px;
}
.wf-m-inv-title {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 400;
  color: var(--white); line-height: 1;
}
.wf-m-inv-rule {
  height: 1px; border: 0; background: var(--gold);
  opacity: 0.45; margin: 6px 0 0; width: 28px;
}
.wf-m-inv-qa {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px; margin: 10px 0 12px;
}
.wf-m-inv-qa-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 3px;
  display: flex; flex-direction: column;
  align-items: center; gap: 3px; min-height: 60px;
  min-width: 0;
  overflow: hidden;
}
.wf-m-inv-qa-icon {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(201,169,110,0.16), rgba(201,169,110,0.04));
  border: 1px solid rgba(201,169,110,0.22);
  flex: 0 0 auto;
}
.wf-m-inv-qa-icon.green {
  background: linear-gradient(145deg, rgba(76,175,133,0.14), rgba(76,175,133,0.04));
  border-color: rgba(76,175,133,0.28);
}
.wf-m-inv-qa-icon.amber {
  background: linear-gradient(145deg, rgba(212,150,58,0.14), rgba(212,150,58,0.04));
  border-color: rgba(212,150,58,0.28);
}
.wf-m-inv-qa-icon svg { width: 12px; height: 12px; }
.wf-m-inv-qa-label {
  font-size: 7.5px; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--off-white);
  font-weight: 500; text-align: center;
  line-height: 1.2;
  max-width: 100%;
}
.wf-m-inv-qa-value {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--white);
  font-weight: 500;
}

/* Inventory search bar — no "Done" button in real app */
.wf-m-inv-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 0 0 8px;
  background: var(--bg-void);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--off-white);
  font-size: 10px;
}
.wf-m-inv-search svg { width: 11px; height: 11px; flex: 0 0 auto; color: var(--gold); opacity: 0.75; }

/* Inventory days-aging badge — matches .days-fresh / .days-aging / .days-stale.
   Mirrors the real app's .inv-card (public/index.html ~line 22087):
   three-col grid with a thumb, body, and right rail. We run at a tighter
   gap (8px) than the 12px real app because the preview is ~320px wide vs
   the app's 390px — keeping the same ratio of chrome to content. */
/* Mirrors the real .inv-card (public/index.html ~22549). Proportions scaled
   for ~285px screen width: 68px thumb (real app 92px @ 390px = 23.6%),
   brand 13px serif Cormorant (real app 17px scaled by screen ratio),
   days badge bottom-left, stockid pill gold-tinted, gradient overlay for
   depth, status row with colored dot (no pill — matches real app). */
.wf-m-inv-card {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 10px; align-items: stretch;
  padding: 9px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 10px rgba(0,0,0,0.03);
  margin-bottom: 8px;
  overflow: hidden;
}
.wf-m-inv-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(255,255,255,0.04) 0%, transparent 55%);
  pointer-events: none; border-radius: inherit;
}
.wf-m-inv-thumb {
  position: relative; width: 68px; height: 68px;
  border-radius: 8px; overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
}
.wf-m-inv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wf-m-inv-days {
  position: absolute; bottom: 3px; left: 3px;
  font-family: var(--font-mono);
  font-size: 7px; font-weight: 500;
  padding: 1.5px 4px; border-radius: 3px;
  letter-spacing: 0.3px;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
}
.wf-m-inv-days--fresh { background: rgba(76,175,133,0.88); }
.wf-m-inv-days--aging { background: rgba(212,150,58,0.88); }
.wf-m-inv-days--stale { background: rgba(200,90,90,0.88); }

.wf-m-inv-body {
  min-width: 0; display: flex; flex-direction: column;
  justify-content: space-between; gap: 3px;
}
.wf-m-inv-brandrow {
  display: flex; align-items: center; gap: 5px;
  min-width: 0;
}
.wf-m-inv-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px; font-weight: 500;
  line-height: 1.15; letter-spacing: -0.2px;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0;
}
.wf-m-inv-stockid {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 7.5px; padding: 1.5px 4px;
  background: rgba(201,169,110,0.08);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  color: var(--gold);
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.wf-m-inv-model {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; color: var(--off-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: -1px;
}
.wf-m-inv-spec {
  font-family: var(--font-mono);
  font-size: 8.5px; color: var(--muted);
  letter-spacing: 0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-inv-statusrow { margin-top: 2px; }
.wf-m-inv-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px; font-weight: 500; color: var(--muted);
  padding: 0; background: transparent; border: 0;
}
.wf-m-inv-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--muted);
}
.wf-m-inv-status.s-in-stock  .wf-m-inv-dot { background: var(--green); }
.wf-m-inv-status.s-reserved  .wf-m-inv-dot { background: var(--gold); }
.wf-m-inv-status.s-listed    .wf-m-inv-dot { background: var(--blue); }
.wf-m-inv-status.s-sold      .wf-m-inv-dot { background: var(--red); }
.wf-m-inv-status.s-consigned .wf-m-inv-dot { background: var(--amber); }

.wf-m-inv-right {
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: space-between;
  gap: 4px; min-width: 62px;
  padding-left: 2px;
}
.wf-m-inv-price {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  color: var(--gold); white-space: nowrap;
  letter-spacing: -0.3px;
}
.wf-m-inv-soldtag {
  display: inline-block;
  font-size: 8px; font-weight: 700;
  color: var(--red); letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-right: 4px;
}
.wf-m-inv-cost {
  font-size: 8.5px; color: var(--off-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 112px;
  text-align: right;
}
.wf-m-inv-vendor { opacity: 0.8; }
.wf-m-inv-vendor-row {
  font-size: 8.5px; color: var(--off-white); opacity: 0.7;
  margin-top: 1px; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 112px;
}
.wf-m-inv-more {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent; color: var(--off-white);
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  aspect-ratio: 1 / 1;
}
.wf-m-inv-more svg { width: 10px; height: 10px; }

/* Deals pipe card — add a thumb on the left to match real app */
.wf-m-pipe-card {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 8px; align-items: center;
}
.wf-m-pipe-card-thumb {
  width: 32px; height: 32px; border-radius: 6px;
  overflow: hidden; background: var(--bg-void);
}
.wf-m-pipe-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wf-m-pipe-card-body { min-width: 0; }

/* Contacts — real card layout with avatar + phone/email/open-deals rows */
.wf-m-contact-headrow {
  display: flex; align-items: flex-end;
  justify-content: space-between; padding: 10px 0 8px;
}
.wf-m-contact-title {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: 400;
  color: var(--white); line-height: 1.1;
}
.wf-m-contact-sub {
  font-size: 9.5px; color: var(--off-white);
  margin-top: 2px; letter-spacing: 0.2px;
}
.wf-m-contact-addbtn {
  font-size: 10px; font-weight: 600;
  padding: 6px 10px; border-radius: 6px;
  background: var(--gold); color: #0a0a0a;
  letter-spacing: 0.3px;
}
.wf-m-contact-filters {
  display: flex; gap: 4px; margin-bottom: 10px;
  overflow-x: auto; scrollbar-width: none;
}
.wf-m-contact-filters::-webkit-scrollbar { display: none; }
.wf-m-contact-filter {
  font-size: 9.5px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--off-white);
  white-space: nowrap;
}
.wf-m-contact-filter.active {
  background: var(--gold); color: #0a0a0a;
  border-color: var(--gold);
}
.wf-m-contact-list {
  display: flex; flex-direction: column; gap: 6px;
}
.wf-m-contact {
  padding: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
}
.wf-m-contact-head { display: flex; gap: 10px; align-items: center; }
.wf-m-contact-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  color: #0a0a0b; flex: 0 0 auto;
}
.wf-m-contact-avatar[data-tint="gold"]  { background: linear-gradient(135deg, var(--gold-dim), var(--gold)); }
.wf-m-contact-avatar[data-tint="green"] { background: linear-gradient(135deg, #2a6a4a, #4caf85); color: #fff; }
.wf-m-contact-avatar[data-tint="blue"]  { background: linear-gradient(135deg, #3a5a8a, #6b9fd4); color: #fff; }
.wf-m-contact-avatar[data-tint="rose"]  { background: linear-gradient(135deg, #8a3a3a, #d46b5f); color: #fff; }
.wf-m-contact-id { min-width: 0; }
.wf-m-contact-name {
  font-size: 11.5px; font-weight: 500; color: var(--white);
}
.wf-m-contact-role {
  font-size: 9px; color: var(--off-white); margin-top: 1px;
}
.wf-m-contact-body {
  display: flex; flex-direction: column; gap: 2px;
}
.wf-m-contact-row {
  font-size: 9.5px; color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-mono);
  letter-spacing: 0.2px;
}
.wf-m-contact-deals {
  font-family: var(--font-body);
  color: var(--off-white);
  letter-spacing: 0;
}
.wf-m-contact-tags {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.wf-m-contact-tag {
  font-size: 8px; padding: 2px 6px; border-radius: 999px;
  letter-spacing: 0.5px; text-transform: uppercase;
  font-weight: 600;
}
.wf-m-contact-tag-retailcustomer {
  background: rgba(123,164,201,0.15); color: var(--blue);
}
.wf-m-contact-tag-vendor {
  background: rgba(201,169,110,0.15); color: var(--gold);
}
.wf-m-contact-tag-dealer {
  background: rgba(76,175,133,0.15); color: var(--green);
}

/* Distribution — match the real Step 4 "Select Destinations" */
.wf-m-dist-head { padding: 10px 0 4px; }
.wf-m-dist-step {
  font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold);
  font-weight: 600; margin-bottom: 4px;
}
.wf-m-dist-title {
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 400;
  color: var(--white);
}
.wf-m-dist-sub {
  font-size: 9.5px; color: var(--off-white);
  margin-top: 2px;
}
.wf-m-dist-section {
  font-size: 9px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--off-white);
  margin: 14px 0 6px;
}
.wf-m-dist-meta {
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--green);
  margin-right: 4px;
}
.wf-m-dist-row:has(.wf-m-dist-toggle.off) .wf-m-dist-meta {
  color: var(--gold);
}

/* Caption Studio — Step 3 (tone pills, caption-type pills, caption box) */
.wf-m-cap-head { padding: 10px 0 4px; }
.wf-m-cap-step {
  font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold);
  font-weight: 600; margin-bottom: 4px;
}
.wf-m-cap-title {
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 400;
  color: var(--white);
}
.wf-m-cap-sub {
  font-size: 9.5px; color: var(--off-white);
  margin-top: 2px;
}
.wf-m-cap-tone-label {
  font-size: 8.5px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--off-white);
  margin: 10px 0 6px;
}
.wf-m-cap-tones {
  display: flex; gap: 4px; margin-bottom: 8px;
  overflow-x: auto; scrollbar-width: none;
}
.wf-m-cap-tones::-webkit-scrollbar { display: none; }
.wf-m-cap-tone {
  font-size: 9.5px; font-weight: 500;
  padding: 5px 9px; border-radius: 999px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--off-white);
  white-space: nowrap;
}
.wf-m-cap-tone.active {
  background: var(--gold); color: #0a0a0a;
  border-color: var(--gold);
}
.wf-m-cap-types {
  display: flex; gap: 4px; margin-bottom: 8px;
  padding: 3px; background: var(--bg-void);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.wf-m-cap-type {
  flex: 1; text-align: center;
  font-size: 10px; font-weight: 500;
  padding: 5px 0; border-radius: 6px;
  color: var(--off-white);
}
.wf-m-cap-type.active {
  background: var(--bg-panel);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.wf-m-cap-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.wf-m-cap-panel-head {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.wf-m-cap-panel-title {
  font-size: 10.5px; font-weight: 500;
  color: var(--white); letter-spacing: 0.2px;
}
.wf-m-cap-regen {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 500;
  padding: 3px 8px; border-radius: 6px;
  background: transparent; border: 1px solid var(--border);
  color: var(--off-white);
}
.wf-m-cap-regen svg { width: 9px; height: 9px; }
.wf-m-cap-box {
  padding: 10px; font-size: 10px;
  line-height: 1.6; color: var(--white);
}
.wf-m-cap-box em {
  font-style: normal; font-weight: 600; color: var(--gold);
}

/* Payments — matches real .pay-header + .pay-qa-card stack */
.wf-m-pay-head {
  display: grid;
  grid-template-columns: 1fr 74px;
  gap: 10px; align-items: center;
  padding: 10px 0 8px;
}
.wf-m-pay-title {
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 400;
  color: var(--white); line-height: 1.1;
}
.wf-m-pay-sub {
  font-size: 9px; color: var(--off-white);
  letter-spacing: 0.4px;
  margin-top: 2px;
}
.wf-m-pay-rule {
  height: 1px; border: 0; background: var(--gold);
  opacity: 0.45; margin: 6px 0 0; width: 28px;
}
.wf-m-pay-ring { width: 74px; height: 74px; }
.wf-m-pay-ring svg { width: 100%; height: 100%; }
.wf-m-pay-ring-pct {
  fill: var(--gold);
  font-family: var(--font-mono);
  font-size: 16px; font-weight: 500;
}
.wf-m-pay-ring-lbl {
  fill: var(--off-white);
  font-size: 7px; letter-spacing: 0.5px;
  text-transform: uppercase;
}
.wf-m-pay-qa {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px;
}
.wf-m-pay-qa-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 24px 1fr 6px auto;
  align-items: center; gap: 8px;
  overflow: hidden;
}
.wf-m-pay-qa-notch {
  position: absolute; top: 50%; width: 8px; height: 8px;
  background: var(--bg-void); border-radius: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--border);
}
.wf-m-pay-qa-notch-l { left: -5px; }
.wf-m-pay-qa-notch-r { right: -5px; }
.wf-m-pay-qa-icon {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(201,169,110,0.14), rgba(201,169,110,0.04));
  border: 1px solid rgba(201,169,110,0.24);
}
.wf-m-pay-qa-card[data-tint="collected"] .wf-m-pay-qa-icon {
  background: linear-gradient(145deg, rgba(76,175,133,0.14), rgba(76,175,133,0.04));
  border-color: rgba(76,175,133,0.28);
}
.wf-m-pay-qa-card[data-tint="outstanding"] .wf-m-pay-qa-icon {
  background: linear-gradient(145deg, rgba(212,150,58,0.14), rgba(212,150,58,0.04));
  border-color: rgba(212,150,58,0.28);
}
.wf-m-pay-qa-icon svg { width: 13px; height: 13px; }
.wf-m-pay-qa-label {
  font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--off-white);
  font-weight: 500;
}
.wf-m-pay-qa-dash {
  height: 1px; width: 6px;
  background: var(--border);
}
.wf-m-pay-qa-value {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  color: var(--white); letter-spacing: 0.3px;
}
.wf-m-pay-qa-value.gold   { color: var(--gold); }
.wf-m-pay-qa-value.green  { color: var(--green); }
.wf-m-pay-qa-value.amber  { color: var(--amber); }
.wf-m-pay-qa-bar {
  grid-column: 1 / -1; height: 2px; margin-top: 4px;
  background: var(--border); border-radius: 2px;
  overflow: hidden;
}
.wf-m-pay-qa-bar-fill { height: 100%; background: var(--gold); }
.wf-m-pay-qa-bar-fill.collected { background: var(--green); }
.wf-m-pay-qa-bar-fill.outstanding { background: var(--amber); }
.wf-m-pay-qa-bar-fill.pipeline { background: var(--gold); }

.wf-m-pay-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  align-items: center;
}
.wf-m-pay-row:last-child { border-bottom: 0; }
.wf-m-pay-row-icon {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.wf-m-pay-row-icon.green { background: rgba(76,175,133,0.15); color: var(--green); }
.wf-m-pay-row-icon.amber { background: rgba(212,150,58,0.15); color: var(--amber); }
.wf-m-pay-row-name {
  font-size: 10.5px; font-weight: 500;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-m-pay-row-sub {
  font-size: 9px; color: var(--off-white);
  margin-top: 1px;
}
.wf-m-pay-row-right { text-align: right; }
.wf-m-pay-row-amt {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--white);
  font-weight: 500;
}
.wf-m-pay-row-badge {
  display: inline-block;
  font-size: 8px; font-weight: 600;
  padding: 1.5px 5px; border-radius: 4px;
  letter-spacing: 0.4px; text-transform: uppercase;
  margin-top: 2px;
}
.wf-m-pay-row-badge.green { background: rgba(76,175,133,0.15); color: var(--green); }
.wf-m-pay-row-badge.amber { background: rgba(212,150,58,0.15); color: var(--amber); }

/* Message Preview (Step 5) — extra bits for the wrapper copy */
.wf-m-mp-head { padding: 10px 0 6px; }
.wf-m-mp-step {
  font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold);
  font-weight: 600; margin-bottom: 4px;
}
.wf-m-mp-title {
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 400;
  color: var(--white);
}
.wf-m-mp-sub {
  font-size: 9.5px; color: var(--off-white);
  margin-top: 2px;
}
.wf-m-mp-cap-ref {
  font-family: var(--font-mono);
  font-size: 9px; color: var(--gold);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 2px 0 6px;
}
.wf-m-mp-cap-price {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--white);
  font-weight: 500;
  margin-top: 6px;
}
.wf-m-mp-pubrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 4px;
}
.wf-m-mp-pubcount {
  font-size: 10px; color: var(--off-white);
}
.wf-m-mp-pubcount em {
  font-style: normal; font-weight: 600; color: var(--white);
}
.wf-m-mp-pubbtn {
  font-size: 10.5px; font-weight: 600;
  padding: 7px 16px; border-radius: 6px;
  background: var(--gold); color: #0a0a0a;
  letter-spacing: 0.3px;
}