/* You & AI: the case box takes the blue of the homepage tile (#1F4E5F on #EAF1F2), so the section reads as one from tile to case. Overrides the colors set inside each case's HTML card. */
.article-body .yai{--r:#1F4E5F;--paper:#EAF1F2;--cream:#DDE8EB;--line:#C9D9DE;--mut:#56676D}
.article-body .yai-steps b,.article-body .yai-letter{border-color:#A9C1C9}
.article-body .yai-steps li.is-on b,.article-body .yai-opt.is-sel .yai-letter{border-color:var(--r)}
.article-body .yai-opt:hover .yai-letter{border-color:var(--r)}
.article-body .yai-why textarea{border-color:#B8CCD2}
.article-body .yai-why textarea:focus{border-color:var(--r)}

/* Case box header a little larger: kicker, one-line dek, the four steps, first question */
.article-body .yai-kicker{font-size:.84rem;margin-bottom:.5rem}
.article-body .yai .yai-dek{margin:0 0 1rem;font-family:Literata,Georgia,serif;font-style:italic;font-size:1.05rem;line-height:1.45;color:var(--mut)}
.article-body .yai-steps{font-size:.92rem;gap:.5rem 1.3rem;padding-bottom:1rem;margin-bottom:1.4rem}
.article-body .yai-steps b{width:1.6rem;height:1.6rem;font-size:.8rem}
.article-body .yai-q{font-size:1.45rem}

/* The Case: the opening story sits in a very light blue box with its own label (wrapped by js on You & AI posts); no drop cap on You & AI posts */
.article-body .yai-intro{background:#F3F7F8;padding:1.4rem 1.6rem .5rem;margin:0 0 1.8rem}
.article-body .yai-intro-label{font-family:'Libre Franklin',Arial,sans-serif;font-size:.84rem;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#1F4E5F;margin:0 0 .9rem;padding-bottom:.55rem;border-bottom:1px solid #C9D9DE}
.tag-you-and-ai .article-body p::first-letter,.tag-you-and-ai .article-body div::first-letter{font:inherit;float:none;padding:0;color:inherit;line-height:inherit}
@media (max-width:820px){.article-body .yai-intro{padding:1.1rem 1.1rem .3rem;margin:0 -4px 1.5rem}.article-body .yai-steps{font-size:.86rem}}