/* ═══════════════════════════════════════════════════════════════════════════
   Research theme — fintech surface, larger type, full responsive range.

   The form primitives below were referenced by the JSX but never defined, which
   is why the sign-in panel rendered as unstyled inline text. Defined here, with
   the rest of the visual system.

   Motion is deliberately cheap: transforms and opacity only, nothing that
   triggers layout, and everything is disabled under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --rs-fs: 16px;
  --rs-radius: 14px;
  --rs-a1: #3987e5;
  --rs-a2: #6366f1;
  --rs-glow: rgba(57, 135, 229, .32);
}
:root[data-brand="prwealth"] {
  --rs-a1: #1f6feb;
  --rs-a2: #0b8f6a;
  --rs-glow: rgba(11, 143, 106, .30);
}

.research-shell, .rs-land { font-size: var(--rs-fs); }

/* ── ambient field: two slow-drifting orbs behind everything ───────────── */
.rs-land::before, .rs-gate::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58rem 34rem at 12% -8%, var(--rs-glow), transparent 62%),
    radial-gradient(46rem 30rem at 96% 12%, rgba(99, 102, 241, .20), transparent 60%),
    radial-gradient(40rem 28rem at 50% 108%, rgba(34, 197, 94, .12), transparent 62%);
  animation: rs-drift 26s ease-in-out infinite alternate;
}
@keyframes rs-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -2.2%, 0) scale(1.06); }
}

/* ── form primitives (these were missing) ─────────────────────────────── */
.rs-form { display: flex; flex-direction: column; gap: 1rem; }

.rs-label {
  display: flex; flex-direction: column; gap: .45rem;
  font-size: .82rem; font-weight: 700; color: var(--fg-muted);
  letter-spacing: .02em;
}

.rs-input {
  width: 100%; box-sizing: border-box;
  padding: .82rem .95rem;
  font-size: 1rem; font-family: inherit;
  color: var(--fg);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 11px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.rs-input::placeholder { color: var(--fg-muted); opacity: .62; }
.rs-input:hover { border-color: color-mix(in srgb, var(--rs-a1) 45%, var(--border)); }
.rs-input:focus {
  outline: none;
  border-color: var(--rs-a1);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--rs-a1) 22%, transparent);
  background: var(--card);
}
select.rs-input { cursor: pointer; }

