/* Insights under carousel */
.insights-band{background:#1a1e22;padding:56px 20px 72px}
.insights-wrap{max-width:1100px;margin:0 auto}
.insights-title{color:#fff;font-size:clamp(26px,3.4vw,38px);font-weight:800;margin:0 0 18px}
.insights-lead{color:#aeb8c2;margin:0 0 28px;max-width:70ch}
.insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width: 960px){.insights-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.insights-grid{grid-template-columns:1fr}}

.insight-card{background:#0f1216;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.insight-media{position:relative;background:#000;aspect-ratio: 3/2;overflow:hidden}
.insight-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95;transition:transform .35s ease, opacity .25s ease}
.insight-link{display:block;text-decoration:none;background:rgba(20,24,28,.85);padding:24px 22px 28px}
.insight-card:hover .insight-media img{transform:scale(1.04);opacity:1}

.insight-title{color:#fff;margin:0 0 10px;font-weight:800;font-size:clamp(18px,2vw,28px);line-height:1.25}
.insight-excerpt{color:#c8d2dc;margin:0;font-size:clamp(14px,1.4vw,16px);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}


/* Fix: make the card a column flexbox so the link area fills the card height */
.insight-card{display:flex;flex-direction:column}
.insight-media{flex:0 0 auto}
.insight-link{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start}
/* --- Insights: layout upgrade (title/lead left, cards right) --- */
.insights-wrap{
  /* preserve your max-width and centering from above; add grid */
  display:grid;
  grid-template-columns: 280px 1fr;     /* left header column + right cards */
  grid-template-areas:
    "head grid"
    "lead grid";
  align-items:start;
  gap: 8px 32px;                        /* row/column gaps */
}

/* place existing elements into the grid areas */
.insights-title{ grid-area: head; margin:0 0 6px; }
.insights-lead{  grid-area: lead; margin:0; max-width:42ch; }
.insights-grid{  grid-area: grid; }

/* optional: small brand dot like your section icons */
.insights-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.insights-title::before{
  content:"";
  width:28px; height:28px;
  border-radius:50%;
  background:#0b66ff;                  /* matches site accent */
  display:inline-block;
  transform:translateY(1px);
}

/* responsive: stack header above grid on tablet/phone */
@media (max-width: 980px){
  .insights-wrap{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "lead"
      "grid";
    gap: 6px 0;
  }
  .insights-lead{ max-width: 70ch; }   /* match your original */
}

/* keep your card flex-fill behavior solid */
.insight-card{ display:flex; flex-direction:column; }
.insight-media{ flex:0 0 auto; }
.insight-link{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start; }

/* === Insights: put title/lead ABOVE the grid (stacked) === */
/* Override the earlier two-column layout */
.insights-wrap{
  display:block !important;   /* stack heading + lead above grid */
}

/* Heading + small accent dot (keeps your current look) */
.insights-title{
  margin:0 0 8px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.insights-title::before{
  content:"";
  width:18px;
  height:18px;
  border-radius:50%;
  background:#0b66ff;
  display:inline-block;
  transform:translateY(1px);
}

/* Lead line right under the title */
.insights-lead{
  margin:0 0 22px;         /* space before the card grid */
  max-width:70ch;          /* keep nice readable width */
  color:#aeb8c2;
}

/* Cards grid stays exactly as you had it */
/* ============================= */
/* Insights header = Quick-Action */
/* (left aligned, with blog icon) */
/* ============================= */

.insights-wrap{
  display:block !important;            /* stack title/lead above grid */
}

/* Title row styled like your .title block */
.insights-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 6px;
  color:#fff;
  font-weight:800;
  font-size:clamp(26px,3.4vw,38px);
}

/* Replace the previous blue dot with a blog/newspaper SVG icon */
.insights-title::before{
  content:"";
  width:22px;
  height:22px;
  flex:0 0 22px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  /* Embedded SVG (stroke matches site accent #0b66ff) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b66ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19a2 2 0 0 1-2-2V5h14v12a2 2 0 0 1-2 2H4z'/%3E%3Cpath d='M22 7v10a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M8 11h6M8 7h6M8 15h6'/%3E%3C/svg%3E");
}

/* Lead line directly under the title */
.insights-lead{
  color:#aeb8c2;
  margin:0 0 22px;       /* spacing before grid */
  max-width:70ch;
}

/* Insights header w/ icon (left-aligned) */
.insights-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 8px;
}

.insights-header .insights-title{
  margin:0;                      /* no extra spacing above/below */
  text-align:left    /* explicit left align */
}

.insights-icon{
  width:48px; height:48px;       /* tweak if you want it bigger */
  flex:0 0 48px;
  display:block;
}

/* Remove the legacy blue dot badge from the blog heading */
.insights-header .insights-title::before,
.insights-wrap > h2::before {
  content: none !important;
  display: none !important;
}

/* Header row: icon + h2 + lead inline, wraps on narrow screens */
.insights-header{
  display:flex;
  align-items:baseline;       /* aligns the text baselines for a clean look */
  gap:14px;
  flex-wrap:wrap;             /* on mobile, the lead drops under the h2 */
  margin:0 0 18px;
}

/* Optional: keep any older “blue dot” badge from appearing */
.insights-header .insights-title::before { content:none !important; }

/* Maintain your existing title look but remove default margin */
.insights-header .insights-title{
  margin:0;
  color:#fff;
  font-size:clamp(26px,3.4vw,38px);
  font-weight:800;
}

/* Lead sits inline with heading */
.insights-header .insights-lead{
  margin:0;
  color:#aeb8c2;
  font-size:clamp(14px,1.6vw,18px);
}

/* Blog icon sizing/spacing */
.insights-header .insights-icon{
  width:28px; height:28px;
  flex:0 0 auto;
  margin-right:2px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
}

/* --- Insights header: match Quick Actions size/format --- */
.insights-header{
  display:flex;
  align-items:center;           /* same feel as Quick Actions */
  gap:10px;
  flex-wrap:wrap;               /* lets the lead wrap below on small screens */
  margin:0 0 12px;
}

/* Blog icon = same size as Quick Actions icon */
.insights-header .insights-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:block;
}

/* Title matches Quick Actions’ weight/size */
.insights-header .insights-title{
  margin:0;
  font-weight:800;
  font-size:clamp(20px, 2.1vw, 28px);  /* tuned to match Quick Actions */
  line-height:1.2;
  color:#fff;
}

/* Put the lead on the same row, with subdued tone like before */
.insights-header .insights-lead{
  margin:0 0 0 8px;             /* breathing room to the right of title */
  color:#aeb8c2;
  font-size:clamp(14px, 1.4vw, 16px);
}

/* Remove any stray decorative dot that might be injected by older CSS */
.insights-header .insights-title::before { content:none !important; }

/* Mobile: drop the lead under the title, indented to align visually */
@media (max-width: 720px){
  .insights-header{ align-items:flex-start; }
  .insights-header .insights-lead{
    flex-basis:100%;
    margin:4px 0 0 38px;        /* indent under icon+title column */
  }
}

/* Make the Join card act like a full-width Insight and keep styling consistent */
.insight-card--join {
  grid-column: 1 / -1;                       /* span all columns */
  padding: clamp(20px, 3vw, 28px);
  display: block;
}

/* Ensure the inner join layout fills the card nicely */
.insight-card--join .join-section-pro {
  margin: 0;
}

.insight-card--join .join-wrap {
  max-width: 100%;
  padding: 0;
}

/* Keep the form panel as a proper sub-card inside the Insight */
.insight-card--join .join-card {
  background: rgba(20,24,28,.85);
  border: 1px solid #2b3440;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: clamp(18px, 2.2vw, 24px);
}

/* Head spacing tweaks inside the card */
.insight-card--join .join-head {
  margin-bottom: clamp(16px, 2vw, 22px);
}
.insight-card--join .join-title { margin: 0 0 6px; }

/* Optional: reduce the default Insight media spacing since this card has none */
.insight-card--join .insight-media { display: none; }