/* ═══════════════════════════════════════════════════
   CVI PW — css/components/investment-card.css
   Two-face flip card for FixedNote Market.
   Reference: /Users/amir/Desktop/Investment Cards/cards.jsx
   CardEditorial (lines 96–175) is the pixel-level target
   for the front face of the editorial variant.
   Tokens only — no hardcoded colours.
   ═══════════════════════════════════════════════════ */

/* ── Category filter pill bar (above featured row) ── */
.ds-invcard-filterbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 16px 36px 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ds-invcard-filterbar::-webkit-scrollbar { display: none; }

.ds-invcard-filterpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.ds-invcard-filterpill:hover { border-color: var(--text4); color: var(--text); }
.ds-invcard-filterpill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gold-bg, rgba(212,175,55,0.25));
}
.ds-invcard-filterpill.is-active {
  background: rgba(201,169,97,0.10);
  border: 1px solid var(--gold);
  color: var(--gold-text, var(--gold));
}
.ds-invcard-filterpill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  background: var(--text3);
}

@media (max-width: 768px) {
  .ds-invcard-filterbar { padding: 12px 16px 4px; }
}

/* ── Grid (elastic — tracks stretch to fill, first-delivery proportions) ── */
.ds-invcard-featured-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
  gap: 24px;
  padding: 20px 36px 8px;
}

.ds-invcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 24px;
  padding: 20px 36px 36px;
}

@media (max-width: 768px) {
  .ds-invcard-grid,
  .ds-invcard-featured-row {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}

/* ── Card shell (elastic — width:100% of track, min-height for proportion) ── */
.ds-invcard {
  position: relative;
  perspective: 1400px;
}
.ds-invcard-editorial { width: 100%; min-height: 560px; }
.ds-invcard-magazine  { width: 100%; min-height: 360px; }

/* Defensive: editorial front is always a vertical stack.
   Hero (240px tall, full width) → blurb → metric strip → CTA row.
   Prevents any leak from magazine's row-direction override.
   !important is scoped to flex-direction only — narrow hammer against any
   stale/unscoped `.ds-invcard-front { flex-direction: row }` override. */
.ds-invcard-editorial .ds-invcard-front { flex-direction: column !important; }
.ds-invcard-editorial .ds-invcard-front > .ds-invcard-hero {
  width: 100% !important;
  flex: 0 0 240px;
  height: 240px;
}
.ds-invcard-editorial .ds-invcard-hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.ds-invcard-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  outline: none;
}
.ds-invcard-flipper:focus-visible { box-shadow: 0 0 0 3px var(--gold-bg, rgba(212,175,55,0.25)); border-radius: 14px; }
.ds-invcard.is-flipped .ds-invcard-flipper { transform: rotateY(180deg); }

.ds-invcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface) 70%, rgba(201,169,97,0.015) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  /* Sandwiched inner hairline + weighted multi-layer drop shadow */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 1px 2px rgba(20,16,8,0.04),
    0 12px 32px -8px rgba(20,16,8,0.10),
    0 2px 8px rgba(20,16,8,0.06);
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 250ms ease-out,
    border-color 250ms ease-out,
    transform 250ms ease-out;
}
.ds-invcard-front { transform: rotateY(0deg) translateZ(1px); }
.ds-invcard-back  { transform: rotateY(180deg) translateZ(1px); }
.ds-invcard-face:hover {
  border-color: var(--gold);
  box-shadow:
    inset 0 0 0 1px var(--gold),
    0 2px 4px rgba(20,16,8,0.05),
    0 18px 40px -10px rgba(20,16,8,0.14),
    0 4px 12px rgba(20,16,8,0.07);
}

/* ═══ EDITORIAL FRONT ═══ */

/* Hero — editorial hero slimmed to 240px; magazine unchanged (flex row) */
.ds-invcard-editorial .ds-invcard-hero {
  position: relative;
  height: 240px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--surface2);
  flex: 0 0 240px;
}
.ds-invcard-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
.ds-invcard-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,10,14,0) 0%, rgba(8,10,14,0.15) 45%, rgba(8,10,14,0.85) 100%);
  pointer-events: none;
}

/* Hero NAV sparkline overlay — bottom-right, above the name */
.ds-invcard-hero-spark {
  position: absolute;
  right: 22px;
  bottom: 74px;
  width: 130px;
  height: 40px;
  display: block;
  pointer-events: none;
  opacity: 0.9;
}
.ds-invcard-magazine .ds-invcard-hero-spark { display: none; }

/* Category chip — frosted pill, tinted by category */
.ds-invcard-cat-chip {
  position: absolute;
  top: 16px; left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* dynamic tint/label colour set inline per category;
     inline style supplies the 1px rgba(255,255,255,0.22) border */
}

/* Status (top-right) — frosted pill, dot keyed to status */
.ds-invcard-status {
  position: absolute;
  top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.ds-invcard-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
}
.ds-invcard-status-dot.is-pending { background: var(--amber); }
.ds-invcard-status-dot.is-closed  { background: var(--text3); }
.ds-invcard-status-dot.is-draft   { background: var(--text3); }

