/* ── Content block styles ────────────────────────────────────
   Primer uses hairlines as PAGE STRUCTURE, not as borders around
   every element, and it leaves most of the grid empty. So these
   blocks are editorial: horizontal rules separate, white space
   does the work, type carries the hierarchy, and accent colour
   appears rarely and always as a solid block with black type. */

/* ── Text ── */
.bk-prose{
  margin-top:var(--space-5); max-width:62ch;
  font-size:19px; line-height:30px;
}
.bk-prose + .bk-prose{ margin-top:var(--space-4); }

.bk-lede{
  margin-top:var(--space-4); max-width:46ch;
  font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:24px; line-height:34px;
  letter-spacing:var(--tracking-display);
}
.bk-lede + .bk-prose{ margin-top:var(--space-6); }

/* ── Callout ──────────────────────────────────────────────
   Cream is the default alternate surface in the brand, so an
   unaccented callout sits on cream. A solid accent block is
   reserved for the single heaviest statement on a page. */
.bk-callout{
  margin-top:var(--space-6); padding:var(--space-6);
  background:var(--surface-muted);
  color:var(--primer-black);
}
.bk-callout-label{ margin-bottom:var(--space-3); }
.bk-callout-body{
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:clamp(21px, 1.9vw, 26px); line-height:1.28;
  letter-spacing:var(--tracking-display);
  max-width:44ch;
}

/* ── Survey: the grid motif, used where the data really is a grid ── */
.bk-survey{ margin:var(--space-6) 0 0; }
.sv-q{
  max-width:52ch; margin-bottom:var(--space-6);
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:24px; line-height:31px; letter-spacing:var(--tracking-display);
}
.sv-grid{
  display:grid; grid-template-columns:repeat(10, minmax(0, 64px));
  border-top:var(--rule); border-left:var(--rule);
  width:max-content; max-width:100%;
}
.sv-cell{ aspect-ratio:1; display:block; border-right:var(--rule); border-bottom:var(--rule); }
.sv-n{ margin-top:var(--space-3); color:var(--text-secondary); }
.sv-legend{ display:flex; flex-wrap:wrap; gap:var(--space-7); margin-top:var(--space-6); }
.sv-leg{ display:flex; align-items:center; gap:var(--space-3); }
.sv-swatch{ width:14px; height:14px; display:block; box-shadow:inset 0 0 0 1px var(--primer-black); }
.sv-leg-label{ font-size:var(--text-small-size); color:var(--text-secondary); }
.sv-leg-count{
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:22px; line-height:1;
}
@media (max-width:620px){ .sv-grid{ grid-template-columns:repeat(5, minmax(0, 56px)); } }

/* ── Lanes: columns divided by a single rule, no boxes ── */
.bk-lanes{
  display:grid; grid-template-columns:repeat(var(--lane-count, 3), 1fr);
  gap:var(--space-7);
  margin-top:var(--space-6);
}
.lane{ padding-top:var(--space-4); border-top:var(--rule); }
.lane-bar{ display:none; }
.lane-label{ color:var(--text-secondary); }
.lane-verdict{
  margin-top:var(--space-4);
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:25px; line-height:31px; letter-spacing:var(--tracking-display);
}
.lane-body{ margin-top:var(--space-4); font-size:17px; line-height:26px; }
@media (max-width:820px){ .bk-lanes{ grid-template-columns:1fr; gap:var(--space-6); } }

/* ── Persona: three columns, ruled not boxed ── */
.bk-persona{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--space-7);
  margin-top:var(--space-6);
}
.pr-col{ padding-top:var(--space-4); border-top:var(--rule); }
.pr-head{ display:flex; align-items:center; gap:var(--space-3); }
.pr-head .primer-label{ color:var(--text-secondary); }
.pr-swatch{ width:13px; height:13px; display:block; }
.pr-list{ margin:var(--space-4) 0 0; padding:0; list-style:none; }
.pr-list li{ padding:var(--space-3) 0; font-size:17px; line-height:25px; }
.pr-list li + li{ border-top:1px solid var(--border-soft); }
@media (max-width:820px){ .bk-persona{ grid-template-columns:1fr; gap:var(--space-5); } }

