html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/PPNeueMontreal-Regular-5.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/PPNeueMontreal-Light-3.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/PPNeueMontreal-Italic-2.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('fonts/PPNeueMontreal-LightItalic-4.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ivory';
  src: url('fonts/IvoryLLWeb-Light.woff2') format('woff2'), url('fonts/IvoryLLWeb-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Pure achromatic system — no color, only ink & paper */
  --ink: #0A0A0A;
  --ink-2: #1F1F1F;
  --ink-3: #3A3A3A;
  --muted: #6B6B6B;
  --muted-2: #9E9E9E;
  --muted-3: #C9C9C9;
  --line: rgba(10, 10, 10, 0.10);
  --line-hair: rgba(10, 10, 10, 0.05);
  --paper: #FFFFFF;
  --paper-2: #FAFAFA;
  --paper-3: #F2F2F2;
  --white: #FFFFFF;
  --dark-surface: #0A0A0A;
  --dark-ink: #F5F5F5;
  --dark-muted: #7A7A7A;

  /* Ivory only for glyphs it actually has — fallback to a proper serif for missing chars */
  --font-display: 'Ivory', Georgia, 'Times New Roman', serif;
  --font-ui: 'PP Neue Montreal', 'Inter', -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: #E8E8E8;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'ss02', 'tnum', 'kern';
  min-height: 100vh;
}

/* ============ STAGE ============ */
.stage {
  padding: 64px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}
.stage-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}

/* ============ PHONE FRAME ============ */
.phone {
  width: 393px;
  height: 852px;
  background: var(--paper);
  border-radius: 52px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 12px #0A0908,
    0 0 0 13px #302A21,
    0 40px 80px -20px rgba(15, 14, 12, 0.35),
    0 20px 40px -20px rgba(15, 14, 12, 0.15);
  display: flex;
  flex-direction: column;
}
.notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 34px;
  background: #0A0908;
  border-radius: 20px;
  z-index: 100;
}

.statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px 8px;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sb-right { display: flex; align-items: center; gap: 6px; }

/* ============ NAVBAR ============ */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 14px;
  border-bottom: 0.5px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--ink);
  cursor: pointer;
  border-radius: 6px;
}
.nav-btn:hover { background: var(--paper-2); }
.nav-brand {
  display: flex;
  align-items: center;
  gap: 6px;
}
.brand-logo {
  height: 20px;
  width: auto;
  display: block;
  /* logo SVGs are white — invert to ink black */
  filter: invert(1) brightness(0);
}

/* ============ SCROLL ============ */
.scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll::-webkit-scrollbar { display: none; }

/* ============ HERO ============ */
.hero {
  position: relative;
  background: #F2F2F2;
  aspect-ratio: 1 / 1.05;
  overflow: hidden;
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-overlay-top {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-overlay-bottom {
  position: absolute;
  bottom: 16px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  opacity: 0.7;
}
.hero-meta {
  background: rgba(253, 251, 246, 0.75);
  padding: 5px 9px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pill-live {
  background: rgba(253, 251, 246, 0.88);
  color: var(--ink);
}
.pill-dark {
  background: rgba(15, 14, 12, 0.82);
  color: var(--paper);
}
.pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.15);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.85); }
}

/* ============ CARD SYSTEM ============ */
.card {
  padding: 32px 24px;
  border-bottom: 0.5px solid var(--line);
  background: var(--paper);
}
.card:nth-of-type(even) {
  background: var(--paper);
}

.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--line-hair);
}
.eyebrow-num {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--muted-2);
}
.eyebrow-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  flex: 1;
}
.eyebrow-aux {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.eyebrow-inverse .eyebrow-num { color: rgba(240, 235, 224, 0.4); }
.eyebrow-inverse .eyebrow-label { color: var(--dark-ink); }
.card-dark .eyebrow { border-bottom-color: rgba(240, 235, 224, 0.08); }

/* ============ CARD: IDENTIFY ============ */
.card-identify { padding-top: 36px; }
.title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin-bottom: 10px;
}
.title em {
  font-style: italic;
  color: var(--ink);
}
.title-amp {
  font-family: 'Ivory', Georgia, serif;
  font-weight: 300;
  font-style: normal;
  color: var(--muted-2);
  font-size: 0.95em;
  padding: 0 0.08em;
  vertical-align: 0.02em;
}

/* Special characters: Ivory has them all now */
.glyph {
  font-family: 'Ivory', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: 0;
}
.subtitle {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: -0.005em;
  margin-bottom: 28px;
  font-variant-numeric: tabular-nums;
}
.subtitle .dot { margin: 0 8px; opacity: 0.5; }

/* ============ APPRAISAL STRIP (compact, near title) ============ */
.appraisal-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 24px;
  background: var(--paper-2);
  border: 0.5px solid var(--line);
  border-radius: 6px;
}
.as-body { flex: 1; min-width: 0; }
.as-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.as-sub {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.as-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  flex-shrink: 0;
}
.as-btn:hover { background: var(--ink-2); }

.attr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 0.5px solid var(--line-hair);
}
.attr {
  padding: 14px 0;
  border-bottom: 0.5px solid var(--line-hair);
}
.attr:nth-child(odd) { padding-right: 12px; }
.attr:nth-child(even) {
  padding-left: 16px;
  border-left: 0.5px solid var(--line-hair);
}
.attr-key {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.attr-val {
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

/* ============ VALUATION ============ */
.fmv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.fmv-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.fmv-trend {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0;
}
.fmv-price {
  margin-bottom: 28px;
}
.fmv-num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.fmv-sep {
  color: var(--muted-2);
  margin: 0 8px;
  font-weight: 300;
}

.ladder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.ladder-row {
  display: grid;
  grid-template-columns: 90px 1fr 72px;
  align-items: center;
  gap: 14px;
}
.ladder-key {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.ladder-bar {
  height: 2px;
  background: var(--paper-3);
  position: relative;
  overflow: hidden;
}
.ladder-bar span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--ink);
  transition: width 0.6s ease;
}
.ladder-val {
  font-family: var(--font-ui);
  font-size: 13px;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-weight: 500;
}
.ladder-row.emphasized .ladder-key { color: var(--ink); font-weight: 500; }
.ladder-row.emphasized .ladder-bar span { background: var(--ink); height: 3px; top: -0.5px; }
.ladder-row.emphasized .ladder-val { color: var(--ink); font-family: var(--font-display); font-size: 16px; font-weight: 300; }

/* ============ BUTTONS ============ */
.cta-row {
  display: flex;
  gap: 8px;
}
.btn {
  flex: 1;
  height: 46px;
  border: none;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s, background 0.15s;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: var(--ink-2); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 0.5px solid var(--line);
}
.btn-secondary:hover { background: var(--paper-2); }
.ghost-btn {
  width: 100%;
  padding: 12px;
  margin-top: 16px;
  background: transparent;
  border: 0.5px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.ghost-btn:hover { background: var(--paper-2); }

/* ============ COMP LIST ============ */
.comp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.comp-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--line-hair);
}
.comp-list li:last-child { border-bottom: none; }
.comp-name {
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 3px;
  font-weight: 500;
}
.comp-meta {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
}
.comp-price {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============ CHECK LIST ============ */
.check-list { list-style: none; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--line-hair);
}
.check:last-child { border-bottom: none; }
.check-mark {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  border-radius: 3px;
  margin-top: 1px;
}
.check.ok .check-mark {
  background: var(--ink);
  color: var(--paper);
}
.check.warn .check-mark {
  background: transparent;
  border: 0.5px solid var(--ink);
  color: var(--ink);
}
.check-title {
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
  font-weight: 500;
}
.check-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
  line-height: 1.4;
}

