/* Final hero finish: exact feed rhythm, stronger reading hierarchy, restrained depth. */

/* The first/last sequence padding previously doubled the loop seam to 20px. */
.intel-scroll-sequence,
.asset-sequence {
  gap: 10px;
  padding: 8px 0 2px;
}

/* Fade partial items into and out of the viewport instead of leaving a hard crop. */
.certain-panel .intel-list,
.asset-scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

.lead-panel {
  /* Align the lead label with the two companion-panel headings. */
  padding-top: 9px;
  border-color: rgba(241, 201, 40, 0.42);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.024), transparent 54%),
    #090d0d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.44),
    0 14px 30px rgba(0, 0, 0, 0.2);
}

/* Give the two live-feed panels the same finished outer boundary as Top Story. */
.certain-panel,
.asset-panel {
  border: 1px solid rgba(241, 201, 40, 0.32);
  border-radius: 18px;
  background: #090c0d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 14px 30px rgba(0, 0, 0, 0.16);
}

/* Keep each panel mark visibly inside its own frame at every viewport width. */
.certain-panel .panel-title,
.asset-panel .panel-title {
  min-height: 44px;
  padding: 0 13px;
}

.certain-panel .panel-title .surface-icon,
.asset-panel .panel-title .surface-icon {
  flex: 0 0 27px;
}

/* The moving data rails sit on the same pitch-black material as the social
   controls, with fine borders preserving each item's reading boundary. */
.certain-panel .intel-scroll-sequence > .intel-row,
.asset-scroll .asset-row,
.asset-scroll .asset-row:nth-child(odd) {
  border-color: rgba(255, 255, 255, 0.1);
  background: #050708;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 5px 12px rgba(0, 0, 0, 0.16);
}

.certain-panel .intel-scroll-sequence > .intel-row:hover,
.asset-scroll .asset-row:hover {
  border-color: rgba(241, 201, 40, 0.32);
  background: #0a0d0e;
}

.lead-kicker em {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.018);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.lead-action {
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 3px 0 rgba(12, 52, 111, 0.92),
    0 11px 22px rgba(47, 120, 238, 0.14);
}

.lead-action.source-kalshi {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 3px 0 #087352,
    0 11px 22px rgba(9, 216, 150, 0.12);
}

.lead-action:hover {
  filter: brightness(1.035);
}

.primary-window-grid {
  position: relative;
  isolation: isolate;
}

/* A single rail frames the five window headings without enclosing their cards. */
.primary-window-grid::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: 60px;
  border: 1px solid rgba(241, 201, 40, 0.26);
  border-radius: 15px;
  background: #0a0e0f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 7px 16px rgba(0, 0, 0, 0.1);
  content: "";
  pointer-events: none;
}

.primary-window-grid .window-column {
  position: relative;
  z-index: 1;
}

.primary-window-grid .window-head {
  min-height: 60px;
  padding: 0 16px;
}

.window-grid {
  margin-top: 8px;
}

/* Keep a visible separation between the heading rail and the cards below it. */
.primary-window-grid .card-list-primary {
  margin-top: 10px;
}

.primary-window-grid .window-label b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.primary-window-grid .window-label span {
  color: var(--muted-strong);
  font-size: 10px;
  font-weight: 560;
  line-height: 1.15;
}

.primary-window-grid .window-label em {
  color: var(--accent);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.primary-window-grid .view-all {
  min-height: 32px;
  padding: 0 12px;
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    #171c1e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 2px 0 rgba(0, 0, 0, 0.4);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.primary-window-grid .view-all:hover {
  border-color: rgba(241, 201, 40, 0.36);
  background:
    linear-gradient(180deg, rgba(241, 201, 40, 0.1), rgba(241, 201, 40, 0.028)),
    #1a1d1a;
}

.primary-window-grid .view-all:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transform: translateY(1px);
}

.primary-window-grid .market-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.11);
}

/* Below desktop the five windows wrap, so a single header-only frame would
   incorrectly surround only the first row. Keep the responsive layout clean. */
@media (max-width: 1180px) {
  .primary-window-grid::before {
    display: none;
  }
}