/* ── Tests: an editorial list, not cards ── */
.bk-tests{ margin-top:var(--space-6); }
.test{
  display:grid; grid-template-columns:1fr 300px; gap:var(--space-7);
  grid-template-rows:auto;
  align-items:start;
  padding:var(--space-6) 0; border-top:var(--rule);
}
.test > :not(.test-meta){ grid-column:1; }
.test-top{ display:flex; align-items:center; gap:var(--space-4); grid-row:1; }
.test-num{ color:var(--text-secondary); }
.test-pri{ padding:3px 10px; color:var(--primer-black); }
.pri-p0{ background:var(--primer-yellow); }
.pri-p1{ background:var(--border-soft); }
.pri-p2{ background:transparent; box-shadow:inset 0 0 0 1px var(--border-soft); color:var(--text-secondary); }
.test-name{
  margin-top:var(--space-3); grid-row:2;
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:26px; line-height:32px; letter-spacing:var(--tracking-display);
}
.test-hyp{ margin-top:var(--space-3); grid-row:3; font-size:18px; line-height:28px; max-width:56ch; }
.test-design{ margin-top:var(--space-3); grid-row:4; font-size:16px; line-height:25px; color:var(--text-secondary); max-width:56ch; }
.test-meta{ margin:0; grid-column:2; grid-row:1 / -1; padding-top:var(--space-1); }
.test-meta > div{ padding:var(--space-3) 0; }
.test-meta > div + div{ border-top:1px solid var(--border-soft); }
.test-meta dt{ color:var(--text-secondary); margin-bottom:var(--space-1); }
.test-meta dd{ margin:0; font-size:15px; line-height:22px; }
@media (max-width:980px){
  .test{ grid-template-columns:1fr; gap:var(--space-4); }
  .test-meta{ grid-column:1; grid-row:auto; border-top:1px solid var(--border-soft); }
}

/* ── Segments: two columns of ruled entries ── */
.bk-segments{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--space-7) var(--space-8);
  margin-top:var(--space-6);
}
.seg{ padding-top:var(--space-4); border-top:var(--rule); }
.seg-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); }
.seg-name{
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:22px; line-height:28px; letter-spacing:var(--tracking-display);
}
.seg-reach{ white-space:nowrap; color:var(--text-secondary); }
.reach-meta, .reach-partner, .reach-other{ background:none; }
.seg-body{ margin-top:var(--space-3); font-size:17px; line-height:26px; }
.seg-ex{ margin:var(--space-4) 0 0; padding:0; list-style:none; }
.seg-ex li{ padding:var(--space-2) 0; font-size:15px; line-height:23px; color:var(--text-secondary); }
.seg-ex li + li{ border-top:1px solid var(--border-soft); }
@media (max-width:900px){ .bk-segments{ grid-template-columns:1fr; gap:var(--space-6); } }

/* ── Message territories ── */
.bk-messages{ margin-top:var(--space-6); }
.terr{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7);
  align-items:start;
  padding:var(--space-6) 0; border-top:var(--rule);
}
.terr-side{ display:none; }
.terr-name{
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:26px; line-height:32px; letter-spacing:var(--tracking-display);
}
.terr-promise{ margin-top:var(--space-3); font-size:18px; line-height:28px; }
.terr-lines{ margin:0; padding:0; list-style:none; }
.terr-lines li{
  padding:var(--space-3) 0;
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:21px; line-height:27px; letter-spacing:var(--tracking-display);
}
.terr-lines li + li{ border-top:1px solid var(--border-soft); }
.terr-obj{
  margin-top:var(--space-4); grid-column:1;
  font-size:16px; line-height:25px; color:var(--text-secondary);
}
.terr-obj .primer-label{ color:var(--primer-black); margin-right:var(--space-2); }
@media (max-width:820px){ .terr{ grid-template-columns:1fr; gap:var(--space-4); } }