/* ============ DARK CARD (PROVENANCE) ============ */
.card-dark {
  background: var(--dark-surface);
  color: var(--dark-ink);
  border-bottom: none;
}
.prov-headline {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--dark-ink);
  margin-bottom: 16px;
}
.prov-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark-muted);
  margin-bottom: 24px;
  letter-spacing: -0.003em;
}
.prov-body em {
  font-style: italic;
  color: var(--dark-ink);
  font-weight: 400;
}
.museum-list {
  list-style: none;
  border-top: 0.5px solid rgba(240, 235, 224, 0.1);
}
.museum-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 0.5px solid rgba(240, 235, 224, 0.08);
}
.m-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 300;
  color: var(--dark-ink);
  letter-spacing: -0.015em;
}
.m-detail {
  font-size: 10px;
  color: var(--dark-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ============ MARKET DEMAND ============ */
.demand-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 0.5px solid var(--line-hair);
}
.demand-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.demand-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-variant-numeric: lining-nums;
}
.demand-out {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--muted-2);
  font-weight: 300;
}
.demand-title {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 3px;
  letter-spacing: -0.005em;
}
.demand-sub {
  font-size: 11px;
  color: var(--muted);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 24px;
}
.stat {
  padding: 12px 8px;
  border-left: 0.5px solid var(--line-hair);
  text-align: left;
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums lining-nums;
}
.stat-lbl {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.channel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.channel-row {
  display: grid;
  grid-template-columns: 18px 90px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--line-hair);
}
.channel-row:last-child { border-bottom: none; }
.ch-rank {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.ch-name {
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-weight: 500;
}
.ch-fill { height: 1px; }
.ch-meta {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ============ VARIANT ============ */
.variant-hero {
  padding: 18px 16px;
  background: var(--paper-2);
  border-radius: 8px;
  margin-bottom: 20px;
  border: 0.5px solid var(--line-hair);
}
.variant-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.variant-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.15;
}
.variant-premium {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.variant-list { list-style: none; }
.variant-list li {
  display: grid;
  grid-template-columns: 110px 1fr 100px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--line-hair);
}
.variant-list li:last-child { border-bottom: none; }
.v-name {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.variant-list li.active .v-name {
  color: var(--ink);
  font-weight: 500;
}
.v-tag {
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-left: 5px;
  font-weight: 500;
  border: 0.5px solid var(--ink);
  padding: 2px 5px;
  border-radius: 2px;
}
.v-share {
  height: 2px;
  background: var(--paper-3);
  position: relative;
  overflow: hidden;
}
.v-bar {
  position: absolute;
  height: 100%;
  background: var(--muted-2);
}
.variant-list li.active .v-bar { background: var(--ink); height: 3px; top: -0.5px; position: absolute; }
.v-pct {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ============ CONDITION ============ */
.condition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 24px;
  border-top: 0.5px solid var(--line-hair);
}
.cond {
  padding: 14px 12px 14px 0;
  border-bottom: 0.5px solid var(--line-hair);
  position: relative;
}
.cond:nth-child(even) {
  padding-left: 14px;
  border-left: 0.5px solid var(--line-hair);
}
.cond-key {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.cond-val {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 4px;
}
.cond-note {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.refurb {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 16px;
  background: var(--paper-2);
  border-radius: 8px;
  border: 0.5px solid var(--line-hair);
}
.refurb-key {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.refurb-val {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.refurb-sub {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-left: 6px;
  font-weight: 400;
}

/* ============ LISTING ============ */
.listing-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 0.5px solid var(--line-hair);
}
.lp-key {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.lp-val {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
}
.listing-copy {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  padding: 0 0 0 14px;
  border-left: 1px solid var(--ink);
  margin-bottom: 20px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.chip {
  padding: 5px 10px;
  background: var(--paper-2);
  border: 0.5px solid var(--line-hair);
  border-radius: 4px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ============ AUTH ============ */
.card-auth {
  background: var(--paper-2);
}
.auth-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.auth-top .eyebrow { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.auth-badge {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  font-weight: 500;
  padding: 4px 8px;
  background: var(--ink);
  border-radius: 3px;
}
.auth-body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 20px;
  letter-spacing: -0.005em;
}
.auth-body em {
  font-style: italic;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
}
.auth-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.auth-tier {
  padding: 16px 8px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.auth-tier:hover {
  border-color: var(--ink);
  background: var(--white);
}
.at-name {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
}
.at-turn {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.at-price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums lining-nums;
}
.at-featured {
  background: var(--ink);
  border-color: var(--ink);
}
.at-featured .at-name { color: var(--muted-2); }
.at-featured .at-turn { color: var(--dark-muted); }
.at-featured .at-price { color: var(--dark-ink); }

/* ============ LEGAL ============ */
.legal-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.legal-icon {
  color: var(--ink);
  margin-top: 2px;
  flex-shrink: 0;
}
.legal-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 6px;
}
.legal-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

/* ============ TRIP ============ */
.card-trip { background: var(--paper-2); }
.trip-list {
  list-style: none;
  margin-bottom: 20px;
}
.trip-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--line-hair);
}
.trip-list li.current {
  background: var(--paper);
  padding: 12px;
  margin: 4px -12px;
  border-radius: 6px;
  border: 0.5px solid var(--ink);
}
.trip-name {
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.trip-tag {
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-left: 6px;
  font-weight: 500;
  border: 0.5px solid var(--ink);
  padding: 2px 5px;
  border-radius: 2px;
}
.trip-val {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.trip-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 16px;
  border-top: 0.5px solid var(--line);
}
.tt-key {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.tt-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums lining-nums;
}
.trip-totals div:last-child .tt-val { color: var(--ink); }

/* ============ FOOTER ACTIONS ============ */
.footer-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 20px 0;
  border-top: 0.5px solid var(--line);
  background: var(--paper);
}
.fa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.06em;
  border-right: 0.5px solid var(--line-hair);
}
.fa-btn:last-child { border-right: none; }
.fa-btn.danger { color: var(--muted); }
.fa-btn:hover { color: var(--ink-2); background: var(--paper-2); }

.scroll-end {
  text-align: center;
  padding: 32px 20px 20px;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.brand-mark-full {
  height: 18px;
  width: auto;
  display: block;
  margin: 0 auto 12px;
  filter: invert(1) brightness(0);
  opacity: 0.55;
}
.scroll-end-sub {
  font-size: 10px;
  color: var(--muted-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.scroll-end-sub em { font-style: normal; color: var(--muted); }

.home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 4px;
  background: var(--ink);
  border-radius: 100px;
  opacity: 0.4;
}

/* ============ NOTES SECTION ============ */
.notes {
  padding: 60px 24px 100px;
  max-width: 900px;
  margin: 0 auto;
}
.notes-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  font-weight: 500;
}
.notes-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin-bottom: 40px;
  line-height: 1;
}
.notes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  border-top: 0.5px solid rgba(15, 14, 12, 0.15);
  padding-top: 32px;
}
.n-key {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 10px;
}
.n-val {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: -0.005em;
}

@media (max-width: 480px) {
  .stage { padding: 20px 8px; }
  .phone {
    width: 100%;
    max-width: 393px;
    height: 780px;
    border-radius: 40px;
  }
  .notes-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   PERSONA VIEW OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

/* Kill the original single-phone stage centering & sizing */
body.personas {
  background: var(--paper-4);
  padding: 0;
  min-height: 100vh;
}

.personas-stage {
  padding: 60px 32px 100px;
  max-width: 1440px;
  margin: 0 auto;
}

.personas-header {
  text-align: center;
  margin-bottom: 56px;
}
.personas-eyebrow {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.personas-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 40px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}
.personas-title em { font-style: italic; }
.personas-sub {
  font-size: 14px;
  color: var(--muted);
  margin-top: 14px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
.personas-hint {
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0.5px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
}
.personas-hint svg { opacity: 0.6; }

.personas-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 1200px) {
  .personas-row {
    grid-template-columns: 1fr;
    gap: 60px;
    max-width: 420px;
    margin: 0 auto;
  }
}

.persona-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.persona-label {
  text-align: center;
  margin-bottom: 24px;
  padding: 0 12px;
}
.persona-num {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.persona-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 8px;
}
.persona-name em { font-style: italic; }
.persona-tag {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  max-width: 300px;
  margin: 0 auto;
}

/* Persona phone — a fixed-height frame with scrolling contents */
.persona-phone {
  width: 100%;
  max-width: 380px;
  height: 780px;
  background: var(--paper);
  border-radius: 44px;
  border: 1px solid var(--line-2);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.02),
    0 24px 48px rgba(0,0,0,0.09);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.persona-phone .notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 24px;
  background: var(--ink);
  border-radius: 20px;
  z-index: 20;
  pointer-events: none;
}

.persona-phone .statusbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 14px 24px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 15;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  pointer-events: none;
}
.persona-phone .sb-right { display: flex; gap: 4px; align-items: center; }

/* Fixed nav that stays on top while content scrolls */
.persona-phone .navbar {
  position: absolute;
  top: 44px; left: 0; right: 0;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 14;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--line);
  border-radius: 0;
  min-height: 44px;
}
.persona-phone .nav-mode {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 3px 8px;
  border: 0.5px solid var(--line);
  border-radius: 3px;
}

/* THE ACTUAL SCROLL AREA */
.persona-phone .scroll {
  position: absolute;
  top: 88px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  padding: 0 0 60px;
}
.persona-phone .scroll::-webkit-scrollbar {
  width: 4px;
}
.persona-phone .scroll::-webkit-scrollbar-track {
  background: transparent;
}
.persona-phone .scroll::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 4px;
}

.persona-phone .home-indicator {
  position: absolute;
  bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 4px;
  background: var(--ink);
  border-radius: 4px;
  opacity: 0.4;
  z-index: 15;
  pointer-events: none;
}

/* Persona phones: cards go edge-to-edge, no side gutter */
.persona-phone .card {
  padding: 20px 18px;
  margin-bottom: 0;
  border-radius: 0;
  border-bottom: 0.5px solid var(--line);
}
.persona-phone .hero {
  margin: 0;
  border-radius: 0;
}
/* Event sliver + tag preview still get a small breath at top */
.persona-phone .event-sliver-inline {
  margin: 12px 14px;
  border-radius: 8px;
}
.persona-phone .title { font-size: 30px; }

/* Estate event sliver — sits at very top of the scroll for that persona */
.event-sliver-inline {
  padding: 12px 14px;
  background: var(--ink);
  color: white;
  border-radius: 8px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.event-sliver-inline .es-dot {
  width: 6px; height: 6px;
  background: white;
  border-radius: 50%;
  flex-shrink: 0;
}
.event-sliver-inline .es-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 3px;
}
.event-sliver-inline .es-stat {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  color: white;
  letter-spacing: -0.01em;
}
.event-sliver-inline .es-stat em { font-style: italic; color: rgba(255,255,255,0.6); font-size: 12px; margin-left: 4px; }

/* Sign-off at bottom of page */
.personas-signoff {
  text-align: center;
  margin-top: 80px;
  padding: 40px 0 20px;
  border-top: 0.5px solid var(--line);
}
.personas-signoff img {
  height: 16px;
  filter: invert(1) brightness(0);
  opacity: 0.4;
  margin-bottom: 12px;
}
.personas-signoff-copy {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ═══════════════════════════════════════════════════════════════
   PERSONA-SPECIFIC CUSTOM CARDS
   ═══════════════════════════════════════════════════════════════ */

/* ── Enthusiast: Verdict card ──────────────────────────────── */
.card-verdict {
  border-top: 0.5px solid var(--line);
}
.verdict-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 14px;
}
.verdict-body {
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 22px;
  max-width: 32ch;
}
.verdict-ladder {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.verdict-cell {
  padding: 14px 8px 14px;
  border-right: 0.5px solid var(--line);
  text-align: left;
}
.verdict-cell:last-child { border-right: none; }
.verdict-cell .vc-key {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.verdict-cell .vc-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.verdict-cell.walk .vc-val { color: var(--muted-2); }
.verdict-cell.fair { background: var(--paper-2); }

/* ── Reseller: Deal card ───────────────────────────────────── */
.card-deal {
  background: var(--paper-2);
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.deal-eyebrow {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.deal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 0.5px solid var(--line);
  border-left: 0.5px solid var(--line);
}
.deal-cell {
  padding: 14px 14px 14px;
  border-right: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  background: var(--paper);
}
.deal-cell .dc-key {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.deal-cell .dc-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.deal-cell .dc-val small {
  font-size: 11px;
  color: var(--muted-2);
  margin-left: 3px;
  letter-spacing: 0;
}

/* ── Reseller: Channel matrix ──────────────────────────────── */
.card-channels .channels-table {
  margin: 14px -18px 0;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.channels-head, .channels-row {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 0.75fr 0.7fr;
  padding: 10px 18px;
  align-items: center;
  gap: 8px;
}
.channels-head {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-bottom: 0.5px solid var(--line);
}
.channels-row {
  border-bottom: 0.5px solid var(--line-2);
  font-family: var(--font-ui);
}
.channels-row:last-child { border-bottom: none; }
.channels-row .cr-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.channels-row .cr-price {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.channels-row .cr-days {
  font-size: 11.5px;
  color: var(--muted);
}
.channels-row .cr-effort {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}
.channels-row .cr-effort .ed {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--paper-4);
}
.channels-row .cr-effort .ed.on { background: var(--ink); }

/* ── Reseller: Sourcing memo ───────────────────────────────── */
.card-memo {
  background: var(--paper-2);
}
.memo-eyebrow {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.memo-body {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.memo-body em { font-style: normal; font-family: var(--font-ui); font-size: 13px; color: var(--muted); }

/* ── Reseller: Inventory snapshot ──────────────────────────── */
.card-invsnap {
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.invsnap-eyebrow {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.invsnap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.invsnap-cell .is-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.invsnap-cell .is-key {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 4px;
}

/* ── Estate: Day 1 price input ─────────────────────────────── */
.card-priceinput {
  border-top: 0.5px solid var(--line);
}
.priceinput-eyebrow {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 16px;
}
.priceinput-field {
  display: flex;
  align-items: baseline;
  gap: 4px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.priceinput-field .pi-glyph {
  font-family: 'Ivory', serif;
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
}
.priceinput-field .pi-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
}
.priceinput-field .pi-caret {
  width: 1px;
  height: 40px;
  background: var(--ink);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.priceinput-suggest {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.priceinput-suggest em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
}
.priceinput-explain {
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-2);
  margin: 0;
}

/* ── Estate: Tag preview ───────────────────────────────────── */
.tag-eyebrow {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.tag-preview {
  background: #FBFAF6;
  border: 1px dashed var(--muted-2);
  padding: 20px 20px 18px;
  border-radius: 4px;
  position: relative;
}
.tag-preview .tp-topline {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.tag-preview .tp-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}
.tag-preview .tp-title em { font-style: italic; }
.tag-preview .tp-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 20px;
}
.tag-preview .tp-price {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 18px;
}
.tag-preview .tp-foot {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-top: 14px;
  border-top: 0.5px dashed var(--muted-2);
}
.tag-preview .tp-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 12px;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Estate: Lot assignment ────────────────────────────────── */
.card-lots {
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.lots-eyebrow {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.lots-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lot-chip {
  font-family: var(--font-ui);
  font-size: 11.5px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 0.5px solid var(--line);
  color: var(--muted);
  background: var(--paper);
  cursor: pointer;
}
.lot-chip.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.lot-chip.add {
  border-style: dashed;
  color: var(--muted-2);
}

/* ── ROI Calculator (Enthusiast + Reseller) ────────────────── */
.card-roi {
  background: var(--paper-2);
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.roi-eyebrow {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.roi-eyebrow .roi-hint {
  font-family: var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
  color: var(--muted);
}
.roi-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.roi-input {
  display: flex;
  flex-direction: column;
}
.roi-input .ri-key {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.roi-input .ri-field {
  display: flex;
  align-items: baseline;
  gap: 2px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
}
.roi-input .ri-glyph {
  font-family: 'Ivory', serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}
.roi-input input {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  min-width: 0;
  padding: 0;
  -moz-appearance: textfield;
}
.roi-input input::-webkit-outer-spin-button,
.roi-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.roi-output {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 0.5px solid var(--line);
  border-left: 0.5px solid var(--line);
  background: var(--paper);
}
.roi-cell {
  padding: 14px 14px;
  border-right: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.roi-cell .rc-key {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.roi-cell .rc-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.roi-cell.negative .rc-val { color: #8B1F1F; }
.roi-cell.positive .rc-val { color: var(--ink); }
.roi-fees {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted-2);
  margin-top: 10px;
  line-height: 1.5;
}
.roi-fees em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════
   APPRAISAL PAGE
   ═══════════════════════════════════════════════════════════════ */

/* Hero */
.card-appraisal-hero {
  background: var(--paper-2);
  border-bottom: 0.5px solid var(--line);
}
.ah-eyebrow {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 16px;
}
.ah-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 12px;
}
.ah-title em {
  font-style: italic;
  font-weight: 300;
}
.ah-sub {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 22px;
  max-width: 32ch;
}
.ah-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: 6px;
  align-items: center;
}
.ah-thumb {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.ah-item-body { min-width: 0; }
.ah-item-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 3px;
}
.ah-item-title em { font-style: italic; }
.ah-item-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
}

/* Waitlist card */
.card-waitlist {
  border-bottom: 0.5px solid var(--line);
}
.wl-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.wl-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
  animation: pulse 2s ease-in-out infinite;
}
.wl-label {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-family: var(--font-ui);
}
.wl-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}
.wl-headline em { font-style: italic; }
.wl-body {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 16px;
}
.wl-body em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 13.5px;
}
.wl-includes {
  list-style: none;
  padding: 14px 0;
  margin: 0 0 20px;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.wl-includes li {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  padding: 5px 0 5px 18px;
  position: relative;
}
.wl-includes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 0.5px;
  background: var(--muted-2);
}
.wl-cta { display: flex; flex-direction: column; gap: 14px; }
.wl-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wl-field {
  display: flex;
  flex-direction: column;
}
.wl-field .wl-key {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.wl-field input {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  border: none;
  border-bottom: 1px solid var(--ink);
  outline: none;
  background: transparent;
  padding: 6px 0;
  width: 100%;
}
.wl-field input::placeholder { color: var(--muted-2); }
.wl-vol-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wl-vol-chip {
  font-family: var(--font-ui);
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 0.5px solid var(--line);
  color: var(--muted);
  background: var(--paper);
  cursor: pointer;
}
.wl-vol-chip.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn.btn-full {
  width: 100%;
  flex: none;
  height: 56px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 8px;
  justify-content: center;
  gap: 10px;
}
.btn.btn-full svg {
  width: 14px;
  height: 14px;
}
.wl-social {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.wl-avatars {
  display: flex;
}
.wl-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper-4);
  border: 1.5px solid var(--paper);
  margin-left: -6px;
}
.wl-avatar:first-child { margin-left: 0; background: var(--paper-3); }
.wl-avatar:nth-child(2) { background: var(--paper-4); }
.wl-avatar:nth-child(3) { background: var(--muted-2); }
.wl-social-text {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--muted);
}
.wl-social-text em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 12.5px;
}

/* OR divider */
.card-or-divider {
  padding: 18px 0 !important;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper-2);
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.or-line {
  flex: 1;
  height: 0.5px;
  background: var(--line);
}
.or-text {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Auth included list on Appraisal page */
.auth-included {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  border-top: 0.5px solid var(--line);
  padding-top: 14px;
}
.auth-included li {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  padding: 4px 0;
  display: flex;
  gap: 10px;
}
.auth-included .ai-check {
  color: var(--ink);
  font-size: 11px;
  width: 12px;
  flex-shrink: 0;
}
.auth-included .ai-check.muted {
  color: var(--muted-2);
}
.auth-included li:has(.ai-check.muted) {
  color: var(--muted-2);
}

/* FAQ */
.card-faq { padding-bottom: 8px !important; }
.faq-item {
  border-bottom: 0.5px solid var(--line-2);
  padding: 12px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  padding-right: 20px;
  position: relative;
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-family: 'Ivory', serif;
  font-weight: 300;
  font-size: 18px;
  color: var(--muted);
  line-height: 1;
}
.faq-item[open] summary::after {
  content: '−';
}
.faq-body {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  padding: 10px 0 4px;
  max-width: 34ch;
}

/* ═══════════════════════════════════════════════════════════════
   STICKY BOTTOM ACTION BAR (per phone)
   ═══════════════════════════════════════════════════════════════ */
.persona-phone .action-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 10px;
  padding: 14px 16px 26px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--line);
  z-index: 16;
}
/* Make room in the scroll area so content never hides behind the bar */
.persona-phone.has-actions .scroll,
.persona-phone:has(.action-bar) .scroll {
  bottom: 82px;
  padding-bottom: 24px;
}
/* Home indicator drops into the bar row */
.persona-phone.has-actions .home-indicator,
.persona-phone:has(.action-bar) .home-indicator {
  bottom: 8px;
  z-index: 17;
  opacity: 0.35;
}
.ab-btn {
  flex: 1;
  height: 46px;
  border: 0.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  padding: 0 16px;
  white-space: nowrap;
  text-decoration: none;
}
.ab-btn:hover { background: var(--paper-2); }
.ab-btn:active { transform: scale(0.98); }
.ab-btn svg { flex-shrink: 0; }
.ab-btn.ab-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  flex: 2;
}
.ab-btn.ab-primary:hover { background: var(--ink-2, #1a1a1a); }
.ab-btn.ab-danger {
  color: var(--muted);
}
.ab-btn.ab-danger:hover {
  color: var(--ink);
  background: var(--paper-2);
}
.ab-btn.ab-ghost {
  flex: 0 0 auto;
  width: 46px;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════
   INVENTORY ITEM VIEW
   ═══════════════════════════════════════════════════════════════ */

/* --- Enthusiast hero --- */
.card-inv-hero {
  background: var(--paper-2);
  border-bottom: 0.5px solid var(--line);
  padding: 0 !important;
}
.ih-thumb-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.ih-thumb-lg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ih-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border: 0.5px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ih-body {
  padding: 18px 18px 22px;
}
.ih-eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.ih-eyebrow em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.02em;
}
.ih-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 6px;
}
.ih-title em { font-style: italic; font-weight: 300; }
.ih-meta {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--muted);
}

/* --- Owned / value delta --- */
.card-owned { border-bottom: 0.5px solid var(--line); }
.ow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-top: 4px;
}
.ow-cell {}
.ow-cell-full { grid-column: 1 / -1; padding-top: 6px; border-top: 0.5px solid var(--line); }
.ow-key {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.ow-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}
.ow-val-good { color: var(--ink); }
.ow-pct {
  font-size: 14px;
  color: var(--muted);
  margin-left: 4px;
}
.ow-sub {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.ow-spark {
  margin-top: 12px;
  color: var(--ink);
}
.ow-spark svg { display: block; }
.ow-spark-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 9px;
  color: var(--muted-2);
  letter-spacing: 0.05em;
}

/* --- Story --- */
.card-story { border-bottom: 0.5px solid var(--line); }
.st-note {
  font-family: 'Ivory', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 34ch;
}
.st-edit {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* --- Social preview --- */
.card-social-preview { border-bottom: 0.5px solid var(--line); }
.sp-lead {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 16px;
}
.sp-lead em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 13.5px;
}
.sp-post {
  border: 0.5px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
}
.sp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.sp-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper-3);
  flex-shrink: 0;
}
.sp-name {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.sp-name em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-weight: 300;
}
.sp-when {
  font-size: 10px;
  color: var(--muted-2);
  margin-top: 1px;
}
.sp-priv {
  border: 0.5px solid var(--line);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sp-img {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: var(--paper-3);
}
.sp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sp-caption {
  font-family: 'Ivory', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  padding: 12px 12px 8px;
}
.sp-tags {
  display: flex;
  gap: 6px;
  padding: 0 12px 10px;
  flex-wrap: wrap;
}
.sp-tag {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  border: 0.5px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
}
.sp-stats {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-top: 0.5px solid var(--line);
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  align-items: center;
}
.sp-stats em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 12px;
}
.sp-btn {
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 0.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  margin-top: 4px;
}
.sp-btn:hover { background: var(--paper-2); }

/* --- CTA inline card --- */
.card-inv-cta {
  background: var(--paper-2);
  border-bottom: 0.5px solid var(--line);
}
.ic-body {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 8px 0 12px;
}
.ic-body em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 13.5px;
}
.ic-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 0.5px solid var(--ink);
}

/* --- Docs list --- */
.card-docs { border-bottom: 0.5px solid var(--line); }
.dc-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 14px;
  border-top: 0.5px solid var(--line);
  padding-top: 12px;
}
.dc-list li {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  padding: 5px 0;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.dc-list li em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 12.5px;
  margin-left: auto;
}
.dc-check {
  color: var(--ink);
  font-size: 11px;
  width: 12px;
}
.dc-check.muted { color: var(--muted-2); }
.dc-list li:has(.dc-check.muted) { color: var(--muted-2); }
.dc-btn {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* --- Reseller SKU card --- */
.card-sku {
  background: var(--paper-2);
  border-bottom: 0.5px solid var(--line);
}
.sku-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.sku-thumb {
  width: 74px;
  height: 74px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 0.5px solid var(--line);
}
.sku-body { min-width: 0; }
.sku-code {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}
.sku-code em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
}
.sku-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 4px;
}
.sku-title em { font-style: italic; }
.sku-meta {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--muted);
}
.sku-meta em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 12.5px;
}
.sku-status-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sku-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--ink);
  padding: 4px 9px;
  background: var(--paper);
  border-radius: 999px;
  border: 0.5px solid var(--line);
}
.sku-chip em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
}
.sku-chip-line { color: var(--muted); }
.sku-chip-line em { color: var(--ink); }
.sku-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}

