/* =========================================================================
   JPC Private Bank — Prospect Portal PROTOTYPE (Singapore / MAS basis)
   Mobile-app aesthetic, mirroring the a leading private bank app:
   white ground · centered serif headings · rounded cards · dark pill
   buttons · bottom tab bar. Loads after styles.css (reuses :root tokens).
   ========================================================================= */

/* ---- Prototype page chrome (desktop framing) ------------------------- */
.proto-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(32px, 5vw, 64px);
}
.proto-intro { position: sticky; top: 96px; }
.proto-intro .display { margin-bottom: var(--s5); }
.proto-annot { position: sticky; top: 96px; }
.annot-card {
  border: 1px solid var(--hairline); padding: 22px 24px; margin-bottom: var(--s4);
  transition: border-color var(--t-state), background var(--t-state);
}
.annot-card.active { border-color: var(--accent); background: #fafdfb; }
.annot-card__step { margin-bottom: 8px; }
.annot-card__title { font-family: var(--serif); font-size: 1.12rem; color: var(--ink-strong); margin-bottom: 6px; font-variation-settings:"opsz" 40; }
.annot-card__body { font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.annot-card__cite { font-size: 0.74rem; color: var(--accent-ink); margin-top: 8px; font-weight: 600; letter-spacing: 0.02em; }

.proto-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--s5); }
.btn-ghost {
  font-size: 0.86rem; font-weight: 500; padding: 9px 16px;
  border: 1px solid var(--hairline-2); background: #fff; color: var(--ink-strong);
  border-radius: 100px; transition: border-color var(--t-state), background var(--t-state);
}
.btn-ghost:hover { border-color: var(--ink-strong); }

/* ---- Device frame ---------------------------------------------------- */
.device-wrap { display: flex; justify-content: center; position: sticky; top: 24px; align-self: start; }
.device {
  width: 392px; max-width: 100%;
  background: #0c0c0c; border-radius: 56px; padding: 13px;
  box-shadow: 0 50px 80px -30px rgba(0,0,0,.42), 0 0 0 1px rgba(0,0,0,.06);
}
.device__screen {
  position: relative; width: 100%;
  height: min(812px, calc(100vh - 120px)); min-height: 560px;
  background: var(--paper); border-radius: 44px; overflow: hidden;
}

/* ---- App shell ------------------------------------------------------- */
.app { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 15px; }
.statusbar {
  height: 50px; flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; font-size: 0.82rem; font-weight: 600; color: var(--ink-strong); position: relative; z-index: 3;
}
.statusbar__island {
  position: absolute; left: 50%; top: 11px; transform: translateX(-50%);
  width: 96px; height: 27px; background: #0c0c0c; border-radius: 100px;
}
.statusbar__right { display: flex; align-items: center; gap: 6px; }
.statusbar__right svg { width: 16px; height: 16px; }

.app__view { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
.app__view::-webkit-scrollbar { width: 0; }

/* Tab bar */
.tabbar {
  flex: none; display: flex; border-top: 1px solid var(--hairline);
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px); padding: 8px 6px 22px;
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; color: var(--faint); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.02em;
  transition: color var(--t-state);
}
.tab svg { width: 22px; height: 22px; stroke-width: 1.6; }
.tab.active { color: var(--ink-strong); }
.tab__lock { position: relative; }
.tab__lock::after {
  content: ""; position: absolute; top: -2px; right: -7px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity var(--t-state);
}
.tab__lock.has-new::after { opacity: 1; }

/* ---- App content building blocks ------------------------------------- */
.screen { display: none; padding: 8px 20px 28px; animation: fade .26s ease; }
.screen.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px);} to{opacity:1; transform:none;} }

.app-h {
  font-family: var(--serif); font-weight: 380; font-size: 1.5rem; line-height: 1.22;
  color: var(--ink-strong); text-align: center; letter-spacing: -0.01em;
  margin: 14px auto 22px; max-width: 17ch; font-variation-settings:"opsz" 60;
}
.app-h--left { text-align: left; margin-left: 0; max-width: none; }
.app-section-title { font-size: 1.5rem; font-weight: 700; color: var(--ink-strong); letter-spacing: -0.01em; }
.app-eyebrow {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-align: center; display: block; margin-bottom: 2px;
}
.app-icon-badge {
  width: 46px; height: 46px; margin: 6px auto 0; border-radius: 50%;
  border: 1px solid var(--hairline); display: grid; place-items: center; color: var(--accent-ink);
}
.app-icon-badge svg { width: 20px; height: 20px; stroke-width: 1.5; }