.rs-btn {
  width: 100%; border: 0; cursor: pointer;
  padding: .92rem 1.1rem;
  font-size: 1rem; font-weight: 800; font-family: inherit;
  color: #fff; border-radius: 11px;
  letter-spacing: .01em;
  box-shadow: 0 8px 22px -8px var(--rs-glow);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.rs-btn:hover:not(:disabled) { transform: translateY(-1.5px); box-shadow: 0 14px 30px -10px var(--rs-glow); filter: brightness(1.06); }
.rs-btn:active:not(:disabled) { transform: translateY(0); }
.rs-btn:disabled { opacity: .62; cursor: not-allowed; }

.rs-error {
  font-size: .85rem; font-weight: 600; line-height: 1.5;
  color: #ef4444; background: rgba(239, 68, 68, .1);
  border: 1px solid rgba(239, 68, 68, .32);
  border-radius: 10px; padding: .7rem .85rem;
  animation: rs-shake .32s ease;
}
@keyframes rs-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ── panels ───────────────────────────────────────────────────────────── */
.rs-gate { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.rs-gate-panel {
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem 1.85rem;
  width: 100%; max-width: 420px;
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .55);
  position: relative; overflow: hidden;
  animation: rs-rise .5s cubic-bezier(.22, .9, .3, 1) both;
}
.rs-gate-panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--rs-a1), var(--rs-a2), var(--rs-a1));
  background-size: 220% 100%;
  animation: rs-sheen 4.5s linear infinite;
}
@keyframes rs-sheen { to { background-position: 220% 0; } }
@keyframes rs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── brand mark ───────────────────────────────────────────────────────── */
.rs-gate-brand { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; }
.rs-mark {
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: 13px; display: grid; place-items: center;
  color: #fff; font-size: 1.15rem;
  box-shadow: 0 8px 20px -8px var(--rs-glow);
}
.rs-mark svg { width: 30px; height: 30px; display: block; }
.rs-gate-name { font-size: 1.18rem; font-weight: 900; color: var(--fg); line-height: 1.15; letter-spacing: -.01em; }
.rs-gate-product { font-size: .8rem; color: var(--fg-muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.rs-gate-h1 { font-size: 1.5rem; font-weight: 900; margin: 0 0 .6rem; color: var(--fg); line-height: 1.22; }
.rs-gate-lede { font-size: .93rem; line-height: 1.65; color: var(--fg-muted); margin: 0 0 1.6rem; }
.rs-gate-foot { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-size: .84rem; color: var(--fg-muted); line-height: 1.6; }

/* ── contact chips ────────────────────────────────────────────────────── */
.rs-contact { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.rs-contact a, .rs-contact button {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .58rem .95rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--fg); font-size: .87rem; font-weight: 700;
  text-decoration: none; cursor: pointer; font-family: inherit;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.rs-contact a:hover, .rs-contact button:hover {
  transform: translateY(-1.5px);
  border-color: var(--rs-a1);
  background: color-mix(in srgb, var(--rs-a1) 10%, var(--card));
}
.rs-contact i { font-size: 1rem; }
.rs-wa { color: #25d366 !important; }

/* ── boot ─────────────────────────────────────────────────────────────── */
.rs-boot { min-height: 100vh; display: grid; place-items: center; gap: .8rem; color: var(--fg-muted); font-size: .95rem; }
.rs-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--rs-a1); display: inline-block; animation: rs-sp .8s linear infinite; }
@keyframes rs-sp { to { transform: rotate(360deg); } }

/* ── header / shell ───────────────────────────────────────────────────── */
.research-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.2rem;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.research-brand { display: flex; align-items: center; gap: .75rem; }
.research-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; box-shadow: 0 6px 16px -7px var(--rs-glow); }
.research-logo svg { width: 26px; height: 26px; display: block; }
.research-title { font-size: 1.05rem; font-weight: 900; color: var(--fg); line-height: 1.15; letter-spacing: -.01em; }
.research-sub { font-size: .72rem; color: var(--fg-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.research-badges { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.research-badge {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .36rem .78rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  font-size: .78rem; font-weight: 700; color: var(--fg-muted); white-space: nowrap;
}
.research-badge-muted { color: var(--fg-muted); }
.research-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); animation: rs-pulse 2.4s ease-in-out infinite; }
@keyframes rs-pulse { 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }
.rs-icon-btn {
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--fg-muted);
  display: grid; place-items: center; font-size: .92rem;
  transition: color .14s ease, border-color .14s ease, transform .14s ease;
}
.rs-icon-btn:hover { color: var(--rs-a1); border-color: var(--rs-a1); transform: translateY(-1px); }

.research-body { min-height: 60vh; }
.rs-impersonate, .rs-lapsed {
  padding: .75rem 1.2rem; font-size: .87rem; font-weight: 600; line-height: 1.5;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.rs-impersonate { background: rgba(245,158,11,.14); border-bottom: 1px solid rgba(245,158,11,.36); color: #f59e0b; }
.rs-lapsed { background: rgba(239,68,68,.12); border-bottom: 1px solid rgba(239,68,68,.34); color: #ef4444; }
.rs-lapsed a { color: inherit; font-weight: 800; }

/* ── footer ───────────────────────────────────────────────────────────── */
.research-foot { padding: 2rem 1.4rem 2.6rem; border-top: 1px solid var(--border); text-align: center; }
.rs-foot-main { font-size: .95rem; color: var(--fg); margin-bottom: .5rem; }
.rs-foot-data { font-size: .82rem; color: var(--fg-muted); line-height: 1.6; margin-bottom: .7rem; }
.rs-foot-legal { font-size: .78rem; color: var(--fg-muted); line-height: 1.7; max-width: 74ch; margin: 0 auto; opacity: .88; }

/* ── responsive: phone → tablet → desktop ─────────────────────────────── */
@media (max-width: 1024px) { :root { --rs-fs: 15.5px; } }
@media (max-width: 768px) {
  :root { --rs-fs: 15px; }
  .research-topbar { padding: .7rem .85rem; gap: .6rem; }
  .research-logo { width: 38px; height: 38px; }
  .research-logo svg { width: 23px; height: 23px; }
  .research-title { font-size: .98rem; }
  .rs-gate-panel { padding: 1.6rem 1.25rem; border-radius: 17px; }
  .research-foot { padding: 1.5rem 1rem 2rem; }
}
@media (max-width: 480px) {
  :root { --rs-fs: 14.5px; }
  .research-badges { width: 100%; justify-content: flex-start; }
  .rs-contact { flex-direction: column; }
  .rs-contact a, .rs-contact button { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-land::before, .rs-gate::before, .rs-gate-panel, .rs-gate-panel::before,
  .research-dot, .rs-error { animation: none !important; }
  .rs-btn:hover, .rs-contact a:hover, .rs-icon-btn:hover { transform: none; }
}

@media print {
  .rs-land::before, .rs-gate::before { display: none; }
  .research-topbar { position: static; }
}
/* research.css — standalone shell for "Fund Hub — Research tool".
   The FundsTab component brings its own rich UI; this only frames it as a
   product (app bar + container + footer). All colours use the portal theme
   variables (with safe fallbacks) so light/dark themes both work. */

.research-shell {
  min-height: 100vh;
  background: var(--bg, #0b1220);
  color: var(--fg, #e8edf5);
  font-family: 'Plus Jakarta Sans', 'Manrope', system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
}

/* ── App bar ─────────────────────────────────────────────────────────────── */
.research-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem clamp(0.85rem, 3vw, 1.5rem);
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--card, #131a2a) 92%, transparent),
      color-mix(in srgb, var(--card, #131a2a) 78%, transparent));
  border-bottom: 1px solid var(--border, #263148);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.research-brand { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }

.research-logo {
  width: 42px; height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: #fff; font-size: 1.15rem;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.38);
}

.research-brand-text { line-height: 1.05; min-width: 0; }
.research-title {
  font-weight: 900; font-size: 1.18rem; letter-spacing: -0.02em;
  color: var(--fg, #e8edf5);
}
.research-sub {
  font-size: 0.66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--fg-muted, #7b8fa8);
}

.research-badges { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.research-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em;
  padding: 0.32rem 0.66rem; border-radius: 999px;
  border: 1px solid var(--border, #263148);
  color: var(--fg-muted, #7b8fa8);
  white-space: nowrap;
}
.research-badge-muted { color: var(--fg-muted, #7b8fa8); }
.research-live { color: #22c55e; border-color: color-mix(in srgb, #22c55e 45%, transparent); }
.research-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: research-pulse 1.8s infinite;
}
@keyframes research-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.research-body {
  width: 100%;
  max-width: min(2200px, 98vw);
  margin: 0 auto;
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(0.6rem, 2.5vw, 1.25rem) 3rem;
  flex: 1 1 auto;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.research-foot {
  text-align: center;
  color: var(--fg-muted, #7b8fa8);
  font-size: 0.72rem; line-height: 1.6;
  padding: 1.4rem 1.25rem 2rem;
  border-top: 1px solid var(--border, #263148);
  max-width: 720px; margin: 0 auto;
}
.research-foot strong { color: var(--fg, #e8edf5); font-weight: 800; }

@media (max-width: 560px) {
  .research-sub { letter-spacing: 0.12em; }
  .research-badge-muted { display: none; }
}


/* ── admin console ───────────────────────────────────────────────────── */
.rs-admin { padding: 1rem; max-width: 1720px; margin: 0 auto; display: grid; gap: 1rem; }
.rs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.rs-stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
           padding: .8rem; cursor: pointer; text-align: left; transition: transform .12s ease; }
.rs-stat:hover { transform: translateY(-1px); }
.rs-stat-on { outline: 2px solid var(--accent); }
.rs-stat-n { display: block; font-size: 1.6rem; font-weight: 900; line-height: 1; }
.rs-stat-l { display: block; font-size: .68rem; color: var(--fg-muted); margin-top: .35rem;
             text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.rs-alert { border: 1px solid; border-radius: 10px; padding: .7rem .9rem; font-size: .82rem; font-weight: 700;
            background: rgba(148,163,184,.06); }
.rs-panel { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rs-panel-h { padding: .7rem 1rem; font-weight: 800; font-size: .85rem;
              border-bottom: 1px solid var(--border); }
.rs-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.rs-table th { text-align: left; padding: .55rem .8rem; font-size: .64rem; text-transform: uppercase;
               letter-spacing: .06em; color: var(--fg-muted); border-bottom: 1px solid var(--border); }
.rs-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.rs-dim { color: var(--fg-muted); font-size: .72rem; }
.rs-pad { padding: 1.2rem; }
.rs-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid;
           font-size: .66rem; font-weight: 800; }
.rs-chip { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: .64rem;
           background: rgba(148,163,184,.16); margin-left: 6px; font-weight: 700; }
.rs-chip-admin { background: rgba(59,130,246,.2); color: #60a5fa; }
.rs-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.rs-toolbar .rs-input { max-width: 320px; }
.rs-btn-sm { padding: .42rem .8rem; border-radius: 8px; border: 1px solid var(--border);
             background: var(--card); color: var(--fg); font-weight: 700; font-size: .74rem; cursor: pointer; }
.rs-btn-sm:hover { border-color: var(--accent); }
.rs-btn-primary { background: linear-gradient(135deg, #3987e5, #6366f1); color: #fff; border-color: transparent; }
.rs-btn-danger { color: #ef4444; border-color: rgba(239,68,68,.4); }
.rs-row-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.rs-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
                gap: .8rem; padding: 1rem; }
.rs-form-grid .rs-panel-h { grid-column: 1 / -1; margin: -1rem -1rem .2rem; }
.rs-span { grid-column: 1 / -1; }
.rs-form-actions { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.rs-note { border-radius: 10px; padding: .75rem .9rem; font-size: .8rem; font-weight: 600; line-height: 1.5; }
.rs-note-ok { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: #22c55e; }
.rs-note-err { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); color: #ef4444; }
.rs-fineprint { font-size: .7rem; color: var(--fg-muted); line-height: 1.6; margin: 0; }
.rs-viewtabs { display: inline-flex; gap: 3px; background: rgba(148,163,184,.12);
               padding: 3px; border-radius: 9px; }
.rs-vt { border: 0; background: transparent; color: var(--fg-muted); font-weight: 700;
         font-size: .72rem; padding: .3rem .7rem; border-radius: 7px; cursor: pointer; }
.rs-vt-on { background: var(--card); color: var(--fg); }
.rs-exit-imp { margin-left: .7rem; padding: .2rem .6rem; border-radius: 6px; cursor: pointer;
               border: 1px solid currentColor; background: transparent; color: inherit;
               font-weight: 700; font-size: .7rem; }
@media (max-width: 680px) {
  .rs-admin { padding: .55rem; }
  .rs-table { font-size: .72rem; }
  .rs-table th, .rs-table td { padding: .45rem .5rem; }
  .rs-row-actions { justify-content: flex-start; }
}


/* ── landing one-pager ───────────────────────────────────────────────── */
.rs-land { max-width: 1280px; margin: 0 auto; padding: 1.2rem; }
.rs-hero { display: grid; grid-template-columns: 1.25fr .75fr; gap: 2.4rem;
           align-items: center; padding: 2.4rem 0 3rem; }
.rs-hero-copy .rs-gate-brand { margin-bottom: 1.6rem; }
.rs-h1 { font-size: clamp(1.9rem, 4.4vw, 3.05rem); line-height: 1.12; font-weight: 900;
         letter-spacing: -.02em; margin: 0 0 1rem; color: var(--fg); }
.rs-lede { font-size: 1.02rem; line-height: 1.65; color: var(--fg-muted); margin: 0 0 1.8rem; max-width: 44ch; }
.rs-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .9rem; }
.rs-fig b { display: block; font-size: 1.45rem; font-weight: 900; color: var(--fg); line-height: 1.1; }
.rs-fig span { display: block; font-size: .68rem; color: var(--fg-muted); margin-top: .25rem;
               text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.rs-hero-form { margin: 0; }
.rs-form-h { font-size: 1.05rem; font-weight: 800; margin: 0 0 1rem; color: var(--fg); }
.rs-formnote { font-size: .72rem; color: var(--fg-muted); margin: .9rem 0 .6rem; }

.rs-sec { padding: 1.5rem 0; border-top: 1px solid var(--border); }
.rs-h2 { font-size: clamp(1.2rem, 2.3vw, 1.55rem); font-weight: 900; margin: 0 0 .35rem;
         letter-spacing: -.01em; color: var(--fg); }
.rs-sub { font-size: .85rem; color: var(--fg-muted); line-height: 1.5; margin: 0 0 .85rem; max-width: 76ch; }
.rs-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.rs-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem; }
.rs-card h3 { font-size: .95rem; font-weight: 800; margin: .7rem 0 .5rem; color: var(--fg); }
.rs-card p { font-size: .82rem; line-height: 1.62; color: var(--fg-muted); margin: 0; }
.rs-card-n { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
             color: #fff; font-weight: 900; font-size: .85rem; }
.rs-card-plain { border-left: 3px solid var(--accent); }

.rs-diffs { display: grid; gap: 1rem; margin-top: 1.4rem; }
.rs-diff { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem; }
.rs-diff-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.rs-diff-h h3 { font-size: 1rem; font-weight: 800; margin: 0; color: var(--fg); }
.rs-diff-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.rs-diff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.rs-diff-l { display: block; font-size: .63rem; text-transform: uppercase; letter-spacing: .07em;
             font-weight: 800; color: var(--fg-muted); margin-bottom: .35rem; }
.rs-diff-ours { color: var(--accent); }
.rs-diff-row p { font-size: .82rem; line-height: 1.6; margin: 0; color: var(--fg); }
.rs-diff-why { font-size: .78rem; line-height: 1.6; color: var(--fg-muted); margin: 1rem 0 0;
               padding-top: .85rem; border-top: 1px dashed var(--border); font-style: italic; }
.rs-rot { transform: rotate(90deg); opacity: .6; margin-right: .3rem; }

.rs-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.rs-cmp { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 660px; }
.rs-cmp th { text-align: left; padding: .8rem 1rem; font-size: .65rem; text-transform: uppercase;
             letter-spacing: .06em; color: var(--fg-muted); background: rgba(148,163,184,.07);
             border-bottom: 1px solid var(--border); }
.rs-cmp th:last-child { color: var(--accent); }
.rs-cmp td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
.rs-cmp-edge td:last-child { background: rgba(34,197,94,.07); font-weight: 600; }
.rs-tick { color: #22c55e; margin-right: .45rem; }

.rs-gaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .8rem; }
.rs-gap { background: var(--card); border: 1px solid var(--border); border-left: 3px solid #f59e0b;
          border-radius: 10px; padding: .85rem 1rem; }
.rs-gap strong { display: block; font-size: .85rem; margin-bottom: .3rem; color: var(--fg); }
.rs-gap span { font-size: .77rem; color: var(--fg-muted); line-height: 1.55; }

.rs-cta { border-radius: 18px; padding: 2.6rem 2rem; text-align: center; color: #fff; margin: 2.6rem 0 1.6rem; }
.rs-cta h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; margin: 0 0 .6rem; }
.rs-cta p { font-size: .92rem; line-height: 1.6; opacity: .94; max-width: 52ch; margin: 0 auto 1.6rem; }
.rs-cta-btns { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.rs-cta-btn { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4);
              color: #fff; padding: .62rem 1.15rem; border-radius: 10px; text-decoration: none;
              font-weight: 700; font-size: .85rem; backdrop-filter: blur(4px); }
.rs-cta-btn:hover { background: rgba(255,255,255,.26); }
.rs-cta-ghost { background: transparent; }

@media (max-width: 900px) {
  .rs-hero { grid-template-columns: 1fr; gap: 1.8rem; padding: 1.4rem 0 2rem; }
  .rs-diff-row { grid-template-columns: 1fr; gap: .9rem; }
}
@media (max-width: 560px) {
  .rs-land { padding: .7rem; }
  .rs-sec { padding: 1.15rem 0; }
  .rs-cta { padding: 1.8rem 1.1rem; }
}

/* Real wordmark: let it breathe instead of forcing it into the square tile. */
.rs-logo-img { width: auto; height: 30px; max-width: 150px; object-fit: contain; display: block; }
.rs-mark:has(.rs-logo-img),
.research-logo:has(.rs-logo-img) {
  width: auto; min-width: 0; padding: 6px 10px;
  background: #fff !important; border-radius: 10px;
}
@media (max-width: 768px) { .rs-logo-img { height: 26px; max-width: 128px; } }

/* UnisonAI wordmark + guide download */
.rs-ai { color: #f97316; }
.rs-uai { width: 100%; height: 100%; }
.rs-mark:has(.rs-uai) { background: transparent !important; box-shadow: none; padding: 0; }
.research-logo:has(.rs-uai) { background: transparent !important; box-shadow: none; }
.rs-guide-dl {
  display: flex; align-items: center; gap: .8rem; margin-top: 1rem;
  padding: .8rem 1rem; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
  transition: transform .15s ease, border-color .15s ease;
}
.rs-guide-dl:hover { transform: translateY(-1.5px); border-color: var(--rs-a1); }
.rs-guide-dl i { font-size: 1.35rem; color: var(--rs-a1); }
.rs-guide-dl strong { display: block; font-size: .9rem; font-weight: 800; }
.rs-guide-dl em { display: block; font-size: .74rem; color: var(--fg-muted); font-style: normal; margin-top: 2px; }


/* ── pricing ─────────────────────────────────────────────────────────── */
.rs-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.rs-price {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.5rem 1.3rem; display: flex; flex-direction: column;
  transition: transform .18s ease, border-color .18s ease;
}
.rs-price:hover { transform: translateY(-3px); border-color: var(--rs-a1); }
.rs-price-hi { border-color: var(--rs-a1); box-shadow: 0 16px 40px -22px var(--rs-glow); }
.rs-price-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--rs-a1), var(--rs-a2)); color: #fff;
  font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .8rem; border-radius: 999px; white-space: nowrap;
}
.rs-price h3 { font-size: 1rem; font-weight: 800; margin: 0 0 .5rem; color: var(--fg); }
.rs-price-amt { font-size: 1.9rem; font-weight: 900; color: var(--fg); line-height: 1.1; letter-spacing: -.02em; }
.rs-price-amt span { font-size: .78rem; font-weight: 600; color: var(--fg-muted); letter-spacing: 0; }
.rs-price-for { font-size: .82rem; color: var(--fg-muted); line-height: 1.55; margin: .7rem 0 1rem; }
.rs-price ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.rs-price li { font-size: .84rem; line-height: 1.5; color: var(--fg); display: flex; gap: .55rem; align-items: flex-start; }
.rs-price li i { color: #22c55e; font-size: .78rem; margin-top: .28rem; flex: 0 0 auto; }

/* ── faq ─────────────────────────────────────────────────────────────── */
.rs-faq { display: grid; gap: .6rem; margin-top: 1.4rem; }
.rs-faq-i { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rs-faq-i summary {
  cursor: pointer; list-style: none; padding: .95rem 1.15rem;
  font-size: .92rem; font-weight: 700; color: var(--fg);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.rs-faq-i summary::-webkit-details-marker { display: none; }
.rs-faq-i summary i { color: var(--fg-muted); font-size: .78rem; transition: transform .2s ease; }
.rs-faq-i[open] summary i { transform: rotate(180deg); }
.rs-faq-i[open] summary { border-bottom: 1px solid var(--border); }
.rs-faq-i p { margin: 0; padding: .95rem 1.15rem; font-size: .86rem; line-height: 1.68; color: var(--fg-muted); }

@media (max-width: 560px) {
  .rs-price { padding: 1.2rem 1rem; }
  .rs-price-amt { font-size: 1.65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-price:hover { transform: none; }
  .rs-faq-i summary i { transition: none; }
}


/* ── password modal ──────────────────────────────────────────────────── */
.rs-modal-scrim{position:fixed;inset:0;z-index:2147483000;display:flex;
  align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:1.5rem 1rem;background:rgba(2,6,23,.62);backdrop-filter:blur(3px);
  animation:rs-fade .18s ease both}
/* margin:auto centres while it fits and lets it scroll once it does not */
.rs-modal-scrim > *{margin:auto}
.rs-modal{width:100%;max-width:400px;background:var(--card);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
  animation:rs-pop .22s cubic-bezier(.22,.9,.3,1) both}
.rs-modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--border);
  background:linear-gradient(100deg,var(--rs-a1),var(--rs-a2))}
.rs-modal-head h3{margin:0;font-size:.95rem;font-weight:800;color:#fff}
.rs-modal-x{background:transparent;border:0;color:#fff;font-size:1.35rem;line-height:1;
  cursor:pointer;opacity:.85;padding:0}
.rs-modal-x:hover{opacity:1}
.rs-modal-body{padding:1.1rem;display:grid;gap:.35rem}
.rs-modal-body .rs-label{margin-top:.45rem}
.rs-modal-body .rs-btn{margin-top:.85rem;width:100%}
.rs-hint{font-size:.72rem;color:var(--fg-muted);margin:.5rem 0 0;line-height:1.55}
.rs-good{font-size:.78rem;line-height:1.6;color:#065f46;background:rgba(16,185,129,.14);
  border:1px solid rgba(16,185,129,.4);border-radius:9px;padding:.55rem .7rem;margin-top:.6rem}
:root[data-theme="dark"] .rs-good{color:#6ee7b7}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rs-good{color:#6ee7b7}}

@keyframes rs-fade{from{opacity:0}to{opacity:1}}
@keyframes rs-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes rs-sheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes rs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ── vibrancy ────────────────────────────────────────────────────────── */
.rs-btn-primary,.rs-cta-btn:not(.rs-cta-ghost){
  background:linear-gradient(100deg,var(--rs-a1),var(--rs-a2),var(--rs-a1));
  background-size:200% 100%;transition:background-position .5s ease,transform .16s ease,
  box-shadow .22s ease}
.rs-btn-primary:hover,.rs-cta-btn:not(.rs-cta-ghost):hover{
  background-position:100% 50%;transform:translateY(-2px);
  box-shadow:0 14px 32px -14px var(--rs-glow)}
.rs-btn-primary:active,.rs-cta-btn:active{transform:translateY(0)}

/* shimmer sweep across the main call to action */
.rs-cta{position:relative;overflow:hidden}
.rs-cta::after{content:'';position:absolute;top:-60%;left:-30%;width:36%;height:220%;
  transform:rotate(20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  animation:rs-shine 5.5s ease-in-out infinite}
@keyframes rs-shine{0%{left:-40%}55%,100%{left:130%}}

/* cards lift into their own brand glow */
.rs-card,.rs-diff,.rs-gap{transition:transform .2s ease,border-color .2s ease,box-shadow .24s ease}
.rs-card:hover,.rs-diff:hover,.rs-gap:hover{transform:translateY(-3px);
  border-color:var(--rs-a1);box-shadow:0 18px 42px -24px var(--rs-glow)}

/* gradient headings and figures */
.rs-h2,.rs-stat-n{background:linear-gradient(100deg,var(--rs-a1),var(--rs-a2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rs-hero-mark{animation:rs-float 6s ease-in-out infinite}

/* comparison table: tint our column so the contrast reads instantly */
.rs-cmp tbody tr:hover{background:color-mix(in srgb,var(--rs-a1) 8%,transparent)}

@media (prefers-reduced-motion: reduce){
  .rs-modal,.rs-modal-scrim,.rs-hero-mark{animation:none !important}
  .rs-cta::after{animation:none;display:none}
  .rs-btn-primary,.rs-cta-btn,.rs-card,.rs-diff,.rs-gap{transition:none !important}
  .rs-btn-primary:hover,.rs-cta-btn:hover,.rs-card:hover,.rs-diff:hover,.rs-gap:hover{transform:none}
}


.rs-link-btn {
  display: inline-block; background: none; border: 0; padding: .35rem 0 0;
  font-family: inherit; font-size: .76rem; font-weight: 700; cursor: pointer;
  color: var(--rs-a1); text-decoration: underline; text-underline-offset: 2px;
}
.rs-link-btn:hover { color: var(--rs-a2); }

/* the real brand mark, not a reproduction */
img.rs-uai { width: 100%; height: 100%; object-fit: contain; display: block; }


/* ── activity log: filters and pager ─────────────────────────────────── */
.rs-audit-filters {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .75rem 1rem; border-bottom: 1px solid var(--border);
}
.rs-audit-filters .rs-input { flex: 0 1 auto; min-width: 130px; max-width: 260px; }
.rs-audit-filters .rs-input[type="date"] { min-width: 150px; }
.rs-audit-empty { padding: 1.6rem 1rem; text-align: center; font-size: .85rem; color: var(--fg-muted); }
.rs-pager {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: .8rem 1rem; border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--fg-muted);
}
.rs-pager button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 620px) {
  .rs-audit-filters .rs-input { max-width: none; flex: 1 1 100%; }
}


.rs-price-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .4rem; }
.rs-price-actions .rs-btn { text-decoration: none; }
/* one plan should read as a statement, not a lonely column in a comparison */
.rs-prices:has(> .rs-price:only-child) { max-width: 460px; margin-inline: auto; }


/* Help should read as a labelled action, not a mystery icon */
.rs-help-btn {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  font-size: .78rem; font-weight: 700; color: var(--fg);
  border: 1px solid var(--border); border-radius: 9px; padding: .34rem .6rem;
  background: var(--card); transition: border-color .16s ease, color .16s ease;
}
.rs-help-btn:hover { border-color: var(--rs-a1); color: var(--rs-a1); }
@media (max-width: 620px) { .rs-help-btn span { display: none; } }


/* ── branding dialog ─────────────────────────────────────────────────── */
.rs-modal-wide { max-width: 620px; }
.rs-brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .8rem; }
.rs-brand-grid > div { display: flex; flex-direction: column; }
.rs-logo-row { display: flex; align-items: center; gap: 1rem; margin: .3rem 0 .6rem; }
.rs-logo-preview {
  height: 46px; max-width: 170px; object-fit: contain; background: #fff;
  border: 1px solid var(--border); border-radius: 8px; padding: 5px;
}
.rs-logo-empty {
  height: 46px; width: 96px; display: grid; place-items: center; font-size: .68rem;
  color: var(--fg-muted); border: 1px dashed var(--border); border-radius: 8px;
}
.rs-logo-row input[type="file"] { font-size: .74rem; color: var(--fg-muted); max-width: 230px; }
@media (max-width: 560px) { .rs-brand-grid { grid-template-columns: 1fr; } }


/* ── white-label section ─────────────────────────────────────────────── */
.rs-wl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .9rem; margin-top: 1.2rem; }
.rs-wl-item { display: flex; gap: .8rem; align-items: flex-start; background: var(--card);
  border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem;
  transition: transform .18s ease, border-color .18s ease; }
.rs-wl-item:hover { transform: translateY(-3px); border-color: var(--rs-a1); }
.rs-wl-item i { color: var(--rs-a1); font-size: .95rem; margin-top: .15rem; }
.rs-wl-item strong { display: block; font-size: .88rem; color: var(--fg); margin-bottom: .25rem; }
.rs-wl-item span { font-size: .8rem; line-height: 1.6; color: var(--fg-muted); }
@media (prefers-reduced-motion: reduce) { .rs-wl-item:hover { transform: none; } }


/* ── walkthrough reel ────────────────────────────────────────────────── */
.rs-reel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; margin-top: 1.2rem; }
.rs-reel-card {
  position: relative; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem;
  transition: transform .18s ease, border-color .18s ease, box-shadow .22s ease;
}
.rs-reel-card:hover { transform: translateY(-3px); border-color: var(--rs-a1);
  box-shadow: 0 16px 38px -22px var(--rs-glow); }
.rs-reel-no { font-size: .66rem; font-weight: 800; letter-spacing: .1em; color: var(--rs-a1); }
.rs-reel-play {
  position: absolute; top: .9rem; right: 1rem; width: 26px; height: 26px;
  border-radius: 50%; display: grid; place-items: center; font-size: .62rem; color: #fff;
  background: linear-gradient(135deg, var(--rs-a1), var(--rs-a2));
}
.rs-reel-card strong { font-size: .89rem; color: var(--fg); line-height: 1.35; padding-right: 26px; }
.rs-reel-card span:last-child { font-size: .77rem; color: var(--fg-muted); line-height: 1.55; }
.rs-reel-modal {
  width: 100%; max-width: 900px; background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.75);
}
@media (prefers-reduced-motion: reduce) { .rs-reel-card:hover { transform: none; } }


/* ── sample reports under the white-label pitch ──────────────────────── */
.rs-samples { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .2rem; }
.rs-samples-h { font-size: .78rem; font-weight: 800; color: var(--fg); margin-right: .2rem; }
.rs-sample {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  background: var(--card); border: 1px solid var(--border); border-radius: 11px;
  padding: .5rem .8rem; transition: transform .16s ease, border-color .16s ease;
}
.rs-sample:hover { transform: translateY(-2px); border-color: var(--rs-a1); }
.rs-sample i { color: #e03131; font-size: .95rem; }
.rs-sample strong { display: block; font-size: .8rem; color: var(--fg); }
.rs-sample em { font-style: normal; font-size: .69rem; color: var(--fg-muted); }

/* tighter rhythm: the page carried a lot of air between blocks */
.rs-cards, .rs-diff-grid, .rs-wl-grid, .rs-reel-grid, .rs-prices { gap: .7rem; margin-top: .9rem; }
.rs-card, .rs-diff, .rs-gap, .rs-wl-item, .rs-reel-card { padding: .85rem .95rem; }
.rs-faq-i summary { padding: .7rem 1rem; }
.rs-faq-i p { padding: .7rem 1rem; }
.rs-cta { padding: 1.6rem 1.2rem; }
.rs-lede { margin: 0 0 1.1rem; }


/* thumbnail-led cards: a still of the actual screen sells better than a label */
.rs-reel-card { padding: 0 0 .9rem; overflow: hidden; }
.rs-reel-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/9;
  background: #0b1020; overflow: hidden; }
.rs-reel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease; }
.rs-reel-card:hover .rs-reel-thumb img { transform: scale(1.04); }
.rs-reel-card .rs-reel-play { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 40px; height: 40px; font-size: .85rem;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.6); }
.rs-reel-card .rs-reel-no { position: absolute; top: .5rem; left: .6rem; margin: 0;
  background: rgba(4,7,20,.72); color: #fff; padding: .12rem .4rem; border-radius: 6px; }
.rs-reel-card strong { padding: .75rem .9rem 0; }
.rs-reel-card span:last-child { padding: 0 .9rem; }
@media (prefers-reduced-motion: reduce) { .rs-reel-card:hover .rs-reel-thumb img { transform: none; } }


.rs-brandsec { grid-column: 1 / -1; border-top: 1px dashed var(--border); padding-top: .7rem; margin-top: .3rem; }


/* ── signup dialog ───────────────────────────────────────────────────── */
.rs-steps { display: flex; gap: .4rem; flex-wrap: wrap; padding: .7rem 1.1rem 0; }
.rs-step { font-size: .7rem; font-weight: 700; color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: .2rem .6rem; }
.rs-step.on { color: #fff; background: linear-gradient(100deg, var(--rs-a1), var(--rs-a2)); border-color: transparent; }
.rs-step.done { color: var(--rs-a1); border-color: var(--rs-a1); }
.rs-otp { letter-spacing: .32em; font-weight: 800; text-align: center; font-size: 1.05rem; }
.rs-choose { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.rs-choice { border: 1px solid var(--border); border-radius: 14px; padding: 1rem;
  display: flex; flex-direction: column; gap: .35rem; background: var(--card); }
.rs-choice-hi { border-color: var(--rs-a1); box-shadow: 0 14px 34px -22px var(--rs-glow); }
.rs-choice strong { font-size: .92rem; color: var(--fg); }
.rs-choice em { font-style: normal; font-size: 1.25rem; font-weight: 900; color: var(--fg); }
.rs-choice span { font-size: .78rem; color: var(--fg-muted); line-height: 1.55; flex: 1; }
.rs-choice .rs-btn { margin-top: .5rem; width: 100%; }
.rs-signup-cta { width: 100%; margin-top: .8rem; }
@media (max-width: 560px) { .rs-choose { grid-template-columns: 1fr; } }


.rs-blocked { display: grid; gap: .5rem; margin-top: .6rem; }
.rs-blocked .rs-btn { width: 100%; text-align: center; text-decoration: none; }


/* ═══ FolioLyt — vibrant surface ════════════════════════
   The brand is four hues, not one. Cyan leads, violet is the second voice,
   mint and sand carry the supporting marks. */
:root{
  --fl-navy:#1B3B5F; --fl-cyan:#35B3D4; --fl-sand:#F3C465;
  --fl-mint:#34D399; --fl-violet:#8B7CF6; --fl-coral:#FB7185; --fl-sky:#38BDF8;
}

/* Ambient colour behind the page. Fixed and z-index -1, so it never intercepts
   a click and never scrolls away from the content it is lighting. */
.rs-land{position:relative}
.rs-land::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46rem 30rem at 10% -10%, rgba(53,179,212,.30), transparent 62%),
    radial-gradient(40rem 28rem at 94% 4%,  rgba(139,124,246,.26), transparent 64%),
    radial-gradient(34rem 26rem at 80% 94%, rgba(243,196,101,.20), transparent 62%),
    radial-gradient(30rem 24rem at 2% 86%,  rgba(52,211,153,.18), transparent 62%);
}
:root[data-theme="light"] .rs-land::before{
  background:
    radial-gradient(46rem 30rem at 10% -10%, rgba(53,179,212,.20), transparent 62%),
    radial-gradient(40rem 28rem at 94% 4%,  rgba(139,124,246,.16), transparent 64%),
    radial-gradient(34rem 26rem at 80% 94%, rgba(243,196,101,.20), transparent 62%),
    radial-gradient(30rem 24rem at 2% 86%,  rgba(52,211,153,.15), transparent 62%);
}

/* ── the mark, at a size you can actually see ──────────────── */
.rs-uai{width:100%;height:100%;object-fit:contain;display:block}
.rs-hero-copy .rs-gate-brand{align-items:center;gap:1.15rem}
.rs-hero-copy .rs-mark{width:104px;height:104px;border-radius:28px}
.rs-hero-copy .rs-mark .rs-uai{filter:drop-shadow(0 20px 38px rgba(53,179,212,.45))}
.rs-hero-copy .rs-gate-name{font-size:2.55rem;letter-spacing:-.035em;line-height:1.05}
.rs-lyt{color:var(--fl-cyan)}
.rs-hero-copy .rs-gate-product{
  font-size:.94rem;font-weight:600;text-transform:none;letter-spacing:0;
  margin-top:.3rem;max-width:30ch;line-height:1.4;color:var(--fg-muted);
}

/* ── headline picks up the brand ramp ───────────────────── */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .rs-h1{
    background:linear-gradient(112deg,var(--fg) 26%,var(--fl-cyan) 60%,var(--fl-violet) 88%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.rs-fig:nth-child(1) b{color:var(--fl-cyan)}
.rs-fig:nth-child(2) b{color:var(--fl-violet)}
.rs-fig:nth-child(3) b{color:var(--fl-mint)}
.rs-fig:nth-child(4) b{color:var(--fl-sand)}

/* every section title gets a two-tone rule, so the page reads as a sequence */
.rs-h2{position:relative;padding-left:.9rem}
.rs-h2::before{
  content:'';position:absolute;left:0;top:.14em;bottom:.14em;width:5px;
  border-radius:3px;background:linear-gradient(180deg,var(--fl-cyan),var(--fl-violet));
}

/* ── differentiator cards ──────────────────────────── */
.rs-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
        gap:1rem;margin-top:1.15rem}
.rs-why-card{
  position:relative;overflow:hidden;border-radius:17px;padding:1.2rem 1.15rem;
  background:var(--card);border:1px solid var(--border);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.rs-why-card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--tone)}
.rs-why-card:hover{transform:translateY(-3px);border-color:var(--tone);
                   box-shadow:0 20px 40px -22px var(--tone)}
.rs-why-ic{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  color:#fff;font-size:1.05rem;background:var(--tone);margin-bottom:.75rem;
  box-shadow:0 12px 24px -12px var(--tone);
}
.rs-why-t{font-size:1.04rem;font-weight:800;color:var(--fg);margin:0 0 .35rem;line-height:1.3}
.rs-why-c{font-size:.86rem;line-height:1.58;color:var(--fg-muted);margin:0 0 .7rem}
.rs-why-w{font-size:.78rem;line-height:1.5;color:var(--fg);margin:0;
          border-top:1px dashed var(--border);padding-top:.6rem}
.rs-why-w b{color:var(--tone)}
.rs-sub em{font-style:normal;font-weight:800;color:var(--fl-cyan)}

/* ── theme switch, public address, textarea ──────────────── */
.rs-topbar{display:flex;justify-content:flex-end;padding:.7rem 0 0}
.rs-theme-btn{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  padding:.42rem .8rem;border-radius:999px;font-size:.76rem;font-weight:700;
  color:var(--fg);background:var(--card);border:1px solid var(--border);
  transition:color .16s ease,border-color .16s ease,transform .16s ease;
}
.rs-theme-btn:hover{color:var(--fl-cyan);border-color:var(--fl-cyan);transform:translateY(-1px)}
.rs-pubmail{color:var(--fl-cyan);font-weight:700}
.rs-textarea{resize:vertical;min-height:96px;font-family:inherit;line-height:1.5}

@media (max-width:760px){
  .rs-hero-copy .rs-mark{width:76px;height:76px;border-radius:21px}
  .rs-hero-copy .rs-gate-name{font-size:1.9rem}
}
@media (prefers-reduced-motion: reduce){
  .rs-why-card:hover,.rs-theme-btn:hover{transform:none}
}


/* signed-in greeting, and the one permitted attribution */
.rs-welcome{
  display:inline-flex;align-items:baseline;gap:.3rem;margin-right:.6rem;
  font-size:.8rem;color:var(--fg-muted);white-space:nowrap;
}
.rs-welcome strong{color:var(--fg);font-weight:800}
.rs-built-by{color:var(--fl-cyan);font-weight:700;text-decoration:none}
.rs-built-by:hover{text-decoration:underline}
@media (max-width:760px){ .rs-welcome{display:none} }


/* ── site navigation ──────────────────────────────────────────────────── */
.rs-nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
        padding:.85rem 0 1.1rem;margin-bottom:.4rem;
        border-bottom:1px solid var(--border)}
.rs-nav-brand{display:inline-flex;align-items:center;gap:.6rem;background:none;border:0;
        cursor:pointer;padding:0;font-size:1.3rem;font-weight:900;color:var(--fg);
        letter-spacing:-.02em}
.rs-nav-brand .rs-mark,.rs-nav-brand img{width:40px;height:40px;border-radius:11px}
.rs-nav-links{display:flex;gap:.25rem;margin-left:.6rem;flex-wrap:wrap}
.rs-nav-a{background:none;border:0;cursor:pointer;padding:.42rem .8rem;border-radius:999px;
        font-size:.86rem;font-weight:700;color:var(--fg-muted);
        transition:color .16s ease,background .16s ease}
.rs-nav-a:hover{color:var(--fg);background:rgba(148,163,184,.14)}
.rs-nav-a.is-on{color:var(--fl-cyan);background:rgba(53,179,212,.14)}
.rs-nav-right{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.rs-nav-login{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;border:0;
        padding:.5rem .95rem;border-radius:999px;font-size:.84rem;font-weight:800;color:#08202e;
        background:linear-gradient(120deg,var(--fl-cyan),var(--fl-sand));
        box-shadow:0 10px 24px -12px var(--fl-cyan);
        transition:transform .16s ease,box-shadow .16s ease}
.rs-nav-login:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px var(--fl-cyan)}
.rs-linkbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--fl-cyan);
        font-weight:800;font-size:inherit;text-decoration:underline}

/* login page: the card, centred, nothing competing with it */
.rs-loginwrap{display:flex;justify-content:center;padding-top:1.6rem;border-top:0}
.rs-loginwrap > *{max-width:520px;width:100%}
.rs-contactwrap{max-width:760px}
.rs-contactcard{background:var(--card);border:1px solid var(--border);border-radius:16px;
        padding:1.1rem 1.2rem;margin-top:.9rem}

/* resources */
.rs-docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.1rem}
.rs-doc{display:block;text-decoration:none;position:relative;overflow:hidden;border-radius:17px;
        padding:1.2rem 1.15rem;background:var(--card);border:1px solid var(--border);
        transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.rs-doc::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--tone)}
.rs-doc:hover{transform:translateY(-3px);border-color:var(--tone);
        box-shadow:0 20px 40px -22px var(--tone)}
.rs-doc-go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;
        font-size:.78rem;font-weight:800;color:var(--tone)}

@media (max-width:760px){
  .rs-nav-links{order:3;width:100%;margin-left:0}
  .rs-nav-right{margin-left:auto}
}
@media (prefers-reduced-motion: reduce){
  .rs-nav-login:hover,.rs-doc:hover{transform:none}
}


/* ── home hero: a get-started card, not a login form ──────────────────── */
.rs-cta-card{display:flex;flex-direction:column;gap:.55rem}
.rs-cta-kicker{font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fl-cyan)}
.rs-cta-h{font-size:1.32rem;font-weight:900;color:var(--fg);margin:.1rem 0 .2rem;line-height:1.25}
.rs-cta-p{font-size:.88rem;line-height:1.6;color:var(--fg-muted);margin:0 0 .3rem}
.rs-cta-list{list-style:none;margin:.1rem 0 .5rem;padding:0;display:grid;gap:.38rem}
.rs-cta-list li{font-size:.82rem;color:var(--fg);display:flex;gap:.5rem;align-items:flex-start;
  line-height:1.45}
.rs-cta-list i{color:var(--fl-mint);margin-top:.22rem;font-size:.76rem}
.rs-cta-second{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  cursor:pointer;padding:.6rem .9rem;border-radius:11px;font-size:.86rem;font-weight:800;
  color:var(--fg);background:transparent;border:1px solid var(--border);
  transition:border-color .16s ease,color .16s ease}
.rs-cta-second:hover{border-color:var(--fl-cyan);color:var(--fl-cyan)}
.rs-cta-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.1rem}
.rs-cta-row > *{flex:1 1 46%;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  cursor:pointer;padding:.5rem .6rem;border-radius:10px;font-size:.78rem;font-weight:700;
  color:var(--fg-muted);background:rgba(148,163,184,.10);border:0;text-decoration:none;
  transition:color .16s ease,background .16s ease}
.rs-cta-row > *:hover{color:var(--fg);background:rgba(148,163,184,.18)}

.rs-nav-signin{font-weight:800}

/* ── how it works ─────────────────────────────────────────────────────── */
.rs-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;
  margin-top:1.15rem}
.rs-step{position:relative;border-radius:17px;padding:1.2rem 1.15rem;background:var(--card);
  border:1px solid var(--border);overflow:hidden}
.rs-step::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--tone)}
.rs-step-n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;
  font-size:.86rem;font-weight:900;color:#fff;background:var(--tone);margin-bottom:.7rem;
  box-shadow:0 12px 24px -12px var(--tone)}


/* ═══ phones and small tablets ══════════════════════════════════════
   Everything below post-dates the original breakpoints: the site nav, the
   differentiator cards, the step band, the document cards, the hero CTA card
   and the two new product tabs. Written mobile-out so a 360px screen never
   scrolls sideways. */
@media (max-width: 900px) {
  /* the hero is a two-column grid by default; one column on a phone */
  .rs-hero{grid-template-columns:1fr !important;gap:1.5rem;padding:1.2rem 0 1.8rem}
  .rs-hero-form,.rs-cta-card{order:2}
  .rs-land{padding:.85rem}
}

@media (max-width: 760px) {
  /* nav: brand left, actions right, links on their own wrapped row */
  .rs-nav{gap:.6rem;padding:.7rem 0 .85rem}
  .rs-nav-brand{font-size:1.1rem;gap:.5rem}
  .rs-nav-brand .rs-mark,.rs-nav-brand img{width:34px;height:34px;border-radius:10px}
  .rs-nav-links{order:3;width:100%;margin-left:0;gap:.15rem;overflow-x:auto;
    -webkit-overflow-scrolling:touch;padding-bottom:.15rem}
  .rs-nav-a{padding:.36rem .6rem;font-size:.8rem;white-space:nowrap}
  .rs-nav-signin{display:none}          /* the button beside it does the same job */
  .rs-nav-login{padding:.44rem .7rem;font-size:.78rem}
  .rs-theme-btn span{display:none}
  .rs-theme-btn{padding:.4rem .55rem}

  /* every card grid collapses; the minmax floors were wider than the screen */
  .rs-why,.rs-steps,.rs-docs{grid-template-columns:1fr !important;gap:.8rem}
  .rs-figs{grid-template-columns:repeat(2,minmax(0,1fr)) !important}

  .rs-h1{font-size:clamp(1.6rem,7.5vw,2.1rem)}
  .rs-lede{font-size:.94rem;max-width:none}
  .rs-cta-h{font-size:1.15rem}
  .rs-cta-row > *{flex:1 1 100%}
  .rs-contactwrap,.rs-loginwrap > *{max-width:none}
  .rs-sec{padding:1.15rem 0}

  /* long words and URLs must not push the page wide */
  .rs-sub,.rs-why-c,.rs-why-w,.rs-cta-p{overflow-wrap:anywhere}

  /* the two new product tabs: their forms were a flex row of 170px fields,
     which on a phone wraps into an unreadable staircase */
  .fh-form-row{flex-direction:column;align-items:stretch;gap:.6rem}
  .fh-fld{width:100%}
  .fh-fld input,.fh-fld select{min-width:0;width:100%}
  .fh-band{grid-template-columns:1fr}
  .fh-obs{font-size:.8rem}
}

@media (max-width: 460px) {
  .rs-land{padding:.6rem}
  .rs-hero-copy .rs-gate-brand{gap:.75rem}
  .rs-figs{grid-template-columns:1fr !important}
  .rs-nav-brand span{display:none}      /* the mark alone is enough this narrow */
  .rs-why-card,.rs-step,.rs-doc{padding:1rem .9rem}
}


/* ═══ motion layer ═══════════════════════════════════════════════════
   Arrival on scroll, counting figures, and a background that breathes. All of
   it is decoration — every rule here is switched off under reduced motion and
   nothing depends on it to be readable. */

.rs-rev{opacity:0;transform:translateY(20px);
  transition:opacity .62s cubic-bezier(.22,.9,.3,1),transform .62s cubic-bezier(.22,.9,.3,1)}
.rs-rev.is-in{opacity:1;transform:none}

/* cards inside a grid arrive in sequence, so the eye is led along the row */
.rs-why > .rs-why-card:nth-child(2),.rs-steps > .rs-step:nth-child(2),
.rs-docs > .rs-doc:nth-child(2){transition-delay:.07s}
.rs-why > .rs-why-card:nth-child(3),.rs-steps > .rs-step:nth-child(3),
.rs-docs > .rs-doc:nth-child(3){transition-delay:.14s}
.rs-why > .rs-why-card:nth-child(4){transition-delay:.21s}
.rs-why > .rs-why-card:nth-child(5){transition-delay:.28s}
.rs-why > .rs-why-card:nth-child(6){transition-delay:.35s}
.rs-figs > .rs-fig:nth-child(2){transition-delay:.06s}
.rs-figs > .rs-fig:nth-child(3){transition-delay:.12s}
.rs-figs > .rs-fig:nth-child(4){transition-delay:.18s}

/* the ambient colour drifts instead of sitting still — very slow, so it reads
   as depth rather than as something moving */
@keyframes fl-drift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  33% {transform:translate3d(2.2%,-1.6%,0) scale(1.05)}
  66% {transform:translate3d(-1.8%,1.4%,0) scale(1.03)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
.rs-land::before{animation:fl-drift 34s ease-in-out infinite;will-change:transform}

/* a second, slower layer for parallax */
.rs-land::after{
  content:'';position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(28rem 22rem at 70% 18%, rgba(53,179,212,.16), transparent 64%),
    radial-gradient(24rem 20rem at 22% 62%, rgba(139,124,246,.14), transparent 64%);
  animation:fl-drift 52s ease-in-out infinite reverse;will-change:transform;
}
:root[data-theme="light"] .rs-land::after{
  background:
    radial-gradient(28rem 22rem at 70% 18%, rgba(53,179,212,.13), transparent 64%),
    radial-gradient(24rem 20rem at 22% 62%, rgba(139,124,246,.10), transparent 64%);
}

/* the rule under a section heading fills in as the section arrives */
.rs-h2::before{transform:scaleY(0);transform-origin:top;
  transition:transform .5s cubic-bezier(.22,.9,.3,1) .1s}
.rs-sec.is-in .rs-h2::before{transform:scaleY(1)}

/* a slow sheen across the primary call to action */
@keyframes fl-sheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.rs-nav-login{background-size:200% 100%;animation:fl-sheen 7s linear infinite}

/* figures settle into their colour as they count */
.rs-fig b{transition:color .5s ease}

@media (prefers-reduced-motion: reduce){
  .rs-rev,.rs-rev.is-in{opacity:1 !important;transform:none !important;transition:none !important}
  .rs-land::before,.rs-land::after,.rs-nav-login{animation:none !important}
  .rs-h2::before{transform:scaleY(1) !important;transition:none !important}
}


/* ═══ animated backdrop ══════════════════════════════════════════════
   Five colour bodies on independent orbits, a drifting grid, and a sweep.
   Radial gradients rather than blurred divs — blur() on a 40rem box is the
   expensive part of effects like this, and a transparent falloff is soft for
   free. Only transform and opacity animate, so it all stays on the compositor. */

.fl-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}

.fl-orb{
  position:absolute;display:block;border-radius:50%;
  will-change:transform;mix-blend-mode:screen;
}
:root[data-theme="light"] .fl-orb{mix-blend-mode:multiply;opacity:.55}

.fl-orb-1{width:52rem;height:52rem;top:-16rem;left:-12rem;
  background:radial-gradient(circle,rgba(53,179,212,.55),rgba(53,179,212,0) 68%);
  animation:fl-o1 32s ease-in-out infinite}
.fl-orb-2{width:44rem;height:44rem;top:-8rem;right:-14rem;
  background:radial-gradient(circle,rgba(139,124,246,.50),rgba(139,124,246,0) 68%);
  animation:fl-o2 41s ease-in-out infinite}
.fl-orb-3{width:40rem;height:40rem;bottom:-14rem;left:18%;
  background:radial-gradient(circle,rgba(52,211,153,.42),rgba(52,211,153,0) 68%);
  animation:fl-o3 37s ease-in-out infinite}
.fl-orb-4{width:34rem;height:34rem;bottom:-6rem;right:6%;
  background:radial-gradient(circle,rgba(243,196,101,.40),rgba(243,196,101,0) 68%);
  animation:fl-o4 46s ease-in-out infinite}
.fl-orb-5{width:30rem;height:30rem;top:34%;left:38%;
  background:radial-gradient(circle,rgba(56,189,248,.34),rgba(56,189,248,0) 70%);
  animation:fl-o5 28s ease-in-out infinite}

/* Independent, non-repeating-looking paths. Percentages are of the orb's own
   box, so the travel is large enough to notice without any of them leaving
   the viewport and creating a visible edge. */
@keyframes fl-o1{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(14%,10%,0) scale(1.12)}
  66%{transform:translate3d(6%,20%,0) scale(.94)}
}
@keyframes fl-o2{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  30%{transform:translate3d(-16%,12%,0) scale(1.15)}
  70%{transform:translate3d(-6%,26%,0) scale(.92)}
}
@keyframes fl-o3{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(18%,-14%,0) scale(1.1)}
  75%{transform:translate3d(-10%,-6%,0) scale(.96)}
}
@keyframes fl-o4{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  45%{transform:translate3d(-14%,-18%,0) scale(1.14)}
  80%{transform:translate3d(8%,-8%,0) scale(.95)}
}
@keyframes fl-o5{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.75}
  50%{transform:translate3d(-20%,16%,0) scale(1.2);opacity:1}
}

/* chart paper, drifting. Two hairline grids at different scales. */
.fl-grid{
  position:absolute;inset:-2px;display:block;opacity:.30;
  background-image:
    linear-gradient(rgba(148,163,184,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.16) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  animation:fl-grid 40s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 35%, transparent 78%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 35%, transparent 78%);
}
@keyframes fl-grid{from{background-position:0 0,0 0}to{background-position:64px 64px,64px 64px}}

/* a single tick of light crossing the page, like a quote updating */
.fl-sweep{
  position:absolute;top:0;bottom:0;width:38%;left:-40%;display:block;
  background:linear-gradient(100deg,transparent,rgba(53,179,212,.12) 45%,
             rgba(139,124,246,.10) 60%,transparent);
  animation:fl-sweep 12s ease-in-out infinite;will-change:transform;
}
@keyframes fl-sweep{
  0%{transform:translateX(0)}
  55%,100%{transform:translateX(360%)}
}

/* the old two-layer wash is superseded — one backdrop, not two fighting */
.rs-land::before,.rs-land::after{animation:none}
.rs-land::after{display:none}

@media (max-width:760px){
  /* fewer, smaller bodies: this is the layer that costs battery on a phone */
  .fl-orb-4,.fl-orb-5,.fl-sweep{display:none}
  .fl-orb{opacity:.7}
  .fl-grid{background-size:44px 44px,44px 44px;opacity:.22}
}

@media (prefers-reduced-motion: reduce){
  .fl-orb,.fl-grid,.fl-sweep{animation:none !important}
  .fl-sweep{display:none}
}


/* ═══ home chart band ════════════════════════════════════════════════
   Animates off the existing .rs-sec reveal, so nothing extra watches the DOM.
   Initial states live in the keyframes, so with animation off the figures are
   drawn in full rather than invisible. */
.fl-viz{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:1rem;margin-top:1.15rem}
.fl-viz > figure{margin:0;padding:1.15rem;border-radius:17px;background:var(--card);
        border:1px solid var(--border);
        box-shadow:0 18px 44px -30px rgba(8,26,45,.5)}
.fl-viz figcaption{font-size:.68rem;font-weight:800;letter-spacing:.08em;
        text-transform:uppercase;color:var(--fl-cyan)}
.fl-viz .fl-viz-h{font-size:.98rem;font-weight:800;color:var(--fg);margin:.2rem 0 .7rem;
        line-height:1.3}
.fl-viz svg{width:100%;height:auto;display:block;overflow:visible}
.fl-viz .fl-note{font-size:.72rem;color:var(--fg-muted);margin:.6rem 0 0;line-height:1.5}

.fl-draw{stroke-dasharray:1;stroke-dashoffset:1}
.rs-sec.is-in .fl-draw{animation:fl-draw 1.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fl-draw{to{stroke-dashoffset:0}}
.fl-fill{opacity:0}
.rs-sec.is-in .fl-fill{animation:fl-fadein .9s ease-out .6s forwards}
@keyframes fl-fadein{to{opacity:1}}
.fl-pop{transform:scale(.4);transform-origin:center;transform-box:fill-box;opacity:0}
.rs-sec.is-in .fl-pop{animation:fl-pop .8s cubic-bezier(.22,.9,.3,1) forwards}
.rs-sec.is-in .fl-pop.fl-d1{animation-delay:.16s}
@keyframes fl-pop{to{transform:scale(1);opacity:.42}}
.fl-ring{stroke-dasharray:364;stroke-dashoffset:364}
.rs-sec.is-in .fl-ring{animation:fl-ring 1.5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fl-ring{to{stroke-dashoffset:124}}

@media (prefers-reduced-motion:reduce){
  .fl-draw,.fl-fill,.fl-pop,.fl-ring{animation:none !important;
    stroke-dashoffset:0 !important;opacity:1 !important;transform:none !important}
  .fl-ring{stroke-dashoffset:124 !important}
  .fl-pop{opacity:.42 !important}
}


/* ── proof band ──────────────────────────────────────────────────────────
   Three tiers of number, each styled to signal how much weight it carries:
   our own live-counted data (full colour), published industry data (quiet,
   with a source line), and the founding-seat count (a single accent bar). */

.rs-proof-eyebrow{
  display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fl-cyan);margin-bottom:.45rem;
}
.rs-proof .rs-sub{max-width:52rem}

/* the tiles */
.rs-proof .rs-figs,.rs-figs-4{
  display:grid;gap:.85rem;margin-top:1.15rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.rs-proof .rs-fig{
  position:relative;padding:1.15rem 1.15rem 1.05rem;border-radius:14px;
  border:1px solid var(--border);
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--tone,var(--fl-cyan)) 9%,transparent),transparent 62%);
  overflow:hidden;
}
.rs-proof .rs-fig::after{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--tone,var(--fl-cyan));opacity:.85;
}
.rs-fig-ic{
  display:flex!important;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;border-radius:9px;margin-bottom:.7rem;
  background:color-mix(in srgb,var(--tone,var(--fl-cyan)) 16%,transparent);
  color:var(--tone,var(--fl-cyan));font-size:.92rem;
  text-transform:none!important;letter-spacing:0!important;
}
/* out-specify `.rs-fig span` for the big number and the prose note */
.rs-proof .rs-fig .rs-fig-n{
  display:block;margin:0;font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:900;
  line-height:1.05;letter-spacing:-.02em;text-transform:none;
  font-variant-numeric:tabular-nums;color:var(--fg);
}
.rs-proof .rs-fig .rs-fig-n b{font-size:inherit;font-weight:inherit;color:var(--tone,var(--fg))}
.rs-proof .rs-fig .rs-fig-l{
  display:block;margin-top:.3rem;font-size:.7rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fg);
}
.rs-proof .rs-fig .rs-fig-note{
  display:block;margin-top:.5rem;font-size:.78rem;line-height:1.5;
  font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg-muted);
}
.rs-proof .rs-fig .rs-fig-src{
  display:inline-block;margin-top:.65rem;padding:.16rem .5rem;border-radius:100px;
  font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--border);color:var(--fg-muted);
}
.rs-proof-foot{
  margin-top:1rem;font-size:.78rem;color:var(--fg-muted);
  display:flex;align-items:center;gap:.45rem;
}
.rs-proof-foot i{color:var(--fl-mint)}

/* the market row reads quieter - these are AMFI/SEBI's numbers, not ours */
.rs-proof-mkt .rs-fig{background:var(--card,transparent)}
.rs-proof-mkt .rs-fig::after{background:var(--border);opacity:1}
.rs-proof-mkt .rs-fig .rs-fig-n b{color:var(--fg)}

/* founding cohort */
.rs-cohort-in{
  display:flex;gap:1.5rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:1.4rem 1.5rem;border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--fl-violet) 12%,transparent),
    color-mix(in srgb,var(--fl-cyan) 8%,transparent));
}
.rs-cohort-copy{flex:1 1 26rem;min-width:0}
.rs-cohort-bar{
  height:7px;border-radius:99px;margin-top:1rem;overflow:hidden;
  background:color-mix(in srgb,var(--fg) 12%,transparent);
}
.rs-cohort-bar>span{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--fl-cyan),var(--fl-violet));
  transition:width .9s cubic-bezier(.2,.7,.3,1);
}
.rs-cohort-n{margin:.55rem 0 0;font-size:.8rem;color:var(--fg-muted)}
.rs-cohort-n b{font-size:1.05rem;font-weight:900;color:var(--fg)}
.rs-btn-lg{font-size:.95rem;padding:.8rem 1.4rem;white-space:nowrap}
.rs-btn-lg i{margin-left:.4rem}