/* --- Margin ladder --- */
.card-margin { border-bottom: 0.5px solid var(--line); }
.mg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 18px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--line);
}
.mg-key {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.mg-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.05;
}
.mg-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
}
.mg-ladder {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mgl-row {
  display: grid;
  grid-template-columns: 78px 1fr 80px;
  gap: 12px;
  align-items: center;
}
.mgl-label {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.mgl-bar {
  height: 6px;
  background: var(--paper-3);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.mgl-bar span {
  display: block;
  height: 100%;
  background: var(--muted-2);
  border-radius: 3px;
}
.mgl-row-on .mgl-label { color: var(--ink); font-weight: 500; }
.mgl-row-on .mgl-bar span { background: var(--ink); }
.mgl-price {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  color: var(--ink);
  text-align: right;
  letter-spacing: -0.01em;
}

/* --- Channel dashboard (active) --- */
.card-channels-active { border-bottom: 0.5px solid var(--line); padding: 20px 0 !important; }
.card-channels-active .eyebrow { padding: 0 18px 12px; }
.ca-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 0.5px solid var(--line);
}
.ca-row-alt { background: var(--paper-2); }
.ca-row .ca-name {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  grid-column: 1 / 2;
}
.ca-stats {
  grid-column: 1 / 2;
  grid-row: 2;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}
.ca-price {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  font-style: normal;
  letter-spacing: -0.01em;
}
.ca-price-suggest {
  color: var(--muted);
  font-style: italic;
}
.ca-views { color: var(--muted); }
.ca-status {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  font-family: var(--font-ui);
  font-size: 10.5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 0.5px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.ca-status-on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.ca-post {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  border-bottom: 0.5px solid var(--ink);
  text-decoration: none;
}

/* --- Reprice --- */
.card-reprice { border-bottom: 0.5px solid var(--line); }
.rp-body {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 4px 0 14px;
}
.rp-body em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 13.5px;
}
.rp-actions { display: flex; gap: 8px; }
.rp-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 6px;
  border: 0.5px solid var(--line);
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
}
.rp-btn-on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* --- Task list --- */
.card-tasks { border-bottom: 0.5px solid var(--line); }
.tk-list { list-style: none; padding: 0; margin: 4px 0 0; }
.tk-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
}
.tk-list li em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 12.5px;
  margin-left: auto;
}
.tk-box {
  width: 16px;
  height: 16px;
  border: 0.5px solid var(--line-2);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  font-size: 10px;
}
.tk-box.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tk-list li:has(.tk-box:not(.on)) { color: var(--muted); }

/* --- Estate day ladder --- */
.card-day-ladder { border-bottom: 0.5px solid var(--line); }
.dl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.dl-cell {
  padding: 12px 10px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: 6px;
  text-align: left;
}
.dl-cell-on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.dl-cell-on .dl-day,
.dl-cell-on .dl-sub { color: rgba(255,255,255,0.7); }
.dl-day {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.dl-price {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1;
}
.dl-sub {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* --- Tag preview --- */
.card-tag-preview { border-bottom: 0.5px solid var(--line); }
.tp-tag {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--paper);
  border: 0.5px dashed var(--line-2);
  border-radius: 6px;
  align-items: center;
  margin: 6px 0 14px;
}
.tp-qr {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.tp-body { min-width: 0; }
.tp-num {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}
.tp-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 3px;
}
.tp-prov {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.tp-price {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tp-print {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* --- Consignment flag (estate) --- */
.card-consign-flag { border-bottom: 0.5px solid var(--line); background: var(--paper-2); }
.cf-body {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 4px 0 16px;
}
.cf-body em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 13.5px;
}
.cf-status { display: flex; flex-direction: column; gap: 8px; }
.cf-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--muted-2);
  padding: 5px 0;
}
.cf-step em {
  font-family: var(--font-display);
  font-style: italic;
  color: inherit;
  font-size: 12.5px;
  margin-left: 4px;
}
.cf-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0.5px solid var(--line-2);
  background: transparent;
  flex-shrink: 0;
}
.cf-step.done { color: var(--muted); }
.cf-step.done .cf-dot { background: var(--ink); border-color: var(--ink); }
.cf-step.on { color: var(--ink); font-weight: 500; }
.cf-step.on .cf-dot {
  background: var(--paper);
  border: 2px solid var(--ink);
}

/* --- Prior sales --- */
.card-priors { border-bottom: 0.5px solid var(--line); }
.pr-list { list-style: none; padding: 0; margin: 4px 0 0; }
.pr-list li {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 0.5px solid var(--line-2);
  font-family: var(--font-ui);
  font-size: 12px;
}
.pr-list li:first-child { border-top: none; }
.pr-date { color: var(--muted-2); font-size: 10.5px; letter-spacing: 0.06em; }
.pr-item { color: var(--ink); }
.pr-price {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   MANAGEMENT SURFACES
   ═══════════════════════════════════════════════════════════════ */

/* --- Nav tabs in navbar --- */
.mg-navtabs {
  display: flex;
  gap: 14px;
  flex: 1;
  padding-left: 4px;
}
.mg-tab {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
  padding: 2px 0;
  border-bottom: 1.5px solid transparent;
  cursor: pointer;
}
.mg-tab.on {
  color: var(--ink);
  font-weight: 500;
  border-bottom-color: var(--ink);
}

/* --- KPI strip --- */
.card-kpi-strip {
  background: var(--paper-2);
  border-bottom: 0.5px solid var(--line);
  padding: 16px 18px !important;
}
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
.kpi-cell {}
.kpi-key {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 5px;
}
.kpi-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.kpi-val em { font-style: italic; }
.kpi-sub {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  margin-left: 2px;
  letter-spacing: 0;
}

/* --- Filter bar --- */
.card-filter-bar {
  background: var(--paper);
  border-bottom: 0.5px solid var(--line);
  padding: 12px 18px !important;
}
.fb-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.fb-chip {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 999px;
  border: 0.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  white-space: nowrap;
}
.fb-chip em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 12px;
}
.fb-chip.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.fb-chip.on em { color: var(--paper); }
.fb-chip-alert em { color: var(--ink); font-weight: 500; }
.fb-sort {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
}
.fb-sort-key { text-transform: uppercase; letter-spacing: 0.14em; }
.fb-sort-val { color: var(--ink); font-weight: 500; }