/* Card */
.acard {
  border: 1px solid var(--hairline); border-radius: 18px; padding: 22px;
  margin-bottom: 16px; background: #fff;
}
.acard--center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.acard__icon { width: 34px; height: 34px; color: var(--accent-ink); }
.acard__icon svg { width: 100%; height: 100%; stroke-width: 1.4; }
.acard__title { font-weight: 600; color: var(--ink-strong); font-size: 1.02rem; }

/* Pill button */
.pill-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--ink-strong); color: #fff; border: 0; border-radius: 100px;
  padding: 12px 22px; font-size: 0.92rem; font-weight: 500; transition: transform var(--t-state), background var(--t-state);
}
.pill-btn:hover { background: #000; }
.pill-btn:active { transform: scale(.98); }
.pill-btn--full { width: 100%; }
.pill-btn--ghost { background: #fff; color: var(--ink-strong); border: 1px solid var(--hairline-2); }
.pill-btn--ghost:hover { background: #f7f7f6; border-color: var(--ink-strong); }
.pill-btn[disabled] { opacity: .4; pointer-events: none; }

/* Media / abstract art card */
.media-card {
  position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 16px;
  min-height: 200px; display: flex; align-items: flex-end; color: #fff; padding: 18px;
}
.media-card::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(8,10,12,.72) 0%, rgba(8,10,12,.12) 55%, transparent 100%); }
.media-card > * { position: relative; z-index: 1; }
.media-card__title { font-weight: 600; font-size: 1.06rem; line-height: 1.3; }
.media-card__tag {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: rgba(255,255,255,.16); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 0.72rem; font-weight: 600; padding: 5px 11px; border-radius: 100px; margin-bottom: 10px;
}
/* abstract art fills (photo substitutes, swappable) */
.art-fields  { background: linear-gradient(150deg, #6b5836 0%, #8a6f44 38%, #b69a63 70%, #d8c39a 100%); }
.art-aerial  { background: linear-gradient(115deg, #5a4a2e 0%, #7e6537 45%, #a07c3f 75%, #c4a05a 100%); }
.art-entrust { background: linear-gradient(135deg, #0f5f6b 0%, #117d77 30%, #1b1b1b 62%, #9a7b34 100%); }
.art-research{ background: linear-gradient(160deg, #d9d4cb 0%, #efe9df 45%, #cfc7ba 100%); }
.art-teal    { background: linear-gradient(140deg, #0d7d6a 0%, #15c79a 55%, #0c5d50 100%); }
.art-ink     { background: linear-gradient(140deg, #20303a 0%, #16222b 60%, #0d1419 100%); }

/* Progress dots (K&E flow) */
.kprogress { display: flex; gap: 7px; justify-content: center; padding: 6px 0 2px; }
.kprogress i { width: 7px; height: 7px; border-radius: 50%; background: var(--hairline-2); transition: background var(--t-state), width var(--t-state); }
.kprogress i.done { background: var(--accent); }
.kprogress i.now { background: var(--ink-strong); width: 20px; border-radius: 100px; }

/* Choice cards (macro split) */
.choice { display: grid; gap: 12px; margin-top: 8px; }
.choice button {
  text-align: left; border: 1px solid var(--hairline); border-radius: 16px; padding: 18px 20px;
  background: #fff; transition: border-color var(--t-state), background var(--t-state);
}
.choice button:hover { border-color: var(--ink-strong); }
.choice button.sel { border-color: var(--accent); background: #f6fdfb; }
.choice__t { font-weight: 600; color: var(--ink-strong); font-size: 1.02rem; }
.choice__d { color: var(--muted); font-size: 0.86rem; margin-top: 3px; }

/* Pills (selectable) */
.pillrow { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.pillrow button, .chiprow button {
  border: 1px solid var(--hairline-2); background: #fff; color: var(--ink); border-radius: 100px;
  padding: 9px 15px; font-size: 0.86rem; transition: all var(--t-state);
}
.pillrow button.sel, .chiprow button.sel { background: var(--ink-strong); color: #fff; border-color: var(--ink-strong); }
.chiprow { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }

/* Have-held rows (alternatives) */
.heldrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--hairline); }
.heldrow:last-of-type { border-bottom: 0; }
.heldrow__t { font-weight: 700; color: var(--ink-strong); font-size: 0.96rem; }
.heldrow__d { color: var(--muted); font-size: 0.8rem; margin-top: 2px; max-width: 30ch; }
.toggle2 { display: flex; flex: none; border: 1px solid var(--hairline-2); border-radius: 100px; overflow: hidden; }
.toggle2 button { border: 0; background: #fff; color: var(--muted); font-size: 0.78rem; font-weight: 600; padding: 7px 13px; }
.toggle2 button.sel { background: var(--ink-strong); color: #fff; }

/* AI opt-in (SG) */
.consent {
  display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--hairline);
  border-radius: 16px; padding: 16px 18px; cursor: pointer; transition: border-color var(--t-state), background var(--t-state);
}
.consent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.consent.on { border-color: var(--accent); background: #f6fdfb; }
.consent__box {
  flex: none; width: 24px; height: 24px; border: 1.5px solid var(--hairline-2); border-radius: 7px;
  display: grid; place-items: center; transition: all var(--t-state); color: #fff;
}
.consent.on .consent__box { background: var(--accent); border-color: var(--accent); }
.consent__box svg { width: 14px; height: 14px; opacity: 0; }
.consent.on .consent__box svg { opacity: 1; }
.consent__t { font-size: 0.9rem; color: var(--ink-strong); line-height: 1.45; }
.consent__sub { font-size: 0.78rem; color: var(--muted); margin-top: 8px; }

/* Summary list */
.heard { display: grid; gap: 14px; }
.heard li { list-style: none; display: flex; gap: 12px; align-items: flex-start; }
.heard .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 8px; }
.heard__txt { color: var(--ink); font-size: 0.95rem; line-height: 1.45; }
.note-soft { background: var(--page-alt); border-radius: 14px; padding: 15px 17px; color: var(--muted); font-size: 0.86rem; margin-top: 18px; line-height: 1.5; }

/* Disclaimer */
.disclaimer { font-size: 0.72rem; color: var(--faint); line-height: 1.5; margin-top: 14px; }

/* ---- K&E flow overlay ------------------------------------------------ */
.flow {
  position: absolute; inset: 0; background: var(--paper); z-index: 6;
  display: none; flex-direction: column; transform: translateY(0);
}
.flow.show { display: flex; animation: flowin .26s ease; }
@keyframes flowin { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.flow__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px 4px; }
.flow__back { border: 0; background: none; color: var(--muted); font-size: 0.84rem; display: flex; align-items: center; gap: 5px; padding: 4px; }
.flow__back svg { width: 16px; height: 16px; }
.flow__save { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 0.8rem; }
.flow__body { flex: 1; overflow-y: auto; padding: 8px 22px 20px; }
.flow__body::-webkit-scrollbar { width: 0; }
.flow__foot { flex: none; padding: 12px 22px 26px; border-top: 1px solid var(--hairline); }

/* ---- Unlock moment --------------------------------------------------- */
.unlock {
  position: absolute; inset: 0; z-index: 8; background: #0e1117; color: #fff;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px;
}
.unlock.show { display: flex; }
.unlock__line {
  font-family: var(--serif); font-size: 1.7rem; text-align: center; line-height: 1.3; opacity: 0;
  transform: translateY(10px); font-variation-settings:"opsz" 72;
}
.unlock__line.in { animation: unlockline .6s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes unlockline { to { opacity: 1; transform: none; } }
.unlock__ring { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); display: grid; place-items: center; color: var(--accent); }
.unlock__ring svg { width: 30px; height: 30px; }

/* ---- Implementation options (post-unlock) ---------------------------- */
.assettabs { display: flex; gap: 8px; margin: 4px 0 18px; overflow-x: auto; }
.assettabs::-webkit-scrollbar { height: 0; }
.assettab { flex: none; border: 1px solid var(--hairline-2); background: #fff; color: var(--muted); border-radius: 100px; padding: 8px 16px; font-size: 0.84rem; font-weight: 600; }
.assettab.sel { background: var(--ink-strong); color: #fff; border-color: var(--ink-strong); }

.horizon { margin-bottom: 22px; }
.horizon__h { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 4px; }
.horizon__sub { font-size: 0.78rem; color: var(--muted); margin-bottom: 12px; }

.idea {
  border: 1px solid var(--hairline); border-radius: 14px; padding: 15px 17px; margin-bottom: 10px;
}
.idea__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.idea__name { font-weight: 600; color: var(--ink-strong); font-size: 0.96rem; }
.idea__kind { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); flex: none; }
.idea__line { font-size: 0.83rem; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.idea__names { font-size: 0.85rem; color: var(--ink); margin-top: 8px; line-height: 1.6; }

/* Single-line equity + research preview */
.tickerrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ticker { border: 1px solid var(--hairline-2); border-radius: 8px; padding: 7px 11px; font-size: 0.82rem; font-weight: 600; color: var(--ink-strong); }
.ticker span { color: var(--faint); font-weight: 500; margin-left: 6px; }

.research-card {
  border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; margin-bottom: 14px;
}
.research-card__art { height: 110px; }
.research-card__body { padding: 16px 18px; }
.research-card__lock { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 8px; }
.research-card__lock svg { width: 13px; height: 13px; }
.research-card__title { font-weight: 600; color: var(--ink-strong); font-size: 1rem; }
.research-card__meta { font-size: 0.8rem; color: var(--muted); margin: 6px 0 14px; }
.dl { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; color: var(--ink-strong); border: 1px solid var(--hairline-2); border-radius: 100px; padding: 9px 16px; }
.dl svg { width: 15px; height: 15px; }
.dl:hover { border-color: var(--ink-strong); }

/* Locked solutions state — fills the screen and centres vertically */
.screen--solutions.active { display: flex; flex-direction: column; min-height: 100%; }
#solutionsLocked:not([hidden]) { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.locked-state { text-align: center; padding: 24px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.locked-state__ring { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--hairline-2); display: grid; place-items: center; color: var(--muted); }
.locked-state__ring svg { width: 24px; height: 24px; }
.locked-state__t { font-family: var(--serif); font-size: 1.3rem; color: var(--ink-strong); max-width: 18ch; }
.locked-state__d { color: var(--muted); font-size: 0.9rem; max-width: 28ch; }

/* Eye-on-the-market mini cards (insights) */
.pulse { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.pulse::-webkit-scrollbar { height: 0; }
.pulse__card { flex: none; width: 200px; border: 1px solid var(--hairline); border-radius: 14px; padding: 15px; }
.pulse__tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.pulse__title { font-family: var(--serif); font-size: 1.02rem; color: var(--ink-strong); margin: 8px 0; line-height: 1.25; }
.pulse__by { font-size: 0.76rem; color: var(--muted); }

/* ---- Responsive: collapse desktop framing on mobile ------------------ */
@media (max-width: 1080px) {
  .proto-stage { grid-template-columns: 1fr; }
  .proto-intro, .proto-annot { position: static; }
  .proto-annot { display: none; }
}
@media (max-width: 720px) {
  .device { width: 100%; max-width: 420px; border-radius: 40px; padding: 8px; margin: 0 auto; }
  .device__screen { height: 78vh; min-height: 560px; border-radius: 34px; }
}
@media (max-width: 460px) {
  .device { border: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .device__screen { height: calc(100dvh - 56px); min-height: 0; border-radius: 0; }
  .statusbar { display: none; }
}

/* ============ Screen-by-screen compliance review ============ */
.creview-frame {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  background: #fafaf9;
  padding: 20px 24px;
  border-radius: 2px;
  margin-top: 26px;
}
.creview-frame__label {
  margin: 0 0 8px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.creview-frame__text {
  margin: 0;
  max-width: 80ch;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
}
.creview-table th,
.creview-table td {
  vertical-align: top;
  font-size: .86rem;
  line-height: 1.5;
}
.creview-table td { color: var(--muted); }
.creview-screen {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--ink);
  font-size: .9rem;
}
.cverdict {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.cverdict--ok   { background: rgba(21,199,154,.14); color: var(--accent-ink); }
.cverdict--cond { background: rgba(180,130,20,.14); color: #8a6a22; }
.risk-tag {
  display: block;
  width: fit-content;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.risk-tag--low  { background: rgba(21,199,154,.14); color: var(--accent-ink); }
.risk-tag--med  { background: rgba(180,130,20,.14); color: #8a6a22; }
.risk-tag--high { background: rgba(200,60,60,.13); color: #b3402f; }
.creview-cite {
  display: block;
  margin-top: 9px;
  font-size: .72rem;
  color: var(--faint);
}
.creview-open {
  display: block;
  margin-top: 9px;
  font-size: .78rem;
  font-style: italic;
  color: #8a6a22;
}

/* ============ Alternatives knowledge primer ============ */
.primer { border: 1px solid var(--hairline); border-radius: 16px; padding: 16px; margin-top: 18px; background: #fff; }
.primer__face { display: flex; gap: 12px; align-items: flex-start; }
.primer__play { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--ink-strong); color: #fff; display: grid; place-items: center; }
.primer__play svg { width: 15px; height: 15px; }
.primer__t { font-weight: 600; color: var(--ink-strong); font-size: 0.98rem; }
.primer__d { color: var(--muted); font-size: 0.84rem; line-height: 1.45; margin-top: 2px; }
.primer--done { display: flex; gap: 12px; align-items: center; background: #f3fbf8; border-color: rgba(21,199,154,.4); }
.primer__tick { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.primer__tick svg { width: 17px; height: 17px; }
.primer__player { background: linear-gradient(150deg, #0f5f6b 0%, #117d77 55%, #1b1b1b 100%); border-radius: 12px; padding: 28px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.primer__player .primer__play { background: rgba(255,255,255,.18); }
.primer__bar { width: 100%; height: 4px; border-radius: 100px; background: rgba(255,255,255,.25); overflow: hidden; }
.primer__bar i { display: block; height: 100%; width: 6%; background: #fff; border-radius: 100px; transition: width 2.4s linear; }
.primer-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; color: var(--accent-ink); background: #f3fbf8; border: 1px solid rgba(21,199,154,.35); padding: 7px 12px; border-radius: 100px; margin-bottom: 14px; }
.primer-badge svg { width: 14px; height: 14px; }

/* Alternatives gate — ideas held behind the primer for a prospect with no experience */
.altgate { text-align: center; padding: 22px 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.altgate__ring { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--hairline-2); display: grid; place-items: center; color: var(--muted); }
.altgate__ring svg { width: 22px; height: 22px; }
.altgate__t { font-family: var(--serif); font-size: 1.2rem; color: var(--ink-strong); }
.altgate__d { color: var(--muted); font-size: 0.9rem; max-width: 30ch; }
.altgate .primer { width: 100%; text-align: left; }

/* ============ v2: version switcher, effect-of-opt-in, retail CKA gate ============ */
.vswitch { display: inline-flex; gap: 2px; margin: 14px 0 4px; border: 1px solid var(--hairline-2); border-radius: 100px; padding: 3px; }
.vswitch a, .vswitch span { font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: 4px 13px; border-radius: 100px; color: var(--muted); text-decoration: none; transition: color var(--t-state); }
.vswitch a:hover { color: var(--ink-strong); }
.vswitch__on { background: var(--ink-strong); color: #fff !important; }

.effect-note { margin-top: 16px; padding: 12px 14px; background: #fbf7ee; border: 1px solid #ece2cb; border-radius: 10px; font-size: .82rem; line-height: 1.5; color: #6a5a2e; }

.ckagate { text-align: center; padding: 20px 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ckagate__ring { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--hairline-2); display: grid; place-items: center; color: var(--muted); }
.ckagate__ring svg { width: 22px; height: 22px; }
.ckagate__t { font-family: var(--serif); font-size: 1.18rem; color: var(--ink-strong); }
.ckagate__d { color: var(--muted); font-size: .88rem; max-width: 32ch; }
.ckagate .choice { width: 100%; text-align: left; }
.ckagate .primer { width: 100%; text-align: left; }

/* ============ v3: Focus themes + slick opt-in ============ */
/* Big consent box (opt-in) */
.consent--lg { margin-top: 8px; }
.why-link { background: none; border: 0; padding: 6px 0; margin-top: 12px; color: var(--accent-ink); font-size: .82rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
.why-note { margin-top: 6px; padding: 12px 14px; background: #fbf7ee; border: 1px solid #ece2cb; border-radius: 10px; font-size: .82rem; line-height: 1.5; color: #6a5a2e; }

/* Theme card */
.theme { border: 1px solid var(--hairline); border-radius: 16px; padding: 18px; margin-bottom: 16px; background: #fff; }
.theme__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.theme__name { font-family: var(--serif); font-size: 1.18rem; color: var(--ink-strong); font-variation-settings: "opsz" 40; }
.theme__since { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.theme__story { color: var(--muted); font-size: .9rem; line-height: 1.5; margin-top: 6px; }
.theme__lbl { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 16px 0 8px; }
.theme-idea { padding: 10px 0; border-top: 1px solid var(--hairline); }
.theme-idea:first-of-type { border-top: 0; }
.theme-idea__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.theme-idea__name { font-weight: 600; color: var(--ink-strong); font-size: .92rem; }
.theme-idea__meta { margin-left: auto; font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }
.theme-idea__line { color: var(--muted); font-size: .82rem; margin-top: 3px; }
.theme-research { color: var(--accent-ink); font-weight: 600; text-decoration: underline; margin-left: 6px; }
.theme-research__note { color: var(--faint); }
.theme-locked { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px; border: 1px dashed var(--hairline-2); border-radius: 10px; color: var(--faint); font-size: .8rem; }
.theme-locked svg { width: 15px; height: 15px; }

/* Sleeve tags */
.sleeve { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }
.sleeve--eq { background: rgba(21,199,154,.14); color: var(--accent-ink); }
.sleeve--fi { background: rgba(60,110,200,.12); color: #2f5ab3; }
.sleeve--sl { background: rgba(120,90,200,.12); color: #6a4fb3; }
.sleeve--pm { background: rgba(180,130,20,.14); color: #8a6a22; }

/* Private-markets primer banner */
.pm-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--hairline); border-left: 3px solid var(--accent); background: #fafdfb; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.pm-banner__ring { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hairline-2); display: grid; place-items: center; color: var(--muted); }
.pm-banner__ring svg { width: 18px; height: 18px; }
.pm-banner__txt { flex: 1; min-width: 140px; }
.pm-banner__t { font-weight: 600; color: var(--ink-strong); font-size: .92rem; }
.pm-banner__d { color: var(--muted); font-size: .8rem; line-height: 1.45; margin-top: 2px; }
.pm-banner .pill-btn { font-size: .82rem; padding: 9px 16px; }
.pm-banner .primer { width: 100%; }

/* ============ v4: the strategy view (dot-plot) ============ */
/* Two-line rows: label + stance on top, a full-width track below (reads on a phone) */
.viewscale { display: flex; justify-content: space-between; margin: 6px 0 14px; }
.viewscale span { font-size: .56rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }
.viewrow { padding: 11px 0; border-top: 1px solid var(--hairline); }
.viewrow:first-of-type { border-top: 0; }
.viewrow__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.viewrow__label { font-size: .88rem; font-weight: 600; color: var(--ink-strong); }
.viewrow__stance { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.viewrow__stance--ow { color: var(--accent-ink); }
.viewrow__stance--uw { color: #b3402f; }
.viewrow__stance--n  { color: var(--muted); }
.viewtrack { position: relative; height: 6px; border-radius: 100px; background: linear-gradient(90deg, rgba(192,80,77,.22), rgba(150,150,150,.16) 50%, rgba(21,199,154,.30)); }
.viewtrack__zero { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--hairline-2); }
.viewdot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%,-50%); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.viewdot--ow { background: var(--accent); }
.viewdot--uw { background: #c0504d; }
.viewdot--n  { background: #9a9a9a; }
.view-tie { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 24px 0 12px; padding-top: 18px; border-top: 1px solid var(--hairline); }

/* v4: own-product (CIO) item-level badge */
.idea__own { display: inline-block; margin-left: 7px; font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); background: rgba(21,199,154,.14); padding: 1px 6px; border-radius: 4px; vertical-align: middle; }