/* Standalone blog prose. The product homepage keeps its one-page layout. */
.mk-blog .mk-blog-breadcrumb{font-size:12px;line-height:1.7;margin-bottom:24px;color:var(--mk-muted)}
.mk-blog .mk-blog-breadcrumb a,.mk-blog .mk-doc-body a:not(.mk-button){text-decoration:underline;text-underline-offset:3px;color:var(--mk-blue)}
.mk-blog .mk-blog-byline{font-size:12px;color:var(--mk-muted);margin-top:22px}
.mk-blog .mk-doc-body pre{max-width:100%;overflow-x:auto;padding:20px;background:#e9eee9;font:13px/1.8 var(--mk-mono);border:1px solid var(--mk-line)}
.mk-blog .mk-doc-body pre code{padding:0;font:inherit;overflow-wrap:normal}
/* Signup calls to action: a compact one after the summary and a strong one at the
end, in the homepage closing band's colours. Server-rendered, no script. */
.mk-blog .mk-blog-cta{margin-top:56px;padding:30px 28px;background:#d6ece5;border:1px solid #b3ccc4}
.mk-blog .mk-doc-body .mk-blog-cta h2{margin:0;padding:0;border:0;font-size:30px}
.mk-blog .mk-blog-cta .mk-button{margin-top:24px}
.mk-blog .mk-doc-body .mk-blog-cta-note{font-size:13px;color:var(--mk-muted)}
.mk-blog .mk-blog-cta-compact{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:36px;padding:16px 18px 16px 20px}
.mk-blog .mk-doc-body .mk-blog-cta-compact p{margin:0;font-size:14px;line-height:1.6}
.mk-blog .mk-blog-cta-compact .mk-button{margin-top:0;flex:none;min-width:0}
@media(max-width:650px){.mk-blog .mk-blog-cta{margin-top:44px;padding:22px 18px}.mk-blog .mk-doc-body .mk-blog-cta h2{font-size:24px}.mk-blog .mk-blog-cta-compact{flex-direction:column;align-items:stretch;gap:14px;margin-top:28px;padding:16px}}
@media(max-width:650px){.mk-blog .mk-nav{gap:12px}.mk-blog .mk-nav-actions{gap:12px}.mk-blog .mk-nav-actions .mk-button{padding:12px;gap:12px}.mk-blog .mk-doc-body pre{padding:12px;font-size:11px}}

/* On-page pricing calculator. Hidden until its script enhances it; the
   noscript paragraph points at the hand-computed worked examples instead. */
.mk-blog .mk-calc{margin-top:28px;border:1px solid var(--mk-line);padding:24px;background:#f1f4f1}
.mk-blog .mk-calc-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0}
.mk-blog .mk-calc-field{margin:0;min-width:0}
.mk-blog .mk-calc-field label{display:block;font:10px/1.6 var(--mk-mono);letter-spacing:.06em;color:var(--mk-muted)}
.mk-blog .mk-calc-field :is(input[type=number],select){display:block;width:100%;min-width:0;margin-top:10px;background:#fff;border:1px solid var(--mk-line);border-radius:0;color:var(--mk-ink);padding:13px 12px;font:14px/1.5 inherit;min-height:48px}
.mk-blog .mk-calc-field :is(input,select):focus-visible{outline:3px solid #008b98;outline-offset:3px}
.mk-blog .mk-calc-check{display:flex;align-items:flex-end}
.mk-blog .mk-calc-check label{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.6;letter-spacing:normal;color:var(--mk-ink);text-transform:none;font-family:inherit;min-height:48px}
.mk-blog .mk-calc-check input{width:18px;height:18px;margin:0}
.mk-blog .mk-calc-outputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.mk-blog .mk-calc-out{min-width:0;min-height:150px;background:#fff;border:1px solid var(--mk-line);padding:16px}
.mk-blog .mk-calc-out h3{margin:0;font:10px/1.6 var(--mk-mono);letter-spacing:.06em;color:var(--mk-muted)}
.mk-blog .mk-calc-figure{margin:10px 0 0;font-size:26px;line-height:1.2;letter-spacing:-.03em}
.mk-blog .mk-calc-detail{margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--mk-muted);min-height:58px}
.mk-blog .mk-calc-assumptions{margin-top:20px;font-size:12px;line-height:1.7;color:var(--mk-muted)}
@media(max-width:650px){.mk-blog .mk-calc{padding:16px}.mk-blog .mk-calc-inputs{grid-template-columns:1fr}.mk-blog .mk-calc-outputs{grid-template-columns:1fr}.mk-blog .mk-calc-out{min-height:0}.mk-blog .mk-calc-detail{min-height:0}}
/* The agent prompt card is a dark field, and .mk-blog .mk-doc-body pre above
   would otherwise repaint its body with the ordinary light code background --
   near-white text on near-white. marketing.css cannot win that from a file the
   article loads first, so the article-context override lives here, after it. */
.mk-blog .mk-doc-body .mk-prompt{margin-top:24px}
.mk-blog .mk-doc-body .mk-prompt pre{background:transparent;border:0;padding:18px;font:12px/1.75 var(--mk-mono);max-height:min(70vh,760px);overflow:auto}
.mk-blog .mk-doc-body .mk-prompt pre code{color:#e8eef4;font:inherit;background:none;white-space:pre}
.mk-blog .mk-doc-body .mk-prompt-fallback{font-size:12px;color:var(--mk-muted)}
@media(max-width:650px){.mk-blog .mk-doc-body .mk-prompt pre{padding:14px;font-size:11px}}

/* Related reading at the foot of every article. Each page carried at most a few
 * links to its siblings and /blog/github-actions-runner-options-cost carried
 * none at all, so the set was reachable from the sitemap but barely from itself.
 * The block renders MarketingLibrary.other_than, so it is the same list on all
 * eight pages and gains a row when a page is added to that one list. */
.mk-blog .mk-blog-related{margin-top:60px;border-top:1px solid var(--mk-ink);padding-top:10px}
.mk-blog .mk-blog-related h2{margin:22px 0 0;font-size:24px;letter-spacing:-.04em;line-height:1.2}
.mk-blog .mk-library{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--mk-line)}
.mk-blog .mk-library li{border-bottom:1px solid var(--mk-line)}
.mk-blog .mk-library a{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:20px;padding:20px 0}
.mk-blog .mk-library b{font-size:16px;font-weight:600;letter-spacing:-.03em;line-height:1.35}
.mk-blog .mk-library span{grid-column:1;margin-top:7px;font-size:12px;line-height:1.75;color:var(--mk-muted)}
.mk-blog .mk-library i{grid-row:1;font-style:normal;font-size:17px;color:var(--mk-blue);transition:transform .18s cubic-bezier(.2,0,0,1)}
.mk-blog .mk-library a:hover b{color:var(--mk-blue)}
.mk-blog .mk-library a:hover i{transform:translate(2px,-2px)}
@media(max-width:650px){.mk-blog .mk-blog-related{margin-top:44px}.mk-blog .mk-blog-related h2{font-size:21px}.mk-blog .mk-library a{padding:17px 0}.mk-blog .mk-library b{font-size:15px}}
@media(prefers-reduced-motion:reduce){.mk-blog .mk-library i,.mk-blog .mk-library a:hover i{transition:none;transform:none}}