/* Shared article elements: the editor canvas, previews and published articles use these same rules. */
.article-design{--ab-accent:#087b39;--ab-soft:#edf7ef;--ab-ink:#09242e;--ab-gap:24px;color:var(--ab-ink);font:17px/1.75 Roboto,Arial,sans-serif;overflow-wrap:anywhere}.article-design.ab-theme-navy{--ab-accent:#185a86;--ab-soft:#edf4fb;--ab-ink:#0b2439}.article-design.ab-theme-amber{--ab-accent:#956011;--ab-soft:#fff6e6;--ab-ink:#302718}.article-design.ab-space-compact{--ab-gap:14px}.article-design.ab-space-spacious{--ab-gap:38px}.article-design>.article-block{margin:var(--ab-gap) 0;min-width:0}.article-design>.article-block:first-child{margin-top:0}.article-design h2,.article-design h3,.article-design h4{color:inherit;line-height:1.2;margin:1.2em 0 .6em;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif}.article-design h2{font-size:34px}.article-design h3{font-size:26px}.article-design p{margin:.6em 0 1em}.article-design ul,.article-design ol{padding-left:1.6em}.article-design li{margin:.4em 0}.article-design img{display:block;max-width:100%;height:auto;border-radius:8px}.article-design figure{margin:0}.article-design figcaption{font:14px/1.5 Roboto,Arial,sans-serif;color:#56656d;margin-top:9px}.article-design a{color:var(--ab-accent);text-decoration:underline}.article-design .ab-callout,.article-design .ab-steps,.article-design .ab-checklist,.article-design .ab-surface-soft{background:var(--ab-soft);padding:26px;border-radius:10px}.article-design .ab-callout{border-left:5px solid var(--ab-accent)}.article-design .ab-callout>:first-child,.article-design .ab-steps>:first-child,.article-design .ab-checklist>:first-child,.article-design .ab-column>:first-child{margin-top:0}.article-design .ab-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}.article-design .ab-columns-three{grid-template-columns:repeat(3,minmax(0,1fr))}.article-design .ab-column{min-width:0}.article-design .ab-quote blockquote{margin:0;padding:12px 0 12px 26px;border-left:5px solid var(--ab-accent);font:italic 24px/1.5 Georgia,serif;background:transparent}.article-design .ab-button-link{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:12px 23px;border-radius:6px;background:var(--ab-accent);color:#fff;font:700 16px/1.3 Roboto,Arial,sans-serif;text-decoration:none}.article-design .ab-checklist ul{list-style:'✓  '}.article-design .ab-checklist li::marker{color:var(--ab-accent)}.article-design .ab-steps ol{counter-reset:ab-step;list-style:none;padding:0}.article-design .ab-steps li{counter-increment:ab-step;padding:6px 0 6px 44px;position:relative}.article-design .ab-steps li:before{content:counter(ab-step);position:absolute;left:0;top:8px;width:29px;height:29px;border-radius:50%;background:var(--ab-accent);color:white;text-align:center;line-height:29px;font-weight:700}.article-design .ab-table{overflow-x:auto}.article-design table{border-collapse:collapse;width:100%;font-size:15px;background:white}.article-design th,.article-design td{padding:13px;border:1px solid #d8e2df;text-align:left;vertical-align:top}.article-design th{background:var(--ab-ink);color:white}.article-design .ab-video iframe{display:block;border:0;width:100%;aspect-ratio:16/9;height:auto;border-radius:8px}.article-design .ab-divider hr{border:0;border-top:2px solid #dce6e0;margin:0}.article-design .ab-spacer{min-height:36px}.article-design .ab-spacer p{margin:0}.article-design .ab-align-center{text-align:center}.article-design .ab-align-right{text-align:right}.article-design .ab-surface-dark{background:var(--ab-ink);color:white;border-radius:10px;padding:26px}.article-design .ab-surface-dark a:not(.ab-button-link){color:#b6f6bd}.article-design .ab-surface-dark .ab-button-link{background:white;color:var(--ab-ink)}.article-design .ab-surface-dark figcaption{color:#d5e3e7}.article-design-standard{}.article-design-guide .ab-heading h2{padding-bottom:12px;border-bottom:2px solid var(--ab-accent)}.article-design-review .ab-callout{border:1px solid #e5d9bd;border-top:6px solid var(--ab-accent);background:var(--ab-soft);border-radius:12px}.article-design-review .ab-column{background:var(--ab-soft);border-radius:10px;padding:22px}.article-design-spotlight .ab-quote blockquote{font-size:30px}.article-design-spotlight .ab-image img{width:100%;max-height:650px;object-fit:cover}.article-design-news .ab-heading h2{font-family:Georgia,serif;font-size:30px}.article-design-news .ab-callout{border-radius:0;border-left:0;border-top:4px solid var(--ab-accent)}
.article-page.article-style-guide>.article-layout>article>h1{max-width:22ch}.article-page.article-style-review>.article-layout>article>h1{border-bottom:5px solid #a77625;padding-bottom:22px}.article-page.article-style-news>.article-layout>article>h1{font-family:Georgia,serif;line-height:1.1;font-size:clamp(32px,4.4vw,55px)}.article-page.article-style-spotlight>.article-layout,.article-page.article-wide>.article-layout{grid-template-columns:minmax(0,1fr)}.article-page.article-style-spotlight>.article-layout>aside,.article-page.article-wide>.article-layout>aside{display:none}.article-page.article-style-spotlight>.article-layout>article>h1{text-align:center;font-size:clamp(38px,5.4vw,68px);max-width:23ch;margin-left:auto;margin-right:auto}.article-page.article-style-spotlight .article-meta{text-align:center}.article-page.article-style-spotlight .article-hero{max-height:650px;object-fit:cover}.article-page.article-style-spotlight .article-design,.article-page.article-wide .article-design{max-width:1100px;margin-left:auto;margin-right:auto}
@media(max-width:700px){.article-design{font-size:16px;--ab-gap:20px}.article-design .ab-columns,.article-design .ab-columns-three{grid-template-columns:1fr;gap:18px}.article-design .ab-callout,.article-design .ab-steps,.article-design .ab-checklist,.article-design .ab-surface-dark,.article-design .ab-surface-soft{padding:20px}.article-design h2{font-size:29px}.article-design h3{font-size:24px}.article-design-spotlight .ab-quote blockquote{font-size:24px}.article-design .ab-button-link{width:100%;text-align:center}.article-design th,.article-design td{padding:10px;min-width:110px}}

/* Responsive editorial navigation and visual guide treatment. */
.article-page .article-layout>article,.article-page .article-layout>aside{min-width:0}
.article-page .article-layout{min-width:0}
.article-page .article-hero{display:block;width:100%;height:auto;max-height:540px;object-fit:cover;border-radius:18px;margin:24px 0}
.article-page .toc.article-toc{display:block!important;position:static;box-sizing:border-box;max-width:100%;min-width:0;padding:0;margin:24px 0 32px;border:1px solid #cadfd4;border-radius:12px;background:#f1f8f3;overflow:hidden;white-space:normal}
.article-page .article-toc>summary{display:list-item;cursor:pointer;padding:18px 22px;font:700 20px/1.35 Arial,sans-serif;color:#103b2c;overflow-wrap:anywhere}
.article-page .article-toc>summary span{display:block;margin-top:5px;font:400 13px/1.4 Arial,sans-serif;color:#4c695b}
.article-page .article-toc[open]>summary{border-bottom:1px solid #cadfd4}
.article-page .article-toc>nav{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-height:360px;overflow-y:auto;overscroll-behavior:contain;padding:8px 16px;min-width:0}
.article-page .article-toc>nav>a{display:block;min-width:0;max-width:100%;box-sizing:border-box;padding:11px 8px;border-bottom:1px solid #d8e7dd;white-space:normal;overflow-wrap:anywhere;word-break:normal;font:500 15px/1.45 Arial,sans-serif;color:#165b3b;text-decoration:none}
.article-page .article-toc>nav>a:last-child{border:0}
.article-page .article-toc>nav>a:hover,.article-page .article-toc>nav>a:focus-visible{background:#dceee1;text-decoration:underline}
.article-page .article-body a,.article-page .share-links a,.article-page nav{overflow-wrap:anywhere;word-break:normal}
.article-page .article-body h2,.article-page .article-body h3{scroll-margin-top:24px}
.article-design-guide{counter-reset:diy-step}
.article-design-guide>.ab-text:has(>h2:first-child){padding:24px;border:1px solid #deebe3;border-radius:14px;background:#fff;box-shadow:0 5px 20px #123a2610}
.article-design-guide>.ab-text:has(>h2:first-child)>h2:first-child{margin-top:0}
.article-design-guide>.ab-text:has(>h2:first-child):nth-child(even){background:#f7faf8}
.article-design-guide>.ab-checklist{background:linear-gradient(125deg,#e1f1e5,#f5faf2);border:1px solid #cce3d2}
.article-design-guide .ab-checklist ul{columns:2;column-gap:34px}
.article-design-guide .ab-checklist li{break-inside:avoid;padding:5px 0}
.article-design-guide .ab-callout{background:#eaf4ee;border-left-width:6px;box-shadow:0 4px 16px #123a260a}
.article-design-guide .ab-callout h2{font-size:28px}
.article-design-guide details{margin:12px 0;background:#f2f7f4;border:1px solid #d2e3d9;border-radius:10px;padding:0 18px}
.article-design-guide details summary{cursor:pointer;padding:17px 0;font-weight:700;color:#123e2d;line-height:1.5}
.article-design-guide details p{padding-bottom:8px}
.article-design-guide .ab-columns{gap:20px}
.article-design-guide .ab-column{padding:24px;background:#f0f6f2;border-top:4px solid #087b39;border-radius:12px}
@media(max-width:700px){.article-page .article-toc>summary{padding:16px;font-size:18px}.article-page .article-toc>nav{padding:6px 10px;max-height:300px}.article-design-guide .ab-checklist ul{columns:1}.article-design-guide>.ab-text:has(>h2:first-child){padding:20px}.article-design-guide .ab-column{padding:20px}.article-page .article-hero{border-radius:12px}.article-page .share-links{display:flex;flex-wrap:wrap;gap:12px}}

.article-design-guide .guide-step-heading{counter-increment:diy-step;position:relative;padding-top:62px}
.article-design-guide .guide-step-heading::before{content:counter(diy-step,decimal-leading-zero);position:absolute;left:0;top:0;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#087b39;color:#fff;font:800 23px/1 Arial,sans-serif;box-shadow:5px 5px 0 #c7e8d2}
.article-design-guide .ab-checklist h2::before{content:'✓';display:inline-grid;place-items:center;width:38px;height:38px;background:#087b39;color:white;border-radius:50%;margin-right:12px;font:700 23px/1 Arial,sans-serif;vertical-align:middle}
.article-design-guide .ab-callout h2::before{content:'!';display:inline-grid;place-items:center;width:34px;height:34px;border:2px solid currentColor;border-radius:50%;margin-right:12px;font:800 22px/1 Arial,sans-serif;vertical-align:middle}