.blog-guide .blog-hero-link { margin-top: 22px; }
.blog-guide .blog-hero-link a { display: inline-flex; padding: 11px 16px; border: 1px solid currentColor; border-radius: 999px; font-weight: 700; text-decoration: none; }
.blog-guide .dc-section > p, .blog-guide .dc-band .wrap > p { font-size: 17px; }
.blog-guide .dc-toc { scroll-margin-top: 80px; }
.blog-guide section[id] { scroll-margin-top: 100px; }
.blog-index .blog-index-hero { background: #fff7dd; color: #20211f; padding: 42px 0 46px; }
.blog-index .blog-index-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.92fr); gap: clamp(28px,5vw,72px); align-items: center; }
.blog-index .blog-index-hero h1 { color: #20211f; font-size: clamp(36px,4vw,58px); line-height: 1.08; letter-spacing: -.04em; max-width: 700px; }
.blog-index .blog-index-hero p:not(.dc-label) { max-width: 610px; margin: 20px 0 0; font-size: clamp(17px,1.55vw,20px); line-height: 1.55; }
.blog-index .blog-index-hero .dc-label { color: #705200; font-size: 14px; }
body.blog-index .blog-index-hero a:not(.button),
body.blog-index .blog-index-hero a:not(.button):is(:visited,:hover,:focus-visible,:active){color:#20211f;text-decoration-color:currentColor}
.blog-index .blog-topic-head .category-guide-link{margin:12px 0 0;font-size:15px;line-height:1.45}
/* Light blog banners need their own breadcrumb link colors, including visited links. */
body:is(.blog-index, .blog-guide.consumer-products) .dc-hero .dc-crumb {
  color: #20211f;
}
body:is(.blog-index, .blog-guide.consumer-products) .dc-hero .dc-crumb a {
  color: #20211f;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}
body:is(.blog-index, .blog-guide.consumer-products) .dc-hero .dc-crumb a:is(:visited, :hover, :focus-visible, :active) {
  color: #20211f;
  text-decoration-color: currentColor;
}
.blog-index .dc-hero .blog-feature:not(.button):not(.hero-subnav-link) { display: block; overflow: hidden; background: #fff; border: 1px solid #e7dbb4; border-radius: 22px; color: #20211f; text-decoration: none; box-shadow: 0 14px 40px #4b370d18; }
.blog-index .blog-feature img { width: 100%; height: clamp(185px,22vw,260px); object-fit: cover; object-position: center; display: block; }
.blog-index .blog-feature-body { display: grid; gap: 10px; padding: 20px 24px 23px; }
.blog-index .blog-feature-body > span:first-child { color: #705200; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.blog-index .blog-feature-body strong { font-size: clamp(18px,1.7vw,23px); line-height: 1.25; }
.blog-index .blog-feature-body > span:last-child { color: #473600; font-weight: 750; }
.blog-index .blog-categories { padding-top: 26px; padding-bottom: 26px; border-bottom: 1px solid #e6e3dc; }
.blog-index .blog-categories p { margin: 0 0 13px; font-size: 14px; font-weight: 750; color: #5c5c57; }
.blog-index .blog-categories > div { display: flex; flex-wrap: wrap; gap: 9px; }
.blog-index .blog-categories a { display: inline-flex; align-items: center; gap: 10px; min-height: 43px; padding: 9px 15px; border-radius: 999px; background: #fff; border: 1px solid #c9c6bb; font-size: 15px; font-weight: 750; text-decoration: none; }
.blog-index .blog-categories a:link, .blog-index .blog-categories a:visited { color: #20211f; }
.blog-index .blog-categories a:hover, .blog-index .blog-categories a:focus-visible { color: #20211f; border-color: #ae8700; background: #fff7dd; }
.blog-index .blog-categories a small { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: #f1e8ca; color: #51400e; font-size: 12px; }
.blog-index .blog-topic { padding: 54px 0 66px; scroll-margin-top: 30px; }
.blog-index .blog-topic:nth-of-type(2n) { background: #f7f7f3; }
.blog-index .blog-topic-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 25px; }
.blog-index .blog-topic-head h2 { margin: 0; font-size: clamp(27px,2.7vw,38px); }
.blog-index .blog-topic-label { color: #775a00; font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 5px; }
.blog-index .blog-topic-head > a { color: #20211f; font-size: 15px; font-weight: 750; text-underline-offset: 4px; }
.blog-index .blog-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.blog-index .blog-more { margin: 24px 0 0; padding: 0; border: 0; }
.blog-index .blog-more > summary { display: flex; align-items: center; gap: 16px; width: fit-content; max-width: 100%; min-height: 48px; padding: 13px 22px; border: 1px solid #dab400; border-radius: 999px; background: #f5cc00; color: #20211f; font-size: 16px; font-weight: 750; line-height: 1.35; list-style: none; cursor: pointer; }
.blog-index .blog-more > summary::-webkit-details-marker { display: none; }
.blog-index .blog-more > summary::marker { content: ''; }
.blog-index .blog-more > summary::after { content: ''; flex: 0 0 8px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.blog-index .blog-more > summary:hover { background: #ffdc35; }
.blog-index .blog-more > summary:focus-visible { outline: 3px solid #715700; outline-offset: 4px; }
.blog-index .blog-more-count { white-space: nowrap; }
.blog-index .blog-more-open { display: none; }
.blog-index .blog-more[open] .blog-more-closed { display: none; }
.blog-index .blog-more[open] .blog-more-open { display: inline; }
.blog-index .blog-more[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.blog-index .blog-more[open] > .blog-list { margin-top: 24px; }
.blog-index .blog-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; color: #20211f; border: 1px solid #e1dfd7; border-radius: 19px; text-decoration: none; transition: border-color .18s, transform .18s, box-shadow .18s; }
.blog-index .blog-card:link, .blog-index .blog-card:visited { color: #20211f; }
.blog-index .blog-card:hover, .blog-index .blog-card:focus-visible { border-color: #bb9200; transform: translateY(-2px); box-shadow: 0 10px 24px #00000012; }
.blog-index .blog-card-image { display: block; background: #fff7dd; aspect-ratio: 16/9; }
.blog-index .blog-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-index .blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 23px; }
.blog-index .blog-card-kicker { color: #826100; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 9px; }
.blog-index #pro .blog-card-kicker { color: #a22525; }
.blog-index .blog-card strong { display: block; font-size: clamp(18px,1.5vw,21px); line-height: 1.28; margin-bottom: 10px; }
.blog-index .blog-card-summary { display: block; color: #555751; font-size: 15px; line-height: 1.52; }
.blog-index .blog-card-read { display: block; margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 800; color: #5d4600; }
@media(max-width:900px) { .blog-index .blog-index-hero-grid { grid-template-columns: 1fr 1fr; gap: 25px; } .blog-index .blog-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .blog-index .blog-index-hero { padding: 30px 0; } .blog-index .blog-index-hero-grid { grid-template-columns: 1fr; } .blog-index .blog-feature img { height: 185px; } .blog-index .blog-topic-head { align-items: start; flex-direction: column; } .blog-index .blog-list { grid-template-columns: 1fr; } .blog-index .blog-categories > div { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; } .blog-index .blog-categories a { flex: 0 0 auto; } }
@media(prefers-reduced-motion:reduce) { .blog-index .blog-card { transition: none; } }
.blog-index .blog-carousel { min-width: 0; }
.blog-index .blog-carousel-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: #51400e; font-size: 14px; font-weight: 750; margin-bottom: 12px; }
.blog-index .blog-carousel-stage { position: relative; }
.blog-index .blog-carousel-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0; padding: 0 0 10px; list-style: none; scrollbar-color: #b39342 #f1e5c3; scrollbar-width: thin; border-radius: 22px; }
.blog-index .blog-carousel-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.blog-index .blog-carousel-slide .blog-feature { height: 100%; box-shadow: none; }
.blog-index .blog-carousel .blog-feature img { height: clamp(180px,18vw,240px); }
.blog-index .blog-carousel .blog-feature-body { min-height: 152px; }
.blog-index .blog-carousel-controls:not([hidden]) { display: block; position: absolute; inset: 0; pointer-events: none; }
.blog-index .blog-carousel-controls button { position: absolute; top: clamp(90px,9vw,120px); transform: translateY(-50%); display: inline-grid; place-items: center; width: 64px; height: 64px; padding: 16px; border: 2px solid #20211f; border-radius: 50%; background: #fff; color: #20211f; box-shadow: 0 5px 16px #00000035; cursor: pointer; pointer-events: auto; }
.blog-index .blog-carousel-controls [data-carousel-prev] { left: 12px; }
.blog-index .blog-carousel-controls [data-carousel-next] { right: 12px; }
.blog-index .blog-carousel-controls svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.blog-index .blog-carousel-controls button:disabled { opacity: .45; cursor: default; box-shadow: none; }
.blog-index .blog-carousel-controls button:not(:disabled):hover { background: #f5cc00; }
.blog-index .blog-carousel-position { color: #51400e; font-size: 13px; }
.blog-index .blog-carousel-track:focus-visible, .blog-index .blog-feature:focus-visible, .blog-index .blog-carousel-controls button:focus-visible { outline: 3px solid #715700; outline-offset: 3px; }
.blog-guide .blog-table-scroll { max-width: 100%; overflow-x: auto; margin: 22px 0; }
.blog-guide .blog-table-scroll table { width: 100%; min-width: 500px; border-collapse: collapse; font-size: 16px; }
.blog-guide .blog-table-scroll th, .blog-guide .blog-table-scroll td { padding: 14px 16px; border: 1px solid #d6d2c9; text-align: left; vertical-align: top; }
.blog-guide .blog-table-scroll th { background: #f6e6ad; color: #20211f; }
.blog-guide.blog-pro .blog-table-scroll th { background: #292b29; color: #fff; }
@media(max-width:700px) { .blog-index .blog-carousel .blog-feature img { height: 190px; } .blog-index .blog-carousel .blog-feature-body { min-height: 140px; } .blog-index .blog-carousel-controls button { top: 95px; width: 54px; height: 54px; padding: 13px; } .blog-index .blog-carousel-controls [data-carousel-prev] { left: 9px; } .blog-index .blog-carousel-controls [data-carousel-next] { right: 9px; } }