/* ── Channels ── */
.bk-channels{ margin-top:var(--space-6); }
.chan{
  display:grid; grid-template-columns:14px 1fr 110px; gap:var(--space-5);
  align-items:start;
  padding:var(--space-5) 0; border-top:var(--rule);
}
.chan-fit{ width:14px; height:14px; display:block; margin-top:9px; }
.fit-strong{ background:var(--primer-green); }
.fit-medium{ background:var(--primer-yellow); }
.fit-weak{ background:var(--primer-orange); }
.chan-name{
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:22px; line-height:28px; letter-spacing:var(--tracking-display);
}
.chan-body{ margin-top:var(--space-2); font-size:17px; line-height:26px; color:var(--text-secondary); max-width:60ch; }
.chan-label{ color:var(--text-secondary); text-align:right; padding-top:9px; }
@media (max-width:620px){
  .chan{ grid-template-columns:14px 1fr; }
  .chan-label{ display:none; }
}

/* ── Steps ── */
.bk-steps{ margin:var(--space-6) 0 0; padding:0; list-style:none; counter-reset:step; }
.bk-steps li{
  counter-increment:step; position:relative;
  padding:var(--space-5) 0 var(--space-5) 64px;
  border-top:var(--rule);
}
.bk-steps li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute; left:0; top:calc(var(--space-5) + 4px);
  font-size:var(--text-label-size); letter-spacing:var(--tracking-label);
  color:var(--text-secondary);
}
.step-title{
  display:block;
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:22px; line-height:28px; letter-spacing:var(--tracking-display);
}
.step-body{ display:block; margin-top:var(--space-2); font-size:17px; line-height:26px; color:var(--text-secondary); max-width:62ch; }

/* ── Quote ── */
.bk-quote{ margin:var(--space-6) 0 0; padding:0; max-width:46ch; }
.q-body{
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:clamp(26px, 2.4vw, 34px); line-height:1.22; letter-spacing:var(--tracking-display);
}
.q-body::before{ content:"\201C"; }
.q-body::after{ content:"\201D"; }
.q-attr{ margin-top:var(--space-4); color:var(--text-secondary); }

/* ── Verbatims ── */
.bk-verbatims{ margin-top:var(--space-6); }
.vb{
  display:grid; grid-template-columns:1fr 320px; gap:var(--space-7);
  align-items:start;
  padding:var(--space-6) 0; border-top:var(--rule);
}
.vb-bar{ display:none; }
.vb-quote{
  margin:0; max-width:34ch;
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:clamp(23px, 2.1vw, 29px); line-height:1.24; letter-spacing:var(--tracking-display);
  text-wrap:pretty;
}
.vb-quote::before{ content:"\201C"; }
.vb-quote::after{ content:"\201D"; }
.vb-label{ display:block; color:var(--text-secondary); margin-bottom:var(--space-3); }
.vb-body{ font-size:17px; line-height:26px; }
@media (max-width:900px){ .vb{ grid-template-columns:1fr; gap:var(--space-4); } }

/* ── Stat row: figures stated flatly, with air ── */
.bk-stat{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:var(--space-7);
  margin-top:var(--space-6);
}
.stat-cell{ padding-top:var(--space-4); border-top:var(--rule); }
.stat-v{
  font-family:var(--font-display); font-weight:var(--weight-display-strong);
  font-size:clamp(38px, 3.6vw, 52px); line-height:1; letter-spacing:var(--tracking-display);
}
.stat-k{ margin-top:var(--space-4); }
.stat-n{ margin-top:var(--space-3); font-size:15px; line-height:23px; color:var(--text-secondary); }

