/*
 * Vestmind Research — the public pages.
 *
 * Layered on top of `vestmindcore.css` and `tokens.css`, which the browser
 * application serves and which already establish the typefaces, the colour
 * tokens and the primary menu. Nothing here redefines a brand value: the navy,
 * the gold and the two families all come from those files, and this stylesheet
 * is only the layout the research surfaces need.
 *
 * Served by the API at /research/research.css rather than from the web app's
 * public tree, because the pages that use it are server-rendered here — one
 * deployable owns both the markup and the styling for it.
 */

:root {
  --research-navy: #051936;
  --research-gold: #d39535;
  --research-ink: #102342;
  --research-muted: #6f7585;
  --research-line: #e5e7eb;
  --research-paper: #ffffff;
  --research-ground: linear-gradient(135deg, #fbfaf8 2%, #ffffff 42%, #edf7fc 100%);
  --research-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  --research-shadow-hover: 0 18px 38px rgba(5, 25, 54, 0.08);
  --research-max: 1180px;
  --research-read: 720px;
}

body.research-body {
  background: var(--research-ground);
  color: var(--research-navy);
  margin: 0;
  min-height: 100vh;
}

body.research-body primary-menu {
  /* Reserve the public menu's complete glass-shell height before the custom
     element upgrades. Without this, the first paint only reserves the generic
     64px menu and the discovery copy briefly appears underneath the 88px
     public navigation. */
  min-height: 88px;
  position: sticky;
  top: 0;
  z-index: 1000;
  display: block;
  width: 100%;
}

.research-main {
  margin: 0 auto;
  max-width: var(--research-max);
  padding: 56px 24px 96px;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ── The banner ────────────────────────────────────────────────────────
 * The index opens with the landing page's banner, restated by the shared
 * product banner (`/styles/product-banner.css`, loaded just before this sheet
 * on the index only). What follows is only what Research adds to it: the
 * search in the place of the landing's chat box, the popular searches as its
 * suggested questions, and the list of reads inside the phone.
 */
/*
 * The copy stands at a fixed height from the top of the banner rather than
 * floating in its middle, so the amber band can be placed from the same
 * measurements: it starts just above the lede and runs past the search, the
 * way the landing's band carries its chat box. The headline, with its amber
 * emphasis, always stays on the sky. `--rb-pad` centres the copy in a typical
 * window; the band follows it whatever the window is, and the ribbon is cut
 * to end just above it, so its swallowtail never disappears into the band.
 */
.research-banner {
  --rb-pad: clamp(32px, calc((min(92vh, 820px) - var(--pb-menu) - 470px) / 2), 140px);
  --rb-h1: clamp(40px, 4vw, 60px);
  --pb-band-top: calc(var(--pb-menu) + var(--rb-pad) + 58px + 2 * var(--rb-h1) + 14px);
  --pb-band-bottom: calc(var(--pb-band-top) + 240px);
}
.research-banner .pb-banner__copy { align-self: start; padding-top: var(--rb-pad); }
.research-banner h1 { font-size: var(--rb-h1); }
/* From the frame's top edge (the visual's top plus the frame's own inset) to
   24px above the band. */
.research-banner[data-motif] .pb-frame::after {
  height: max(120px, calc(var(--rb-pad) + 72px + 2 * var(--rb-h1) - clamp(28px, 6vh, 56px) - 24px));
}
.research-banner .pb-kicker span { color: inherit; }
.research-banner .pb-kicker b { font-weight: 800; }
.research-intro { text-align: left; }

/* The small label above an article's headline. */
.research-eyebrow {
  border: 1px solid rgba(204, 139, 42, 0.65);
  border-radius: 999px;
  color: #b97618;
  display: inline-flex;
  font: 500 13px/1 var(--font-body);
  letter-spacing: 0.06em;
  margin: 0;
  padding: 8px 19px;
  text-transform: uppercase;
  width: max-content;
}

/* ── Search ────────────────────────────────────────────────────────────── */

.research-search {
  align-items: center;
  display: flex;
  height: 54px;
  max-width: 720px;
  position: relative;
  width: 100%;
}

.research-search-icon {
  align-items: center;
  color: var(--research-muted);
  display: flex;
  left: 16px;
  pointer-events: none;
  position: absolute;
}

.research-search-icon svg { height: 17px; width: 17px; }

.research-search input {
  background: #fff;
  border: 1px solid #d8d6d3;
  border-radius: 8px 0 0 8px;
  color: var(--research-navy);
  font: 14.5px var(--font-body);
  height: 100%;
  min-width: 0;
  outline: none;
  padding: 0 16px 0 44px;
  width: 100%;
}

.research-search input:focus {
  border-color: var(--research-gold);
  box-shadow: 0 0 0 2px rgba(211, 149, 53, 0.16);
}

.research-search button {
  flex: 0 0 150px;
  height: 100%;
  padding: 0 20px;
}

.research-search .vestmind-primary-button,
.research-notify .vestmind-primary-button {
  color: #fff;
}

/* The banner's search wears the landing chat box's glass, and its send button
   is the product banners' blue. */
.research-search--hero {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #ddd6ce;
  border-radius: 14px;
  box-sizing: border-box;
  gap: 10px;
  height: auto;
  margin-top: 26px;
  max-width: 560px;
  min-height: 64px;
  padding: 6px 6px 6px 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.research-search--hero:focus-within {
  background: #fff;
  border-color: #9d8ae5;
  box-shadow: 0 0 0 3px rgba(99, 56, 238, 0.09);
}

.research-search--hero .research-search-icon { color: #5c6e88; position: static; }
.research-search--hero .research-search-icon svg { height: 18px; width: 18px; }

.research-search--hero input,
.research-search--hero input:focus {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--pb-ink, #080b1a);
  flex: 1;
  font-size: 15px;
  padding: 14px 0;
}

.research-search--hero input::placeholder { color: #666681; opacity: 1; }

.research-search-send {
  align-items: center;
  background: var(--pb-blue, #0758e8);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 7px 16px rgba(7, 88, 238, 0.24);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: 700 14px var(--font-body);
  gap: 8px;
  justify-content: center;
  min-height: 50px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.research-search .research-search-send { flex: 0 0 auto; height: auto; padding: 0 22px; }
.research-search-send:hover {
  background: var(--pb-blue-deep, #0547c2);
  box-shadow: 0 10px 26px rgba(7, 88, 238, 0.34);
  transform: translateY(-1px);
}
.research-search-send:focus-visible { outline: 3px solid rgba(7, 42, 94, 0.35); outline-offset: 3px; }

/* ── Chips ─────────────────────────────────────────────────────────────── */

.research-topics { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.research-topics--hero { margin-top: 14px; max-width: 600px; }

.research-topics-label {
  color: var(--research-muted);
  font-size: 12.5px;
  margin-right: 2px;
}

.research-chip {
  background: #fff;
  border: 1px solid #e3ddd3;
  border-radius: 999px;
  color: var(--research-ink);
  font-size: 12.5px;
  padding: 6px 14px;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.research-chip:hover { border-color: var(--research-gold); color: #b97618; }

/* In the banner the chips are the landing's suggested questions: glass tiles. */
.research-topics--hero .research-topics-label { color: #344260; font-weight: 600; }
.research-topics--hero .research-chip {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(215, 222, 233, 0.9);
  border-radius: 9px;
  color: #344260;
  font-size: 12px;
  padding: 7px 12px;
}
.research-topics--hero .research-chip:hover { background: #fff; border-color: #8c78df; color: #4f31dc; }

/* ── The phone's reads ─────────────────────────────────────────────────── */

.research-phone__reads { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.research-phone__reads li {
  border-top: 1px solid #edf1f6;
  padding-top: 8px;
}
/* Each read opens its article, so the whole row is the target. */
.research-phone__read {
  border-radius: 6px;
  color: inherit;
  display: grid;
  gap: 2px;
  margin: -3px -4px;
  padding: 3px 4px;
  text-decoration: none;
  transition: background-color 0.18s ease;
}
.research-phone__read:hover,
.research-phone__read:active { background: #f3f7fc; }
.research-phone__read:hover b,
.research-phone__read:active b { color: var(--pb-blue, #0758e8); }
.research-phone__reads li:first-child { border-top: 0; padding-top: 0; }
.research-phone__reads small {
  color: var(--pb-amber-small, #c58c35);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.research-phone__reads b {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--pb-ink, #080b1a);
  display: -webkit-box;
  font: 500 11px/1.3 var(--font-display);
  letter-spacing: -0.01em;
  line-clamp: 2;
  overflow: hidden;
}
.research-phone__reads em { color: #8494aa; font-size: 8px; font-style: normal; }

/* ── Sections ──────────────────────────────────────────────────────────── */

.research-main {
  margin: 0 auto;
  max-width: var(--research-max);
  padding: 44px 24px 24px;
}

.research-section { margin-bottom: 56px; }

/* Keep the first prompt visually balanced between discovery and the opening
   rail without inheriting the larger top margin used on VestFire. */
.research-index .research-main { padding-top: 32px; }
.research-index .research-main > plan-cta { margin-bottom: 32px; }
.research-index .research-main > plan-cta .plan-cta { margin-top: 0; }

/* The shared component carries a VestFire-specific top margin. In Research it
   sits inside the recommendation section, with deliberate space before the
   heading rather than an extra inherited gap above the panel. */
.research-recommended > plan-cta { margin-bottom: 32px; }
.research-recommended > plan-cta .plan-cta { margin-top: 0; }

/* Each heading is set the way the landing page sets its own: a short kicker
   on the landing's amber highlighter, the headline in its ink, and the way
   onward as a glass pill rather than a bare link. */
:root {
  --research-heading-ink: #07162f;
  --research-highlight: #ffd97a;
  --research-amber: #c58c35;
}

.research-section-head {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 24px;
}

.research-section-title { min-width: 0; }

.research-kicker {
  background: linear-gradient(180deg, transparent 52%, var(--research-highlight) 52%);
  color: #072a5e;
  display: inline-block;
  font: 700 11.5px/1.5 var(--font-body);
  letter-spacing: 0.14em;
  margin: 0 0 10px;
  padding: 0 4px;
  text-transform: uppercase;
}

.research-section-head h2 {
  color: var(--research-heading-ink);
  font: var(--font-weight-headline, 500) clamp(28px, 2.6vw, 40px)/1.06 var(--font-display);
  letter-spacing: -0.03em;
  margin: 0;
}

.research-section-head p:not(.research-kicker) {
  color: #5c6e88;
  font-size: 14px;
  margin: 8px 0 0;
}

.research-view-all {
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #d7dee9;
  border-radius: 999px;
  color: var(--research-heading-ink);
  display: inline-flex;
  flex: none;
  font: 600 13px var(--font-body);
  gap: 8px;
  padding: 10px 18px;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.research-view-all span { color: var(--research-amber); transition: transform 0.2s ease; }
.research-view-all:hover {
  background: #fff;
  border-color: #c7973b;
  box-shadow: 0 8px 18px rgba(8, 25, 51, 0.08);
  transform: translateY(-1px);
}
.research-view-all:hover span { transform: translateX(2px); }

.research-explore-inner { margin-bottom: 6px; text-align: center; }
.research-explore-inner .research-topics { justify-content: center; margin-top: 16px; }

/* ── Cards ─────────────────────────────────────────────────────────────── */

.research-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* One lead card, four stacked beside it. */
.research-feature-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 3fr);
}

.research-feature-rest {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.research-card {
  background: var(--research-paper);
  border: 1px solid #e6ebf2;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(7, 42, 94, 0.04), 0 8px 24px rgba(7, 42, 94, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.24s ease, transform 0.24s ease;
}

.research-card:hover { box-shadow: 0 22px 48px rgba(7, 42, 94, 0.12); transform: translateY(-3px); }

/* The picture eases in a touch on hover, inside the card's own corners. */
.research-card-image { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.research-card:hover .research-card-image { transform: scale(1.035); }
.research-card-media { overflow: hidden; }

.research-card-media { display: block; line-height: 0; position: relative; }

.research-card-image {
  aspect-ratio: 16 / 10;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.research-pill {
  backdrop-filter: blur(2px);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 7px;
  color: var(--research-heading-ink);
  font: 600 9.5px/1 var(--font-body);
  left: 12px;
  letter-spacing: 0.09em;
  padding: 6px 9px;
  position: absolute;
  top: 12px;
}

.research-views {
  background: rgba(5, 25, 54, 0.72);
  border-radius: 5px;
  color: #fff;
  font: 600 10.5px/1 var(--font-body);
  padding: 6px 9px;
  position: absolute;
  right: 12px;
  top: 12px;
}

.research-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 18px 18px;
}

.research-card-title {
  font: var(--font-weight-headline, 500) 15.5px/1.3 var(--font-display);
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}

.research-card-title a { color: var(--research-heading-ink); text-decoration: none; transition: color 0.18s ease; }
.research-card-title a:hover { color: var(--research-amber); }

.research-card-summary {
  color: #5c6e88;
  display: -webkit-box;
  flex: 1;
  font-size: 12.5px;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  line-height: 1.6;
  margin: 0 0 14px;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.research-card--feature .research-card-summary { -webkit-line-clamp: 3; line-clamp: 3; }

.research-card-foot {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: auto;
}

/* A narrow card cannot hold the date, the reading time and "Read" on one line.
   Rather than let them wrap into a ragged three-line block, the compact cards
   stack the two deliberately. */
.research-card--compact .research-card-foot {
  align-items: flex-start;
  flex-direction: column;
  gap: 7px;
}

.research-card-meta {
  color: #8494aa;
  display: flex;
  font-size: 11.5px;
  gap: 7px;
  margin: 0;
  white-space: nowrap;
}

.research-card-meta time { white-space: nowrap; }

.research-read {
  color: var(--research-amber);
  font: 700 12.5px var(--font-body);
  text-decoration: none;
  white-space: nowrap;
}

.research-read:hover { color: var(--research-heading-ink); }

/* The lead card gets the room, not a different design. */
.research-card--feature .research-card-image { aspect-ratio: 16 / 11; }
.research-card--feature .research-card-body { padding: 20px 22px 22px; }
.research-card--feature .research-card-title { font-size: 24px; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 11px; }
.research-card--feature .research-card-summary { font-size: 13.5px; }

/* Compact cards drop the standfirst only when there is genuinely no room. */
.research-card--compact .research-card-title { font-size: 14px; }

.research-empty {
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed #d7dee9;
  border-radius: 18px;
  color: var(--research-muted);
  margin: 0;
  padding: 34px;
  text-align: center;
}

.research-search-count { color: var(--research-muted); font-size: 13.5px; margin: 22px 0 14px; }
.research-search-results { margin-top: 8px; }
.research-search-results .research-view-all { display: inline-block; margin-top: 18px; }

/* ── Newsletter ────────────────────────────────────────────────────────── */

/* The letter sign-up closes the index the way the banner opens it: the same
   flat sky, the broadsheet's column rules, and the amber ribbon hanging from
   its top edge. */
.research-cta {
  align-items: center;
  background:
    repeating-linear-gradient(90deg, transparent 0 147px, rgba(255, 255, 255, 0.34) 147px 148px),
    var(--pb-sky, #a9dcf6);
  border-radius: 28px;
  box-sizing: border-box;
  display: grid;
  gap: 18px 40px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  margin: 8px auto 72px;
  max-width: calc(var(--research-max) - 48px);
  overflow: hidden;
  padding: 50px 48px 50px;
  position: relative;
  width: calc(100% - 48px);
}

.research-cta::after {
  background:
    linear-gradient(90deg,
      transparent 4px, rgba(255, 255, 255, 0.6) 4px 5px, transparent 5px calc(100% - 5px),
      rgba(255, 255, 255, 0.6) calc(100% - 5px) calc(100% - 4px), transparent calc(100% - 4px)),
    var(--pb-band, #e9a23b);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 14px), 0 100%);
  content: '';
  height: 92px;
  pointer-events: none;
  position: absolute;
  right: 56px;
  top: 0;
  width: 26px;
}

.research-cta-copy { grid-row: span 2; }

.research-cta-copy p:not(.research-kicker) {
  color: var(--pb-ink, #080b1a);
  font: var(--font-weight-headline, 500) clamp(30px, 3vw, 46px)/1.02 var(--font-display);
  letter-spacing: -0.04em;
  margin: 0;
}

.research-cta-copy em { color: var(--pb-amber-text, #e0a13a); font-style: normal; }
.research-cta .research-kicker { background: linear-gradient(180deg, transparent 52%, rgba(255, 255, 255, 0.85) 52%); }

.research-cta-note { align-self: end; color: #344260; font-size: 15px; line-height: 1.55; margin: 0; max-width: 460px; }

.research-notify {
  align-items: stretch;
  align-self: start;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(215, 222, 233, 0.9);
  border-radius: 14px;
  box-sizing: border-box;
  display: flex;
  gap: 6px;
  height: 64px;
  padding: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.research-notify:focus-within {
  background: #fff;
  border-color: #9d8ae5;
  box-shadow: 0 0 0 3px rgba(99, 56, 238, 0.09);
}

.research-notify input {
  background: transparent;
  border: 0;
  color: var(--pb-ink, #080b1a);
  font: 15px var(--font-body);
  min-width: 0;
  outline: none;
  padding: 0 14px;
  width: 100%;
}

.research-notify input::placeholder { color: #666681; opacity: 1; }

.research-notify button {
  border-radius: 10px;
  flex: 0 0 auto;
  height: 100%;
  padding: 0 22px;
}

.research-cta-status { color: #344260; font-size: 12.5px; grid-column: 2; margin: -8px 0 0; min-height: 15px; }
.research-cta-status.success { color: #1d5b2c; }
.research-cta-status.error { color: #8f2a1f; }

/* ── Lists ─────────────────────────────────────────────────────────────── */

.research-breadcrumb { color: var(--research-muted); font-size: 13px; margin-bottom: 22px; }
.research-breadcrumb a { color: var(--research-muted); text-decoration: none; }
.research-breadcrumb a:hover { color: var(--research-navy); }

.research-list-head { margin-bottom: 36px; max-width: 640px; }
.research-list-head h1 { font: 400 clamp(30px, 3vw, 44px)/1.1 var(--font-display); margin: 0 0 12px; }
.research-list-head p { color: var(--research-ink); margin: 0; }

.research-pagination {
  align-items: center;
  border-top: 1px solid var(--research-line);
  display: flex;
  justify-content: space-between;
  margin-top: 44px;
  padding-top: 20px;
}

.research-pagination a { color: #b97618; font-weight: 600; text-decoration: none; }
.research-pagination-state { color: var(--research-muted); font-size: 13px; }

/* ── The article ───────────────────────────────────────────────────────── */

.research-article { max-width: 860px; }
.research-article-head { margin-bottom: 30px; }

.research-article-head h1 {
  font: 400 clamp(32px, 3.4vw, 50px)/1.08 var(--font-display);
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}

.research-summary { color: var(--research-ink); font-size: 18px; line-height: 1.6; margin: 0 0 18px; }

/* Keep every long-form block on the same natural, left-aligned reading edge.
   Justification made short lines stretch into conspicuous gaps, especially in
   the takeaways and the first paragraph after the introduction. */
.research-summary,
.research-hook p,
.research-takeaways li,
.research-article-body p,
.research-faq-item p,
.research-methodology {
  hyphens: none;
  overflow-wrap: break-word;
  text-align: left;
}

.research-article-meta { color: var(--research-muted); display: flex; flex-wrap: wrap; font-size: 13.5px; gap: 8px; margin: 0; }

.research-article-figure { margin: 0 0 40px; }

.research-article-image {
  border-radius: 20px;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.research-hook p {
  color: var(--research-ink);
  font-size: 18.5px;
  line-height: 1.72;
  margin: 0 0 18px;
}

.research-takeaways {
  background: rgba(237, 247, 252, 0.68);
  border: 1px solid rgba(204, 139, 42, 0.24);
  border-radius: 18px;
  margin: 34px 0 40px;
  padding: 26px 30px;
}

.research-takeaways h2 {
  color: #b97618;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.12em;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.research-takeaways ul { margin: 0; padding-left: 20px; }
.research-takeaways li { line-height: 1.6; margin-bottom: 10px; }
.research-takeaways li:last-child { margin-bottom: 0; }

.research-article-section { margin-bottom: 40px; }

.research-article-section h2 {
  font: 400 clamp(22px, 2.2vw, 30px)/1.2 var(--font-display);
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.research-article-body p {
  color: var(--research-ink);
  font-size: 16.5px;
  line-height: 1.78;
  margin: 0 0 18px;
  max-width: var(--research-read);
}

.research-inline-link {
  border-bottom: 1px solid rgba(204, 139, 42, 0.5);
  color: var(--research-navy);
  text-decoration: none;
}

.research-inline-link:hover { border-bottom-color: var(--research-gold); color: #b97618; }

/* ── FAQ, sources, related ─────────────────────────────────────────────── */

.research-faq, .research-sources {
  border-top: 1px solid var(--research-line);
  margin-top: 48px;
  padding-top: 32px;
}

.research-faq h2, .research-sources h2 {
  font: 400 clamp(21px, 2vw, 27px)/1.2 var(--font-display);
  margin: 0 0 20px;
}

.research-faq-item {
  border-bottom: 1px solid var(--research-line);
  padding: 14px 0;
}

.research-faq-item summary {
  cursor: pointer;
  font: 600 16px var(--font-body);
  list-style: none;
  padding-right: 28px;
  position: relative;
}

.research-faq-item summary::-webkit-details-marker { display: none; }
.research-faq-item summary::after { color: var(--research-gold); content: "+"; position: absolute; right: 4px; }
.research-faq-item[open] summary::after { content: "–"; }
.research-faq-item p { color: var(--research-ink); line-height: 1.7; margin: 12px 0 4px; }

.research-methodology { color: var(--research-muted); font-size: 14px; line-height: 1.7; margin: 0 0 20px; }

.research-sources ol { margin: 0; padding-left: 20px; }
.research-sources li { line-height: 1.6; margin-bottom: 14px; }
.research-sources li a { color: var(--research-navy); border-bottom: 1px solid rgba(204, 139, 42, 0.4); text-decoration: none; }
.research-source-publisher, .research-source-note { color: var(--research-muted); display: block; font-size: 13px; }

.research-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }

.research-article-links {
  border-top: 1px solid rgba(14, 35, 67, 0.12);
  margin-top: 42px;
  padding-top: 24px;
}
.research-article-links p { color: var(--ink-muted, #50627a); margin: 0 0 9px; }
.research-article-links a {
  color: var(--blue, #174f93);
  font-weight: 700;
  text-decoration-color: rgba(231, 160, 59, 0.7);
  text-underline-offset: 4px;
}

/* ── The article layout: contents · article · rail ──────────────────────── */

/* The middle column is the article's own reading width — 860 px less the
   24 px gutters `.research-main` used to carry — so adding the rails beside it
   changes nothing about how the article itself sets. The rails take what is
   left and appear only when there is room for all three columns at full
   width; below that the article stands alone as it always did. */
.research-article-layout {
  --research-article-column: 812px;
  --research-rail-gap: 40px;
}

.research-article-section,
.research-takeaways h2,
.research-faq h2,
.research-sources h2 {
  /* Land a contents jump below the sticky menu rather than under it. */
  scroll-margin-top: 112px;
}

.research-rail-label {
  color: var(--research-navy);
  font: 600 12px/1.2 var(--font-body);
  letter-spacing: 0.12em;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.research-toc { display: none; }

.research-toc-list {
  border-left: 1px solid var(--research-line);
  list-style: none;
  margin: 0;
  padding: 0;
}

.research-toc-list a {
  border-left: 2px solid transparent;
  color: var(--research-muted);
  display: block;
  font: 500 14px/1.45 var(--font-body);
  margin-left: -1px;
  padding: 7px 0 7px 16px;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.research-toc-list a:hover { color: var(--research-navy); }

.research-toc-list a.is-active {
  border-left-color: var(--research-gold);
  color: var(--research-navy);
}

.research-rail {
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0 auto;
  max-width: 860px;
  padding: 8px 24px 72px;
}

.research-rail-list { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }

.research-rail-card {
  background: var(--research-paper);
  border: 1px solid var(--research-line);
  border-radius: 14px;
  box-shadow: var(--research-shadow);
  color: var(--research-navy);
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.research-rail-card:hover {
  border-color: rgba(204, 139, 42, 0.45);
  box-shadow: var(--research-shadow-hover);
  transform: translateY(-1px);
}

.research-rail-title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  font: 400 15px/1.35 var(--font-display);
  line-clamp: 2;
  margin-bottom: 8px;
  overflow: hidden;
}

.research-rail-card time { color: var(--research-muted); display: block; font-size: 12.5px; }

@media (min-width: 1300px) {
  .research-article-layout {
    display: grid;
    gap: 0 var(--research-rail-gap);
    grid-template-columns: minmax(170px, 260px) var(--research-article-column) minmax(170px, 260px);
    justify-content: center;
    margin: 0 auto;
    padding: 44px 24px 96px;
  }

  .research-article-layout > .research-main {
    margin: 0;
    max-width: none;
    min-width: 0;
    padding: 0;
  }

  .research-article-layout--no-toc > .research-main { grid-column: 2; }

  .research-toc {
    align-self: start;
    display: block;
    max-height: calc(100vh - 136px);
    overflow-y: auto;
    position: sticky;
    scrollbar-width: thin;
    top: 112px;
  }

  /* Pinned like the contents: the article scrolls past while the rail stays
     in view, scrolling on its own only if it is taller than the window. The
     padding, cancelled by the margin, keeps the cards' hover shadow from
     being clipped by that scroll box. */
  .research-rail {
    align-content: start;
    align-self: start;
    display: grid;
    gap: 40px;
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: 1fr;
    margin: -4px -16px 0;
    max-height: calc(100vh - 120px);
    max-width: none;
    overflow-y: auto;
    padding: 4px 16px 24px;
    position: sticky;
    scrollbar-width: thin;
    top: 108px;
  }

  /* Compact enough that three related and three latest pieces fit in one
     laptop-height window without the rail having to scroll. */
  .research-rail { gap: 22px; }
  .research-rail .research-rail-label { margin-bottom: 10px; }
  .research-rail-list { gap: 8px; }
  .research-rail-card { border-radius: 12px; padding: 9px 12px; }
  .research-rail-title { font-size: 14px; line-height: 1.3; margin-bottom: 3px; }
  .research-rail-card time { font-size: 12px; }
}

/* ── Narrow screens ────────────────────────────────────────────────────── */

/* The five-across row collapses in two steps rather than one: three cards is
   still a row, one card is a list, and going straight from five to one loses
   the scan. */
@media (max-width: 1180px) {
  .research-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .research-feature-grid { grid-template-columns: 1fr; }
  .research-feature-rest { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  body.research-body primary-menu { min-height: 72px; }
  /* On a phone the frame stands under the copy and the cards would land on
     the list of latest reads, which is the part of the illustration that is
     real. They move down over the checklist instead, and the visual grows
     tall enough to show the whole list. */
  .research-banner .pb-banner__visual { min-height: 600px; }
  .research-banner[data-motif] .pb-frame::after { height: 190px; }
  .research-banner .pb-phone { transform: rotate(-2deg); }
  .research-banner .pb-float--stat { top: 70%; }
  .research-banner .pb-float--note { top: 84%; }
  .research-row,
  .research-feature-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-cta { grid-template-columns: 1fr; padding: 44px 28px 42px; }
  .research-cta::after { height: 64px; right: 28px; width: 22px; }
  .research-cta-copy { grid-row: auto; }
  .research-cta-status { grid-column: 1; }
}

@media (max-width: 720px) {
  .research-main { padding: 32px 18px 16px; }
  .research-section { margin-bottom: 42px; }
  .research-index .research-main { padding-top: 24px; }
  .research-index .research-main > plan-cta { margin-bottom: 24px; }
  .research-recommended > plan-cta { margin-bottom: 24px; }
  .research-section-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .research-search { height: 48px; }
  .research-search button { flex-basis: 132px; font-size: 14px; padding-inline: 16px; }
  .research-search--hero { height: auto; min-height: 58px; }
  .research-search--hero .research-search-send { flex-basis: auto; min-height: 44px; padding-inline: 16px; }
  /* Match the landing-page product carousel: each discovery rail stays on one
     horizontal track, snaps one card at a time and leaves the scrollbar out
     of the visual design. The partial next card is an intentional swipe cue. */
  .research-index .research-row,
  .research-index .research-feature-grid {
    display: flex;
    gap: 14px;
    margin-inline: -18px;
    overflow-x: auto;
    padding: 2px 18px 14px;
    scroll-behavior: smooth;
    scroll-padding-inline: 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .research-index .research-row::-webkit-scrollbar,
  .research-index .research-feature-grid::-webkit-scrollbar { display: none; }
  .research-index .research-feature-rest { display: contents; }
  .research-index .research-row > .research-card,
  .research-index .research-feature-grid > .research-card,
  .research-index .research-feature-rest > .research-card {
    flex: 0 0 min(84vw, 340px);
    scroll-snap-align: start;
  }
  .research-card--feature .research-card-title { font-size: 19px; }
  .research-cta { border-radius: 22px; margin-bottom: 44px; padding: 30px 20px 36px; width: calc(100% - 36px); }
  .research-notify { height: 58px; }
  .research-notify button { padding: 0 16px; }
  .research-takeaways { padding: 20px; }
  .research-rail { padding: 8px 18px 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .research-card, .research-card-image, .research-view-all, .research-search-send { transition: none; }
  .research-card:hover, .research-card:hover .research-card-image, .research-view-all:hover, .research-search-send:hover { transform: none; }
  .research-rail-card, .research-toc-list a { transition: none; }
  .research-rail-card:hover { transform: none; }
}