/* Helix GTM Consulting Insights: list page and article pages. Extends helix.css (B2) the way guides.css does; colours come from the
   helix.css tokens, so dark mode (device setting only) needs no rules here. */
.in-page { --h2: clamp(30px, 3vw, 46px); }
.in-page .hx-section > h2 { max-width: 28ch; }
.in-text { max-width: 72ch; }
.in-text > p { font-size: 19px; line-height: 1.6; }
/* Placeholder blocks for text still to be written */
.in-hold { margin: 0 0 1em; padding: 14px 16px; border: 2px dashed var(--signal); color: var(--ox); font: 600 15px/1.4 var(--mono); letter-spacing: .04em; }
.hx-panel .in-hold { margin: 0; }
/* The interview record: question number, the interviewer's question, the answer */
.in-qa { list-style: none; margin: 0; padding: 0; max-width: 980px; }
.in-qa > li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0 20px; padding: 24px 0; border-top: 1.5px solid var(--line); }
.in-qa > li:first-child { border-top: 2px solid var(--edge); }
.in-qa > li:last-child { border-bottom: 2px solid var(--edge); }
.in-qa-n { grid-row: 1 / span 2; margin: 0; padding-top: 2px; font: 600 14px/1.4 var(--mono); letter-spacing: .06em; color: var(--ox); }
.in-qa-q { margin: 0; font: 600 17px/1.45 var(--mono); color: var(--ink); max-width: 68ch; }
.in-qa-a { margin: 14px 0 0; font-size: 19px; line-height: 1.6; color: var(--ink); max-width: 68ch; }
.in-who { display: block; margin: 0 0 4px; font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.in-src { margin: 0; padding-left: 22px; max-width: 72ch; }
.in-src li { margin: 0 0 14px; padding-left: 4px; }
.in-src a { font-weight: 600; }
.in-src span { display: block; color: var(--muted); font-size: 15px; line-height: 1.5; }
.in-author { max-width: 72ch; }
.in-author .hx7-built { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.in-author .hx7-built-h { margin: 0 0 4px; }
.in-author p { margin: 0 0 8px; }
/* List page: date line at the foot of each card */
.in-meta { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); font: 600 13px/1.3 var(--mono); color: var(--muted); }
@media (max-width: 600px) {
  .in-qa > li { grid-template-columns: minmax(0, 1fr); padding: 20px 0; }
  .in-qa-n { grid-row: auto; margin-bottom: 6px; }
  .in-qa-q { font-size: 15px; }
  .in-qa-a, .in-text > p { font-size: 18px; }
}