/* Name + tagline — anchored to hero bottom */
.ds-invcard-hero-title {
  position: absolute;
  left: 22px; right: 22px; bottom: 18px;
  color: #fff;
}
.ds-invcard-hero-title .ds-invcard-name {
  font-family: Georgia, "Source Serif Pro", "Times New Roman", serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.7px;
  font-feature-settings: 'ss01','liga';
  line-height: 1.1;
  margin: 0 0 8px;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.ds-invcard-hero-title .ds-invcard-tagline {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  opacity: 0.88;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Marketing blurb — sits between hero and metric strip. D14-compliant:
   text comes verbatim from the note's admin-authored `description` field.
   3-line clamp keeps the card height predictable. */
.ds-invcard-blurb {
  padding: 14px 22px 0;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--text);
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Safari: -webkit-box inside a column-flex parent needs min-height:0
     or the clamped box escapes its track and overlaps the next sibling. */
  min-height: 0;
  /* Grow to absorb all residual space between hero and metric strip so the
     numeric rows (metric strip + CTA row) always anchor to the card bottom.
     Even when `description` is empty the element still claims the gap. */
  flex: 1 1 auto;
}
/* Empty blurb: no text, but it must still hold the track open so the metric
   strip anchors to the card bottom and a row of cards stays aligned. */
.ds-invcard-blurb.is-empty { min-height: 34px; padding-top: 14px; }
.ds-invcard-magazine .ds-invcard-mag-body .ds-invcard-blurb {
  padding: 0 0 12px;
  -webkit-line-clamp: 2; /* magazine body is narrower + shorter — 2 lines max */
}

/* Metric strip — two equal cells, vertical divider, bottom border */
.ds-invcard-editorial .ds-invcard-metric-strip {
  display: flex;
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--border);
  /* Belt-and-braces with .ds-invcard-blurb { flex:1 }: pushes the metric strip
     and the CTA row beneath it to the bottom of the card in flex column flow. */
  margin-top: auto;
  flex: 0 0 auto;
}
.ds-invcard-metric-cell {
  flex: 1;
  min-width: 0;
}
.ds-invcard-metric-cell + .ds-invcard-metric-cell { padding-left: 20px; }
.ds-invcard-metric-cell:first-child {
  border-right: 1px solid transparent;
  border-image: linear-gradient(to bottom, transparent 0%, rgba(201,169,97,0.35) 50%, transparent 100%) 1;
}
.ds-invcard-metric-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 6px;
}
.ds-invcard-metric-val {
  font-family: 'JetBrains Mono', 'SF Mono', SFMono-Regular, Consolas, monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ds-invcard-metric-val.is-gold { color: var(--gold-text, var(--gold)); }

/* CTA row — outlined gold button + "From … min" block */
.ds-invcard-editorial .ds-invcard-cta-row {
  padding: 14px 22px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ds-invcard-cta {
  flex: 1;
  padding: 12px 18px;
  background: transparent;
  color: var(--gold-text, var(--gold));
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.ds-invcard-cta:hover {
  background: rgba(201,169,97,0.06);
  color: var(--gold-text, var(--gold));
}
.ds-invcard-cta:active {
  background: var(--gold);
  color: #fff;
}
.ds-invcard-from {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.4;
  white-space: nowrap;
  align-self: center;
}
.ds-invcard-from-val {
  font-family: 'JetBrains Mono', 'SF Mono', SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

/* ═══ MAGAZINE FRONT (520×340 landscape) ═══ */
.ds-invcard-magazine .ds-invcard-front { flex-direction: row; }
.ds-invcard-magazine .ds-invcard-hero {
  position: relative;
  flex: 0 0 55%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--surface2);
  height: 100%;
}
.ds-invcard-magazine .ds-invcard-hero .ds-invcard-hero-title {
  left: 18px; right: 18px; bottom: 16px;
}
.ds-invcard-magazine .ds-invcard-hero .ds-invcard-hero-title .ds-invcard-name { font-size: 28px; }
.ds-invcard-magazine .ds-invcard-hero .ds-invcard-hero-title .ds-invcard-tagline { font-size: 11.5px; }
.ds-invcard-magazine .ds-invcard-mag-body {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 16px;
  min-width: 0;
  min-height: 0;
  overflow: hidden; /* cap overflow so blurb can never spill onto metric strip */
}
.ds-invcard-magazine .ds-invcard-mag-body .ds-invcard-metric-strip {
  display: flex;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.ds-invcard-magazine .ds-invcard-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

/* Featured pill (magazine) — kept for backward compat */
.ds-invcard-featured {
  position: absolute;
  top: 16px; left: 16px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-text, var(--gold));
  background: var(--gold-bg, rgba(212,175,55,0.14));
  border: 1px solid var(--gold-bdr, rgba(184,134,11,0.35));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ═══ BACK FACE (unchanged) ═══ */
.ds-invcard-back-inner { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.ds-invcard-back-hdr   { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ds-invcard-back-name  {
  font-family: Georgia, "Source Serif Pro", "Times New Roman", serif;
  font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.1px;
  flex: 1 1 auto;
}
.ds-invcard-spark { width: 120px; height: 36px; display: block; }

.ds-invcard-ledger {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface2);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.ds-invcard-ledger-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  min-height: 26px;
}
.ds-invcard-ledger-row:last-child { border-bottom: none; }
.ds-invcard-ledger-lbl { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text3); }
.ds-invcard-ledger-val {
  font-family: 'JetBrains Mono', 'SF Mono', SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-invcard-back .ds-invcard-cta-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto;
}

/* RTL: flip the card itself only. */
[dir="rtl"] .ds-invcard-flipper { transform: rotateY(0deg); }
[dir="rtl"] .ds-invcard.is-flipped .ds-invcard-flipper { transform: rotateY(-180deg); }
[dir="rtl"] .ds-invcard-back  { transform: rotateY(-180deg) translateZ(1px); }

/* Reduced motion: instant swap, no 3D spin. */
@media (prefers-reduced-motion: reduce) {
  .ds-invcard-flipper { transition: none !important; transform: none !important; }
  .ds-invcard.is-flipped .ds-invcard-flipper { transform: none !important; }
  .ds-invcard.is-flipped .ds-invcard-front { display: none; }
  .ds-invcard:not(.is-flipped) .ds-invcard-back  { display: none; }
  .ds-invcard-front, .ds-invcard-back { transform: none; position: relative; }
}

/* ═══════════════════════════════════════════════════
   View-mode toggle (Cards ↔ List) — right side of filter bar.
   ═══════════════════════════════════════════════════ */
.ds-invcard-viewbar {
  display: flex;
  justify-content: flex-end;
  padding: 0 36px;
  margin-top: 8px;
}
.ds-invcard-viewtoggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.ds-invcard-viewtoggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.ds-invcard-viewtoggle button:hover { color: var(--text); }
.ds-invcard-viewtoggle button.is-active {
  background: rgba(201,169,97,0.10);
  border-color: var(--gold);
  color: var(--gold-text, var(--gold));
}
.ds-invcard-viewtoggle svg { width: 14px; height: 14px; stroke-width: 1.75; }
@media (max-width: 768px) {
  .ds-invcard-viewbar { padding: 0 16px; }
  .ds-invcard-viewtoggle button span.label { display: none; }
}

/* ═══════════════════════════════════════════════════
   List view — dense row-per-deal marketplace table.
   ═══════════════════════════════════════════════════ */
.ds-notes-list {
  margin: 12px 36px 36px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
@media (max-width: 768px) {
  .ds-notes-list { margin: 12px 16px 24px; border-radius: 10px; }
}

.ds-notes-list-head {
  display: grid;
  grid-template-columns: minmax(240px, 2.4fr) 140px 90px 110px 110px 90px 110px 28px;
  gap: 16px;
  padding: 10px 20px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text4);
}

.ds-notes-list-row {
  display: grid;
  grid-template-columns: minmax(240px, 2.4fr) 140px 90px 110px 110px 90px 110px 28px;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 150ms ease;
  min-height: 56px;
}
.ds-notes-list-row:last-of-type { border-bottom: none; }
.ds-notes-list-row:hover { background: rgba(201,169,97,0.04); }
.ds-notes-list-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--gold);
}
.ds-notes-list-row.is-open {
  background: rgba(201,169,97,0.06);
  border-bottom-color: transparent;
}

.ds-notes-list-cell {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-notes-list-cell.num { text-align: right; }
.ds-notes-list-cell.name {
  font-family: Georgia, 'Source Serif Pro', 'Times New Roman', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ds-notes-list-cell.isin {
  color: var(--text3);
  font-size: 11px;
}
/* Stacked Name + ISIN cell (replaces separate columns) */
.ds-notes-list-name-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.ds-notes-list-name {
  font-family: Georgia, 'Source Serif Pro', 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-notes-list-isin {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text3);
  letter-spacing: 0.3px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-notes-list-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text2);
}
.ds-notes-list-chip-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text3);
}
.ds-notes-list-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.ds-notes-list-status::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text3);
}
.ds-notes-list-status.open { color: var(--green); }
.ds-notes-list-status.open::before { background: var(--green); }
.ds-notes-list-status.closed { color: var(--text3); }
.ds-notes-list-return.pos { color: var(--green); }
.ds-notes-list-return.neg { color: var(--red); }
.ds-notes-list-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  transition: transform 200ms ease, color 150ms ease;
}
.ds-notes-list-row.is-open .ds-notes-list-chevron {
  transform: rotate(90deg);
  color: var(--gold);
}
.ds-notes-list-chevron svg { width: 14px; height: 14px; stroke-width: 1.75; }

/* Inline expanded panel */
.ds-notes-list-expand {
  display: grid;
  grid-template-columns: 220px 1fr 180px;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--gold);
}
.ds-notes-list-expand-spark {
  width: 200px;
  height: 64px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.ds-notes-list-expand-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px 20px;
}
.ds-notes-list-expand-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-notes-list-expand-fact .label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text4);
}
.ds-notes-list-expand-fact .value {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-notes-list-expand-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .ds-notes-list-head,
  .ds-notes-list-row {
    grid-template-columns: minmax(220px, 2.2fr) 120px 90px 100px 90px 28px;
  }
  .ds-notes-list-col-min,
  .ds-notes-list-col-maturity { display: none; }
}
@media (max-width: 768px) {
  .ds-notes-list-head,
  .ds-notes-list-row {
    grid-template-columns: minmax(0, 1.6fr) 90px 90px 24px;
    gap: 10px;
    padding: 12px 14px;
  }
  .ds-notes-list-col-coupon,
  .ds-notes-list-col-maturity,
  .ds-notes-list-col-min { display: none; }
  .ds-notes-list-cell.name { font-size: 13px; }
  .ds-notes-list-name { font-size: 14px; white-space: normal; }
  .ds-notes-list-isin { font-size: 10px; }
  .ds-notes-list-expand {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .ds-notes-list-expand-spark { width: 100%; }
}

/* ═══════════════════════════════════════════════════
   Full-card modal overlay (reuses InvestmentCard 'editorial').
   ═══════════════════════════════════════════════════ */
.ds-invcard-fullmodal {
  position: fixed;
  inset: 0;
  background: rgba(13,17,23,0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: ds-invcard-fullfade 180ms ease;
}
@keyframes ds-invcard-fullfade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ds-invcard-fullmodal-inner {
  position: relative;
  width: 380px;
  max-width: 100%;
}
.ds-invcard-fullmodal-close {
  position: absolute;
  top: -44px;
  right: -4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  color: #FFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  transition: background 150ms ease, border-color 150ms ease;
}
.ds-invcard-fullmodal-close:hover {
  background: rgba(0,0,0,0.55);
  border-color: var(--gold);
}

/* ═══════════════════════════════════════════════════
   MARKET HEADER — flat editorial header (no box, no illustration)
   Sits at the top of the Market tab on #structured-notes.
   ═══════════════════════════════════════════════════ */
.ds-market-header {
  display: block;
  margin: 0;
  padding: 4px 36px 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ds-market-header .ds-section-rubrik-eyebrow {
  display: block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 10px;
}
.ds-market-header-title {
  font-family: Georgia, "Source Serif Pro", "Times New Roman", serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 10px;
}
.ds-market-header-copy {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text2);
  max-width: 1040px;
  margin: 0;
}

body.theme-dark .ds-market-header .ds-section-rubrik-eyebrow { color: var(--gold); }

/* ── Controls row: filter pills (left) + view toggle (right) ── */
.ds-market-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 12px 36px 4px;
  margin: 0;
}
.ds-market-controls .ds-invcard-filterbar {
  flex: 1 1 auto;
  padding: 0;
  min-width: 0;
}
.ds-market-controls .ds-invcard-viewtoggle {
  margin-left: auto;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .ds-market-header { padding: 16px 24px 6px; }
  .ds-market-header-title { font-size: 22px; }
}
@media (max-width: 768px) {
  .ds-market-header { padding: 14px 16px 6px; }
  .ds-market-header-title { font-size: 20px; }
  .ds-market-controls { padding: 10px 16px 4px; gap: 10px; }
}

/* ═══════════════════════════════════════════════════
   Codex refresh — premium structured note card system
   Front/back redesign inspired by April 2026 concept art.
   ═══════════════════════════════════════════════════ */

.ds-invcard-editorial { min-height: 780px; }
.ds-invcard-magazine  { min-height: 520px; }

.ds-invcard-face {
  background:
    radial-gradient(circle at top left, rgba(201,169,97,0.08), transparent 34%),
    linear-gradient(180deg, #161b22 0%, #0d1218 100%);
  border: 1px solid rgba(201,169,97,0.14);
  border-radius: 24px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 28px 70px -28px rgba(0,0,0,0.60),
    0 12px 24px rgba(0,0,0,0.18);
}

.ds-invcard-face:hover {
  border-color: rgba(201,169,97,0.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 34px 78px -28px rgba(0,0,0,0.66),
    0 16px 30px rgba(0,0,0,0.22);
}

.ds-invcard-editorial .ds-invcard-front {
  background:
    radial-gradient(circle at 16% 12%, rgba(201,169,97,0.08), transparent 34%),
    linear-gradient(180deg, #161b22 0%, #0b1016 100%);
}

.ds-invcard-editorial .ds-invcard-front > .ds-invcard-hero {
  flex: 0 0 470px;
  height: 470px;
}

.ds-invcard-hero {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ds-invcard-hero-img {
  filter: saturate(0.94) contrast(1.05) brightness(0.86);
}

.ds-invcard-hero-scrim {
  background:
    linear-gradient(180deg, rgba(7,10,14,0.10) 0%, rgba(7,10,14,0.18) 24%, rgba(7,10,14,0.42) 62%, rgba(7,10,14,0.92) 100%);
}

.ds-invcard-hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,11,16,0.24) 0%, transparent 20%, transparent 80%, rgba(8,11,16,0.44) 100%),
    radial-gradient(circle at bottom right, rgba(217,180,109,0.12), transparent 24%);
  pointer-events: none;
}

.ds-invcard-brand {
  position: absolute;
  top: 28px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

/* CVI wordmark — brand-lockup parity (Fraunces 400 + brass #B8935A).
   Matches /img/cvi-brand/logo-lockup-brass.svg. */
.ds-invcard-brand-wordmark,
.ds-invcard .ds-invcard-brand-wordmark,
.ds-invcard-face .ds-invcard-brand-wordmark {
  font-family: 'Fraunces', 'Times New Roman', serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: 0.14em;
  color: #B8935A !important;
}

.ds-invcard-brand-sub {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.27em;
  color: rgba(255,255,255,0.92);
  opacity: 1;
  padding-left: 2px;
}

.ds-invcard-status {
  top: 28px;
  right: 28px;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(16,21,28,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 8px 24px rgba(0,0,0,0.20);
  color: rgba(255,255,255,0.96);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.ds-invcard-status-dot {
  width: 11px;
  height: 11px;
  box-shadow:
    0 0 0 3px rgba(72,187,120,0.16),
    0 0 12px rgba(72,187,120,0.35);
}

.ds-invcard-hero-spark {
  left: 24px;
  right: 24px;
  bottom: 138px;
  width: calc(100% - 48px);
  height: 108px;
  opacity: 0.98;
}

.ds-invcard-hero-meta {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  z-index: 2;
}

.ds-invcard-cat-chip {
  position: relative;
  top: auto;
  left: auto;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.ds-invcard-hero-title {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  color: #fff;
  width: 100%;
}

.ds-invcard-hero-title .ds-invcard-name {
  font-family: Georgia, "Source Serif Pro", "Times New Roman", serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin: 0 0 10px;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 12px 28px rgba(0,0,0,0.45);
}

.ds-invcard-hero-title .ds-invcard-tagline {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.90);
  text-shadow: 0 2px 8px rgba(0,0,0,0.36);
}

.ds-invcard-blurb {
  padding: 26px 28px 0;
  font-size: 18px;
  line-height: 1.58;
  color: rgba(255,255,255,0.82);
  -webkit-line-clamp: 3;
}

.ds-invcard-editorial .ds-invcard-metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 22px 28px;
  margin-top: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.03));
}

.ds-invcard-metric-cell {
  padding-right: 16px;
}

.ds-invcard-metric-cell + .ds-invcard-metric-cell {
  padding-left: 24px;
}

.ds-invcard-metric-cell:first-child,
.ds-invcard-metric-cell:nth-child(2) {
  border-right: 1px solid rgba(255,255,255,0.08);
}

.ds-invcard-metric-lbl {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.54);
  margin-bottom: 12px;
}

.ds-invcard-metric-val {
  font-size: 46px;
  line-height: 1;
  color: rgba(255,255,255,0.94);
}

.ds-invcard-metric-val.is-gold {
  color: #d6ae67;
}

.ds-invcard-metric-sub {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255,255,255,0.68);
}