@media (max-width:640px){
  .rs-cohort-in{padding:1.15rem;gap:1.1rem}
  .rs-btn-lg{width:100%;justify-content:center}
  .rs-proof .rs-figs,.rs-figs-4{grid-template-columns:1fr 1fr;gap:.6rem}
  .rs-proof .rs-fig{padding:.9rem .85rem}
  .rs-proof .rs-fig .rs-fig-note{display:none}   /* keep the tiles scannable on a phone */
}
@media (max-width:400px){
  .rs-proof .rs-figs,.rs-figs-4{grid-template-columns:1fr}
  .rs-proof .rs-fig .rs-fig-note{display:block}
}
@media (prefers-reduced-motion:reduce){
  .rs-cohort-bar>span{transition:none}
}


/* ── consent gate ────────────────────────────────────────────────────────
   Deliberately prominent. This is the box that has to be defensible later,
   so it is not a grey afterthought at the bottom of a modal. */
.rs-agree{
  display:flex;gap:.65rem;align-items:flex-start;margin:0 0 1.1rem;
  padding:.85rem .95rem;border-radius:12px;font-size:.82rem;line-height:1.55;
  border:1px solid var(--border);background:color-mix(in srgb,var(--fl-cyan) 7%,transparent);
  cursor:pointer;
}
.rs-agree input{margin-top:.18rem;width:16px;height:16px;flex-shrink:0;
  accent-color:var(--fl-cyan);cursor:pointer}