/* --- List (SKU rows) --- */
.card-list {
  padding: 0 !important;
  border-bottom: 0.5px solid var(--line);
}
.lr {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-top: 0.5px solid var(--line);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.lr:first-child { border-top: none; }
.lr:hover { background: var(--paper-2); }
.lr-thumb {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  object-fit: cover;
  border: 0.5px solid var(--line);
}
.lr-thumb-plc {
  background: var(--paper-3);
  border: 0.5px solid var(--line);
}
.lr-body { min-width: 0; }
.lr-title {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 3px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lr-title em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-weight: 300;
}
.lr-meta {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
}
.lr-meta em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
}
.lr-price {
  text-align: right;
  min-width: 62px;
}
.lr-p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.lr-p em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 12.5px;
}
.lr-margin {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.lr-status {
  position: absolute;
  right: 18px;
  bottom: 10px;
  font-family: var(--font-ui);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 0.5px solid var(--line-2);
  color: var(--muted-2);
  background: var(--paper);
}
.lr-status.on { color: var(--ink); border-color: var(--ink); }
.lr-status.alert {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper-3);
  font-weight: 500;
}
.lr-status.consign {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.lr-status.draft {
  color: var(--muted);
  background: var(--paper-2);
  border-color: var(--line);
}

/* --- Alert card --- */
.card-alert {
  background: var(--paper-3);
  border-bottom: 0.5px solid var(--line);
}
.al-eyebrow {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.al-body {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 14px;
}
.al-body em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 13.5px;
}
.al-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-bottom: 0.5px solid var(--ink);
  padding-bottom: 3px;
}

/* --- Estate cards --- */
.card-estate {
  border-bottom: 0.5px solid var(--line);
}
.es-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.es-name-lg {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.es-name-lg em { font-style: italic; }
.es-pill {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.es-pill.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.es-pill.muted {
  color: var(--muted-2);
  background: var(--paper-2);
}
.es-meta {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 16px;
}
.es-meta em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 12.5px;
}

/* Estate progress steps */
.es-progress {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  margin-bottom: 14px;
}
.ep-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ep-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 0.5px solid var(--line-2);
}
.ep-step.done .ep-dot { background: var(--ink); border-color: var(--ink); }
.ep-step.on .ep-dot {
  background: var(--paper);
  border: 2px solid var(--ink);
}
.ep-label {
  font-family: var(--font-ui);
  font-size: 9.5px;
  color: var(--muted-2);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.ep-step.done .ep-label { color: var(--muted); }
.ep-step.on .ep-label { color: var(--ink); font-weight: 500; }
.ep-line {
  flex: 1;
  height: 0.5px;
  background: var(--line-2);
  margin: 0 4px;
  margin-bottom: 22px;
}
.ep-line.done { background: var(--ink); }
.ep-line.on {
  background: linear-gradient(to right, var(--ink) 50%, var(--line-2) 50%);
}

/* Estate stats row */
.es-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
}
.est-stat {}
.est-k {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
  white-space: nowrap;
}
.est-v {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
}
.est-sub {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted);
  margin-left: 1px;
}
.est-avatars {
  display: flex;
  align-items: center;
}
.est-avatars span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper-4);
  border: 1px solid var(--paper);
  margin-left: -4px;
}
.est-avatars span:first-child { margin-left: 0; background: var(--paper-3); }
.est-avatars span:nth-child(2) { background: var(--muted-2); }
.est-avatars span:nth-child(3) { background: var(--paper-4); }
.est-avatars em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 11px;
  margin-left: 6px;
}

/* Consignment pipeline */
.card-consign-pipeline { border-bottom: 0.5px solid var(--line); }
.cp-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-top: 0.5px solid var(--line-2);
}
.cp-row:first-of-type { border-top: none; }
.cp-count {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -0.02em;
  min-width: 32px;
}
.cp-stage {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--muted);
}

/* --- Store floor plan --- */
.card-floor { border-bottom: 0.5px solid var(--line); }
.floor-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted);
  margin: 4px 0 14px;
}
.floor-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fl-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 0.5px solid var(--line);
}
.fl-swatch.fl-active { background: var(--paper-3); }
.fl-swatch.fl-vacant { background: var(--paper); border-style: dashed; }
.fl-swatch.fl-overdue { background: repeating-linear-gradient(45deg, var(--paper-3), var(--paper-3) 3px, var(--ink) 3px, var(--ink) 4px); }
.fl-swatch.fl-hot { background: var(--ink); }
.floor-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.fl-cell {
  aspect-ratio: 1 / 1;
  border: 0.5px solid var(--line);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 3px;
  overflow: hidden;
}
.fl-cell span {
  font-family: var(--font-ui);
  font-size: 8.5px;
  letter-spacing: 0.05em;
  color: var(--ink);
  font-weight: 500;
}
.fl-cell em {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 7.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
}
.fl-cell.fl-active { background: var(--paper-3); }
.fl-cell.fl-vacant {
  background: var(--paper);
  border-style: dashed;
  border-color: var(--line-2);
}
.fl-cell.fl-vacant span { color: var(--muted-2); }
.fl-cell.fl-overdue {
  background: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 4px, var(--paper-3) 4px, var(--paper-3) 6px);
}
.fl-cell.fl-hot {
  background: var(--ink);
}
.fl-cell.fl-hot span { color: var(--paper); }
.fl-cell.fl-hot em { color: rgba(255,255,255,0.65); }

/* --- Booth list --- */
.card-booth-list {
  border-bottom: 0.5px solid var(--line);
  padding: 20px 0 !important;
}
.card-booth-list .eyebrow { padding: 0 18px 12px; }
.bl-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 0.5px solid var(--line);
}
.bl-row-hot { background: var(--paper-2); }
.bl-row-alert {}
.bl-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 4px 8px;
  border: 0.5px solid var(--line);
  border-radius: 4px;
  text-align: center;
  background: var(--paper);
}
.bl-row-hot .bl-num {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.bl-body { min-width: 0; }
.bl-vendor {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 3px;
}
.bl-meta {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
}
.bl-meta em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
}
.bl-warn {
  color: var(--ink) !important;
  font-weight: 500;
  border-bottom: 0.5px solid var(--ink);
  padding-bottom: 1px;
}
.bl-stats {
  text-align: right;
}
.bl-sales {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.bl-sub {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.bl-sub em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11px;
}
.bl-more {
  display: block;
  margin: 10px 18px 0;
  padding-bottom: 3px;
  border-bottom: 0.5px solid var(--line);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-color: var(--line);
  cursor: pointer;
  text-align: left;
}

/* --- Checkout demo --- */
.card-checkout {
  background: var(--paper-2);
  border-bottom: 0.5px solid var(--line);
}
.co-body {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin: 4px 0 14px;
}
.co-example {
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
}
.co-line {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  border-top: 0.5px solid var(--line-2);
}
.co-line:first-child { border-top: none; }
.co-k { color: var(--muted); }
.co-v { color: var(--ink); }
.co-v em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 12.5px;
}
.co-line-total {
  border-top: 0.5px solid var(--ink);
  margin-top: 4px;
  padding-top: 10px;
}
.co-line-total .co-k,
.co-line-total .co-v {
  font-weight: 500;
  color: var(--ink);
}
.co-line-total .co-v {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16px;
}

/* --- Vendor waitlist strip --- */
.card-waitlist-strip { border-bottom: 0.5px solid var(--line); }
.ws-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 0;
  border-top: 0.5px solid var(--line-2);
  align-items: center;
}
.ws-row:first-of-type { border-top: 0.5px solid var(--line); margin-top: 4px; padding-top: 12px; }
.ws-name {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  grid-column: 1 / 2;
}
.ws-meta {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  grid-column: 1 / 2;
}
.ws-meta em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
}
.ws-cta {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0 0 3px;
  border-bottom: 0.5px solid var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   INVENTORY-ITEM · Editable identity + Estate controls
   ═══════════════════════════════════════════════════════════════ */

/* Re-scan button in hero overlay */
.hero-btn {
  background: rgba(0,0,0,0.55);
  border: 0.5px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-btn:hover { background: rgba(0,0,0,0.75); }

/* Editable identity card */
.card-edit-id {
  border-bottom: 0.5px solid var(--line);
}
.ed-field {
  display: block;
  padding: 10px 0;
  border-top: 0.5px solid var(--line-2);
  cursor: text;
}
.ed-field-first {
  border-top: none;
  padding-top: 2px;
}
.ed-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.ed-input {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  padding: 3px 0;
  border-bottom: 0.5px dashed var(--line-2);
  position: relative;
}
.ed-input em {
  font-style: italic;
  color: var(--muted);
  font-weight: 300;
}
.ed-input-price {
  font-size: 24px;
  letter-spacing: -0.02em;
}
.ed-caret {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--ink);
  margin-left: 2px;
  vertical-align: -3px;
  animation: caret-blink 1.1s steps(2, start) infinite;
  opacity: 0;
}
.ed-field:hover .ed-caret,
.ed-field:focus-within .ed-caret { opacity: 1; }
@keyframes caret-blink {
  to { visibility: hidden; }
}
.ed-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--line-2);
}

/* ─── Estate controls: rooms / auto-discount / mark sold ─── */
.card-estate-controls {
  border-bottom: 0.5px solid var(--line);
}
.ec-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 0.5px solid var(--line-2);
}
.ec-row:first-of-type {
  border-top: 0.5px solid var(--line);
  margin-top: 4px;
}
.ec-key { min-width: 0; }
.ec-title {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 3px;
}
.ec-sub {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.ec-sub em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 12px;
}
.ec-btn {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0 0 3px;
  border-bottom: 0.5px solid var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.ec-btn-mark {
  padding: 8px 14px;
  border: 0.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}

.ec-room-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 0 10px;
}
.ec-room {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  padding: 5px 11px;
  border-radius: 999px;
  border: 0.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  white-space: nowrap;
}
.ec-room.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
}

/* iOS-style toggle */
.ec-toggle {
  display: inline-block;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--paper-4);
  border: 0.5px solid var(--line);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.ec-toggle .ec-knob {
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 19px;
  height: 19px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: left 0.18s ease;
}
.ec-toggle.on {
  background: var(--ink);
  border-color: var(--ink);
}
.ec-toggle.on .ec-knob {
  left: 20px;
}

.ec-row-danger {
  border-top: 0.5px solid var(--line);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   MANAGEMENT · search input, tab counts, new estate cards
   ═══════════════════════════════════════════════════════════════ */

/* Tab count badge */
.mg-tab .tab-count {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  padding: 1px 5px 2px;
  border-radius: 999px;
  margin-left: 4px;
  letter-spacing: 0;
  vertical-align: 1px;
  min-width: 16px;
  display: inline-block;
  text-align: center;
}
.mg-tab:not(.on) .tab-count {
  background: var(--paper-4);
  color: var(--muted);
}

/* --- Search bar --- */
.card-search {
  padding: 12px 18px !important;
  border-bottom: 0.5px solid var(--line);
}
.sr-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 0.5px solid var(--line);
  border-radius: 8px;
  cursor: text;
}
.sr-icon { color: var(--muted); flex-shrink: 0; }
.sr-placeholder {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--muted);
}
.sr-shortcut {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted-2);
  padding: 2px 5px;
  border: 0.5px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  letter-spacing: 0.05em;
}