.ds-invcard-editorial .ds-invcard-cta-row {
  padding: 28px;
  gap: 20px;
}

.ds-invcard-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 28px;
  border-radius: 16px;
  border: 1px solid #d3ae6a;
  color: #d3ae6a;
  background: rgba(211,174,106,0.05);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ds-invcard-cta:hover {
  background: rgba(211,174,106,0.12);
}

.ds-invcard-cta-arrow {
  font-size: 22px;
  line-height: 1;
}

.ds-invcard-from {
  font-size: 13px;
  color: rgba(255,255,255,0.54);
  letter-spacing: 0.16em;
}

.ds-invcard-from-val {
  display: inline-block;
  margin-top: 6px;
  font-size: 20px;
  color: rgba(255,255,255,0.92);
}

.ds-invcard-magazine .ds-invcard-front {
  flex-direction: row;
}

.ds-invcard-magazine .ds-invcard-hero {
  flex: 0 0 54%;
  height: 100%;
  min-height: 520px;
  border-bottom: none;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.ds-invcard-magazine .ds-invcard-brand-wordmark {
  font-size: 46px;
}

.ds-invcard-magazine .ds-invcard-hero-spark {
  bottom: 120px;
  height: 96px;
}

.ds-invcard-magazine .ds-invcard-hero-title .ds-invcard-name {
  font-size: 30px;
}

.ds-invcard-magazine .ds-invcard-mag-body {
  padding: 28px 28px 24px;
  background:
    radial-gradient(circle at top right, rgba(201,169,97,0.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
}

.ds-invcard-magazine .ds-invcard-mag-body .ds-invcard-blurb {
  padding: 0 0 18px;
  font-size: 16px;
  -webkit-line-clamp: 3;
}

.ds-invcard-magazine .ds-invcard-metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 20px 0 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 18px;
}

.ds-invcard-magazine .ds-invcard-metric-val {
  font-size: 28px;
}

.ds-invcard-magazine .ds-invcard-metric-sub {
  font-size: 12px;
}

.ds-invcard-back {
  background:
    radial-gradient(circle at top right, rgba(201,169,97,0.09), transparent 28%),
    radial-gradient(circle at bottom left, rgba(255,255,255,0.03), transparent 26%),
    linear-gradient(180deg, #161b22 0%, #0d1218 100%);
}

.ds-invcard-back-inner {
  position: relative;
  padding: 30px 30px 22px;
  gap: 22px;
}

.ds-invcard-back-inner::before {
  content: "";
  position: absolute;
  top: 18px;
  right: -10px;
  width: 240px;
  height: 160px;
  opacity: 0.08;
  background:
    radial-gradient(circle at 20% 50%, transparent 0 46%, rgba(211,174,106,0.85) 46.5% 47.5%, transparent 48% 100%),
    radial-gradient(circle at 40% 50%, transparent 0 56%, rgba(211,174,106,0.75) 56.5% 57.4%, transparent 58% 100%),
    radial-gradient(circle at 60% 50%, transparent 0 66%, rgba(211,174,106,0.60) 66.5% 67.3%, transparent 68% 100%);
  pointer-events: none;
}

.ds-invcard-back-inner > * {
  position: relative;
  z-index: 1;
}

.ds-invcard-back-hdr {
  gap: 18px;
}

.ds-invcard-back-headline {
  flex: 1 1 auto;
  min-width: 0;
}

.ds-invcard-back-name {
  font-family: Georgia, "Source Serif Pro", "Times New Roman", serif;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.08;
  color: #f4f0e8;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}

.ds-invcard-back-subtitle {
  font-size: 15px;
  line-height: 1.4;
  color: #d4ab64;
}

.ds-invcard-back-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  min-width: 132px;
}

.ds-invcard-back-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(184,147,90,0.72);
  color: #B8935A;
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.ds-invcard-back-isin {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.ds-invcard-back-isin-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
}

.ds-invcard-back-isin-val {
  font-family: 'JetBrains Mono', 'SF Mono', SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255,255,255,0.92);
  text-align: right;
}

.ds-invcard-ledger {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ds-invcard-ledger-row {
  padding: 14px 16px;
  min-height: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ds-invcard-ledger-lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.64);
}

.ds-invcard-ledger-val {
  max-width: 64%;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
}

.ds-invcard-thesis {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  align-items: start;
}

.ds-invcard-thesis-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(211,174,106,0.44);
  color: #d3ae6a;
  font-size: 10px;
  line-height: 1;
  margin-top: 2px;
}

.ds-invcard-thesis-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d3ae6a;
}

.ds-invcard-thesis-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: rgba(255,255,255,0.78);
}

.ds-invcard-back-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: auto;
}

.ds-invcard-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(211,174,106,0.60);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ds-invcard-back-btn:hover {
  transform: translateY(-1px);
}

.ds-invcard-back-btn.is-primary {
  background: #d3ae6a;
  color: #11161d;
}

.ds-invcard-back-btn.is-primary:hover {
  background: #ddb97b;
}

.ds-invcard-back-btn.is-secondary {
  background: rgba(211,174,106,0.04);
  color: rgba(255,255,255,0.92);
}

.ds-invcard-back-btn.is-secondary:hover {
  background: rgba(211,174,106,0.10);
}

/* Disabled doc button (e.g. Prospectus / Fact Sheet not yet available) */
.ds-invcard-back-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
  border-color: rgba(211,174,106,0.30);
  flex-direction: column;
  gap: 4px;
}
.ds-invcard-back-btn[disabled]:hover {
  transform: none;
}
.ds-invcard-back-btn-na {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

.ds-invcard-back-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.56);
}

