/* A separate .wrap gives this block the exact same edges as the hero field. */
.problem-section{padding-bottom:48px}
.insight-section{padding-bottom:76px;scroll-margin-top:32px}
.insight-section .insight-points{max-width:none;margin:0}
.insight-section .insight-points li{max-width:none}
.insight-accent{display:none}
.insight-symbol{display:block;width:144px;height:48px;flex:none}
.insight-index{font-family:var(--mono);font-size:12px;line-height:1;color:#8d8d85}

.insight-section[data-insight-style] li{padding:0}
.insight-section[data-insight-style] li::before{display:none}
.insight-section[data-insight-style] h3{font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.025em;color:#eeeee7}
.insight-section[data-insight-style] p{font-size:17px;line-height:1.55;color:#b9b9b0;margin-top:14px;max-width:300px}
.insight-section[data-insight-style] .insight-accent{display:flex;align-items:center;justify-content:space-between;color:#bdbdb4}

/* 1. Selected: serif columns framed by quiet, aligned horizontal rules. */
[data-insight-style="columns"] .insight-points{gap:72px;align-items:stretch}
.insight-section[data-insight-style="columns"] li{padding:18px 0 22px;border-block:1px solid var(--line)}
.insight-section[data-insight-style="columns"] .insight-accent{display:none}
.insight-section[data-insight-style="columns"] h3{font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.15;max-width:none}
.insight-section[data-insight-style="columns"] p{font-size:16px;margin-top:18px}

/* 2. Subtle panels, with native brick drawings for friction, choice, and expansion. */
[data-insight-style="cards"] .insight-points{gap:16px}
.insight-section[data-insight-style="cards"] li{padding:26px 24px 28px;background:#10100f;border:1px solid #33332e;border-radius:4px}
[data-insight-style="cards"] .insight-accent{flex-direction:row-reverse;margin-bottom:32px}
.insight-section[data-insight-style="cards"] h3{font-size:22px;max-width:13ch}
.insight-section[data-insight-style="cards"] p{font-size:16px;margin-top:12px}

/* 3. Wide editorial rows: each pain gets a full horizontal line. */
[data-insight-style="rows"] .insight-points{grid-template-columns:1fr;gap:0}
.insight-section[data-insight-style="rows"] li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:28px;padding:24px 0;border-top:1px solid #393936}
.insight-section[data-insight-style="rows"] li:last-child{border-bottom:1px solid #393936}
[data-insight-style="rows"] .insight-symbol{display:none}
[data-insight-style="rows"] .insight-index{font-family:var(--serif);font-size:30px;color:#8e8e85}
[data-insight-style="rows"] .insight-copy{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px}
.insight-section[data-insight-style="rows"] h3{font-size:25px}
.insight-section[data-insight-style="rows"] p{margin:0;max-width:none}

/* 4. Brighter statement panels, using the hero's grayscale blocks. */
[data-insight-style="panels"] .insight-points{gap:12px}
.insight-section[data-insight-style="panels"] li{display:flex;flex-direction:column;min-height:228px;padding:26px 28px 28px;border-radius:4px;background:#d0d0c7}
.insight-section[data-insight-style="panels"] li:nth-child(2){background:#afafa6}
.insight-section[data-insight-style="panels"] li:nth-child(3){background:#92928a}
[data-insight-style="panels"] .insight-accent{margin-bottom:28px}
[data-insight-style="panels"] .insight-index{color:#393932}
[data-insight-style="panels"] .insight-symbol{display:none}
.insight-section[data-insight-style="panels"] h3{font-family:var(--serif);font-size:34px;font-weight:400;line-height:1.06;color:#11110f;max-width:12ch}
.insight-section[data-insight-style="panels"] p{color:#20201c;font-size:16px;margin-top:18px}

@media(max-width:960px){
  .insight-section[data-insight-style] h3{font-size:21px}
  .insight-section[data-insight-style] p{font-size:16px}
  [data-insight-style="columns"] .insight-points{gap:24px}
  .insight-section[data-insight-style="columns"] h3{font-size:22px}
  .insight-section[data-insight-style="cards"] li{padding:22px 18px}
  .insight-section[data-insight-style="panels"] li{padding:24px 22px}
  .insight-section[data-insight-style="panels"] h3{font-size:30px}
}
@media(max-width:760px){
  .problem-section{padding-bottom:40px}
  .insight-section{padding-bottom:52px}
  .insight-section[data-insight-style] .insight-points{grid-template-columns:1fr}
  .insight-section[data-insight-style] h3{font-size:24px;max-width:none}
  .insight-section[data-insight-style] p{max-width:440px}
  .insight-section[data-insight-style="columns"] h3{font-size:24px}
  [data-insight-style="cards"] .insight-accent{margin-bottom:24px}
  .insight-section[data-insight-style="rows"] li{grid-template-columns:32px minmax(0,1fr);gap:18px;padding:24px 0}
  [data-insight-style="rows"] .insight-copy{display:block}
  .insight-section[data-insight-style="rows"] p{margin-top:10px}
  .insight-section[data-insight-style="panels"] li{min-height:0;padding:24px}
  .insight-section[data-insight-style="panels"] h3{font-size:32px}
}