.insight { padding: 12px 0 56px; }
.insight-grid { display: grid; gap: 28px 36px; align-items: center; }
.insight-media { margin: 0; border-radius: var(--radius); overflow: hidden; min-width: 0; }
.insight-media img, .insight-media video, .insight-media .cover-ph { width: 100%; height: 280px; aspect-ratio: auto; object-fit: cover; display: block; }
.insight-copy h2 { font-family: var(--display); font-size: clamp(28px, 4vw, 46px); font-weight: 500; line-height: 1.12; margin: 0 0 12px; }
.insight-copy .lead { color: var(--muted); font-size: 17px; line-height: 1.65; margin: 0 0 8px; }
.insight .why-web-points { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; gap: 10px; }
.insight .why-web-points li { margin: 0; padding: 8px 0 8px 14px; border-left: 2px solid var(--primary); line-height: 1.5; }
.insight-preview { max-height: 15rem; overflow: hidden; }
.insight-clip .insight-preview {
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(#000 62%, transparent);
}
.insight-detail { line-height: 1.7; }
.insight-detail img { max-width: 100%; border-radius: var(--radius); }
.acct-modal-insight .acct-modal-card { width: min(760px, 100%); }
.insight-rest { margin-top: 8px; }
.insight-rest figure { margin: 16px 0; }
.insight-rest img { width: 100%; border-radius: var(--radius); }

.insight-split .insight-grid, .insight-flip .insight-grid, .insight-rail .insight-grid, .insight-inset .insight-grid, .insight-columns .insight-grid, .insight-duo .insight-grid, .insight-sidebar .insight-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
.insight-flip .insight-media { order: 2; }
.insight-rail .insight-grid { grid-template-columns: 0.7fr 1.3fr; }
.insight-sidebar .insight-grid { grid-template-columns: 0.55fr 1.45fr; align-items: start; }
.insight-columns .insight-grid { align-items: start; }
.insight-columns .why-web-points { grid-template-columns: 1fr 1fr; }
.insight-duo .insight-copy { display: contents; }
.insight-duo .insight-copy h2, .insight-duo .insight-copy .kicker, .insight-duo .insight-copy .lead { grid-column: 1 / -1; }

.insight-stack .insight-grid, .insight-film .insight-grid, .insight-dock .insight-grid, .insight-mast .insight-grid, .insight-poster .insight-grid, .insight-quote .insight-grid, .insight-cards .insight-grid, .insight-ledger .insight-grid, .insight-index .insight-grid, .insight-band .insight-grid, .insight-frame .insight-grid, .insight-mosaic .insight-grid {
  grid-template-columns: 1fr;
}
.insight-dock .insight-media { order: 2; }
.insight-film .insight-media img { aspect-ratio: 21/9; height: auto; max-height: 280px; }
.insight-mast .insight-copy h2 { font-size: clamp(40px, 6vw, 72px); }
.insight-poster { text-align: center; }
.insight-poster .insight-copy { max-width: 40rem; margin: 0 auto; }
.insight-poster .why-web-points li { text-align: left; }
.insight-quote .insight-copy h2 { font-size: clamp(32px, 5vw, 60px); font-style: italic; }
.insight-cards .why-web-points, .insight-mosaic .why-web-points { grid-template-columns: 1fr 1fr; }
.insight-cards .why-web-points li, .insight-mosaic .why-web-points li, .insight-ledger .why-web-points li {
  border: 1px solid var(--line); border-left: 2px solid var(--primary); border-radius: 16px; padding: 14px 16px; background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.insight-ledger .why-web-points { grid-template-columns: 1fr 1fr; }
.insight-index .why-web-points { counter-reset: insight; }
.insight-index .why-web-points li { counter-increment: insight; border-left: 0; padding-left: 0; }
.insight-index .why-web-points li::before { content: counter(insight, decimal-leading-zero); display: block; color: var(--primary); font-size: 12px; letter-spacing: 0.14em; margin-bottom: 4px; }
.insight-band { background: color-mix(in srgb, var(--primary) 12%, var(--bg)); border-block: 1px solid var(--line); }
.insight-frame .insight-media { padding: 14px; border: 1px solid var(--line); border-radius: 28px; }
.insight-banner .insight-grid { position: relative; min-height: 0; display: block; }
.insight-banner .insight-media img { height: 320px; min-height: 0; }
.insight-banner .insight-copy {
  position: absolute; inset: auto 8% 10% 8%; max-width: 38rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent); padding: 28px; border-radius: 24px;
}
.insight-inset .insight-copy { background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--line); border-radius: 24px; padding: 28px; }
.insight-mosaic .insight-grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
.insight-mosaic .insight-copy h2 { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .insight-grid, .insight-mosaic .insight-grid { grid-template-columns: 1fr !important; }
  .insight-flip .insight-media, .insight-dock .insight-media { order: 0; }
  .insight-banner .insight-copy { position: static; margin-top: 12px; }
  .insight-banner .insight-media img { min-height: 0; aspect-ratio: 16/10; }
  .insight-cards .why-web-points, .insight-ledger .why-web-points, .insight-columns .why-web-points, .insight-mosaic .why-web-points { grid-template-columns: 1fr; }
  .insight .why-web-actions { display: grid; gap: 10px; }
  .insight .why-web-actions .btn { width: 100%; min-height: 44px; }
}