.ds-invcard-back-foot::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  flex: 0 0 16px;
  background:
    radial-gradient(circle at center, rgba(211,174,106,0.68) 0 30%, transparent 32% 100%);
}

@media (max-width: 1100px) {
  .ds-invcard-editorial { min-height: 720px; }
  .ds-invcard-editorial .ds-invcard-front > .ds-invcard-hero {
    flex-basis: 420px;
    height: 420px;
  }
  .ds-invcard-hero-title .ds-invcard-name { font-size: 30px; }
  .ds-invcard-metric-val { font-size: 38px; }
}

@media (max-width: 768px) {
  .ds-invcard-editorial { min-height: 690px; }
  .ds-invcard-editorial .ds-invcard-front > .ds-invcard-hero {
    flex-basis: 360px;
    height: 360px;
  }
  .ds-invcard-brand {
    top: 22px;
    left: 22px;
  }
  .ds-invcard-brand-wordmark { font-size: 44px; }
  .ds-invcard-status {
    top: 22px;
    right: 22px;
    padding: 10px 14px;
    font-size: 11px;
  }
  .ds-invcard-hero-meta {
    left: 22px;
    right: 22px;
    bottom: 22px;
    gap: 14px;
  }
  .ds-invcard-hero-title .ds-invcard-name { font-size: 26px; }
  .ds-invcard-hero-title .ds-invcard-tagline { font-size: 14px; }
  .ds-invcard-hero-spark {
    left: 18px;
    right: 18px;
    width: calc(100% - 36px);
    bottom: 114px;
    height: 90px;
  }
  .ds-invcard-blurb {
    padding: 22px 22px 0;
    font-size: 16px;
  }
  .ds-invcard-editorial .ds-invcard-metric-strip {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 22px;
  }
  .ds-invcard-metric-cell,
  .ds-invcard-metric-cell + .ds-invcard-metric-cell {
    padding: 0;
    border: none !important;
  }
  .ds-invcard-metric-val { font-size: 34px; }
  .ds-invcard-editorial .ds-invcard-cta-row {
    padding: 22px;
    flex-direction: column;
    align-items: stretch;
  }
  .ds-invcard-from {
    text-align: left;
  }
  .ds-invcard-magazine .ds-invcard-front {
    flex-direction: column;
  }
  .ds-invcard-magazine .ds-invcard-hero {
    flex-basis: 320px;
    min-height: 320px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .ds-invcard-magazine .ds-invcard-mag-body {
    padding: 22px;
  }
  .ds-invcard-magazine .ds-invcard-metric-strip {
    grid-template-columns: 1fr;
  }
  .ds-invcard-back-inner {
    padding: 22px;
    gap: 18px;
  }
  .ds-invcard-back-hdr {
    flex-direction: column;
    align-items: stretch;
  }
  .ds-invcard-back-aside {
    align-items: flex-start;
  }
  .ds-invcard-back-isin {
    align-items: flex-start;
  }
  .ds-invcard-ledger-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .ds-invcard-ledger-val {
    max-width: none;
    text-align: left;
  }
  .ds-invcard-back-actions {
    grid-template-columns: 1fr;
  }
  .ds-invcard-back-btn {
    min-height: 58px;
    font-size: 16px;
  }
}

/* Codex tuning pass — reduce overall scale, switch back to platform typography,
   and give the structured-notes page a full black / charcoal environment. */
#page-structured-notes,
#page-structured-notes .ds-page {
  background:
    linear-gradient(180deg, #040506 0%, #0a0c0f 38%, #111418 100%);
}

#page-structured-notes {
  background:
    radial-gradient(circle at top center, rgba(74, 82, 92, 0.18) 0%, rgba(74, 82, 92, 0) 34%),
    linear-gradient(180deg, #020304 0%, #07090c 30%, #0f1318 68%, #171b21 100%);
}

#page-structured-notes .ds-page {
  min-height: calc(100vh - 72px);
  padding: 24px 0 48px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015) 0%, rgba(255,255,255,0) 14%),
    linear-gradient(180deg, #040506 0%, #0a0d11 42%, #14181d 100%);
}

#page-structured-notes .page-header {
  margin: 0 28px 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: transparent;
}

#page-structured-notes .ds-page-title {
  color: #f3f5f7;
}

#page-structured-notes .ds-page-title em {
  color: #d3ae6a;
}

#page-structured-notes .ds-page-subtitle {
  color: #8f979f;
}

#page-structured-notes #sn-inbox-bar {
  margin: 0 28px 4px;
}

#page-structured-notes .ds-btn.sn-tab,
#page-structured-notes .page-actions .ds-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: #c7cdd3;
}

#page-structured-notes .ds-btn.sn-tab.active,
#page-structured-notes .page-actions .ds-btn-primary {
  background: rgba(211,174,106,0.14);
  border-color: rgba(211,174,106,0.50);
  color: #f1d499;
}

#page-structured-notes .ds-notes-list {
  margin-left: 28px;
  margin-right: 28px;
}
#page-structured-notes .ds-market-header { padding-left: 28px; padding-right: 28px; }
#page-structured-notes .ds-market-controls { padding-left: 28px; padding-right: 28px; }
#page-structured-notes .sn-kind-tabs { padding-left: 28px !important; }

#page-structured-notes .ds-invcard-filterpill,
#page-structured-notes .ds-invcard-viewtoggle {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: #9ba3aa;
}

#page-structured-notes .ds-invcard-filterpill:hover,
#page-structured-notes .ds-invcard-viewtoggle button:hover {
  color: #edf1f5;
}

#page-structured-notes .ds-market-header-title {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #f2f4f6;
}

#page-structured-notes .ds-market-header-copy {
  font-size: 12px;
  color: #8e97a0;
}

.ds-invcard-featured-row {
  padding: 16px 28px 4px;
  gap: 18px;
}

.ds-invcard-grid {
  padding: 16px 28px 28px;
  gap: 18px;
}

.ds-invcard-editorial {
  min-height: 610px;
}

.ds-invcard-magazine {
  min-height: 410px;
}

.ds-invcard-face {
  border-radius: 18px;
}

.ds-invcard-editorial .ds-invcard-front > .ds-invcard-hero {
  flex-basis: 300px;
  height: 300px;
}

.ds-invcard-magazine .ds-invcard-hero {
  min-height: 410px;
}

.ds-invcard-brand {
  top: 18px;
  left: 18px;
  gap: 2px;
}

.ds-invcard-brand-wordmark {
  font-family: 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.16em;
}

.ds-invcard-brand-sub {
  font-size: 8px;
  letter-spacing: 0.28em;
}

.ds-invcard-status {
  top: 18px;
  right: 18px;
  padding: 8px 13px;
  font-size: 10px;
  letter-spacing: 0.10em;
}

.ds-invcard-status-dot {
  width: 8px;
  height: 8px;
}

.ds-invcard-hero-spark {
  left: 18px;
  right: 18px;
  width: calc(100% - 36px);
  bottom: 82px;
  height: 70px;
}

.ds-invcard-magazine .ds-invcard-hero-spark {
  bottom: 88px;
  height: 72px;
}

.ds-invcard-hero-meta {
  left: 18px;
  right: 18px;
  bottom: 18px;
  gap: 12px;
}

.ds-invcard-cat-chip {
  padding: 7px 12px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
}

.ds-invcard-hero-title {
  position: relative;
  width: 100%;
}

.ds-invcard-hero-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.ds-invcard-cat-chip {
  position: static;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  max-width: 44%;
  margin-top: 2px;
  white-space: nowrap;
}

.ds-invcard-hero-title .ds-invcard-name,
.ds-invcard-magazine .ds-invcard-hero-title .ds-invcard-name,
.ds-invcard-back-name {
  font-family: 'Inter', sans-serif;
}

.ds-invcard-hero-title .ds-invcard-name {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.08;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.ds-invcard-magazine .ds-invcard-hero-title .ds-invcard-name {
  font-size: 22px;
}

.ds-invcard-hero-title .ds-invcard-tagline {
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255,255,255,0.84);
  margin-top: 8px;
}

.ds-invcard-blurb,
.ds-invcard-magazine .ds-invcard-mag-body .ds-invcard-blurb {
  padding: 18px 18px 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.74);
}

.ds-invcard-magazine .ds-invcard-mag-body {
  padding: 18px 18px 16px;
}

.ds-invcard-editorial .ds-invcard-metric-strip {
  padding: 14px 18px;
}

.ds-invcard-magazine .ds-invcard-metric-strip {
  padding: 14px 0;
  margin-bottom: 14px;
}

.ds-invcard-metric-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 10px;
  min-width: 0;
  min-height: 90px;
}

.ds-invcard-metric-cell + .ds-invcard-metric-cell {
  padding-left: 14px;
}

.ds-invcard-metric-head {
  display: flex;
  align-items: flex-start;
  min-height: 30px;
}

.ds-invcard-metric-lbl {
  font-size: 10px;
  margin-bottom: 8px;
}

.ds-invcard-metric-val {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 34px;
  font-size: 24px;
  line-height: 0.98;
  letter-spacing: -0.03em;
  white-space: nowrap;
  margin-top: auto;
}

.ds-invcard-magazine .ds-invcard-metric-val {
  min-height: 30px;
  font-size: 20px;
}

.ds-invcard-metric-val.is-compact {
  gap: 6px;
  font-size: 22px;
}

.ds-invcard-metric-main {
  display: inline-block;
}

.ds-invcard-metric-unit {
  display: inline-block;
  font-size: 0.72em;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0.88;
}