/* --- Unassigned callout --- */
.card-unassigned-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--paper-3);
  border-bottom: 0.5px solid var(--line);
  padding: 14px 18px !important;
}
.ua-icon {
  color: var(--ink);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ua-body { min-width: 0; }
.ua-title {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.35;
  font-weight: 500;
}
.ua-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
}
.ua-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
}
.ua-cta {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0 0 3px;
  border-bottom: 0.5px solid var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   Estate cards v2 · cover + progress + stats
   ═══════════════════════════════════════════════════════════════ */

.card-estate-v2 {
  display: block;
  padding: 0 !important;
  text-decoration: none;
  color: inherit;
  border-bottom: 0.5px solid var(--line);
  background: var(--paper);
}
.card-estate-v2:hover { background: var(--paper-2); }

/* Cover band */
.ev-cover {
  position: relative;
  aspect-ratio: 3 / 1.4;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.ev-cover-b {
  background: linear-gradient(135deg, var(--paper-3), var(--paper-4) 60%, var(--ink) 180%);
  color: var(--ink);
}
.ev-cover-c {
  background: repeating-linear-gradient(45deg, var(--paper-2) 0 6px, var(--paper-3) 6px 12px);
  color: var(--ink);
}
.ev-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.72);
}
.ev-status {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  z-index: 2;
}
.ev-cover-b .ev-status,
.ev-cover-c .ev-status {
  background: var(--paper);
  border: 0.5px solid var(--line);
}
.ev-status.ev-status-on {
  background: var(--ink);
  color: var(--paper);
}
.ev-status.muted {
  background: rgba(255,255,255,0.85);
  color: var(--muted);
}
.ev-cover-c .ev-status.muted {
  background: var(--paper-2);
  color: var(--muted);
  border: 0.5px solid var(--line);
}
.ev-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper);
  animation: ev-pulse 1.8s infinite ease-in-out;
  flex-shrink: 0;
}
@keyframes ev-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.ev-header {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  z-index: 2;
}
.ev-eyebrow {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.75;
  margin-bottom: 4px;
}
.ev-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 30px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: currentColor;
  margin: 0;
}
.ev-name em { font-style: italic; }

/* Cover-b / Cover-c text on light backgrounds */
.ev-cover-b .ev-eyebrow,
.ev-cover-c .ev-eyebrow { opacity: 0.6; }
.ev-cover:not(.ev-cover-b):not(.ev-cover-c)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}

/* Progress row */
.ev-progress-wrap {
  padding: 14px 18px 12px;
  border-top: 0.5px solid var(--line);
}
.ev-progress-key {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.ev-p-stage {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.ev-p-stage em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-weight: 300;
  font-size: 12.5px;
  margin-left: 2px;
}
.ev-p-of {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
}
.ev-p-of em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted-2);
}
.ev-progress {
  height: 3px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.ev-progress-fill {
  height: 100%;
  background: var(--ink);
  border-radius: 999px;
}

/* Stats row (4-col compact) */
.ev-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 4px 18px 16px;
}
.ev-stat {}
.ev-k {
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
  white-space: nowrap;
}
.ev-v {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
}
.ev-sub {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted);
  margin-left: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   SOLO PHONE LAYOUTS · unassigned + estate-detail
   ═══════════════════════════════════════════════════════════════ */

.personas-row-solo {
  justify-content: center;
  gap: 60px;
  align-items: flex-start;
}
.persona-col-solo {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Side annotation sheet (floats to right of phone) */
.side-sheet {
  position: absolute;
  top: 220px;
  left: calc(50% + 220px);
  width: 320px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  z-index: 10;
}
.side-sheet::before {
  content: '';
  position: absolute;
  top: 40px;
  left: -8px;
  width: 16px;
  height: 16px;
  background: var(--paper);
  border-left: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  transform: rotate(45deg);
}
.ss-eyebrow {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.ss-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.15;
}
.ss-title em { font-style: italic; }
.ss-options {
  display: flex;
  flex-direction: column;
  border-top: 0.5px solid var(--line);
}
.ss-opt {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 0.5px solid var(--line);
  cursor: pointer;
}
.ss-r {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--paper);
  position: relative;
}
.ss-opt.on .ss-r {
  border-color: var(--ink);
  background: var(--ink);
}
.ss-opt.on .ss-r::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--paper);
}
.ss-o-body { min-width: 0; }
.ss-o-name {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 2px;
}
.ss-o-name em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-weight: 300;
  font-size: 14px;
}
.ss-o-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
}
.ss-o-count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
}
.ss-opt-alt .ss-r { border-style: dashed; }
.ss-opt-alt .ss-o-name em {
  color: var(--ink);
  font-weight: 400;
}
.ss-divide {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted-2);
  text-align: center;
  padding: 12px 0 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ss-alt-btn {
  width: 100%;
  padding: 12px;
  border: 0.5px solid var(--ink);
  background: var(--paper);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
}
.ss-alt-btn em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  font-size: 13.5px;
}

/* Hide side sheet on narrow screens */
@media (max-width: 1100px) {
  .side-sheet { display: none; }
}

/* Nav title block (for estate detail) */
.nav-title-block {
  flex: 1;
  text-align: center;
  padding: 0 8px;
  overflow: hidden;
}
.nav-title-eye {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1px;
}
.nav-title-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}

/* Selection bar (bulk actions strip) */
.card-selection-bar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 0.5px solid var(--ink);
  padding: 12px 18px !important;
}
.sb-count {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--paper);
  padding-right: 12px;
  border-right: 0.5px solid rgba(255,255,255,0.2);
}
.sb-count em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
}
.sb-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}
.sb-a {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink);
  background: var(--paper);
  border: 0.5px solid var(--paper);
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
}
.sb-a-ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255,255,255,0.35);
}
.sb-a-dismiss {
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1;
}

/* Group header (between cards) */
.ug-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 18px 8px;
  background: var(--paper-2);
  border-bottom: 0.5px solid var(--line-2);
}
.ug-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ug-title em { font-style: italic; color: var(--muted); }
.ug-meta {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
}
.ug-meta em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
}
.ug-more {
  display: block;
  width: 100%;
  padding: 12px 18px;
  background: none;
  border: none;
  border-top: 0.5px solid var(--line);
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}

/* List row · selection variant */
.lr-sel {
  grid-template-columns: 22px 44px 1fr auto !important;
  cursor: pointer;
}
.lr-check {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--paper);
  cursor: pointer;
  position: relative;
  margin: 0;
}
.lr-check:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.lr-check:checked::after {
  content: '';
  position: absolute;
  top: 3px; left: 5px;
  width: 5px; height: 9px;
  border-right: 1.5px solid var(--paper);
  border-bottom: 1.5px solid var(--paper);
  transform: rotate(45deg);
}
.lr-sel.selected { background: var(--paper-2); }

/* Help card */
.card-help-inline { background: var(--paper-2); border-bottom: 0.5px solid var(--line); }
.hi-eyebrow {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.hi-body {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Estate detail · cover + countdown + readiness + team
   ═══════════════════════════════════════════════════════════════ */

.card-detail-cover { border-bottom: 0.5px solid var(--line); }
.dc-cover {
  position: relative;
  aspect-ratio: 3 / 1.7;
  overflow: hidden;
  background: var(--ink);
}
.dc-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.68);
}
.dc-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
  z-index: 1;
}
.dc-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  color: var(--paper);
}
.dc-eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 8px;
}
.dc-count {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.dc-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 72px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--paper);
}
.dc-num em { font-style: italic; }
.dc-unit {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--paper);
  opacity: 0.8;
  padding-bottom: 8px;
  line-height: 1.2;
}
.dc-mode-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

/* Readiness bars */
.card-readiness { border-bottom: 0.5px solid var(--line); }
.rd-row {
  display: grid;
  grid-template-columns: 92px 1fr 62px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 0.5px solid var(--line-2);
}
.rd-row:first-of-type {
  border-top: 0.5px solid var(--line);
  margin-top: 6px;
  padding-top: 12px;
}
.rd-key {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.rd-bar {
  height: 4px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.rd-bar span {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: 999px;
}
.rd-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 12px;
  color: var(--ink);
  text-align: right;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.rd-val.done {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Room-filter chip strip */
.card-room-filter { border-bottom: 0.5px solid var(--line); }
.rf-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.rf-chip {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink);
  padding: 5px 11px;
  border-radius: 999px;
  border: 0.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  white-space: nowrap;
}
.rf-chip em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-weight: 300;
  margin-left: 3px;
  font-size: 11.5px;
}
.rf-chip.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
}
.rf-chip.on em { color: rgba(255,255,255,0.7); }

/* Team mini roster */
.card-team-mini { border-bottom: 0.5px solid var(--line); }
.tm-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 0.5px solid var(--line-2);
}
.tm-row:first-of-type {
  border-top: 0.5px solid var(--line);
  margin-top: 6px;
  padding-top: 12px;
}
.tm-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper-3);
  border: 0.5px solid var(--line);
}
.tm-a-1 { background: linear-gradient(135deg, var(--paper-4), var(--muted-2)); }
.tm-a-2 { background: linear-gradient(135deg, var(--paper-3), var(--paper-4)); }
.tm-a-3 { background: repeating-linear-gradient(45deg, var(--paper-3), var(--paper-3) 3px, var(--paper-4) 3px, var(--paper-4) 6px); }
.tm-body { min-width: 0; }
.tm-name {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}
.tm-role {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}
.tm-role em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
}
.tm-conf {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 3px 8px;
  border: 0.5px solid var(--ink);
  border-radius: 999px;
}
.tm-conf-pend {
  color: var(--muted-2);
  border-color: var(--line);
  border-style: dashed;
}
.tm-row-cta {
  grid-template-columns: 1fr;
  padding: 12px 0;
  justify-content: center;
}
.tm-more {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  border-bottom: 0.5px solid var(--line);
  padding-bottom: 3px;
  align-self: center;
  justify-self: center;
}

/* ═══════════════════════════════════════════════════════════════
   COVER · updated (mode pill + address bottom, count centered)
   ═══════════════════════════════════════════════════════════════ */
.dc-mode-pill {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  margin-bottom: 12px;
}
.dc-mode-pill em {
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11.5px;
  color: var(--ink);
  margin-left: 2px;
}
.dc-mode-pill-managed {
  background: transparent;
  border: 0.5px solid rgba(255,255,255,0.6);
  color: var(--paper);
}
.dc-mode-pill-managed em { color: var(--paper); }
.dc-addr {
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--paper);
  opacity: 0.75;
  margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   MARGIN BAND · purchased variant
   COMMISSION BAND · family-managed variant (shares .mb-* layout)
   ═══════════════════════════════════════════════════════════════ */
.card-margin-band,
.card-commission-band {
  background: var(--paper-2);
  border-bottom: 0.5px solid var(--line);
}
.mb-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.mb-eye {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.mb-note {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
}
.mb-tri {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.mb-cell { text-align: center; }
.mb-key {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}
.mb-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.mb-val em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}
.mb-val-strong {
  font-size: 26px;
}
.mb-sep {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--muted-2);
  font-size: 16px;
  text-align: center;
  padding: 0 2px;
}
.mb-sep .glyph { font-size: 18px; }

/* Break-even bar */
.mb-bar { margin-top: 14px; }
.mb-bar-track {
  position: relative;
  height: 8px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: visible;
  border: 0.5px solid var(--line);
}
.mb-bar-recouped {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--ink);
  border-radius: 999px;
}
.mb-bar-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--ink);
  transform: translateX(-1px);
}
.mb-bar-marker::before {
  content: '';
  position: absolute;
  top: -3px; left: -3px;
  width: 8px;
  height: 8px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 50%;
}
.mb-bar-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted);
}
.mb-lg {
  display: flex;
  align-items: center;
  gap: 5px;
}
.mb-lg .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11px;
}
.mb-swatch {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 2px;
}
.mb-sw-r { background: var(--ink); }
.mb-sw-b {
  background: var(--paper);
  border: 1px solid var(--ink);
}

/* Commission split visual */
.cs-split { margin-top: 14px; }
.cs-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 0.5px solid var(--line);
}
.cs-bar-you {
  background: var(--ink);
}
.cs-bar-family {
  background: repeating-linear-gradient(45deg,
    var(--paper-3), var(--paper-3) 3px,
    var(--paper-4) 3px, var(--paper-4) 6px);
}
.cs-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
}
.cs-lg {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cs-lg .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
}
.cs-swatch {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 2px;
}
.cs-sw-you { background: var(--ink); }
.cs-sw-family {
  background: repeating-linear-gradient(45deg,
    var(--paper-3), var(--paper-3) 2px,
    var(--paper-4) 2px, var(--paper-4) 4px);
  border: 0.5px solid var(--line);
}

/* ═══════════════════════════════════════════════════════════════
   MARGIN INDICATORS on item list rows (purchased variant)
   ═══════════════════════════════════════════════════════════════ */
.lr-m-good {
  color: var(--ink);
  font-weight: 500;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
}
.lr-m-good .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════
   AUTO-DISCOUNT LADDER (purchased variant)
   ═══════════════════════════════════════════════════════════════ */