.rs-agree a{color:var(--fl-cyan);text-decoration:underline;font-weight:700}
.rs-agree-v{display:block;margin-top:.35rem;font-style:normal;font-size:.68rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);font-weight:700}

/* ── legal documents ─────────────────────────────────────────────────────── */
.rs-legal{max-width:52rem}
.rs-legal-meta{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--fg-muted);margin:.1rem 0 .9rem}
.rs-legal-sec{margin-top:1.6rem}
.rs-legal-h{font-size:.95rem;font-weight:800;margin:0 0 .5rem;color:var(--fg)}
.rs-legal-p{font-size:.88rem;line-height:1.72;color:var(--fg-muted);margin:0 0 .6rem}
.rs-legal-foot{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border);
  font-size:.82rem;color:var(--fg-muted)}
.rs-foot-links{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
.rs-foot-links a{font-size:.78rem;color:var(--fg-muted);text-decoration:none;font-weight:600}
.rs-foot-links a:hover{color:var(--fl-cyan);text-decoration:underline}

/* ── trial -> paid ───────────────────────────────────────────────────────── */
.rs-upsell{
  display:flex;gap:1rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:.8rem 1.1rem;margin:0 0 .9rem;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--fl-sand) 45%,var(--border));
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--fl-sand) 16%,transparent),
    color-mix(in srgb,var(--fl-violet) 9%,transparent));
}
.rs-upsell-t{font-size:.86rem;font-weight:800;color:var(--fg);margin:0}
.rs-upsell-s{font-size:.76rem;color:var(--fg-muted);margin:.15rem 0 0}
.rs-upsell b{color:var(--fl-sand)}
@media (max-width:560px){
  .rs-upsell{flex-direction:column;align-items:stretch;text-align:left}
}