.ds-invcard-editorial .ds-invcard-cta-row,
.ds-invcard-magazine .ds-invcard-cta-row {
  padding: 18px;
  gap: 14px;
}

.ds-invcard-cta {
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 14px;
}

.ds-invcard-cta-arrow {
  font-size: 18px;
}

.ds-invcard-from {
  font-size: 10px;
}

.ds-invcard-from-val {
  font-size: 15px;
}

.ds-invcard-back-inner {
  padding: 18px 18px 16px;
  gap: 16px;
}

.ds-invcard-back-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}

.ds-invcard-back-subtitle {
  font-size: 12px;
}

.ds-invcard-back-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 10px;
}

.ds-invcard-back-isin-lbl {
  font-size: 9px;
}

.ds-invcard-back-isin-val {
  font-size: 11.5px;
}

.ds-invcard-ledger {
  border-radius: 14px;
}

.ds-invcard-ledger-row {
  padding: 10px 12px;
  min-height: 32px;
}

.ds-invcard-ledger-lbl {
  font-size: 9.5px;
}

.ds-invcard-ledger-val {
  font-size: 11.5px;
}

.ds-invcard-thesis {
  grid-template-columns: 28px 1fr;
  gap: 12px;
}

.ds-invcard-thesis-icon {
  width: 26px;
  height: 26px;
  font-size: 8px;
}

.ds-invcard-thesis-title {
  font-size: 10px;
  margin-bottom: 6px;
}

.ds-invcard-thesis-copy p {
  font-size: 13px;
  line-height: 1.5;
}

.ds-invcard-back-actions {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.ds-invcard-back-flip-note {
  margin-top: -2px;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255,255,255,0.46);
  text-align: center;
  letter-spacing: 0.04em;
}

.ds-invcard-back-btn {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
}

.ds-invcard-back-foot {
  font-size: 11px;
}

@media (max-width: 768px) {
  #page-structured-notes .page-header,
  #page-structured-notes #sn-inbox-bar,
  #page-structured-notes .ds-notes-list {
    margin-left: 16px;
    margin-right: 16px;
  }
  #page-structured-notes .ds-market-header { padding-left: 16px; padding-right: 16px; }
  #page-structured-notes .ds-market-controls { padding-left: 16px; padding-right: 16px; }
  #page-structured-notes .sn-kind-tabs { padding-left: 16px !important; }

  .ds-invcard-featured-row,
  .ds-invcard-grid {
    padding: 14px 16px 22px;
  }

  .ds-invcard-editorial {
    min-height: 560px;
  }

  .ds-invcard-editorial .ds-invcard-front > .ds-invcard-hero {
    flex-basis: 260px;
    height: 260px;
  }

  .ds-invcard-magazine {
    min-height: 360px;
  }

  .ds-invcard-magazine .ds-invcard-hero {
    min-height: 250px;
  }

  .ds-invcard-brand-wordmark {
    font-size: 24px;
  }

  .ds-invcard-hero-spark {
    bottom: 74px;
    height: 58px;
  }

  .ds-invcard-hero-title .ds-invcard-name {
    font-size: 20px;
  }

  .ds-invcard-hero-title .ds-invcard-tagline {
    font-size: 11.5px;
  }

  .ds-invcard-editorial .ds-invcard-metric-strip,
  .ds-invcard-editorial .ds-invcard-cta-row,
  .ds-invcard-magazine .ds-invcard-mag-body,
  .ds-invcard-back-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ═══════════════════════════════════════════════════
   APRIL 2026 MOCKUP PASS — definitive spec
   Card shell stays DARK in every theme. Card-scoped
   custom properties hold the dark-surface palette so
   the luxury contrast never inverts with the page.
   ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   LIGHT-MODE CARD PAPER — tenant-derived.
   The light card face was a hardcoded CVI cream/gold parchment
   (#FBF8F1 -> #E9E1CD, gold #D4AF37 / #B8935A, ink #1A140A) carrying
   !important, so every white-label rendered a SAND card on its own
   palette — FTIB blue site, sand card. These tokens derive paper, ink
   and edge from the tenant's own --accent, the one token reliably
   present on a white-label page. With no --accent the fallback is
   #B8935A, which reproduces the original cream.
   ═══════════════════════════════════════════════════ */
:root {
  --card-paper-tint:  var(--accent, #B8935A);
  --card-paper-1:     color-mix(in srgb, var(--card-paper-tint) 3%,  #ffffff);
  --card-paper-2:     color-mix(in srgb, var(--card-paper-tint) 8%,  #ffffff);
  --card-paper-3:     color-mix(in srgb, var(--card-paper-tint) 15%, #ffffff);
  /* Ink is always mixed into near-black so it stays legible on the paper
     whatever hue the tenant uses. */
  --card-paper-ink:      color-mix(in srgb, var(--card-paper-tint) 14%, #10141b);
  --card-paper-ink-soft: color-mix(in srgb, var(--card-paper-tint) 12%, #454b54);
  --card-paper-edge:     var(--card-paper-tint);
}

.ds-invcard-face {
  --card-ink:       #0B1220;
  --card-ink-2:     #0F1828;
  --card-ink-deep:  #070B12;
  --card-gold:      var(--accent,#2fd07a);
  --card-gold-warm: #B8935A;
  --card-line:      rgba(255,255,255,0.06);
  --card-line-2:    rgba(255,255,255,0.10);
  --card-label:     rgba(255,255,255,0.55);
  --card-label-2:   rgba(255,255,255,0.45);
  --card-text:      rgba(255,255,255,0.94);
  --card-text-2:    rgba(255,255,255,0.82);
}

/* Force the dark shell on front + back regardless of page theme (Light / Dark / Noir). */
.ds-invcard-face,
.ds-invcard-editorial .ds-invcard-front,
.ds-invcard-back,
body.theme-dark .ds-invcard-face,
body.theme-dark .ds-invcard-back,
#page-structured-notes .ds-invcard-face,
#page-structured-notes .ds-invcard-back {
  background:
    radial-gradient(circle at 16% 10%, rgba(212,175,55,0.06), transparent 34%),
    linear-gradient(180deg, var(--card-ink-2) 0%, var(--card-ink) 62%, var(--card-ink-deep) 100%);
  border: 1px solid rgba(212,175,55,0.14);
  border-radius: 18px;
}

/* Gold hairline at the very top edge of the front — institutional accent. */
.ds-invcard-face.ds-invcard-front::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.55) 18%, rgba(212,175,55,0.85) 50%, rgba(212,175,55,0.55) 82%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}

/* ── Hero: full-width gold sparkline overlay that traverses the image ── */
.ds-invcard-hero-spark {
  left: 0;
  right: 0;
  width: 100%;
  /* Traverses the hero; its drawn line reaches ~60-70% up from the hero bottom. */
  bottom: 96px;
  height: 150px;
  opacity: 0.95;
  mix-blend-mode: screen;
}
.ds-invcard-magazine .ds-invcard-hero-spark {
  bottom: 110px;
  height: 150px;
}

/* ── Category chip moved to BOTTOM-LEFT, above the name block ── */
.ds-invcard-hero-meta {
  gap: 14px;
}
.ds-invcard-hero-title-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.ds-invcard-cat-chip {
  background: rgba(11,18,32,0.55) !important;
  border: 1px solid rgba(212,175,55,0.55) !important;
  color: var(--card-gold) !important;
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  max-width: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Name: serif (Fraunces) — single line, ellipsis on overflow. */
.ds-invcard-hero-title .ds-invcard-name,
.ds-invcard-magazine .ds-invcard-hero-title .ds-invcard-name {
  font-family: 'Fraunces', Georgia, 'Source Serif Pro', 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  display: block !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: horizontal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100%;
}
.ds-invcard-magazine .ds-invcard-hero-title .ds-invcard-name { font-size: 24px; }
.ds-invcard-hero-title .ds-invcard-tagline {
  color: var(--card-gold);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 6px;
  text-shadow: none;
}

/* Wordmark top-left — smaller, Fraunces + mono subline, warm brass. */
.ds-invcard-brand-wordmark,
.ds-invcard .ds-invcard-brand-wordmark,
.ds-invcard-face .ds-invcard-brand-wordmark {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  letter-spacing: 0.14em !important;
  color: var(--card-gold-warm) !important;
}
.ds-invcard-brand-sub {
  font-size: 8px;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.86);
}

/* Blurb below scrim — inside dark shell, white 82%, 3-line clamp. */
.ds-invcard-blurb,
.ds-invcard-magazine .ds-invcard-mag-body .ds-invcard-blurb {
  padding: 16px 22px 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--card-text-2);
  -webkit-line-clamp: 3;
}

/* ── Metric strip: 3 cells, eyebrow + big gold/white value + sub-label ── */
.ds-invcard-editorial .ds-invcard-metric-strip {
  padding: 18px 22px;
  background: transparent;
  border-top: 1px solid var(--card-line);
  border-bottom: 1px solid var(--card-line);
}
.ds-invcard-metric-cell {
  min-height: 96px;
  padding-right: 14px;
}
.ds-invcard-metric-cell + .ds-invcard-metric-cell {
  padding-left: 18px;
}
.ds-invcard-metric-cell:first-child,
.ds-invcard-metric-cell:nth-child(2) {
  border-right: 1px solid;
  border-image: linear-gradient(180deg, transparent 0%, rgba(212,175,55,0.30) 50%, transparent 100%) 1;
}
.ds-invcard-metric-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--card-label-2);
  margin-bottom: 10px;
}
.ds-invcard-metric-val {
  font-family: 'JetBrains Mono', 'SF Mono', SFMono-Regular, Consolas, monospace;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--card-text);
  min-height: 30px;
  gap: 3px;
}
.ds-invcard-metric-val.is-gold { color: var(--card-gold); }
.ds-invcard-metric-main { font-size: 1em; }
.ds-invcard-metric-unit {
  font-size: 0.48em;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.92;
  padding-bottom: 2px;
}
.ds-invcard-metric-sub {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--card-label);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── CTA row: full-width gold outline button + tight FROM block ── */
.ds-invcard-editorial .ds-invcard-cta-row,
.ds-invcard-magazine .ds-invcard-cta-row {
  padding: 16px 22px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.ds-invcard-cta {
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--card-gold);
  color: var(--card-gold);
  background: rgba(212,175,55,0.04);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ds-invcard-cta:hover {
  background: rgba(212,175,55,0.12);
  color: var(--card-gold);
}
.ds-invcard-cta-arrow { font-size: 16px; }
.ds-invcard-from {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--card-label-2);
  text-align: right;
  line-height: 1.3;
}
.ds-invcard-from-val {
  display: inline-block;
  margin-top: 4px;
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--card-gold);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ═══ BACK FACE ═══ */
.ds-invcard-back-inner {
  padding: 20px 22px 18px;
  gap: 14px;
}
.ds-invcard-back-inner::before { display: none; } /* strip the old watermark flourish */
.ds-invcard-back-hdr { gap: 14px; align-items: flex-start; }

.ds-invcard-back-name {
  font-family: 'Fraunces', Georgia, 'Source Serif Pro', serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.ds-invcard-back-subtitle {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--card-gold);
}

/* Monogram (top-right) — gold-outlined rounded square with serif "C". */
.ds-invcard-back-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(212,175,55,0.60);
  background: rgba(212,175,55,0.06);
  color: var(--card-gold);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.ds-invcard-back-isin-lbl {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--card-label-2);
}
.ds-invcard-back-isin-val {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 11px;
  color: var(--card-text);
}

