/* blog/build-ai-in-house-vs-ai-engineering-partner (23 Oct 2026): the few things this article adds to Clay's blog-post
   layout (company.css, article.css): an opening paragraph a step larger, a two-column cost table, the key line in the
   article's tone, and a diagram-kit figure inside the reading column. */

.article .ar-lede{font-size:19px;line-height:29px;letter-spacing:-.1px;color:var(--ink)}

/* the cost table: what each cost is, and the question to ask about it */
.article .ar-tblw{position:relative;margin:28px 0;padding:8px 20px 12px;border-radius:20px;background:var(--oat);overflow-x:auto}
.article .ar-tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:22px}
.article .ar-tbl caption{caption-side:top;text-align:left;padding:12px 0 6px;font-size:14px;line-height:20px;color:var(--muted)}
.article .ar-tbl th,.article .ar-tbl td{text-align:left;vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--line-2)}
.article .ar-tbl tbody tr:last-child th,.article .ar-tbl tbody tr:last-child td{border-bottom:0}
.article .ar-tbl thead th{font:600 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:8px}
.article .ar-tbl tbody th{width:32%;font-weight:600;color:var(--ink)}

/* the key line: REKA's own sentence, in the article's tone (not a quotation) */
.article .ar-key{margin:28px 0;padding:24px 28px;border-radius:24px;background:var(--t-bg,var(--oat));font:500 22px/30px var(--sans);letter-spacing:-.3px;color:var(--ink)}

/* a diagram in the reading column: undo the column's photo-figure box (fixed height, grey fill) and give the drawing
   room to breathe, wider than the text where the screen allows and never under the sticky index */
.art .article figure.dgm{height:auto;margin:40px 0;padding:28px;border-radius:28px;
  background-color:var(--dg-plate);background-image:radial-gradient(circle,var(--dg-dot) 1px,transparent 1.3px);background-size:20px 20px}
@media (min-width:901px) and (max-width:1239px){
  .art .article figure.dgm{width:min(1000px,calc(100vw - 64px));margin-left:calc(50% - min(1000px,calc(100vw - 64px)) / 2)}
}
@media (min-width:1240px){
  .art .article figure.dgm{width:max(100%,min(1000px,calc(100vw - 448px)));margin-left:calc(50% - max(100%,min(1000px,calc(100vw - 448px))) / 2)}
}
@media (max-width:760px){
  .art .article figure.dgm{margin:32px 0;padding:12px;border-radius:20px}
  .art .article figure.dgm.dg-bleed{padding:12px 8px}
}
@media (max-width:900px){
  .article .ar-lede{font-size:17px;line-height:26px}
  .article .ar-key{padding:20px;font-size:19px;line-height:27px}
  .article .ar-tblw{padding:4px 14px 8px}
  .article .ar-tbl{font-size:14px;line-height:20px}
  .article .ar-tbl th{overflow-wrap:normal}
}
/* phones: each cost becomes a short block, its name above its question, so no word breaks mid-way */
@media (max-width:560px){
  .article .ar-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .article .ar-tbl tbody tr{display:block;padding:12px 0;border-bottom:1px solid var(--line-2)}
  .article .ar-tbl tbody tr:last-child{border-bottom:0}
  .article .ar-tbl tbody th,.article .ar-tbl tbody td{display:block;width:auto;padding:0;border:0}
  .article .ar-tbl tbody td{margin-top:4px}
}