.card-discount-ladder { border-bottom: 0.5px solid var(--line); }
.dl-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 12px;
  letter-spacing: -0.005em;
}
.dl-rows {
  display: flex;
  flex-direction: column;
  border-top: 0.5px solid var(--line);
}
.dl-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--line-2);
}
.dl-row:last-child { border-bottom: none; }
.dl-day {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
}
.dl-mult {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
}
.dl-pct {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 500;
}
.dl-pct em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-right: 1px;
}
.dl-row-end .dl-mult,
.dl-row-end .dl-pct {
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════
   TAIL DISPOSITION (purchased variant)
   ═══════════════════════════════════════════════════════════════ */
.card-disposition { border-bottom: 0.5px solid var(--line); }
.dp-note {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 12px;
  font-style: italic;
}
.dp-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 0.5px solid var(--line-2);
}
.dp-row:first-of-type {
  border-top: 0.5px solid var(--line);
}
.dp-icon {
  font-size: 16px;
  color: var(--ink);
  text-align: center;
}
.dp-name {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}
.dp-name em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-weight: 300;
  font-size: 13.5px;
}
.dp-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}
.dp-arrow {
  font-family: var(--font-ui);
  color: var(--muted);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   FAMILY LIAISON (family-managed variant)
   ═══════════════════════════════════════════════════════════════ */
.card-family-liaison { border-bottom: 0.5px solid var(--line); }
.fl-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 0.5px solid var(--line);
  margin-top: 6px;
}
.fl-body { min-width: 0; }
.fl-name {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}
.fl-role {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}
.fl-role em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
}
.fl-actions {
  display: flex;
  gap: 6px;
}
.fl-btn {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--ink);
  padding: 4px 10px;
  border: 0.5px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
}
.fl-pending {
  margin-top: 10px;
  padding: 12px;
  background: var(--paper-2);
  border: 0.5px solid var(--line);
}
.fl-p-eye {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.fl-p-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 0.5px solid var(--line-2);
  cursor: pointer;
}
.fl-p-row:first-of-type {
  border-top: 0.5px solid var(--line);
}
.fl-p-count {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  color: var(--ink);
  text-align: center;
  line-height: 1;
}
.fl-p-count em { font-style: italic; }
.fl-p-label {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink);
}
.fl-p-arrow {
  font-family: var(--font-ui);
  color: var(--muted);
  font-size: 14px;
}
.fl-share {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0 0;
  border-top: 0.5px solid var(--line);
}
.fl-share-name {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 3px;
}
.fl-share-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
}
.fl-share-sub em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
}
.fl-share-btn {
  font-family: var(--font-ui);
  font-size: 10.5px;
  padding: 6px 12px;
  border: 0.5px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   CREATE-SALE WIZARD
   ═══════════════════════════════════════════════════════════════ */
.nav-btn-ghost {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 999px;
  border: 0.5px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
}

/* Step indicator */
.card-step-indicator {
  background: var(--paper-2);
  border-bottom: 0.5px solid var(--line);
  padding: 18px !important;
}
.si-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.si-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.si-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  border: 0.5px solid var(--line);
  color: var(--muted-2);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.si-step.si-on .si-dot {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.si-label {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.si-step.si-on .si-label { color: var(--ink); }
.si-line {
  flex: 1;
  height: 0.5px;
  background: var(--line);
  margin-bottom: 22px;
}

/* Big question */
.card-big-q {
  padding: 24px 18px !important;
  border-bottom: 0.5px solid var(--line);
}
.bq-eyebrow {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.bq-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 10px;
}
.bq-title em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}
.bq-sub {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* Ownership choice cards */
.card-ownership {
  padding: 0 !important;
  border-bottom: 0.5px solid var(--line);
}
.ow-opt {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  padding: 20px 18px;
  border-bottom: 0.5px solid var(--line);
  cursor: pointer;
  align-items: flex-start;
}
.ow-opt:last-child { border-bottom: none; }
.ow-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--paper);
  margin-top: 2px;
  position: relative;
  flex-shrink: 0;
}
.ow-selected {
  background: var(--paper-2);
}
.ow-selected .ow-radio {
  border-color: var(--ink);
  background: var(--ink);
}
.ow-selected .ow-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--paper);
}
.ow-body { min-width: 0; }
.ow-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.ow-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.ow-title em { font-style: italic; }
.ow-badge {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.ow-badge-alt {
  color: var(--ink);
  background: transparent;
  border: 0.5px solid var(--ink);
}
.ow-desc {
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 14px;
}
.ow-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 0.5px solid var(--line);
  margin-bottom: 14px;
}
.ow-fields-dim { opacity: 0.55; }
.ow-field {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--line-2);
  align-items: center;
}
.ow-f-key {
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ow-f-input {
  display: flex;
  align-items: baseline;
  gap: 4px;
  border-bottom: 1px dashed var(--muted-2);
  padding-bottom: 3px;
}
.ow-f-static {
  border-bottom: none;
  padding-bottom: 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
}
.ow-f-glyph {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
}
.ow-f-value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ow-f-caret {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--ink);
  animation: blink 1s step-end infinite;
  margin-left: 1px;
}
@keyframes blink {
  50% { opacity: 0; }
}
.ow-changes {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 0.5px solid var(--line);
  padding-top: 12px;
}
.ow-changes li {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink);
  padding-left: 14px;
  position: relative;
}
.ow-changes li::before {
  content: '+';
  position: absolute;
  left: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
.ow-changes li em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 12px;
}
.ow-changes-dim { opacity: 0.55; }

/* What-changes table */
.card-what-changes { border-bottom: 0.5px solid var(--line); }
.wc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.wc-table th, .wc-table td {
  padding: 8px 4px;
  text-align: left;
  border-bottom: 0.5px solid var(--line-2);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink);
}
.wc-table th {
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 400;
}
.wc-h-on, .wc-h-off {
  text-align: center !important;
  width: 26%;
}
.wc-yes, .wc-no, .wc-partial {
  text-align: center;
}
.wc-yes .glyph {
  color: var(--ink);
  font-size: 13px;
}
.wc-no {
  color: var(--muted-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
}
.wc-partial {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Basics preview */
.card-basics-preview {
  opacity: 0.45;
  pointer-events: none;
  background: var(--paper-2);
  border-bottom: 0.5px solid var(--line);
}
.bp-field {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 0.5px solid var(--line-2);
  align-items: center;
}
.bp-field:first-of-type { border-top: 0.5px solid var(--line); margin-top: 6px; }
.bp-key {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.bp-val {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
}
.bp-val-input {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink);
  border-bottom: 1px dashed var(--muted-2);
  padding-bottom: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   ESTATE MANAGEMENT PAGE
   ═══════════════════════════════════════════════════════════════ */

/* Stage-filter chip row with tools */
.card-stage-filter {
  padding: 14px 18px !important;
  border-bottom: 0.5px solid var(--line);
}
.sf-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sf-chip {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink);
  padding: 5px 11px;
  border-radius: 999px;
  border: 0.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  white-space: nowrap;
}
.sf-chip em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-weight: 300;
  margin-left: 3px;
  font-size: 11.5px;
}
.sf-chip.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
}
.sf-chip.on em { color: rgba(255,255,255,0.7); }
.sf-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0.5px solid var(--line-2);
  justify-content: space-between;
}
.sf-tool {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  cursor: pointer;
}
.sf-tool em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
  margin-left: 3px;
}
.sf-tool-icon { color: var(--muted); margin-left: auto; }

/* Live-stage group header */
.ug-header-live {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 0.5px solid var(--ink);
}
.ug-header-live .ug-title { color: var(--paper); }
.ug-header-live .ug-title em { color: rgba(255,255,255,0.7); }
.ug-header-live .ug-meta { color: rgba(255,255,255,0.7); }
.ug-header-live .ug-meta em { color: var(--paper); font-style: italic; }

.ug-header-collapsed {
  background: var(--paper);
  border-bottom: 0.5px solid var(--line);
}
.ug-header-collapsed .ug-title { color: var(--muted); }
.ug-toggle {
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  font-size: 11px !important;
  color: var(--ink) !important;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sale cards (large, image + body + stats) */
.sale-card {
  display: block;
  border-bottom: 0.5px solid var(--line);
  text-decoration: none;
  color: inherit;
  position: relative;
  background: var(--paper);
}
.sale-card:last-child { border-bottom: none; }
.sale-card-sel {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0;
  align-items: stretch;
}
.sc-check {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.5px solid var(--line);
  background: var(--paper-2);
}
.sale-card-sel:has(.lr-check:checked) {
  background: var(--paper-2);
}
.sale-card-sel:has(.lr-check:checked) .sc-check {
  background: var(--ink);
  border-right-color: var(--ink);
}
.sale-card-sel:has(.lr-check:checked) .lr-check {
  border-color: var(--paper);
  background: var(--paper);
}
.sale-card-sel:has(.lr-check:checked) .lr-check::after {
  border-right-color: var(--ink);
  border-bottom-color: var(--ink);
}
.sc-inner {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 16px 18px;
}
a.sale-card .sc-inner,
.sale-card > .sc-inner {
  display: block;
}
.sale-card > a.sc-inner:hover,
.sale-card:hover { background: var(--paper-2); }

.sc-cover {
  position: relative;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  background: var(--paper-3);
  border: 0.5px solid var(--line);
  margin-bottom: 12px;
}
.sc-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
}
.sc-cover-sketch {
  background: repeating-linear-gradient(45deg,
    var(--paper), var(--paper) 4px,
    var(--paper-2) 4px, var(--paper-2) 8px);
}
.sc-cover-plc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.sc-stage {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sc-stage-live {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  50% { opacity: 0.35; }
}
.sc-stage-source {
  background: var(--paper);
  border: 0.5px solid var(--ink);
}
.sc-stage-wrap {
  background: var(--paper-3);
}

.sc-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.sc-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}
.sc-name em { font-style: italic; }
.sc-badge {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
  border: 0.5px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
}
.sc-badge-purchased {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.sc-badge-managed {
  background: transparent;
  color: var(--ink);
  border: 0.5px solid var(--ink);
  border-style: dashed;
}
.sc-badge-pending {
  color: var(--muted);
  border-color: var(--line);
}
.sc-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
}
.sc-meta em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 12px;
}

.sc-progress {
  height: 3px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 12px;
}
.sc-progress span {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: 999px;
}
.sc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding-top: 10px;
  border-top: 0.5px solid var(--line-2);
}
.sc-stats-source { border-top: 0.5px solid var(--line-2); margin-top: 10px; padding-top: 10px; }
.sc-stat { text-align: left; }
.sc-s-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1;
}
.sc-s-val em { font-style: italic; }
.sc-s-val .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}
.sc-s-unit {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  margin-left: 1px;
}
.sc-s-key {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 3px;
}

.sale-card-live {
  background: var(--paper-2);
}
.sale-card-live .sc-inner { padding-top: 20px; }

/* ═══════════════════════════════════════════════════════════════
   PROFILE PAGE
   ═══════════════════════════════════════════════════════════════ */

/* Profile hero */
.card-profile-hero {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 22px 18px !important;
  border-bottom: 0.5px solid var(--line);
  background: var(--paper-2);
}
.ph-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.02em;
}
.ph-body { min-width: 0; }
.ph-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}
.ph-name em { font-style: italic; }
.ph-role {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.ph-role em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 12px;
}
.ph-meta {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
}
.ph-meta em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 11.5px;
}
.ph-edit {
  font-family: var(--font-ui);
  font-size: 10.5px;
  padding: 6px 12px;
  border: 0.5px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

/* Plan card */
.card-plan {
  border-bottom: 0.5px solid var(--line);
  padding: 20px 18px !important;
}
.pl-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.pl-eye {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.pl-status {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 3px 8px;
  border-radius: 999px;
  border: 0.5px solid var(--ink);
}
.pl-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 6px;
}
.pl-name em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 20px;
}
.pl-name em .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
}
.pl-desc {
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 14px;
}
.pl-meter {
  border-top: 0.5px solid var(--line);
  padding-top: 10px;
  margin-bottom: 14px;
}
.pl-m-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--line-2);
}
.pl-m-row:last-child { border-bottom: none; }
.pl-m-key {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
}
.pl-m-val {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.pl-m-val .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 13px;
  margin: 0 2px;
}
.pl-actions {
  display: flex;
  gap: 8px;
}
.pl-btn {
  flex: 1;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 11.5px;
  padding: 9px 12px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
}
.pl-btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 0.5px solid var(--ink);
  font-weight: 400;
}

/* Settings group (generic row list) */
.card-settings-group {
  border-bottom: 0.5px solid var(--line);
  padding: 20px 18px !important;
}
.sg-lead {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 14px;
  font-style: italic;
  line-height: 1.5;
}
.sg-row {
  display: grid;
  grid-template-columns: 130px 1fr 14px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 0.5px solid var(--line-2);
  cursor: pointer;
}
.sg-row:first-of-type {
  border-top: 0.5px solid var(--line);
  margin-top: 6px;
}
.sg-key {
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.sg-val {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  text-align: right;
  font-weight: 500;
}
.sg-val em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-weight: 300;
  font-size: 13px;
}
.sg-val .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
}
.sg-val-edit {
  border-bottom: 1px dashed var(--muted-2);
  padding-bottom: 2px;
  display: inline-block;
  justify-self: end;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-align: right;
}
.sg-val-muted { color: var(--muted); font-weight: 400; font-style: italic; }
.sg-arrow {
  font-family: var(--font-ui);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

/* Integration rows */
.ig-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 0.5px solid var(--line-2);
  cursor: pointer;
}
.ig-row:first-of-type {
  border-top: 0.5px solid var(--line);
  margin-top: 6px;
}
.ig-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--paper-3);
  border: 0.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ig-body { min-width: 0; }