/* Ledger — 14 rows, subtle alternating tint, hairline dividers. */
.ds-invcard-ledger {
  border: 1px solid var(--card-line);
  border-radius: 10px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  flex: 1 1 auto;
  overflow: hidden;
}
.ds-invcard-ledger-row {
  padding: 5px 14px;
  min-height: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent;
}
.ds-invcard-ledger-row:nth-child(odd) {
  background: rgba(255,255,255,0.025);
}
.ds-invcard-ledger-row:last-child { border-bottom: none; }
.ds-invcard-ledger-lbl {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: rgba(255,255,255,0.58);
}
.ds-invcard-ledger-val {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--card-text);
  max-width: 62%;
}

/* Investment thesis block. */
.ds-invcard-thesis {
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding-top: 4px;
}
.ds-invcard-thesis-icon {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 0;
  color: var(--card-gold);
  margin-top: 1px;
}
.ds-invcard-thesis-icon-svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.7;
}
.ds-invcard-thesis-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--card-gold);
  margin-bottom: 4px;
}
.ds-invcard-thesis-copy p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--card-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Two-button footer + disclaimer. */
.ds-invcard-back-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}
.ds-invcard-back-actions.is-single { grid-template-columns: 1fr; }
.ds-invcard-back-btn {
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  gap: 8px;
}
.ds-invcard-back-btn.is-primary {
  background: var(--card-gold);
  border-color: var(--card-gold);
  color: var(--card-ink);
}
.ds-invcard-back-btn.is-primary:hover { background: #E2BF4B; border-color: #E2BF4B; }
.ds-invcard-back-btn.is-secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}
.ds-invcard-back-btn.is-secondary:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.28);
}
.ds-invcard-back-btn-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}
.ds-invcard-back-flip-note { display: none; }

.ds-invcard-back-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--card-line);
  font-size: 10.5px;
  font-weight: 500;
  text-align: center;
  color: rgba(255,255,255,0.45);
}
.ds-invcard-back-foot::before { display: none; }
.ds-invcard-back-foot-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: rgba(255,255,255,0.50);
}

/* Mobile tuning for the mockup pass. */
@media (max-width: 768px) {
  .ds-invcard-back-actions { grid-template-columns: 1fr; }
  .ds-invcard-editorial .ds-invcard-cta-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ds-invcard-from { text-align: left; }
  .ds-invcard-ledger-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .ds-invcard-ledger-val {
    max-width: 58%;
    text-align: right;
  }
}

/* ── Disable hero sparkline overlay (per Amir 2026-04-24 — too busy on hero). */
.ds-invcard-hero-spark,
.ds-invcard-editorial .ds-invcard-hero-spark,
.ds-invcard-magazine  .ds-invcard-hero-spark {
  display: none !important;
}

/* ═══════════════════════════════════════════════════
   MOBILE TUNING v2 — FixedNote cards (Amir, 2026-05-02)
   v1 rules at 700px proved too tight; bumping breakpoint
   to 900px to align with the mobile-sidebar threshold and
   shrinking the hero so the blurb has real estate to render.
   ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Single-column grid, full-width cards. */
  .ds-invcard-grid,
  .ds-invcard-featured-row {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .ds-invcard,
  .ds-invcard-editorial,
  .ds-invcard-magazine {
    width: 100%;
    max-width: 100%;
  }

  /* Editorial: taller min-height so hero (260px) + blurb + metric strip +
     CTA all fit without crushing the description. */
  .ds-invcard-editorial { min-height: 640px; }

  /* Magazine: force column flow on mobile (was already 768px override —
     re-assert at 700px in case nested rules fight back) and give the body
     enough room for blurb + metrics + CTA. */
  .ds-invcard-magazine { min-height: 600px; }
  .ds-invcard-magazine .ds-invcard-front { flex-direction: column; }
  .ds-invcard-magazine .ds-invcard-hero {
    flex: 0 0 240px;
    min-height: 240px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .ds-invcard-magazine .ds-invcard-mag-body {
    flex: 1 1 auto;
    overflow: visible; /* let content claim the height it needs */
  }

  /* Description blurb: ensure visible, bump to 3 lines on mobile so the
     2–3-line marketing summary is not silently clipped. */
  .ds-invcard-blurb,
  .ds-invcard-magazine .ds-invcard-mag-body .ds-invcard-blurb {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    padding: 14px 18px 4px;
    font-size: 13px;
    line-height: 1.5;
  }

  /* Back face: the front/back faces are position:absolute with overflow:hidden
     on the shell, so any back-face content beyond the card's min-height was
     unreachable. Allow vertical scroll inside the back face on mobile so all
     ledger rows + thesis + footer remain readable. */
  .ds-invcard.is-flipped .ds-invcard-back,
  .ds-invcard-back {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ds-invcard-back-inner {
    height: auto;
    min-height: 100%;
    padding: 18px 18px 16px;
  }

  /* CTA row: stack on narrow viewports (already done at 768px — reassert
     at 700px for safety with the new shell rules above). */
  .ds-invcard-editorial .ds-invcard-cta-row,
  .ds-invcard-magazine  .ds-invcard-cta-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ds-invcard-from { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT-MODE PREMIUM v2 (2026-05-07) — Section E "Cream wash"
   --------------------------------------------------------------
   Dark mode (body.dark) is unchanged. These rules apply only when
   body does NOT carry the .dark class. Approach: keep the real
   /img/card-library/ photo, swap the scrim + vignette to a cream
   wash, switch hero text/chrome from white-on-photo to charcoal-
   on-cream with a gold key-line. No JS changes required.
   ═══════════════════════════════════════════════════════════════ */
body:not(.dark) .ds-invcard-hero-img {
  filter: saturate(0.92) contrast(1.04);
}

/* Slim editorial hero (240px) — used by .ds-invcard-editorial */
body:not(.dark) .ds-invcard-editorial .ds-invcard-hero-scrim {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--card-paper-1) 0%, transparent) 0%,
    color-mix(in srgb, var(--card-paper-1) 18%, transparent) 70%,
    color-mix(in srgb, var(--card-paper-1) 42%, transparent) 100%);
}

/* Large hero (.ds-invcard-hero-vignette / scrim variant) */
body:not(.dark) .ds-invcard-hero-scrim {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--card-paper-1) 0%, transparent) 0%,
    color-mix(in srgb, var(--card-paper-1) 6%, transparent) 24%,
    color-mix(in srgb, var(--card-paper-1) 22%, transparent) 62%,
    color-mix(in srgb, var(--card-paper-1) 50%, transparent) 100%);
}
body:not(.dark) .ds-invcard-hero-vignette {
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, color-mix(in srgb, var(--card-paper-edge) 8%, transparent) 0%, color-mix(in srgb, var(--card-paper-edge) 0%, transparent) 60%),
    radial-gradient(ellipse 100% 70% at 50% 0%,  color-mix(in srgb, var(--card-paper-1) 12%, transparent) 0%, color-mix(in srgb, var(--card-paper-1) 0%, transparent) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-paper-edge) 8%, transparent);
}

/* Hero title — white over photo, soft dark shadow for legibility */
body:not(.dark) .ds-invcard-hero-title .ds-invcard-name {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.45);
}
body:not(.dark) .ds-invcard-hero-title .ds-invcard-tagline {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  opacity: 1;
}

