/* Insights index only. All selectors are scoped so other routes are untouched. */
body.insights-page {
  --ins-ink: #10141c;
  --ins-muted: #3f4b5c;
  --ins-soft: #5c6a7c;
  --ins-line: rgba(16, 20, 28, 0.1);
  --ins-blue: #1769ff;
  --ins-deep: #063ea8;
  --ins-navy: #071226;
  --ins-paper: #f3f5f9;
  --ins-card: #ffffff;
  margin: 0;
  background: var(--ins-paper);
  color: var(--ins-ink);
  font-family: Manrope, "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.insights-page a { color: inherit; text-decoration: none; }
body.insights-page a.ins-btn-light,
body.insights-page .ins-btn-light { background: #fff; color: #0c438a; }
body.insights-page a.ins-btn-ghost,
body.insights-page .ins-btn-ghost { color: #fff; border-color: #ffffff33; }
body.insights-page button, body.insights-page input { font: inherit; color: inherit; }
body.insights-page img, body.insights-page svg { display: block; max-width: 100%; }
body.insights-page :focus-visible { outline: 3px solid #65afff; outline-offset: 3px; }

.ins-skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: #071226;
  font-weight: 800;
  transform: translateY(-160%);
}
.ins-skip:focus { transform: none; }

.ins-wrap { width: min(calc(100% - 32px), 1180px); margin: 0 auto; }

.ins-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header, 72px) + 36px) 0 64px;
  color: #fff;
  background:
    radial-gradient(ellipse at 88% -8%, rgba(80, 190, 255, 0.28), transparent 42%),
    radial-gradient(ellipse at 0% 110%, rgba(23, 105, 255, 0.3), transparent 40%),
    linear-gradient(145deg, #0854c7, #071c49 55%, #050e22);
}
.ins-hero::after {
  content: "";
  position: absolute;
  inset: auto -120px -180px auto;
  width: 420px;
  height: 420px;
  border: 1px solid #ffffff14;
  border-radius: 50%;
  box-shadow: 0 0 0 48px #ffffff05;
  pointer-events: none;
}
.ins-kicker {
  margin: 0 0 16px;
  color: #9ad4ff;
  font: 700 11px/1.6 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.insights-page .ins-hero,
body.insights-page .ins-hero h1 {
  color: #fff !important;
}
.ins-hero h1 {
  margin: 0;
  max-width: 18ch;
  font-family: Montserrat, Manrope, sans-serif;
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}
body.insights-page .ins-hero h1 em { color: #9cefff; font-style: normal; }
body.insights-page .ins-lede {
  max-width: 62ch;
  margin: 20px 0 0;
  color: #dce7f6;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.65;
}
.ins-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.ins-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 800;
}
.ins-btn-light { background: #fff; color: #0c438a; }
.ins-btn-ghost {
  border-color: #ffffff33;
  background: #ffffff12;
  color: #fff;
}
.ins-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.ins-hero-meta span {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #ffffff22;
  border-radius: 999px;
  background: #ffffff0d;
  font-size: 12px;
  font-weight: 700;
}

.ins-section { padding: 96px 0 28px; }
.ins-section h2,
#insight-library { scroll-margin-top: 88px; }
.ins-section h2 {
  margin: 0 0 10px;
  max-width: 22ch;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.ins-section > .ins-wrap > p,
.ins-intro {
  max-width: 62ch;
  margin: 0 0 28px;
  color: var(--ins-muted);
  font-size: 17px;
  line-height: 1.7;
}

.ins-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
}
.ins-feature,
.ins-side a,
.ins-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 22px;
  border: 1px solid var(--ins-line);
  border-radius: 20px;
  background: var(--ins-card);
  color: var(--ins-ink);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.04);
}
.ins-feature { min-height: 320px; justify-content: flex-end; background:
  linear-gradient(180deg, rgba(7, 18, 38, 0.04), transparent 40%), #fff; }
.ins-tag {
  display: inline-flex;
  width: max-content;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #edf4ff;
  color: #0c438a;
  font: 800 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ins-feature h3,
.ins-side h3,
.ins-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.ins-feature p,
.ins-side p,
.ins-card p {
  margin: 0;
  color: var(--ins-muted);
  font-size: 15.5px;
  line-height: 1.65;
}
.ins-more {
  margin-top: 16px;
  color: var(--ins-blue);
  font-size: 14px;
  font-weight: 800;
}
.ins-side { display: grid; gap: 14px; }
.ins-side a:hover,
.ins-feature:hover,
.ins-card:hover {
  border-color: rgba(23, 105, 255, 0.35);
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.08);
}

.ins-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}
.ins-search {
  position: relative;
  display: block;
}
.ins-search input {
  width: 100%;
  height: 52px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--ins-line);
  border-radius: 14px;
  background: #fff;
  color: var(--ins-ink);
  font-size: 16px;
}
.ins-search input::placeholder { color: #6b7789; }
.ins-search button {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ins-soft);
  cursor: pointer;
  transform: translateY(-50%);
}
.ins-count {
  color: var(--ins-soft);
  font-size: 13px;
  font-weight: 700;
}
.ins-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.ins-filters button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--ins-line);
  border-radius: 999px;
  background: #fff;
  color: #243044;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.ins-filters button[aria-pressed="true"],