/* ── mobile app header ── research-head-compact ───────────────────────────
   Was four stacked rows before any content. Now one: brand left, actions
   right, everything non-essential dropped. */
@media (max-width:768px){
  .research-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:.5rem;padding:.5rem .7rem;flex-wrap:nowrap;
  }
  .research-head .rs-logo-img,.research-head img{max-height:30px;width:auto}
  .research-brand,.research-head-brand{gap:.45rem;min-width:0}
  .research-brand strong,.research-head strong{font-size:1rem}
  /* the RESEARCH kicker under the wordmark is decoration on a phone */
  .research-kicker,.rs-uai-kick{display:none}

  .research-badges{
    width:auto;justify-content:flex-end;flex-wrap:nowrap;gap:.35rem;margin-left:auto;
  }
  /* a long-dated account reads "27007 days left" - pure noise */
  .research-badge:not(.research-badge-warn){display:none}
  .research-badge-muted{display:none}
  /* the Welcome line already names the person */
  .rs-welcome{display:none}

  .rs-icon-btn,.rs-help-btn{padding:.4rem .5rem;font-size:.8rem}
  .rs-help-btn span{display:none}
}
@media (max-width:420px){
  .research-head{padding:.45rem .55rem}
  .research-head .rs-logo-img,.research-head img{max-height:26px}
}


/* ── app header ── research-topbar-compact ────────────────────────────────
   One row on a phone: burger, logo, wordmark, then actions pushed right.
   (An earlier pass targeted `.research-head`, which does not exist - these
   rules name the real element.) */
.fh-burger-slot{display:none}