/* Brand block (CVI · Private Wealth) — warm gold + white sub on photo */
body:not(.dark) .ds-invcard-brand-wordmark {
  color: var(--card-gold-warm, var(--accent,#2fd07a)) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
body:not(.dark) .ds-invcard-brand-sub {
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Status pill — white surface w/ gold key-line, charcoal text */
body:not(.dark) .ds-invcard-status {
  background: rgba(255,255,255,0.92);
  border-color: color-mix(in srgb, var(--card-paper-edge) 45%, transparent);
  color: var(--card-paper-ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
body:not(.dark) .ds-invcard-status-dot {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--card-paper-edge) 18%, transparent);
}

/* Category chip — keep its inline tint (set by JS) but lift contrast */
body:not(.dark) .ds-invcard-cat-chip {
  background: color-mix(in srgb, var(--card-paper-1) 78%, transparent) !important;
  border-color: color-mix(in srgb, var(--card-paper-edge) 30%, transparent) !important;
  color: var(--card-paper-ink-soft) !important;
}

/* Hero canvas sparkline — slightly less opacity on light */
body:not(.dark) .ds-invcard-hero-spark { opacity: 0.7; }

/* Metric value gold uses gold-text token (better contrast on cream body) */
body:not(.dark) .ds-invcard-metric-val.is-gold {
  color: var(--gold-text, var(--card-paper-ink-soft));
}
/* ── Card body shell (front + back below the hero) — cream wash ── */
body:not(.dark) .ds-invcard-face,
body:not(.dark) .ds-invcard-editorial .ds-invcard-front,
body:not(.dark) .ds-invcard-back,
body:not(.dark) #page-structured-notes .ds-invcard-face,
body:not(.dark) #page-structured-notes .ds-invcard-back {
  background:
    radial-gradient(circle at 16% 10%, color-mix(in srgb, var(--card-paper-edge) 8%, transparent), transparent 40%),
    linear-gradient(180deg, var(--card-paper-1) 0%, var(--card-paper-2) 60%, var(--card-paper-3) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--card-paper-edge) 28.0%, transparent) !important;
  color: var(--card-paper-ink);
}
body:not(.dark) #page-structured-notes,
body:not(.dark) #page-structured-notes .ds-page {
  background: var(--card-paper-1) !important;
  color: var(--card-paper-ink);
}
body:not(.dark) .ds-invcard-face *:not(.ds-invcard-hero):not(.ds-invcard-hero *):not(button):not(svg):not(path):not(.ds-invcard-cat-chip):not(.ds-invcard-status):not(.ds-invcard-status *):not(.ds-invcard-metric-val) {
  color: inherit;
}
body:not(.dark) .ds-invcard-tagline,
body:not(.dark) .ds-invcard-pitch,
body:not(.dark) .ds-invcard-meta,
body:not(.dark) .ds-invcard-metric-label,
body:not(.dark) .ds-invcard-row,
body:not(.dark) .ds-invcard-desc {
  color: color-mix(in srgb, var(--card-paper-ink) 72%, transparent) !important;
}
body:not(.dark) .ds-invcard-metric-val {
  color: var(--card-paper-ink) !important;
}
body:not(.dark) .ds-invcard-face hr,
body:not(.dark) .ds-invcard-face [style*="border"],
body:not(.dark) .ds-invcard-back hr {
  border-color: color-mix(in srgb, var(--card-paper-ink) 12%, transparent) !important;
}
/* ═══ end light-mode premium v2 ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   E2-P1 Wave-A LIVE LIFT — Fund + Hybrid extensions (additive only)
   Audit refs: §K (card-system reuse correction) + §4 (back-face row contracts)
   No existing rule modified. Demo-gated via marketplace-inline.js _demoMode().
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kind pills on back-face aside. Gold = Fund; Green = Hybrid. */
.ds-invcard-pill--fund,
.ds-invcard-pill--hybrid {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  line-height: 1.4;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.ds-invcard-pill--fund   { color: var(--gold, var(--accent,#2fd07a)); background: rgba(212, 175, 55, 0.10); }
.ds-invcard-pill--hybrid { color: var(--green, #16A34A); background: rgba(22, 163, 74, 0.10); }

/* Hybrid pattern badge — parallel / fund_of_notes / note_on_fund. */
.ds-invcard-pattern-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--surface2, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.18));
  color: var(--text2, inherit);
}

/* Hybrid two-column comparison (replaces 14-row ledger on Hybrid back face). */
.ds-invcard-hybrid-comparison {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--border, rgba(180,140,60,0.18));
  border-bottom: 1px solid var(--border, rgba(180,140,60,0.18));
  flex: 1;
  overflow-y: auto;
}
.ds-invcard-hybrid-comparison-head,
.ds-invcard-hybrid-comparison-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 5px 2px;
  border-bottom: 1px dashed rgba(120, 90, 40, 0.12);
}
.ds-invcard-hybrid-comparison-row:last-child { border-bottom: none; }
.ds-invcard-hybrid-comparison-head { border-bottom: 1px solid rgba(120, 90, 40, 0.30); }
.ds-invcard-hybrid-comparison-leg {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold-text, var(--gold, #8B6914));
}
.ds-invcard-hybrid-comparison-row .ds-invcard-ledger-val {
  font-size: 11px;
  font-weight: 600;
  text-align: left;
}

/* Cross-leg footnote under the comparison table. */
.ds-invcard-cross-leg-footnote {
  font-size: 10px;
  line-height: 1.5;
  color: var(--text3, rgba(255,255,255,0.62));
  padding: 6px 2px;
  letter-spacing: 0.1px;
}
.ds-invcard-cross-leg-footnote strong {
  color: var(--text2, inherit);
  font-weight: 700;
}

/* Hybrid back-face action block: leg pair above the primary doc button. */
.ds-invcard-back-actions--hybrid {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 8px;
}
.ds-invcard-back-leg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ds-invcard-back-btn--leg {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--card-gold, var(--accent,#2fd07a));
  min-height: 34px;
  font-size: 11px;
  letter-spacing: 0.3px;
}
.ds-invcard-back-btn--leg:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--card-gold, var(--accent,#2fd07a));
}

/* Demo banner above shelf when ?demo=fund-hybrid is active. */
.cvipw-demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  margin: 0 0 12px;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid var(--gold, var(--accent,#2fd07a));
  border-radius: 6px;
  color: var(--gold-text, var(--gold, #8B6914));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.cvipw-demo-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold, var(--accent,#2fd07a));
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  flex-shrink: 0;
}

/* Category-tab variant — additive on top of existing .pm-filters chips. */
.pm-filters [data-kind].active {
  border-color: var(--gold, var(--accent,#2fd07a));
  color: var(--gold, var(--accent,#2fd07a));
  background: rgba(212, 175, 55, 0.06);
}

/* Demo toast (inline, ephemeral). */
.cvipw-demo-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--surface, #1C2333);
  color: var(--text, #F0F2F5);
  border: 1px solid var(--gold, var(--accent,#2fd07a));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  z-index: 100000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.cvipw-demo-toast.is-visible { opacity: 1; }

/* Product-kind tab strip (primary-market). Inline styles set base look;
   :hover can only live in CSS. Dark/gold institutional language. */
.sn-kind-tab:not(.is-active):hover {
  border-color: var(--gold) !important;
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE CARD FIX — 2026-08-20
   The editorial card is a 3D flip card: .ds-invcard-front / -back are
   position:absolute; inset:0; overflow:hidden, so the card's min-height is a
   HARD ceiling on the front face. On mobile the block set min-height:640px
   while the front content actually needs ~763px at 606px wide (more as the
   viewport narrows and text wraps), so the bottom ~120px — including the
   "View Details" CTA — was clipped off and unreachable.
   Fix: on mobile let the FRONT drive the height (position:relative, auto
   height) so the card grows to fit hero + blurb + metrics + CTA, exactly as
   the desktop layout does. The BACK stays an absolute overlay so the flip
   still works, and keeps its own scroll if its content runs longer.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ds-invcard-editorial { min-height: 0 !important; height: auto !important; }

  .ds-invcard-editorial .ds-invcard-flipper {
    height: auto !important;
    min-height: 0 !important;
  }

  /* front drives the card height — nothing is cut off any more */
  .ds-invcard-editorial .ds-invcard-front {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* back remains an absolutely-positioned overlay for the flip */
  .ds-invcard-editorial .ds-invcard-back {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
  }

  /* when flipped, the back must be able to claim the height it needs so its
     own actions stay reachable too (front/back parity, as on the web) */
  .ds-invcard-editorial.is-flipped .ds-invcard-front { position: absolute !important; inset: 0 !important; }
  .ds-invcard-editorial.is-flipped .ds-invcard-back  { position: relative !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .ds-invcard-editorial.is-flipped { min-height: 0 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   BACK FACE — the fact ledger must never be the item that gets cut.
   .ds-invcard-ledger was flex:1 1 auto inside a fixed-height column, so
   whenever the back content exceeded the card it was the ledger that
   absorbed the shortfall — and because it carries overflow:hidden (needed
   for its rounded corners) the loss was SILENT: the last row simply got
   sliced in half. Measured on fixednote.com: ledger needed 336px, was
   given 301px, on every card on the page.

   Two changes, in priority order:
   1. The ledger takes its natural height and is never squeezed.
   2. The header, whose height varies with the note name, absorbs the
      pressure instead — a clamped title is a far better thing to lose
      than a row of facts.
   The rest is ~25px reclaimed from gaps and button padding, which is what
   made room for the full list without making the card taller.
   ════════════════════════════════════════════════════════════════════ */
.ds-invcard-ledger { flex: 0 0 auto; }
.ds-invcard-back-hdr { flex: 0 1 auto; min-height: 0; }
.ds-invcard-back-inner { gap: 10px; }
.ds-invcard-doc-actions a,
.ds-invcard-doc-actions button { padding-top: 10px; padding-bottom: 10px; }
.ds-invcard-back-foot { padding-top: 6px; }

/* ════════════════════════════════════════════════════════════════════
   FUNDING PROGRESS — how much has been committed / invested.
   Previously this lived only on the featured hero card, so every other
   product on the market told the investor nothing about whether it was
   empty or nearly full. Now on every card, both front-face variants.

   Colours come from the tenant tokens (--accent / --card-paper-*), so the
   bar is brand-correct on every white-label and in both themes.
   ════════════════════════════════════════════════════════════════════ */
.ds-invcard-funding {
  padding: 12px 22px 0;
}
.ds-invcard-funding-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.ds-invcard-funding-amt {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--card-text, rgba(255,255,255,0.94));
  /* A money figure must never be clipped — it shrinks, it does not truncate. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.ds-invcard-funding-pct {
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--card-gold, var(--accent, #2fd07a));
  flex: 0 0 auto;
}
.ds-invcard-funding-track {
  height: 4px;
  border-radius: 999px;
  background: var(--card-line-2, rgba(255,255,255,0.10));
  overflow: hidden;
}
.ds-invcard-funding-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--card-gold, var(--accent, #2fd07a));
  transition: width 0.4s ease-out;
}
.ds-invcard-funding-sub {
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--card-label, rgba(255,255,255,0.55));
}

/* Light mode — paper tokens, same as the rest of the light card face. */
body:not(.dark) .ds-invcard-funding-amt {
  color: var(--card-paper-ink, #1A140A);
}
body:not(.dark) .ds-invcard-funding-fill {
  background: var(--card-paper-edge, var(--accent, #B8935A));
}
body:not(.dark) .ds-invcard-funding-pct {
  color: var(--card-paper-edge, var(--accent, #B8935A));
}
body:not(.dark) .ds-invcard-funding-track {
  background: color-mix(in srgb, var(--card-paper-ink, #1A140A) 12%, transparent);
}
body:not(.dark) .ds-invcard-funding-sub {
  color: var(--card-paper-ink-soft, rgba(26,20,10,0.72));
}

/* The editorial card is height-constrained; the funding row is compact but the
   back-face ledger fix (2026-08-20) showed how easily a fixed height silently
   slices content, so give the front a little headroom rather than let the row
   push the CTA out of view. */
@media (max-width: 900px) {
  .ds-invcard-funding { padding: 10px 18px 0; }
  .ds-invcard-funding-amt, .ds-invcard-funding-pct { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   FRONT FACE — the description was collapsing to a single line.
   Same failure as the ledger on the back: .ds-invcard-blurb was
   flex:1 1 auto with overflow:hidden inside a FIXED-height card
   (height/min-height 610px), so it was the item that absorbed any
   shortfall. -webkit-line-clamp is a MAXIMUM, not a minimum, so nothing
   stopped it collapsing — and the cut was silent and mid-word
   ("...two UAE manufacturing-").

   It only shows at wide viewports, which is why it looks intermittent:
   more grid columns -> narrower cards -> the 300px hero takes half of a
   610px card and the blurb is what pays. Measured at 1920: blurb given
   33px (1 line) when it wanted 2-3.

   Fix swaps which element is elastic. The blurb takes its clamped height
   and never shrinks; the HERO becomes the flexible one and gives up only
   what is actually needed (measured: 300 -> 276px where two lines are
   wanted, 300 -> 257px where three are), never below 240px. Card height
   is unchanged and front overflow is 0.
   ════════════════════════════════════════════════════════════════════ */
.ds-invcard-blurb { flex: 1 0 auto; }
.ds-invcard-editorial .ds-invcard-hero,
.ds-invcard-editorial .ds-invcard-hero-editorial { flex: 0 1 300px !important; min-height: 240px; }

/* Reserve the full clamp height so a shorter description does not shift the
   card. Without this the blurb sized to its text (2 lines vs 3), and the hero
   flexed by different amounts to compensate — so images ended up different
   heights across a row. content-box keeps this breakpoint-proof: min-height
   covers the TEXT only, and whatever padding that breakpoint sets is added on
   top, so no padding value has to be hardcoded here. width:auto because a
   content-box element with width:100% plus horizontal padding would overflow.
   Measured at 1920: blurbs 58/76/76 -> 76/76/76, heroes 276/257/257 -> 257 flat. */
.ds-invcard-blurb { box-sizing: content-box; width: auto; min-height: 3lh; }

/* ISIN — an identifier must never break across lines.
   .ds-invcard-back-isin-val was 14px with no white-space rule, so a 20-char
   ISIN (CVI-NOTE-2026-C7813A) in JetBrains Mono outgrew the header column and
   broke mid-identifier. A half-shown ISIN is worse than none: unlike a coupon
   or a maturity it is either complete or it is wrong, and a wrapped one invites
   someone to copy half of it. The file already carries a compact 11.5px variant
   for this element; it was simply not the rule winning here, so this pins both
   the size and the no-break for every surface. */
.ds-invcard-back-isin-val { font-size: 11.5px; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════
   LEDGER on LIGHT surfaces — the row separators were invisible.
   The rule winning on FixedNote sets
       border-bottom: 1px solid rgba(255,255,255,0.06)
   which is a WHITE hairline. On CVIPW it sits on a near-black card and
   reads as a clean table rule; on FixedNote it sits on cream and simply
   is not there. That is why the FixedNote back reads as one undivided
   block of text while the CVIPW original reads as a table.
   Restores the separator in an ink tone, plus the alternating band CVIPW
   gets from its surface, and a little air between the ISIN header and the
   first row. Scoped to body:not(.dark) so the dark card is untouched.
   ════════════════════════════════════════════════════════════════════ */
body:not(.dark) .ds-invcard-ledger-row { border-bottom: 1px solid rgba(16,40,28,0.10); }
body:not(.dark) .ds-invcard-ledger-row:nth-child(even) { background: rgba(16,40,28,0.035); }
body:not(.dark) .ds-invcard-ledger-row:last-child { border-bottom: none; }
body:not(.dark) .ds-invcard-ledger { margin-top: 4px; }

/* Invest — the primary action on a deal card. Details reads, Invest acts, so
   Invest carries the accent and Details steps back to an outline. Both stay
   flex:1 so the pair splits the row evenly and neither can squeeze the other
   to an unreadable width on a narrow card. */
.ds-invcard-cta-invest {
  flex: 1;
  background: var(--accent, #2fd07a);
  border-color: transparent;
  color: #06120c;
  font-weight: 700;
  justify-content: center;
}
.ds-invcard-cta-invest:hover { filter: brightness(1.06); }
body:not(.dark) .ds-invcard-cta-invest { color: #ffffff; }

/* The CTA row was over-subscribed: Details + Invest + the "From" block needed
   416px in a 308px row, so the two buttons were squeezed to unequal widths and
   Details ended up TWICE the width of Invest — the opposite of the intent.
   "From" is contextual (the minimum also appears in the ledger), so it moves to
   its own line above and the two actions share the full width evenly. */
.ds-invcard-cta-row { flex-wrap: wrap; }
/* Line 1: the minimum, then a compact Details. Line 2: Invest, full width.
   Invest gets its own line ON PURPOSE — it is the action the card exists to
   offer, a full-width target is the easiest thing to hit on a phone, and it
   stops the two buttons fighting the "From" block for a 308px row (which was
   what made Details render twice the width of Invest). */
/* The "From <minimum>" block is dropped from the CTA row: the same figure is
   already in the metric strip above as MINIMUM INVESTMENT and again in the
   back ledger, and with two buttons in the row it wrapped to its own line and
   showed the label with its value orphaned off. Three copies of one number
   was one too many even before that. */
.ds-invcard-cta-row .ds-invcard-from { display: none; }
.ds-invcard-cta-row .ds-invcard-cta { flex: 0 1 auto; min-width: 0; }
.ds-invcard-cta-row .ds-invcard-cta-invest { flex: 1 0 100%; margin-top: 2px; }

/* Hide the faces underneath so their text cannot bleed through the panel. */
.ds-invcard.is-investing .ds-invcard-front,
.ds-invcard.is-investing .ds-invcard-back { visibility: hidden; }
.ds-invcard-investface-in {
  height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 14px 16px;
}
.ds-invcard-investface-close {
  background: none; border: 0; cursor: pointer; padding: 4px 2px 10px;
  font: 600 12px var(--ui, system-ui); color: var(--text3, #8b98a8);
}
.ds-invcard-investface-close:hover { color: var(--accent, #2fd07a); }
/* The panel is designed for a 360px sidebar; inside a card it must simply fill. */
.ds-invcard-investface .invpanel { width: auto; max-width: 100%; margin: 0; }

/* Funding panel mounted INSIDE the existing back face. No new face, no overlay:
   the card's own .is-flipped rotation does the turn, so the gesture, geometry
   and rounded edges are identical to opening the details. This only has to make
   the panel behave inside the back's flex column. */
.ds-invcard-investwrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ds-invcard-investwrap .invpanel { width: auto; max-width: 100%; margin: 0; border: 0; background: transparent; padding: 0; }

/* One Data Room button, full width. It replaced a 2x2 grid of four, three of
   which led to a 401 or 403 for most viewers because entitlement is decided
   server-side. A single full-width target also reads as the primary way into
   the documents rather than one of four equal options. */
.ds-invcard-doc-actions-1 { display: block; }
.ds-invcard-doc-actions-1 .ds-invcard-doc-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
}