.ins-filters button.active {
  background: #071226;
  border-color: #071226;
  color: #fff;
}

.ins-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ins-card { min-height: 220px; }
.ins-card .ins-tag { background: #f2f5fb; color: #33415c; }
.ins-card[hidden] { display: none !important; }

.ins-empty {
  display: none;
  margin: 28px 0 8px;
  padding: 28px;
  border: 1px dashed var(--ins-line);
  border-radius: 18px;
  background: #fff;
  text-align: center;
}
.ins-empty.is-on { display: block; }
.ins-empty h3 { margin: 0 0 8px; }
.ins-empty p { margin: 0; color: var(--ins-muted); }

.ins-principles {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 28px;
  align-items: start;
}
.ins-principle-list { display: grid; gap: 12px; }
.ins-principle {
  padding: 20px;
  border: 1px solid var(--ins-line);
  border-radius: 18px;
  background: #fff;
}
.ins-principle span {
  color: var(--ins-blue);
  font: 800 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
}
.ins-principle h3 { margin: 10px 0 8px; font-size: 20px; }
.ins-principle p { margin: 0; color: var(--ins-muted); font-size: 15px; line-height: 1.65; }

.ins-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ins-path {
  padding: 22px;
  border: 1px solid var(--ins-line);
  border-radius: 18px;
  background: #fff;
}
.ins-path span {
  color: var(--ins-soft);
  font: 800 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ins-path h3 { margin: 10px 0 8px; font-size: 20px; }
.ins-path p { margin: 0 0 14px; color: var(--ins-muted); font-size: 15px; line-height: 1.65; }
.ins-path ol { margin: 0; padding-left: 18px; color: #243044; font-size: 14px; line-height: 1.7; }

.ins-cta {
  margin: 36px 0 56px;
  padding: 42px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(145deg, #0854c7, #071c49);
}
.ins-cta h2 { margin: 0 0 10px; color: #fff; }
.ins-cta p { max-width: 56ch; margin: 0; color: #d5e4f7; font-size: 16.5px; line-height: 1.65; }
.ins-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

@media (max-width: 900px) {
  .ins-featured, .ins-grid, .ins-principles, .ins-paths, .ins-toolbar { grid-template-columns: 1fr; }
  .ins-hero { padding-top: calc(56px + 28px); padding-bottom: 42px; }
  .ins-section { padding: 48px 0 8px; }
  .ins-cta { padding: 28px 22px; }
  .ins-feature, .ins-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.insights-page * { animation: none !important; transition: none !important; }
}