/* Compact row is selected; the other arrangements remain available for comparison. */
.problem-section[data-problem-layout]{
  --copy-share:.35fr;
  --visual-share:.65fr;
  --layout-gap:56px;
  --problem-heading:38px;
  --problem-subheading:34px;
  --diagram-height:230px;
  display:grid;
  grid-template-columns:minmax(0,var(--copy-share)) minmax(0,var(--visual-share));
  gap:var(--layout-gap);
  row-gap:48px;
  align-items:center;
  padding-left:clamp(0px,calc((100vw - var(--page-gutter) * 2 - var(--text-width)) / 2),calc((var(--content-width) - var(--text-width)) / 2));
}
.problem-section[data-problem-layout] .section-copy{width:100%;max-width:none;margin:0;padding:0;min-width:0}
.problem-section[data-problem-layout] h2{font-size:var(--problem-heading);line-height:1.13;letter-spacing:-.025em;margin:0}
.problem-section[data-problem-layout] h2 br{display:none}
.problem-section[data-problem-layout] h2 span{display:block;font-size:var(--problem-subheading);line-height:1.16;margin-top:4px}
.problem-section[data-problem-layout] .section-copy p{font-size:16px;line-height:1.65;margin-top:20px;max-width:360px}
.problem-section[data-problem-layout] .intent-illustration{width:100%;margin:0;container:problem-visual / inline-size}
.problem-section[data-problem-layout] .intent-stage{height:var(--diagram-height)}
.problem-section[data-problem-layout="visual"]{
  --copy-share:.30fr;--visual-share:.70fr;--layout-gap:48px;
  --problem-heading:34px;--problem-subheading:30px;--diagram-height:260px;
}
.problem-section[data-problem-layout="compact"]{
  --copy-share:.40fr;--visual-share:.60fr;--layout-gap:64px;
  --problem-heading:36px;--problem-subheading:32px;--diagram-height:196px;
  align-items:start;
}
.problem-section[data-problem-layout="compact"] .section-copy p{margin-top:16px;max-width:390px}
.problem-section[data-problem-layout="compact"] .intent-illustration{margin-top:6px}
.insight-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;width:100%;max-width:var(--text-width);margin:48px auto 0;padding:0;list-style:none}
.insight-points li{position:relative;padding-left:16px;min-width:0}
.insight-points li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:#92928b}
.insight-points h3{font-family:var(--sans);font-size:16px;font-weight:500;line-height:1.35;letter-spacing:-.01em;color:#e6e6df}
.insight-points p{margin-top:8px;font-size:15px;line-height:1.55;color:#aaa9a2}
.problem-section[data-problem-layout] .insight-points{grid-column:1 / -1;margin:0}
/* The illustration responds to its own column, not the full browser width. */
@container problem-visual (max-width:680px){
  [data-problem-layout] [data-scan-profile] .intent-prompt{font-size:12px;line-height:18px}
  [data-problem-layout] [data-scan-profile] .intent-chip{font-size:11px;padding:4px 5px}
  [data-problem-layout] [data-scan-profile] .intent-labels{gap:4px}
}
@container problem-visual (max-width:560px){
  [data-problem-layout] [data-scan-profile] .intent-stage{height:max(var(--diagram-height),226px)}
  [data-problem-layout] [data-scan-profile] .intent-result{height:40px}
  [data-problem-layout] [data-scan-profile] .intent-labels{display:grid;grid-template-columns:.9fr 1.2fr 1.2fr;gap:3px}
  [data-problem-layout] [data-scan-profile] .intent-chip{font-size:10px;padding:3px;line-height:1.1;overflow-wrap:anywhere}
}
@media(max-width:1100px){
  .problem-section[data-problem-layout]{--layout-gap:32px}
}
@media(max-width:960px){
  .problem-section[data-problem-layout]{display:block;padding-left:0;--problem-heading:34px;--problem-subheading:30px}
  .problem-section[data-problem-layout] .section-copy{max-width:660px}
  .problem-section[data-problem-layout] .section-copy p{max-width:560px}
  .problem-section[data-problem-layout] .intent-illustration{margin-top:30px}
  .problem-section[data-problem-layout] .insight-points{margin-top:40px}
}
@media(max-width:760px){
  .problem-section[data-problem-layout]{--problem-heading:32px;--problem-subheading:28px}
  .insight-points{grid-template-columns:1fr;gap:24px;margin-top:40px}
  .insight-points li{max-width:440px}
}
@media(max-width:520px){
  .problem-section[data-problem-layout]{--problem-heading:28px;--problem-subheading:26px}
}