@media (max-width:820px){
  .research-topbar{
    display:flex !important;align-items:center;gap:.5rem;
    padding:.5rem .65rem !important;flex-wrap:nowrap !important;
  }
  .fh-burger-slot{display:inline-flex;align-items:center;flex:0 0 auto;order:-1}
  .fh-burger-slot .fh-burger{display:flex !important;padding:.45rem .5rem}

  .research-brand{gap:.4rem !important;min-width:0;flex:0 1 auto}
  .research-brand img,.research-brand .rs-logo-img{max-height:26px;width:auto}
  .research-title{font-size:.98rem !important;line-height:1.1}
  /* the RESEARCH kicker is decoration on a phone */
  .research-sub{display:none !important}

  .research-badges{
    margin-left:auto;gap:.3rem !important;flex-wrap:nowrap !important;
    justify-content:flex-end;width:auto !important;
  }
  /* "27007 days left" is noise on a long-dated account */
  .research-badges .research-badge{display:none !important}
  .research-badge-muted{display:none !important}
  .rs-welcome{display:none !important}
  .rs-viewtabs{transform:scale(.9);transform-origin:right center}
  .rs-icon-btn,.rs-help-btn{padding:.38rem .46rem;font-size:.78rem}
  .rs-help-btn span{display:none}

  /* the page topbar no longer carries the burger, so give the title the room */
  .fh-topbar{grid-template-columns:1fr !important;
             grid-template-areas:'title' 'actions' !important}
}
@media (max-width:420px){
  .research-topbar{padding:.42rem .5rem !important;gap:.4rem}
  .research-brand img,.research-brand .rs-logo-img{max-height:23px}
  .research-title{font-size:.9rem !important}
  .rs-viewtabs{display:none}
}


/* ── FolioLyt Nexus console ───────────────────────────────────────────────
   Full width on purpose: a book of clients is a table, and tables are read
   across. The research app's narrow reading column is wrong for this. */
.nx-shell{width:100%;max-width:none;padding:1rem 1.1rem 3rem;display:grid;gap:1rem}
.nx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding-bottom:.7rem;border-bottom:1px solid var(--border)}
.nx-title{margin:0;font-size:1.5rem;font-weight:900;letter-spacing:-.02em;color:var(--fg)}
.nx-title span{background-image:linear-gradient(90deg,var(--fl-cyan),var(--fl-violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.nx-sub{margin:.15rem 0 0;font-size:.76rem;color:var(--fg-muted);text-transform:capitalize}
.nx-tabs{display:flex;gap:.3rem}
.nx-tabs button{background:var(--card);border:1px solid var(--border);border-radius:9px;
  padding:.4rem .8rem;font-size:.78rem;font-weight:700;color:var(--fg-muted);cursor:pointer}
.nx-tabs button.on{color:var(--fg);border-color:var(--fl-cyan);
  background:color-mix(in srgb,var(--fl-cyan) 12%,transparent)}

.nx-stats{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.nx-stat{border:1px solid var(--border);border-radius:13px;padding:.85rem .95rem;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tone,var(--fl-cyan)) 10%,transparent),transparent 62%)}
.nx-stat-v{font-size:1.7rem;font-weight:900;line-height:1;color:var(--tone,var(--fg));
  font-variant-numeric:tabular-nums}
.nx-stat-l{margin-top:.3rem;font-size:.68rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg)}
.nx-stat-s{margin-top:.15rem;font-size:.68rem;color:var(--fg-muted);
  overflow:hidden;text-overflow:ellipsis}

.nx-panel{border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;
  background:var(--card)}
.nx-panel-h{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.nx-panel-t{margin:0;font-size:1rem;font-weight:900;color:var(--fg)}
.nx-panel-s{margin:.2rem 0 0;font-size:.76rem;line-height:1.5;color:var(--fg-muted);max-width:60ch}
.nx-two{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}

.nx-form{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  align-items:end}
.nx-field{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.nx-field-wide{grid-column:1/-1}
.nx-field span{font-size:.66rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-muted)}
.nx-field input,.nx-field select,.nx-search{
  background:var(--bg);border:1px solid var(--border);border-radius:9px;
  padding:.5rem .6rem;font-size:.84rem;color:var(--fg);min-width:0;width:100%}
.nx-field input:focus,.nx-field select:focus,.nx-search:focus{
  outline:2px solid color-mix(in srgb,var(--fl-cyan) 55%,transparent);outline-offset:1px}
.nx-search{max-width:16rem}

.nx-btn{background:var(--card);border:1px solid var(--border);border-radius:9px;
  padding:.5rem .85rem;font-size:.8rem;font-weight:700;color:var(--fg);cursor:pointer}
.nx-btn:hover{border-color:var(--fl-cyan)}
.nx-btn-sm{padding:.3rem .55rem;font-size:.72rem}
.nx-btn-primary{background-image:linear-gradient(90deg,var(--fl-cyan),var(--fl-violet));
  border:0;color:#06121c;font-weight:800}
.nx-btn[disabled]{opacity:.55;cursor:not-allowed}

.nx-tablewrap{overflow-x:auto}
.nx-table{width:100%;border-collapse:collapse;font-size:.8rem}
.nx-table th{text-align:left;padding:.5rem .6rem;font-size:.64rem;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--fg-muted);
  border-bottom:1px solid var(--border);white-space:nowrap}
.nx-table td{padding:.5rem .6rem;border-bottom:1px solid var(--border);color:var(--fg-muted)}
.nx-table .r{text-align:right}
.nx-strong{color:var(--fg);font-weight:700}

.nx-conn{display:inline-block;font-size:.56rem;font-weight:800;letter-spacing:.06em;
  padding:.1rem .3rem;margin-right:.2rem;border-radius:4px;
  background:var(--border);color:var(--fg-muted)}
.nx-conn.on{background:color-mix(in srgb,var(--fl-mint) 26%,transparent);color:var(--fl-mint)}
.nx-mode{font-size:.66rem;font-weight:700;color:var(--fg-muted)}
.nx-mode.tx{color:var(--fl-mint)}
.nx-kyc{font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.nx-kyc-pending{color:var(--fl-sand)}
.nx-kyc-complete{color:var(--fl-mint)}

.nx-rank{margin:0;padding:0;list-style:none;display:grid;gap:.3rem;counter-reset:r}
.nx-rank li{display:flex;justify-content:space-between;gap:.6rem;font-size:.8rem;
  padding:.35rem .5rem;border-radius:7px;background:var(--bg)}
.nx-rank li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.nx-rank li b{font-variant-numeric:tabular-nums;color:var(--fl-cyan)}

.nx-empty,.nx-loading{font-size:.82rem;color:var(--fg-muted);padding:.6rem 0}
.nx-msg{margin:.6rem 0 0;font-size:.78rem;color:var(--fl-mint)}
.nx-err{padding:1rem;border:1px solid var(--border);border-radius:12px;
  background:var(--card);font-size:.85rem;color:var(--fg-muted)}

@media (max-width:700px){
  .nx-shell{padding:.8rem .65rem 2.5rem}
  .nx-form{grid-template-columns:1fr}
  .nx-search{max-width:none}
}

.nx-hint{margin:.2rem 0 0;font-size:.72rem;line-height:1.5;color:var(--fg-muted)}
.nx-primary{margin-left:.35rem;font-size:.55rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;padding:.1rem .32rem;border-radius:4px;
  background:color-mix(in srgb,var(--fl-violet) 24%,transparent);color:var(--fl-violet)}
.nx-ident{display:flex;flex-direction:column;line-height:1.3}
.nx-ident em{font-style:normal;font-size:.66rem;color:var(--fg-muted)}

.nx-warn{color:var(--fl-sand);font-size:.66rem;font-weight:700}
.nx-bad{color:var(--bad,#e8837e);font-size:.72rem}
.nx-disclaimer{margin:1.4rem 0 0;padding-top:.9rem;border-top:1px solid var(--border);
  font-size:.72rem;line-height:1.6;color:var(--fg-muted);max-width:70ch}
.nx-field input[type=file]{padding:.4rem;font-size:.78rem}

.nx-keybox{display:flex;flex-direction:column;gap:.45rem;padding:.9rem 1rem;margin-bottom:.9rem;
  border:1px solid color-mix(in srgb,var(--fl-sand) 50%,var(--border));border-radius:12px;
  background:color-mix(in srgb,var(--fl-sand) 10%,transparent)}
.nx-keybox strong{font-size:.8rem;color:var(--fg)}
.nx-keybox code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;
  padding:.5rem .6rem;border-radius:8px;background:var(--bg);color:var(--fl-cyan);
  word-break:break-all;user-select:all}
.nx-keybox span{font-size:.72rem;color:var(--fg-muted)}
.nx-keybox button{align-self:flex-start}

.rs-nav-nexus{background:none;border:1px solid var(--border);border-radius:99px;
  padding:.42rem .85rem;font-size:.8rem;font-weight:700;color:var(--fg-muted);cursor:pointer}
.rs-nav-nexus:hover{color:var(--fg);border-color:var(--fl-violet)}
@media (max-width:820px){.rs-nav-nexus{display:none}}


/* ── app rail ─────────────────────────────────────────────────────────────
   Switches apps; each app keeps its own menu beside it. Duplicating
   Research's seventeen tools out here would be two menus to keep in step. */
.ap-rail{
  position:fixed;left:0;top:var(--rs-topbar-h,56px);bottom:0;width:74px;z-index:40;
  display:flex;flex-direction:column;gap:.3rem;padding:.6rem .35rem;
  background:var(--card);border-right:1px solid var(--border);
}
.ap-rail-b{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  padding:.55rem .2rem;border:0;border-radius:11px;background:none;cursor:pointer;
  color:var(--fg-muted);font-size:.6rem;font-weight:800;letter-spacing:.02em;
}
.ap-rail-b i{font-size:1.05rem}
.ap-rail-b:hover{background:color-mix(in srgb,var(--fl-cyan) 10%,transparent);color:var(--fg)}
.ap-rail-b.on{
  color:var(--fl-cyan);
  background:color-mix(in srgb,var(--fl-cyan) 16%,transparent);
}
/* width:100% on .research-body is explicit, so it does not shrink for this
   margin the way width:auto would - the pair must move together or the app
   ends 74px past the viewport and overflow-x:hidden amputates that edge. */
.research-body.has-rail{margin-left:74px;width:calc(100% - 74px)}

@media (max-width:820px){
  /* On a phone the rail becomes a strip along the top - a 74px column steals
     a fifth of the screen from the content it exists to reach. */
  .ap-rail{position:static;flex-direction:row;width:auto;bottom:auto;
    border-right:0;border-bottom:1px solid var(--border);padding:.35rem}
  .ap-rail-b{flex-direction:row;gap:.35rem;font-size:.72rem;padding:.4rem .7rem}
  .research-body.has-rail{margin-left:0;width:100%}
}

/* ── the signed-in APPLICATION goes wide; the WEBSITE stays a column ──────
   Tables of funds and clients want the room. Marketing prose and a signup
   form do not - widening both was one change too many. */
@media (min-width:1400px){
  .research-body,.research-body.has-rail{max-width:none}
}

/* ── customer portal ──────────────────────────────────────────────────────
   Four tabs, not eleven report pages. A client asks four questions: what do
   I have, how is it doing, what could I add, can I have it on paper. */
.cp-shell{width:100%;max-width:none;padding:1rem 1.1rem 3rem;display:grid;gap:1rem}
.cp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding-bottom:.7rem;border-bottom:1px solid var(--border)}
.cp-title{margin:0;font-size:1.45rem;font-weight:900;letter-spacing:-.02em;color:var(--fg)}
.cp-sub{margin:.15rem 0 0;font-size:.8rem;color:var(--fg-muted);max-width:62ch;line-height:1.55}
.cp-tabs{display:flex;gap:.3rem;flex-wrap:wrap}
.cp-tabs button{background:var(--card);border:1px solid var(--border);border-radius:9px;
  padding:.42rem .85rem;font-size:.8rem;font-weight:700;color:var(--fg-muted);cursor:pointer}
.cp-tabs button.on{color:var(--fg);border-color:var(--fl-cyan);
  background:color-mix(in srgb,var(--fl-cyan) 12%,transparent)}

.cp-cards{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.cp-card{border:1px solid var(--border);border-radius:14px;padding:.9rem 1rem;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tone,var(--fl-cyan)) 11%,transparent),transparent 62%)}
.cp-card-l{font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--fg-muted)}
.cp-card-v{margin-top:.3rem;font-size:1.6rem;font-weight:900;line-height:1.05;
  color:var(--tone,var(--fg));font-variant-numeric:tabular-nums}
.cp-card-s{margin-top:.2rem;font-size:.72rem;color:var(--fg-muted)}

.cp-panel{border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;
  background:var(--card)}
.cp-panel-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:.6rem}
.cp-h3{margin:0;font-size:1rem;font-weight:900;color:var(--fg)}

.cp-allocbar{display:flex;height:12px;border-radius:99px;overflow:hidden;margin:.7rem 0 .8rem;
  background:var(--border)}
.cp-allocbar span{display:block;height:100%}
.cp-alloclist{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.cp-alloclist li{display:grid;grid-template-columns:auto 1fr auto auto;gap:.6rem;
  align-items:center;font-size:.8rem}
.cp-dot{width:9px;height:9px;border-radius:50%}
.cp-alloc-n{color:var(--fg)}
.cp-alloc-w{color:var(--fg-muted);font-variant-numeric:tabular-nums}
.cp-alloc-v{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}

.cp-tablewrap{overflow-x:auto}
.cp-table{width:100%;border-collapse:collapse;font-size:.8rem}
.cp-table th{text-align:left;padding:.5rem .6rem;font-size:.64rem;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--fg-muted);
  border-bottom:1px solid var(--border);white-space:nowrap}
.cp-table td{padding:.55rem .6rem;border-bottom:1px solid var(--border);color:var(--fg-muted);
  vertical-align:top}
.cp-table .r{text-align:right}
.cp-strong{color:var(--fg);font-weight:700}
.cp-strong em,.cp-table td em{display:block;font-style:normal;font-size:.68rem;
  font-weight:500;color:var(--fg-muted);margin-top:.1rem}
