/* Article-specific first task, in the existing warm-paper design system. */
.article .blog-task { padding: 1.5rem; margin: 2rem 0; text-align: left; }
.blog-task .blog-task-eyebrow { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .09em; color: var(--violet); font-weight: 600; }
.article .blog-task h2 { margin: .55rem 0 .75rem; font-size: 1.65rem; line-height: 1.15; }
.article .blog-task p { margin: .65rem 0; }
.blog-task .blog-task-steps { font-size: .8rem; color: var(--ink-2); }
.blog-task-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin: 1.1rem 0 .75rem; }
.blog-task-actions .btn { max-width: 100%; white-space: normal; }
.blog-task-copy { font: inherit; font-size: .85rem; font-weight: 600; color: var(--violet); border: 0; border-bottom: 1px solid currentColor; background: transparent; padding: .4rem 0; cursor: pointer; }
.blog-task-copy:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }
.blog-task .blog-task-note, .blog-task details p, .blog-task-status { font-size: .82rem; color: var(--ink-2); }
.blog-task details { margin-top: 1rem; border-top: 1px solid var(--line-strong); padding-top: .8rem; }
.blog-task summary { cursor: pointer; font-size: .88rem; font-weight: 600; }
.article .blog-task blockquote { margin: 1rem 0; padding: .85rem 1rem; border-left: 3px solid var(--violet); background: var(--paper); font-size: .95rem; font-style: normal; }
.blog-task .blog-task-status:empty { display: none; }
/* Keep wide comparison tables inside the reading column on small screens. */
@media (max-width: 680px) {
  .article { overflow-wrap: anywhere; }
  .article table { display: block; max-width: 100%; overflow-x: auto; }
  [data-growth-signup] { box-sizing: border-box; max-width: 100%; white-space: normal; }
  .article .blog-task { padding: 1.1rem; }
  .article .blog-task h2 { font-size: 1.4rem; }
}