.ig-name {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}
.ig-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}
.ig-sub em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 11.5px;
}
.ig-status {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
  border: 0.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  white-space: nowrap;
}
.ig-status-off {
  background: transparent;
  color: var(--ink);
  border-style: dashed;
}

/* Notification rows with iOS-style toggles */
.nf-row {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 0.5px solid var(--line-2);
}
.nf-row:first-of-type {
  border-top: 0.5px solid var(--line);
  margin-top: 6px;
}
.nf-name {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}
.nf-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}
.nf-sub em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 11px;
}
.nf-toggle {
  width: 42px;
  height: 24px;
  background: var(--paper-3);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  border: 0.5px solid var(--line);
  transition: background 0.2s ease;
}
.nf-toggle span {
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 19px;
  height: 19px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: left 0.2s ease;
}
.nf-toggle.nf-on { background: var(--ink); border-color: var(--ink); }
.nf-toggle.nf-on span { left: 20.5px; }

/* Danger zone */
.card-danger-zone {
  border-bottom: 0.5px solid var(--line);
  padding: 20px 18px !important;
  background: var(--paper-2);
}
.dz-eye {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 12px;
}
.dz-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding-top: 12px;
  border-top: 0.5px solid var(--line);
}
.dz-name {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
}
.dz-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
}
.dz-btn {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: #8B1F1F;
  border: 0.5px solid #8B1F1F;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

/* App info */
.card-app-info {
  border-bottom: 0.5px solid var(--line);
  padding: 16px 18px !important;
}
.ai-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-top: 0.5px solid var(--line-2);
  align-items: baseline;
}
.ai-row:first-child { border-top: none; }
.ai-key {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.ai-val {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink);
}
.ai-val em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 11.5px;
}

.scroll-end-signout {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 0.5px solid var(--line);
  padding-bottom: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM TAB BAR · persistent app navigation
   Sits above home-indicator, below any transient action-bar
   ═══════════════════════════════════════════════════════════════ */
.persona-phone .tab-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 10px 4px 22px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--line);
  z-index: 14;
}

/* If there's an action bar, tab bar sits ABOVE it (both fixed to bottom).
   Move action bar up out of the way. */
.persona-phone:has(.tab-bar) .action-bar {
  bottom: 62px;
  padding-bottom: 14px;
  border-top: 0.5px solid var(--line);
}
/* And push scroll further up to clear both */
.persona-phone.has-actions:has(.tab-bar) .scroll,
.persona-phone:has(.action-bar):has(.tab-bar) .scroll {
  bottom: 144px;
}
/* Phones with tab bar but no action bar: just make room for the tab bar */
.persona-phone:has(.tab-bar):not(:has(.action-bar)) .scroll {
  padding-bottom: 66px;
}

/* Individual tab */
.persona-phone .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 2px;
  text-decoration: none;
  color: var(--muted-2);
  cursor: pointer;
  transition: color 0.15s ease;
}
.persona-phone .tab:hover { color: var(--muted); }
.persona-phone .tab-on { color: var(--ink); }
.persona-phone .tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}
.persona-phone .tab-label { display: none; }

/* Home indicator drops beneath the tab bar */
.persona-phone:has(.tab-bar) .home-indicator {
  bottom: 8px;
  z-index: 20;
  opacity: 0.35;
}

/* ═══════════════════════════════════════════════════════════════
   PLAN + USAGE TRACKING (profile page)
   ═══════════════════════════════════════════════════════════════ */

/* Billing cycle strip inside plan card */
.pl-cycle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 12px;
  border-top: 0.5px solid var(--line);
  margin-top: 4px;
}
.pl-cy-key {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.pl-cy-val {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 500;
}
.pl-cy-val em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  font-size: 12.5px;
}

/* Usage card */
.card-usage {
  border-bottom: 0.5px solid var(--line);
  padding: 22px 18px !important;
}

/* Hero number */
.us-headline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 0 16px;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  margin: 8px 0 16px;
}
.us-hero-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 56px;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 0.9;
}
.us-hero-num em { font-style: italic; }
.us-hero-body { min-width: 0; }
.us-hero-key {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 3px;
}
.us-hero-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.4;
}
.us-hero-sub em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
}

/* Trend sparkline */
.us-trend { margin-bottom: 18px; }
.us-t-eye {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.us-t-chart {
  display: block;
  width: 100%;
  height: 60px;
  color: var(--ink);
}
.us-t-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.us-t-lg {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--muted-2);
}

/* Quota meter blocks */
.us-meters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 0;
  border-top: 0.5px solid var(--line);
}
.us-meter { padding: 4px 0; }
.us-m-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.us-m-key {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 500;
}
.us-m-val {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.us-m-val em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-right: 2px;
}
.us-m-lim {
  color: var(--muted);
}
.us-m-lim .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  margin: 0 1px;
}
.us-m-bar {
  height: 4px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.us-m-bar span {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: 999px;
}
.us-m-bar-unlim span {
  background: repeating-linear-gradient(90deg,
    var(--ink), var(--ink) 4px,
    transparent 4px, transparent 7px);
}
.us-m-bar-alert span {
  background: #8B1F1F;
}
.us-m-foot {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted);
  margin-top: 5px;
  font-style: italic;
}
.us-m-foot-alert {
  color: #8B1F1F;
  font-style: normal;
  font-weight: 500;
}
.us-m-foot-alert .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: #8B1F1F;
}

/* Feature checklist */
.us-features {
  padding: 14px 0;
  border-top: 0.5px solid var(--line);
}
.us-f-eye {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.us-f-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.us-f-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 6px;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink);
}
.us-f-row em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 11px;
  margin-left: 2px;
}
.us-f-mark {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  text-align: center;
}
.us-f-on .us-f-mark { color: var(--ink); }
.us-f-off {
  opacity: 0.4;
}
.us-f-off em { color: var(--muted-2); }

/* Plan comparison strip */
.us-compare {
  padding: 14px 0 6px;
  border-top: 0.5px solid var(--line);
}
.us-c-eye {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.us-c-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 0.5px solid var(--line-2);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.us-c-row:first-of-type { border-top: 0.5px solid var(--line); }
.us-c-current {
  background: var(--paper-2);
  margin: 0 -18px;
  padding: 10px 18px;
}
.us-c-body { min-width: 0; }
.us-c-name {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}
.us-c-name em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-weight: 300;
  font-size: 13px;
}
.us-c-name em .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
}
.us-c-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
.us-c-sub .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
}
.us-c-tag {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 0.5px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.us-c-current .us-c-tag {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.us-c-up {
  border-color: var(--ink);
  color: var(--ink);
}
.us-c-down {
  border-color: var(--line);
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════
   ACTIVE / PAST FILTER + PAST SALES CARDS
   ═══════════════════════════════════════════════════════════════ */
.card-est-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px !important;
  border-bottom: 0.5px solid var(--line);
}
.ef-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ef-tab {
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 5px 10px;
  border: 0.5px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.01em;
}
.ef-tab em, .ef-count {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--muted-2);
  font-size: 12px;
}
.ef-on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.ef-on em, .ef-on .ef-count {
  color: var(--paper);
  opacity: 0.75;
}
.ef-sort {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ef-sort em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  font-size: 11.5px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 3px;
}

/* Past sales divider */
.card-past-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px 14px !important;
  background: var(--paper-2);
  border-bottom: 0.5px solid var(--line);
}
.pd-line {
  flex: 1;
  height: 0.5px;
  background: var(--line);
}
.pd-eye {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}
.pd-eye em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-weight: 300;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 2px;
}

/* Past estate card */
.card-estate-past { background: var(--paper-2); }
.card-estate-past .ev-cover-past {
  background: var(--paper-3);
  color: var(--muted);
}
.card-estate-past .ev-name {
  color: var(--muted);
}
.card-estate-past .ev-name em {
  color: var(--muted);
  opacity: 0.75;
}
.card-estate-past .ev-eyebrow { color: var(--muted-2); }
.ev-status-closed {
  background: transparent !important;
  color: var(--muted-2) !important;
  border: 0.5px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.card-estate-past .ev-progress-fill {
  background: var(--muted-2);
}

/* Disposition footer */
.ev-disp {
  border-top: 0.5px solid var(--line);
  padding: 12px 0 4px;
  margin-top: 14px;
}
.ev-disp-eye {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.ev-disp-eye em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
  margin-left: 2px;
}
.ev-disp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ev-disp-chip {
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 4px 8px;
  border: 0.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
.ev-disp-chip em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
  font-size: 11.5px;
  margin-right: 1px;
}
.ev-disp-link {
  color: var(--ink);
  border-bottom: 0.5px solid var(--muted-2);
}
.ev-disp-warn {
  background: #FAF3F3;
  border-color: #E8CFCF;
  color: #8B1F1F;
}
.ev-disp-warn em { color: #8B1F1F; }

/* ═══════════════════════════════════════════════════════════════
   SALE CLOSEOUT PAGE
   ═══════════════════════════════════════════════════════════════ */

/* Nav title stack */
.nb-title-wrap {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.nb-title {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.1;
}
.nb-sub {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* Hero band */
.card-closeout-hero {
  border-bottom: 0.5px solid var(--line);
}
.ch-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--line);
}
.ch-hero-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 68px;
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: 0.85;
}
.ch-hero-num em { font-style: italic; }
.ch-hero-key {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 3px;
}
.ch-hero-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.4;
}
.ch-hero-sub em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
}
.ch-tri {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding-top: 14px;
}
.ch-t-cell {
  padding: 0 8px;
  border-left: 0.5px solid var(--line);
}
.ch-t-cell:first-child {
  border-left: 0;
  padding-left: 0;
}
.ch-t-key {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}
.ch-t-val {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ch-t-val .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}
.ch-t-warn { color: #8B1F1F; }

/* Disposition plan card */
.card-disp-plan {
  border-bottom: 0.5px solid var(--line);
}
.dp-lead {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  margin: 6px 0 12px;
  line-height: 1.4;
}
.dp-lead em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 300;
}

.dp-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper-3);
  margin-bottom: 4px;
}
.dp-seg {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 6px;
  position: relative;
  overflow: hidden;
}
.dp-seg-move { background: var(--ink); }
.dp-seg-auction {
  background: repeating-linear-gradient(45deg, var(--ink), var(--ink) 2px, var(--paper-2) 2px, var(--paper-2) 4px);
}
.dp-seg-donate {
  background: var(--muted-2);
}
.dp-seg-pending {
  background: repeating-linear-gradient(90deg, #8B1F1F, #8B1F1F 3px, #FAF3F3 3px, #FAF3F3 6px);
}
.dp-seg-lbl {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--paper);
  white-space: nowrap;
  letter-spacing: 0.02em;
  font-weight: 500;
  display: none;
}

.dp-rows {
  margin-top: 16px;
  border-top: 0.5px solid var(--line);
}
.dp-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--line-2);
}
.dp-row:last-child { border-bottom: 0; }
.dp-r-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 0.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.dp-r-icon-move {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.dp-r-icon-warn {
  border-color: #8B1F1F;
  color: #8B1F1F;
  background: #FAF3F3;
}
.dp-r-body { min-width: 0; }
.dp-r-title {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}
.dp-r-title em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  font-size: 13.5px;
  margin-left: 2px;
}
.dp-r-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
.dp-r-sub em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 300;
}
.dp-r-count {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
}
.dp-r-count-warn { color: #8B1F1F; }
.dp-row-warn .dp-r-title,
.dp-row-warn .dp-r-sub { color: #8B1F1F; }

/* Selection bar variant for closeout */
.card-selection-closeout {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.card-selection-closeout .sb-count,
.card-selection-closeout .sb-count em {
  color: var(--paper);
}
.card-selection-closeout .sb-count em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  margin-right: 3px;
}
.sb-value {
  font-family: var(--font-ui);
  color: var(--paper);
  opacity: 0.7;
  font-size: 10.5px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 0.5px solid rgba(255,255,255,0.2);
}
.sb-value .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--paper);
}
.card-selection-closeout .sb-a {
  background: rgba(255,255,255,0.1);
  color: var(--paper);
  border-color: rgba(255,255,255,0.2);
}
.card-selection-closeout .sb-a-primary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  font-weight: 500;
}
.card-selection-closeout .sb-a-ghost {
  background: transparent;
  color: var(--paper);
  opacity: 0.85;
}
.card-selection-closeout .sb-a-dismiss {
  opacity: 0.6;
  padding: 6px 8px;
}