.cp-up{color:var(--good,#34D399)}
.cp-down{color:var(--bad,#F08A6B)}

.cp-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end;margin:.6rem 0}
.cp-field{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.cp-field span{font-size:.66rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-muted)}
.cp-input{background:var(--bg);border:1px solid var(--border);border-radius:9px;
  padding:.5rem .65rem;font-size:.85rem;color:var(--fg);min-width:12rem}
.cp-input:focus{outline:2px solid color-mix(in srgb,var(--fl-cyan) 55%,transparent);
  outline-offset:1px}
.cp-btn{background:var(--card);border:1px solid var(--border);border-radius:9px;
  padding:.5rem .9rem;font-size:.82rem;font-weight:700;color:var(--fg);cursor:pointer}
.cp-btn:hover{border-color:var(--fl-cyan)}
.cp-btn-sm{padding:.3rem .55rem;font-size:.72rem}
.cp-btn-primary{background-image:linear-gradient(90deg,var(--fl-cyan),var(--fl-violet));
  border:0;color:#06121c;font-weight:800}
.cp-btn[disabled]{opacity:.5;cursor:not-allowed}

.cp-empty{font-size:.85rem;color:var(--fg-muted);padding:.7rem 0;line-height:1.6}
.cp-notes{margin:.7rem 0 0;padding-left:1.1rem;font-size:.78rem;color:var(--fg-muted);
  line-height:1.6}
.cp-caveat{margin:.7rem 0 0;font-size:.76rem;line-height:1.6;color:var(--fg-muted);
  padding-top:.6rem;border-top:1px dashed var(--border)}
.cp-disclaimer{margin:.6rem 0 0;font-size:.72rem;line-height:1.6;color:var(--fg-muted);
  max-width:74ch}

@media (max-width:700px){
  .cp-shell{padding:.8rem .65rem 2.5rem}
  .cp-input{min-width:0;width:100%}
  .cp-field{width:100%}
}

/* ── book view ────────────────────────────────────────────────────────── */
.bk-stats{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin-bottom:1rem}
.bk-stats-sm{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
.bk-stat{position:relative;border:1px solid var(--border);border-radius:15px;padding:1rem 1.05rem;overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--tone) 15%,transparent),transparent 65%)}
.bk-stat::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--tone);opacity:.9}
.bk-stat-l{font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)}
.bk-stat-v{margin-top:.35rem;font-size:1.75rem;font-weight:900;line-height:1.03;color:var(--tone);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bk-stat-s{margin-top:.2rem;font-size:.72rem;color:var(--fg-muted)}
.bk-panel{border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;background:var(--card);margin-bottom:1rem}
.bk-panel-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.bk-h3{margin:0;font-size:1rem;font-weight:900;color:var(--fg)}
.bk-hint{font-size:.72rem;color:var(--fg-muted)}
.bk-two{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.bk-periods{display:grid;gap:.5rem;margin-top:.6rem}
.bk-period{display:grid;grid-template-columns:6.5rem 1fr 5rem auto;gap:.6rem;align-items:center;font-size:.8rem}
.bk-period-l{color:var(--fg-muted);font-weight:700}
.bk-period-track{height:9px;border-radius:99px;background:color-mix(in srgb,var(--fg) 9%,transparent);overflow:hidden}
.bk-period-bar{display:block;height:100%;border-radius:99px;transition:width .9s cubic-bezier(.2,.7,.3,1)}
.bk-period-bar.up{background:linear-gradient(90deg,var(--fl-mint),var(--fl-cyan))}
.bk-period-bar.down{background:linear-gradient(90deg,#F08A6B,#D9534F)}
.bk-period-v{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--fg-muted)}
.bk-period-v.up{color:var(--good,#34D399)}
.bk-period-v.down{color:var(--bad,#F08A6B)}
.bk-period-c{font-size:.62rem;color:var(--fg-muted)}
.bk-note{margin:.8rem 0 0;font-size:.73rem;line-height:1.6;color:var(--fg-muted);padding-top:.6rem;border-top:1px dashed var(--border)}
.bk-bar{display:flex;height:12px;border-radius:99px;overflow:hidden;margin:.7rem 0 .7rem;background:var(--border)}
.bk-bar span{display:block;height:100%}
.bk-list{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.bk-list li{display:grid;grid-template-columns:auto 1fr auto auto;gap:.55rem;align-items:center;font-size:.79rem}
.bk-dot{width:9px;height:9px;border-radius:50%}
.bk-list-n{color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-list-w,.bk-list-v{color:var(--fg-muted);font-variant-numeric:tabular-nums}
.bk-list-v{color:var(--fg);font-weight:700}
.bk-tablewrap{overflow-x:auto}
.bk-table{width:100%;border-collapse:collapse;font-size:.8rem}
.bk-table th{text-align:left;padding:.5rem .6rem;font-size:.63rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg-muted);border-bottom:1px solid var(--border);white-space:nowrap}
.bk-table td{padding:.55rem .6rem;border-bottom:1px solid var(--border);color:var(--fg-muted);vertical-align:top}
.bk-table .r{text-align:right}
.bk-strong{color:var(--fg);font-weight:700}
.bk-table em{display:block;font-style:normal;font-size:.68rem;font-weight:500;color:var(--fg-muted);margin-top:.1rem}
.bk-table .up{color:var(--good,#34D399)}
.bk-table .down{color:var(--bad,#F08A6B)}
.bk-rowlink{cursor:pointer}
.bk-rowlink:hover{background:color-mix(in srgb,var(--fl-cyan) 8%,transparent)}
.bk-linkname{background:none;border:0;padding:0;font:inherit;color:var(--fl-cyan);cursor:pointer;text-align:left}
.bk-rowlink:hover .bk-linkname{text-decoration:underline}
.bk-mode{font-size:.66rem;font-weight:700;color:var(--fg-muted)}
.bk-mode.tx{color:var(--fl-mint)}
.bk-btn{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:.45rem .8rem;
  font-size:.8rem;font-weight:700;color:var(--fg);cursor:pointer}
.bk-btn-primary{background-image:linear-gradient(90deg,var(--fl-cyan),var(--fl-violet));border:0;color:#06121c;font-weight:800}
.bk-empty{font-size:.85rem;color:var(--fg-muted);padding:.8rem 0}
.bk-scrim{position:fixed;inset:0;z-index:80;background:rgba(2,6,23,.55);display:flex;justify-content:flex-end}
.bk-sheet{width:min(920px,96vw);height:100%;overflow-y:auto;background:var(--bg);
  border-left:1px solid var(--border);padding:1rem 1.1rem 3rem;animation:bkin .22s cubic-bezier(.2,.7,.3,1)}
@keyframes bkin{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.bk-sheet-h{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding-bottom:.7rem;margin-bottom:.9rem;border-bottom:1px solid var(--border)}
.bk-sheet-s{margin:.2rem 0 0;font-size:.76rem;color:var(--fg-muted)}
.bk-ro{margin-left:.5rem;font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:.1rem .35rem;border-radius:5px;background:color-mix(in srgb,var(--fl-sand) 26%,transparent);color:var(--fl-sand)}
/* PAN chips */
.nx-pan-chips{display:flex;flex-wrap:wrap;gap:.3rem;padding:.35rem;border:1px solid var(--border);
  border-radius:9px;background:var(--bg)}
.nx-pan-chips input{flex:1;min-width:11rem;border:0;background:none;color:var(--fg);font-size:.82rem;padding:.25rem}
.nx-pan-chips input:focus{outline:none}
.nx-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .45rem;border-radius:7px;
  font-size:.74rem;font-weight:700;border:1px solid var(--border);color:var(--fg-muted)}
.nx-chip.ok{border-color:var(--fl-mint);color:var(--fl-mint);background:color-mix(in srgb,var(--fl-mint) 14%,transparent)}
.nx-chip.taken{border-color:var(--fl-sand);color:var(--fl-sand);background:color-mix(in srgb,var(--fl-sand) 14%,transparent)}
.nx-chip.bad{border-color:#D9534F;color:#D9534F;background:color-mix(in srgb,#D9534F 12%,transparent)}
.nx-chip button{background:none;border:0;color:inherit;cursor:pointer;font-size:.9rem;line-height:1;padding:0}
.nx-pan-warn{margin:.4rem 0 0;font-size:.74rem;line-height:1.5;color:var(--fl-sand);display:grid;gap:.2rem}
@media (max-width:700px){
  .bk-period{grid-template-columns:5rem 1fr 4.2rem;row-gap:.2rem}
  .bk-period-c{grid-column:2/4;text-align:right}
}


/* ── fh-root width ────────────────────────────────────────────────────────
   Was an inline style capped at 1500px, which no stylesheet could override.
   Now it is a normal rule: comfortable on a laptop, full width on a large
   screen where the fund and client tables actually need the room. */
.fh-root{max-width:1500px;margin:0 auto}
@media (min-width:1500px){
  .fh-root{max-width:min(2400px,97vw)}
}
@media (min-width:1900px){
  .fh-root{max-width:min(2600px,98vw)}
}


/* ── nexus console layout ceiling ─────────────────────────────────────────
   The shell may be full width - tables want it - but headers, forms and
   button rows must not stretch with it. Removing the app-wide cap without
   this is what pushed the tab row off the right edge. */
.nx-shell,.cp-shell,.bk-shell{
  width:100%;max-width:1800px;margin:0 auto;
}
.nx-head{
  flex-wrap:wrap;row-gap:.6rem;
}
.nx-tabs{
  flex-wrap:wrap;justify-content:flex-start;
  max-width:100%;
}
/* the form is a grid; a lone Save must not become a 600px bar */
.nx-form{align-items:end}
.nx-form>.nx-btn,.nx-form>button{
  justify-self:start;max-width:16rem;width:auto;
}
/* tables scroll inside their own box rather than widening the page */
.nx-tablewrap,.bk-tablewrap,.cp-tablewrap{max-width:100%;overflow-x:auto}
.nx-panel,.bk-panel,.cp-panel{min-width:0}

/* the research surface: wide, but the page itself never scrolls sideways */
.fh-root{overflow-x:hidden}
.fh-main{min-width:0}

@media (min-width:2000px){
  /* Past this the line lengths stop helping. Tables still scroll if they
     need to; prose and controls stay readable. */
  .nx-shell,.cp-shell{max-width:1900px}
}

.nx-explain{border:1px solid var(--border);border-radius:12px;padding:.85rem .95rem;
  background:linear-gradient(155deg,color-mix(in srgb,var(--fl-cyan) 9%,transparent),transparent 62%)}
.nx-explain-alt{background:linear-gradient(155deg,color-mix(in srgb,var(--fl-sand) 11%,transparent),transparent 62%)}
.nx-explain h4{margin:0 0 .35rem;font-size:.85rem;font-weight:900;color:var(--fg)}
.nx-explain p{margin:0;font-size:.78rem;line-height:1.6;color:var(--fg-muted)}
.nx-explain em{display:block;margin-top:.4rem;font-style:normal;font-weight:700;color:var(--fg)}
.nx-steps{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;counter-reset:s}
.nx-steps li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  padding:.75rem .85rem;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.nx-steps li.done{border-color:color-mix(in srgb,var(--fl-mint) 45%,var(--border))}
.nx-step-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font-size:.76rem;font-weight:900;background:var(--border);color:var(--fg-muted)}
.nx-steps li.done .nx-step-n{background:color-mix(in srgb,var(--fl-mint) 26%,transparent);color:var(--fl-mint)}
.nx-step-b h4{margin:0 0 .25rem;font-size:.86rem;font-weight:800;color:var(--fg);
  display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.nx-step-state{font-size:.66rem;font-weight:700;color:var(--fg-muted)}
.nx-step-b p{margin:0 0 .45rem;font-size:.77rem;line-height:1.6;color:var(--fg-muted)}
.nx-code{display:grid;gap:.5rem;margin-top:.55rem}
.nx-code-l{font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-muted)}
.nx-code pre{margin:.2rem 0 0;padding:.6rem .7rem;border-radius:9px;background:var(--card);
  border:1px solid var(--border);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;line-height:1.5;color:var(--fg);overflow-x:auto;white-space:pre}
.nx-inline{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;color:var(--fl-cyan)}
.nx-notes{margin:.7rem 0 0;padding-left:1.1rem;font-size:.76rem;line-height:1.7;color:var(--fg-muted)}

.nx-acting{display:flex;align-items:center;gap:.4rem;font-size:.7rem;color:var(--fg-muted)}
.nx-acting span{font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.nx-acting select{background:var(--card);border:1px solid var(--fl-cyan);border-radius:8px;
  padding:.32rem .5rem;font-size:.78rem;font-weight:700;color:var(--fg);max-width:15rem}


/* ── width chain guard ────────────────────────────────────────────────────
   Three nested elements each had their own max-width and I fixed them one at
   a time, twice shipping a "fix" that changed nothing because the next layer
   up still capped it. Measured at 3840px: root=3800, shell=2200, main=1948.
   The whole chain is released here so a cap on any single layer cannot
   silently re-narrow the app. */
.research-body .fh-root,
.research-body .fh-shell,
.research-body .fh-main{max-width:none !important}
.research-body .fh-main{flex:1 1 auto;min-width:0}


/* ── fluid layout ─────────────────────────────────────────────────────────
   No fixed ceilings. A cap of 1500 was too narrow; replacing it with 2400 was
   the same mistake one size larger - on a 3840px screen it still leaves a
   third of the window empty. Width is now the window; responsiveness lives in
   the grids, which add and drop columns as the space changes. */

.fh-root{
  max-width:none !important;
  width:100%;
  margin:0;
  /* breathing room that grows with the window instead of a hard margin */
  padding:clamp(.6rem, 1.2vw, 2rem) !important;
}
.fh-shell{max-width:none !important;width:100%}
.fh-main{max-width:none !important;min-width:0;width:100%}

.nx-shell,.cp-shell{
  max-width:none;
  width:100%;
  padding:clamp(.65rem, 1.1vw, 1.8rem);
}

/* Grids reflow rather than stretch: more columns on a wide screen, fewer on a
   narrow one. minmax() is what makes the window size irrelevant. */
.nx-stats,.bk-stats,.cp-cards{
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
}
.nx-two,.bk-two{
  grid-template-columns:repeat(auto-fit,minmax(24rem,1fr));
}
.nx-form{
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.fh-rise,.rs-figs{
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
}

/* Running prose keeps a readable measure even when everything else is fluid -
   a 3000px line of text is unreadable no matter how much room there is. */
.nx-panel-s,.cp-sub,.bk-note,.nx-hint,.nx-explain p,.cp-caveat,.nx-disclaimer,
.cp-disclaimer,.bk-sheet-s{max-width:78ch}

/* Tables use the full width and scroll only when they genuinely must. */
.nx-table,.bk-table,.cp-table{width:100%}
.nx-tablewrap,.bk-tablewrap,.cp-tablewrap{width:100%;overflow-x:auto}

/* The header row wraps instead of flinging its tabs to the far edge. */
.nx-head{flex-wrap:wrap;row-gap:.6rem;align-items:center}
.nx-tabs{flex-wrap:wrap}

/* Very wide: let the client sheet use more of the window too. */
@media (min-width:2200px){
  .bk-sheet{width:min(1400px,70vw)}
}

/* Narrow: everything collapses to one column cleanly. */
@media (max-width:640px){
  .nx-stats,.bk-stats,.cp-cards,.nx-two,.bk-two,.nx-form{grid-template-columns:1fr}
  .fh-root{padding:.6rem !important}
}

/* ── in-app help ──────────────────────────────────────────────────────── */
.hp-scrim{position:fixed;inset:0;z-index:90;background:rgba(2,6,23,.55);display:flex;justify-content:flex-end}
.hp-panel{width:min(640px,96vw);height:100%;overflow-y:auto;background:var(--bg);
  border-left:1px solid var(--border);padding:1rem 1.15rem 2rem;
  animation:hpin .2s cubic-bezier(.2,.7,.3,1)}
@keyframes hpin{from{transform:translateX(20px);opacity:.6}to{transform:none;opacity:1}}
.hp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.hp-title{margin:0;font-size:1.15rem;font-weight:900;color:var(--fg)}
.hp-sub{margin:.15rem 0 0;font-size:.76rem;color:var(--fg-muted)}
.hp-x{background:none;border:0;font-size:1.4rem;line-height:1;color:var(--fg-muted);cursor:pointer;padding:0 .2rem}
.hp-x:hover{color:var(--fg)}
.hp-search{display:flex;gap:.4rem;margin:.8rem 0}
.hp-search input{flex:1;background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:.55rem .7rem;font-size:.85rem;color:var(--fg)}
.hp-search input:focus{outline:2px solid color-mix(in srgb,var(--fl-cyan) 55%,transparent);outline-offset:1px}
.hp-clear{background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:.5rem .7rem;font-size:.76rem;color:var(--fg-muted);cursor:pointer}
.hp-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.hp-list li{border:1px solid var(--border);border-radius:11px;padding:.65rem .8rem;background:var(--card)}
.hp-list li.open{border-color:color-mix(in srgb,var(--fl-cyan) 45%,var(--border))}
.hp-sec{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  background:none;border:0;padding:0;cursor:pointer;text-align:left}
.hp-sec-t{font-size:.9rem;font-weight:800;color:var(--fg)}
.hp-sec-c{font-size:1rem;color:var(--fg-muted)}
.hp-sec-s{margin:.25rem 0 0;font-size:.76rem;line-height:1.55;color:var(--fg-muted)}
.hp-lines{margin:.55rem 0 0;padding-left:1.05rem;display:grid;gap:.35rem}
.hp-lines li{border:0;padding:0;background:none;font-size:.79rem;line-height:1.65;color:var(--fg-muted)}
.hp-panel mark{background:color-mix(in srgb,var(--fl-sand) 40%,transparent);color:var(--fg);
  padding:0 .12rem;border-radius:3px}
.hp-empty{font-size:.82rem;line-height:1.6;color:var(--fg-muted);padding:1rem 0}
.hp-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1.1rem;padding-top:.7rem;border-top:1px solid var(--border);
  font-size:.74rem;color:var(--fg-muted)}
.hp-foot a{color:var(--fl-cyan)}

.cp-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.cp-chip{background:var(--bg);border:1px solid var(--border);border-radius:99px;
  padding:.35rem .75rem;font-size:.75rem;font-weight:700;color:var(--fg-muted);cursor:pointer}
.cp-chip:hover{border-color:var(--fl-cyan);color:var(--fg)}
.cp-chip.on{background:color-mix(in srgb,var(--fl-cyan) 16%,transparent);
  border-color:var(--fl-cyan);color:var(--fg)}
.cp-table th{text-transform:capitalize}


/* ── client modules: transactions, risk, loan, insurance, documents,
      watchlist, cart ─────────────────────────────────────────────────────── */
.cp-panel-tight{padding:.55rem .7rem}
.cp-panel-tight .cp-chips{margin-top:0}
.cp-field{position:relative}
.cp-field-wide{flex:1 1 20rem}
.cp-field small{font-weight:600;letter-spacing:0;text-transform:none;opacity:.7}

/* typeahead */
.cp-suggest{position:absolute;top:100%;left:0;right:0;z-index:30;margin-top:.25rem;
  background:var(--card);border:1px solid var(--border);border-radius:11px;
  overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.18)}
.cp-suggest-row{display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--border);padding:.5rem .65rem;cursor:pointer;
  font-size:.78rem;color:var(--fg);line-height:1.35}
.cp-suggest-row:last-child{border-bottom:0}
.cp-suggest-row:hover{background:color-mix(in srgb,var(--fl-cyan) 12%,transparent)}
.cp-suggest-row em{display:block;font-style:normal;font-size:.68rem;
  color:var(--fg-muted);margin-top:.1rem}

/* questionnaire */
.cp-q{padding:.7rem 0;border-bottom:1px solid var(--border)}
.cp-q:last-of-type{border-bottom:0}
.cp-q-text{margin:0;font-size:.85rem;font-weight:700;color:var(--fg)}

/* plain prose lists (caveats, order lines, renewals) */
.cp-list{margin:.6rem 0 0;padding-left:1.1rem;display:grid;gap:.35rem;
  font-size:.78rem;line-height:1.6;color:var(--fg-muted)}
.cp-list strong{color:var(--fg)}

/* something needs the reader's attention, without shouting */
.cp-flag{border-color:color-mix(in srgb,var(--fl-sand) 55%,var(--border));
  background:color-mix(in srgb,var(--fl-sand) 9%,transparent)}

/* orders */
.cp-order{border:1px solid var(--border);border-radius:12px;padding:.7rem .85rem;
  margin-top:.6rem}
.cp-order:first-of-type{margin-top:.2rem}
.cp-pill{font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.22rem .5rem;border-radius:99px;border:1px solid var(--border);
  color:var(--fg-muted);white-space:nowrap}
.cp-pill.ok{color:var(--good,#34D399);
  border-color:color-mix(in srgb,var(--good,#34D399) 45%,transparent);
  background:color-mix(in srgb,var(--good,#34D399) 12%,transparent)}
.cp-pill.wait{color:var(--fl-sand);
  border-color:color-mix(in srgb,var(--fl-sand) 45%,transparent);
  background:color-mix(in srgb,var(--fl-sand) 12%,transparent)}

/* a row action should not compete with the primary button */
.cp-btn-quiet{padding:.25rem .5rem;font-size:.7rem;background:none;
  color:var(--fg-muted)}
.cp-btn-quiet+.cp-btn-quiet{margin-left:.3rem}
.cp-btn-quiet:hover{color:var(--fg)}

@media (max-width:640px){
  .cp-field-wide{flex:1 1 100%}
  .cp-row .cp-btn{width:100%}
}


/* the go-live confirmation row: a checkbox beside a sentence that matters */
.nx-check{display:flex;align-items:flex-start;gap:.55rem;margin:.7rem 0;
  font-size:.8rem;line-height:1.55;color:var(--fg-muted);cursor:pointer;
  max-width:62ch}
.nx-check input{margin-top:.2rem;accent-color:var(--fl-cyan);flex:none}
.nx-check span{display:block}
/* ═══════════════════════════════════════════════════════════════════════════
   Funds Hub, restyled for the research product.

   Scoped to .research-shell so the portal is untouched — the same component
   renders in both places and must keep working in the portal exactly as it did.

   The approach is to re-declare the design tokens FundsTab already consumes
   (--card, --border, --accent…) inside this scope, so the restyle reaches
   inline-styled elements without a wall of !important. Only the handful of
   things that cannot be expressed as a token get an override.
   ═══════════════════════════════════════════════════════════════════════════ */

.research-shell {
  --card: color-mix(in srgb, var(--bg) 82%, #ffffff 4%);
  --border: color-mix(in srgb, var(--fg) 12%, transparent);
  --accent: var(--rs-a1);
}
:root[data-theme="light"] .research-shell {
  --card: #ffffff;
  --border: #e3e8ef;
}

/* ── the tab strip becomes a pill rail ────────────────────────────────── */
.research-shell .fh-tabs {
  gap: .4rem !important;
  padding: .4rem !important;
  margin-bottom: 1.3rem !important;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: 15px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  scrollbar-width: none;
}
.research-shell .fh-tabs::-webkit-scrollbar { display: none; }
.research-shell .fh-tabs > button {
  border: 0 !important;
  border-radius: 11px !important;
  padding: .55rem 1rem !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  background: transparent !important;
  color: var(--fg-muted) !important;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.research-shell .fh-tabs > button:hover {
  color: var(--fg) !important;
  background: color-mix(in srgb, var(--fg) 6%, transparent) !important;
}
/* the active pill — inline styles set the accent background, so match on it */
.research-shell .fh-tabs > button[style*="var(--accent)"] {
  background: linear-gradient(135deg, var(--rs-a1), var(--rs-a2)) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -7px var(--rs-glow);
  transform: translateY(-1px);
}

/* ── cards become glass with a coloured top edge ──────────────────────── */
.research-shell .fh-card {
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--card) 88%, transparent) !important;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 12px 34px -22px rgba(0, 0, 0, .5);
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.research-shell .fh-card::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--rs-a1), var(--rs-a2), transparent 78%);
  opacity: .8;
}
.research-shell .fh-card:hover {
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .58);
}

/* ── typography: larger and easier on a phone ─────────────────────────── */
.research-shell .fh-root { max-width: none; padding-left: .35rem; padding-right: .35rem; }
.research-shell .fh-root table { font-size: .86rem; }
.research-shell .fh-root th {
  font-size: .68rem !important;
  letter-spacing: .06em;
  background: color-mix(in srgb, var(--fg) 4%, transparent) !important;
}
.research-shell .fh-root td { padding: .62rem .75rem !important; }
.research-shell .fh-root tbody tr { transition: background .13s ease; }
.research-shell .fh-root tbody tr:hover {
  background: color-mix(in srgb, var(--rs-a1) 7%, transparent) !important;
}

/* ── inputs and buttons pick up the product styling ───────────────────── */
.research-shell .fh-root input,
.research-shell .fh-root select {
  padding: .58rem .75rem !important;
  border-radius: 10px !important;
  font-size: .88rem !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.research-shell .fh-root input:focus,
.research-shell .fh-root select:focus {
  outline: none;
  border-color: var(--rs-a1) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-a1) 20%, transparent);
}
.research-shell .fh-btn {
  border-radius: 10px !important;
  font-size: .8rem !important;
  transition: transform .14s ease, border-color .14s ease, filter .14s ease;
}
.research-shell .fh-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--rs-a1) !important;
}
.research-shell .fh-btn[style*="var(--accent)"] {
  background: linear-gradient(135deg, var(--rs-a1), var(--rs-a2)) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px -8px var(--rs-glow);
}

/* ── stat tiles get a subtle gradient wash ────────────────────────────── */
.research-shell .fh-card > div > div[style*="grid-template-columns"] > div[style*="border-radius: 8"],
.research-shell .fh-root div[style*="0.7rem 0.85rem"] {
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--rs-a1) 7%, var(--card)),
              var(--card)) !important;
  border-radius: 11px !important;
}

/* ── bars and donuts read stronger on the darker surface ──────────────── */
.research-shell .fh-bar { filter: saturate(1.12); }
.research-shell .fh-arc { filter: saturate(1.08); }

/* ── phone / tablet ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .research-shell .fh-root { padding: .8rem !important; }
}
@media (max-width: 768px) {
  .research-shell .fh-tabs {
    border-radius: 13px;
    margin-bottom: 1rem !important;
    padding: .35rem !important;
  }
  .research-shell .fh-tabs > button {
    padding: .48rem .8rem !important;
    font-size: .8rem !important;
  }
  .research-shell .fh-card { border-radius: 14px !important; }
  .research-shell .fh-root table { font-size: .8rem; }
  .research-shell .fh-root td { padding: .5rem .55rem !important; }
  /* stat grids drop to two-up rather than squeezing to one column */
  .research-shell .fh-root div[style*="minmax(140px"],
  .research-shell .fh-root div[style*="minmax(150px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  .research-shell .fh-root { padding: .5rem !important; }
  .research-shell .fh-root table { font-size: .76rem; }
  .research-shell .fh-card { padding: .75rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .research-shell .fh-card,
  .research-shell .fh-btn,
  .research-shell .fh-tabs > button { transition: none !important; transform: none !important; }
}

@media print {
  .research-shell .fh-card {
    backdrop-filter: none; box-shadow: none;
    background: #fff !important; border: 1px solid #b9c0cc !important;
  }
  .research-shell .fh-card::after { display: none; }
}