/* ── Table: editorial rules only, no cell boxes ── */
.bk-table-wrap{ margin-top:var(--space-6); overflow-x:auto; }
.bk-table{ width:100%; border-collapse:collapse; min-width:560px; }
.bk-table th, .bk-table td{
  text-align:left; padding:var(--space-4) var(--space-5) var(--space-4) 0;
  vertical-align:top; border:none;
}
.bk-table thead th{ border-bottom:var(--rule); color:var(--text-secondary); font-weight:var(--weight-text); }
.bk-table tbody tr + tr td{ border-top:1px solid var(--border-soft); }
.bk-table td{ font-size:17px; line-height:26px; }
.bk-table td:first-child{ color:var(--text-secondary); }

/* ── Post mockup ── */
.bk-post{ margin:var(--space-6) 0 0; max-width:520px; }
.post-card{ border:var(--rule); padding:var(--space-5); }
.post-head{ display:flex; align-items:center; gap:var(--space-3); }
.post-av{ width:40px; height:40px; display:block; background:var(--surface-muted); border:var(--rule); }
.post-id{ display:flex; flex-direction:column; }
.post-name{ font-weight:var(--weight-text-strong); font-size:16px; }
.post-handle{ font-size:15px; color:var(--text-secondary); }
.post-plat{ margin-left:auto; color:var(--text-secondary); }
.post-body{ margin-top:var(--space-5); font-size:18px; line-height:27px; white-space:pre-wrap; }
.post-note{ margin-top:var(--space-4); font-size:15px; line-height:23px; color:var(--text-secondary); }

/* ── Source attribution ──────────────────────────────────────
   The one rounded, shadowed element in the system. It marks a
   human being rather than a piece of brand furniture, which is
   why it is allowed to break the square corner rule. */
.bk-source{
  display:inline-flex; align-items:center; gap:var(--space-4);
  margin-top:var(--space-6);
  padding:var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  background:var(--surface-muted);
  border-radius:var(--radius-pill);
}
.src-av{
  width:44px; height:44px; display:block;
  border-radius:50%; object-fit:cover;
  box-shadow:0 2px 8px rgba(0,0,0,0.18);
}
.src-text{ display:flex; flex-direction:column; gap:2px; }
.src-label{ color:var(--text-secondary); }
.src-who{ font-size:16px; font-weight:var(--weight-text-strong); line-height:1.3; }
.src-where{ font-size:14px; line-height:1.3; color:var(--text-secondary); }

/* ── Fit grid ── */
.bk-matrix-wrap{ margin-top:var(--space-6); overflow-x:auto; }
.bk-matrix{ width:100%; border-collapse:collapse; min-width:600px; }
.bk-matrix th, .bk-matrix td{ text-align:left; padding:var(--space-3) var(--space-4) var(--space-3) 0; vertical-align:top; }
.bk-matrix thead th{ border-bottom:var(--rule); color:var(--text-secondary); font-weight:var(--weight-text); }
.bk-matrix tbody tr + tr th, .bk-matrix tbody tr + tr td{ border-top:1px solid var(--border-soft); }
.mx-row{ width:34%; font-size:16px; line-height:24px; font-weight:var(--weight-text); padding-right:var(--space-5); }
.mx-cell{ white-space:nowrap; }
.mx-dot{ display:inline-block; width:13px; height:13px; margin-right:8px; vertical-align:-1px; }
.mx-strong .mx-dot{ background:var(--primer-green); }
.mx-possible .mx-dot{ background:var(--primer-yellow); }
.mx-weak .mx-dot{ background:var(--primer-line-soft); }
.mx-no .mx-dot{ background:transparent; box-shadow:inset 0 0 0 1px var(--primer-line-soft); }
.mx-val{ color:var(--text-secondary); }
.mx-key{ margin-top:var(--space-4); font-size:15px; line-height:23px; color:var(--text-secondary); }