/* Item groups */
.card-item-group {
  border-bottom: 0.5px solid var(--line);
}
.card-item-group-warn {
  background: #FDF9F9;
}
.ig-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0 12px;
  border-bottom: 0.5px solid var(--line-2);
  margin-bottom: 6px;
}
.ig-eye {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.card-item-group-warn .ig-eye { color: #8B1F1F; }
.ig-eye em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 2px;
  font-weight: 300;
}
.card-item-group-warn .ig-eye em { color: #8B1F1F; }
.ig-selectall {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--ink);
  border-bottom: 0.5px solid var(--muted-2);
  padding-bottom: 1px;
  cursor: pointer;
}

/* Item rows */
.ig-row {
  display: grid;
  grid-template-columns: 20px 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.ig-row:last-of-type { border-bottom: 0; }
.ig-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 0.5px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}
.ig-check-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.ig-row-checked {
  background: var(--paper-2);
  margin: 0 -18px;
  padding-left: 18px;
  padding-right: 18px;
}
.card-item-group-warn .ig-row-checked {
  background: #F8ECEC;
}
.ig-thumb {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--paper-3) 0%, var(--paper-4) 100%);
  border: 0.5px solid var(--line);
  border-radius: 3px;
}
.ig-thumb-2 { background: linear-gradient(135deg, #E8DECF 0%, #C9B99A 100%); }
.ig-thumb-3 { background: linear-gradient(135deg, #6B4938 0%, #3A2519 100%); }
.ig-thumb-4 { background: linear-gradient(135deg, #B89968 0%, #7A6039 100%); }
.ig-thumb-5 { background: linear-gradient(135deg, #C9A67D 0%, #856542 100%); }
.ig-thumb-6 { background: linear-gradient(135deg, #4A5D6B 0%, #2A3540 100%); }
.ig-thumb-7 { background: linear-gradient(135deg, #8B6A4A 0%, #5A4230 100%); }
.ig-thumb-8 { background: linear-gradient(135deg, #5A4838 0%, #302418 100%); }
.ig-body { min-width: 0; }
.ig-title {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-title em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  font-size: 13px;
}
.ig-meta {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.35;
}
.ig-meta em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 300;
}
.ig-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.ig-t {
  font-family: var(--font-ui);
  font-size: 9px;
  padding: 2px 6px;
  border: 0.5px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.ig-t-dest {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.ig-t-dest em {
  font-style: normal;
  color: var(--paper);
}
.ig-dest {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted-2);
  padding: 4px 8px;
  border: 0.5px dashed var(--line);
  border-radius: 4px;
  white-space: nowrap;
}
.ig-dest-empty {
  color: #8B1F1F;
  border-color: #E8CFCF;
}
.ig-dest-set {
  border: 0.5px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
  border-style: solid;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.ig-more {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  padding: 10px 0 4px;
  text-align: center;
  border-top: 0.5px solid var(--line-2);
  margin-top: 4px;
  cursor: pointer;
}

/* Collapsed thumbnail strip */
.ig-collapsed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 4px;
}
.ig-c-strip {
  display: flex;
  gap: 6px;
}
.ig-c-thumb {
  width: 32px;
  height: 32px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--paper-3) 0%, var(--paper-4) 100%);
  border: 0.5px solid var(--line);
}
.ig-c-thumb-2 { background: linear-gradient(135deg, #C9B99A 0%, #8A7A5A 100%); }
.ig-c-thumb-3 { background: linear-gradient(135deg, #6B4938 0%, #3A2519 100%); }
.ig-c-thumb-4 { background: linear-gradient(135deg, #B89968 0%, #7A6039 100%); }
.ig-c-thumb-5 { background: linear-gradient(135deg, #7A8A9B 0%, #4A5D6B 100%); }
.ig-c-more {
  width: 32px;
  height: 32px;
  border-radius: 3px;
  border: 0.5px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  background: var(--paper);
}
.ig-c-expand {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--ink);
  border-bottom: 0.5px solid var(--muted-2);
  padding-bottom: 1px;
}

/* Provenance note card */
.card-note {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 16px 18px !important;
  background: var(--paper-2);
  border-bottom: 0.5px solid var(--line);
}
.cn-icon {
  color: var(--muted);
  padding-top: 2px;
}
.cn-title {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 3px;
}
.cn-desc {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* Warn variant for filter chip */
.fb-chip-warn {
  border-color: #8B1F1F !important;
  color: #8B1F1F !important;
}
.fb-chip-warn em {
  color: #8B1F1F;
}

/* ═══════════════════════════════════════════════════════════════
   INVENTORY BULK-SELECT (Reseller)
   ═══════════════════════════════════════════════════════════════ */

/* Compact checkbox for list rows */
.card-list-selectable .lr {
  padding-left: 0;
}
.lr-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 0.5px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  margin-right: 10px;
  align-self: center;
}
.lr-check-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.lr-checked {
  background: var(--paper-2);
}

/* ═══════════════════════════════════════════════════════════════
   ITEM HISTORY / PROVENANCE TIMELINE
   ═══════════════════════════════════════════════════════════════ */
.card-history {
  border-bottom: 0.5px solid var(--line);
}
.hs-timeline {
  padding: 6px 0 4px;
  position: relative;
}
.hs-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 12px;
  width: 0.5px;
  background: var(--line);
}
.hs-node {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}
.hs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--muted-2);
  background: var(--paper);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
.hs-now .hs-dot {
  background: var(--ink);
  border-color: var(--ink);
}
.hs-origin .hs-dot {
  border-style: dashed;
  border-color: var(--line);
  border-width: 1px;
}
.hs-when {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 3px;
}
.hs-when em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 2px;
}
.hs-now .hs-when em { color: var(--ink); }
.hs-what {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.45;
}
.hs-what em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  font-size: 12.5px;
}
.hs-what .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}
.hs-foot {
  border-top: 0.5px solid var(--line-2);
  padding-top: 12px;
  margin-top: 6px;
}
.hs-provenance {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   MOVE-TO-SALE PICKER SHEET
   ═══════════════════════════════════════════════════════════════ */

/* Backdrop over the phone */
.persona-phone-sheet .sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.35);
  z-index: 5;
}

/* Bottom sheet fills bottom ~88% of the phone */
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 60px;
  background: var(--paper);
  border-radius: 18px 18px 0 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.sheet-grabber {
  width: 40px;
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  margin: 8px auto 4px;
}
.sheet-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 18px 14px;
  border-bottom: 0.5px solid var(--line);
}
.sh-close {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
}
.sh-title { text-align: center; min-width: 0; }
.sh-t-main {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.sh-t-sub {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.sh-t-sub em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 300;
}
.sh-action {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  padding: 4px 0;
}
.sh-action-disabled {
  color: var(--muted-2);
  opacity: 0.5;
}

.sheet-scroll {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 76px;
}

.sheet-action-bar {
  position: absolute;
  bottom: 62px;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 12px 14px 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--line);
  z-index: 12;
}
.sheet-action-bar .ab-btn {
  min-height: 40px;
}
.persona-phone-sheet .tab-bar {
  z-index: 14;
}

/* Preview strip */
.card-preview-strip {
  border-bottom: 0.5px solid var(--line);
}
.ps-eye {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.ps-thumbs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.ps-thumb {
  width: 38px;
  height: 38px;
  border-radius: 3px;
  border: 0.5px solid var(--line);
  background: linear-gradient(135deg, var(--paper-3), var(--paper-4));
}
.ps-thumb-a { background: linear-gradient(135deg, #C9A67D 0%, #856542 100%); }
.ps-thumb-b { background: linear-gradient(135deg, #E8DECF 0%, #C9B99A 100%); }
.ps-thumb-c { background: linear-gradient(135deg, #6B4938 0%, #3A2519 100%); }
.ps-thumb-d { background: linear-gradient(135deg, #B89968 0%, #7A6039 100%); }
.ps-thumb-e { background: linear-gradient(135deg, #4A5D6B 0%, #2A3540 100%); }
.ps-more {
  width: 38px;
  height: 38px;
  border-radius: 3px;
  border: 0.5px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  background: var(--paper);
}
.ps-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ps-s-cell {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
}
.ps-s-cell em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
  font-size: 12px;
  margin-left: 3px;
}

/* Best-match destination card */
.card-dest-best {
  background: var(--paper-2);
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.db-eye {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.db-star {
  font-size: 12px;
  color: var(--ink);
}
.db-hero {
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--line);
  margin-bottom: 12px;
}
.db-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.05;
}
.db-name em { font-style: italic; }
.db-when {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.db-when em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 12px;
  font-weight: 300;
}
.db-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.db-badge {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 0.5px solid var(--line);
  color: var(--muted);
  background: var(--paper);
}
.db-badge-fit {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.db-badge-fit .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--paper);
}
.db-cap {
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--line);
  margin-bottom: 14px;
}
.db-c-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.db-c-key {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.db-c-val {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink);
}
.db-c-val em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 12px;
  font-weight: 300;
}
.db-c-bar {
  height: 6px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  margin-bottom: 6px;
}
.db-c-bar > span:first-child {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: 999px;
}
.db-c-add {
  position: absolute;
  top: 0;
  height: 100%;
  background: repeating-linear-gradient(45deg, var(--ink), var(--ink) 1.5px, var(--paper) 1.5px, var(--paper) 3px);
}
.db-c-legend {
  font-family: var(--font-ui);
  font-size: 9.5px;
  color: var(--muted);
  font-style: italic;
}
.db-c-legend .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
}
.db-select {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 500;
  display: inline-block;
  padding: 8px 12px;
  border: 0.5px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  letter-spacing: 0.01em;
}

/* Destination list */
.card-dest-list {
  border-bottom: 0.5px solid var(--line);
}
.dl-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 0.5px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.dl-row:first-of-type { border-top: 0.5px solid var(--line); margin-top: 4px; }
.dl-cover {
  width: 44px;
  height: 44px;
  border-radius: 3px;
  background: linear-gradient(135deg, #B89968 0%, #7A6039 100%);
  border: 0.5px solid var(--line);
}
.dl-cover-2 { background: linear-gradient(135deg, #6B7580 0%, #3D4550 100%); }
.dl-cover-3 { background: linear-gradient(135deg, #A8896A 0%, #6B5240 100%); }
.dl-cover-4 {
  background: var(--paper-2);
  border: 0.5px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
}
.dl-cover-4::after { content: '+'; }
.dl-body { min-width: 0; }
.dl-name {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}
.dl-name em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  font-size: 13px;
}
.dl-meta {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
.dl-meta em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 300;
}
.dl-meta .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
}
.dl-badges {
  display: flex;
  gap: 4px;
  margin-top: 5px;
}
.dl-b {
  font-family: var(--font-ui);
  font-size: 9px;
  padding: 2px 6px;
  border: 0.5px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.dl-b .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
}
.dl-b-warn {
  color: #8B1F1F;
  border-color: #E8CFCF;
  background: #FAF3F3;
}
.dl-tag {
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 5px 12px;
  border: 0.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dl-tag-ghost {
  border-style: dashed;
  color: var(--muted);
  border-color: var(--line);
}
.dl-row-warn { opacity: 0.72; }

/* Room mapping */
.card-room-map {
  border-bottom: 0.5px solid var(--line);
}
.rm-lead {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin: 6px 0 14px;
  line-height: 1.4;
}
.rm-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-top: 0.5px solid var(--line-2);
}
.rm-row:first-of-type { border-top: 0.5px solid var(--line); }
.rm-key {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 3px;
}
.rm-val {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}
.rm-val em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  font-size: 12.5px;
  margin-left: 2px;
}
.rm-count {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.rm-count .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
}
.rm-arrow {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--muted-2);
  font-weight: 300;
  padding: 0 4px;
}
.rm-val-empty {
  color: #8B1F1F;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
}
.rm-to-unset {
  padding: 6px 8px;
  border: 0.5px dashed #E8CFCF;
  border-radius: 4px;
  background: #FAF3F3;
}

/* Repricing rules */
.card-reprice {
  border-bottom: 0.5px solid var(--line);
}
.rp-lead {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin: 6px 0 12px;
  line-height: 1.4;
}
.rp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 0.5px solid var(--line-2);
}
.rp-row:first-of-type { border-top: 0.5px solid var(--line); }
.rp-title {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.25;
}
.rp-sub {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
.rp-sub em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 300;
}
.rp-sub .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}
.rp-toggle {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--paper-3);
  border: 0.5px solid var(--line);
  position: relative;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.rp-t-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--paper);
  border: 0.5px solid var(--line);
  transition: transform 0.15s ease;
}
.rp-toggle-on {
  background: var(--ink);
  border-color: var(--ink);
}
.rp-toggle-on .rp-t-dot {
  transform: translateX(14px);
  border-color: var(--ink);
}
.rp-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  margin-top: 8px;
  border-top: 0.5px solid var(--line);
}
.rp-s-key {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.rp-s-val {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.rp-s-val .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}
.rp-s-delta {
  font-size: 12px;
  color: var(--muted);
  margin-left: 8px;
}
.rp-s-delta .glyph {
  color: var(--muted);
}

/* Provenance preview */
.card-prov-preview {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 16px 18px !important;
  background: var(--paper-2);
  border-bottom: 0.5px solid var(--line);
}
.pp-icon {
  color: var(--muted);
  padding-top: 3px;
}
.pp-title {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.pp-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.pp-quote em {
  font-style: italic;
  font-weight: 400;
}
.pp-quote .glyph {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}
.pp-caption {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
}

.scroll-end-tight { padding: 20px 0 !important; }