:root {
   --ink: #242424;
   --muted: #767676;
   --line: #e9e5df;
   --paper: #ffffff;
   --warm: #faf8f5;
   --yellow: #f5d26e;
   --yellow-strong: #ffc20a;
   --red: #e9453f;
   --orange: #f47f34;
   --brown: #8e725c;
   --shadow: 0 18px 44px rgba(49, 39, 27, 0.09);
   --serif: "Roboto Slab", Georgia, serif;
   --sans: "Montserrat", Arial, sans-serif;
}

* {
   box-sizing: border-box;
}
[hidden] {
   display: none !important;
}
html {
    scroll-behavior: smooth;
}

.article-content h2 {
    scroll-margin-top: 100px;
}

a {
   color: inherit;
   text-decoration: none;
}
button {
   font: inherit;
}


.blog-hero {
   padding-top: 25px;
}
.blog-hero__content {
   min-height: 350px;
   display: grid;
   grid-template-columns: 0.9fr 1.1fr;
   align-items: center;
   gap: 68px;
   padding: 49px 0 56px;
}
.eyebrow {
   margin: 0 0 11px;
   color: var(--orange);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.13em;
   text-transform: uppercase;
}
.blog-hero h1 {
   max-width: 620px;
   margin: 0;
   font: 700 clamp(36px, 4.4vw, 61px) / 1.04 var(--serif);
   letter-spacing: -0.025em;
}
.blog-hero h1 em {
   color: var(--red);
   font-style: normal;
}
.hero-lead {
   max-width: 500px;
   margin: 23px 0 28px;
   color: #66615c;
   font-size: 15px;
   line-height: 1.7;
}
.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 24px;
   min-height: 46px;
   padding: 0 22px;
   border: 1px solid transparent;
   border-radius: 2px;
   font-size: 12px;
   font-weight: 700;
   transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.button:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.11);
}
.button span {
   font-size: 17px;
}
.button--dark {
   color: #fff;
   background: var(--ink);
}
.button--yellow {
   color: #2a2924;
   background: var(--yellow-strong);
}
.button--red {
   color: #fff;
   background: var(--red);
}
.hero-visual {
   position: relative;
   min-height: 310px;
   overflow: hidden;
   background: linear-gradient(115deg, #9b836c 0%, #e6d9c8 45%, #5c4b3e 100%);
   box-shadow: var(--shadow);
}
.hero-visual::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(51, 41, 33, 0.42), transparent 55%),
      repeating-linear-gradient(
         90deg,
         transparent 0 22%,
         rgba(90, 74, 60, 0.14) 22.2% 22.5%
      );
}
.hero-visual__glow {
   position: absolute;
   left: 8%;
   top: 12%;
   width: 135px;
   height: 135px;
   border: 9px solid rgba(242, 238, 230, 0.65);
   border-radius: 50%;
   box-shadow: 0 0 26px rgba(255, 245, 210, 0.5);
}
.hero-door {
   position: absolute;
   right: 18%;
   top: 13%;
   width: 155px;
   height: 240px;
   padding: 19px;
   border: 9px solid #ded7cd;
   background: linear-gradient(100deg, #f0eee9, #b9b1a9);
   box-shadow: -19px 25px 25px rgba(29, 21, 15, 0.28);
}
.hero-door span {
   display: block;
   height: 82px;
   margin-bottom: 16px;
   border: 4px solid #d3cdc4;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), transparent);
}
.hero-door i {
   position: absolute;
   right: 17px;
   top: 128px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #5a4c40;
}
.hero-visual__caption {
   position: absolute;
   left: 22px;
   right: 22px;
   bottom: 20px;
   display: grid;
   gap: 2px;
   color: white;
}
.hero-visual__caption b {
   font: 600 20px var(--serif);
}
.hero-visual__caption small {
   color: rgba(255, 255, 255, 0.76);
   font-size: 11px;
}

.blog-content {
   padding: 21px 0 104px;
}
.section-heading {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 20px;
}
.section-heading h2 {
   margin: 0;
   font: 700 37px/1.1 var(--serif);
}
.article-count {
   color: #a6a09a;
   font-size: 12px;
}
.article-count span {
   padding: 0 6px;
   color: var(--orange);
}
.filter-row {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 24px;
}
.filter-chip {
   padding: 9px 16px;
   border: 1px solid var(--line);
   border-radius: 30px;
   color: #746e67;
   background: #fff;
   cursor: pointer;
   font-size: 11px;
   font-weight: 600;
}
.filter-chip:hover,
.filter-chip--active {
   border-color: var(--ink);
   color: #fff;
   background: var(--ink);
}
.article-card {
   overflow: hidden;
   border: 1px solid var(--line);
   background: #fff;
   transition: box-shadow 0.25s, transform 0.25s;
}
.article-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow);
}
.featured-article {
   display: grid;
   grid-template-columns: 1.14fr 0.86fr;
   margin-bottom: 31px;
}
.image-frame {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   background-color: #ded8d0;
   background-position: center;
   background-size: cover;
}
.image-frame::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(115deg, rgba(48, 39, 32, 0.2), transparent 60%);
}
.image-frame--bathroom {
   background-image: linear-gradient(
         120deg,
         rgba(85, 62, 44, 0.2),
         rgba(245, 238, 227, 0.05)
      ),
      url("https://images.unsplash.com/photo-1620626011761-996317b8d101?auto=format&fit=crop&w=1400&q=85");
}
.image-frame--bathroom-detail {
   background-image: linear-gradient(
         120deg,
         rgba(85, 62, 44, 0.2),
         rgba(245, 238, 227, 0.05)
      ),
      url("https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?auto=format&fit=crop&w=600&q=82");
}
.image-frame--door {
   background-image: linear-gradient(
         120deg,
         rgba(55, 42, 36, 0.15),
         rgba(255, 255, 255, 0.05)
      ),
      url("https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=700&q=82");
}
.image-frame--materials {
   background-color: #a98967;
   background-image: repeating-linear-gradient(
         168deg,
         rgba(255, 255, 255, 0.16) 0 2px,
         rgba(96, 60, 36, 0.18) 3px 12px
      ),
      url("https://images.unsplash.com/photo-1549490349-8643362247b5?auto=format&fit=crop&w=700&q=82");
}
.image-frame--interior {
   background-image: linear-gradient(
         120deg,
         rgba(55, 42, 36, 0.12),
         rgba(255, 255, 255, 0.04)
      ),
      url("https://images.unsplash.com/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=700&q=82");
}
.image-frame--measure {
   background-color: #b7aa96;
   background-image: linear-gradient(
         135deg,
         rgba(255, 213, 95, 0.25),
         rgba(62, 58, 50, 0.36)
      ),
      url("https://images.unsplash.com/photo-1504148455328-c376907d081c?auto=format&fit=crop&w=700&q=82");
}
.image-frame--install {
   background-image: linear-gradient(
         120deg,
         rgba(55, 42, 36, 0.12),
         rgba(255, 255, 255, 0.04)
      ),
      url("https://images.unsplash.com/photo-1484101403633-562f891dc89a?auto=format&fit=crop&w=700&q=82");
}
.image-frame--space {
   background-image: linear-gradient(
         120deg,
         rgba(55, 42, 36, 0.12),
         rgba(255, 255, 255, 0.04)
      ),
      url("https://images.unsplash.com/photo-1618220179428-22790b461013?auto=format&fit=crop&w=700&q=82");
}
.image-frame--entrance {
   background-image: linear-gradient(
         120deg,
         rgba(55, 42, 36, 0.12),
         rgba(255, 255, 255, 0.04)
      ),
      url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=700&q=82");
}
.image-frame--repair {
   background-image: linear-gradient(
         120deg,
         rgba(55, 42, 36, 0.12),
         rgba(255, 255, 255, 0.04)
      ),
      url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=700&q=82");
}
.featured-article__image {
   min-height: 300px;
}
.featured-article__body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 43px 43px 39px;
   background: #fff8ed;
}
.card-meta {
   display: flex;
   gap: 15px;
   color: #9b938b;
   font-size: 10px;
}
.card-meta span + span::before {
   content: "·";
   margin-right: 15px;
   color: var(--orange);
}
.card-kicker {
   margin: 20px 0 7px;
   color: var(--red);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}
.article-card h3 {
   margin: 0;
   font: 700 22px/1.2 var(--serif);
}
.featured-article h3 {
   font-size: clamp(26px, 3vw, 37px);
}
.featured-article__body > p:not(.card-kicker) {
   max-width: 440px;
   margin: 17px 0 25px;
   color: #6e675f;
   font-size: 13px;
   line-height: 1.7;
}
.text-link {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   width: max-content;
   color: var(--orange);
   font-size: 12px;
   font-weight: 700;
}
.text-link:hover {
   color: var(--red);
}
.text-link span {
   font-size: 17px;
}
.blog-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 272px;
   align-items: start;
   gap: 31px;
}
.articles-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 22px;
}
.article-card--standard .image-frame {
   min-height: 188px;
}
.image-label {
   position: absolute;
   top: 14px;
   left: 15px;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   color: #fff;
   background: rgba(36, 36, 36, 0.72);
   font-size: 10px;
   font-weight: 700;
}
.article-card__body {
   padding: 20px 22px 24px;
}
.article-card--standard h3 {
   margin-top: 10px;
   font-size: 19px;
}
.article-card--standard p {
   margin: 12px 0 18px;
   color: #77716c;
   font-size: 12px;
   line-height: 1.65;
}
.blog-sidebar {
   display: grid;
   gap: 18px;
}
.sidebar-card {
   border: 1px solid var(--line);
   padding: 28px 25px;
}
.sidebar-card--accent {
   position: relative;
   overflow: hidden;
   background: #fffaf0;
   border-top: 3px solid var(--orange);
}
.sidebar-card--accent::after {
   content: "";
   position: absolute;
   right: -32px;
   top: -32px;
   width: 100px;
   height: 100px;
   border: 1px solid rgba(244, 127, 52, 0.26);
   border-radius: 50%;
   box-shadow: 0 0 0 17px rgba(244, 127, 52, 0.08),
      0 0 0 35px rgba(244, 127, 52, 0.045);
}
.sidebar-icon {
   display: block;
   color: var(--orange);
   font: 40px/1 var(--serif);
}
.sidebar-card h3 {
   margin: 17px 0 13px;
   font: 700 21px/1.25 var(--serif);
}
.sidebar-card p {
   margin: 0 0 19px;
   color: #736d66;
   font-size: 12px;
   line-height: 1.7;
}
.sidebar-card .button {
   width: 100%;
}
.sidebar-card--plain {
   padding-top: 24px;
}
.sidebar-card--plain h3 {
   margin-top: 0;
   font-size: 19px;
}
.sidebar-card--plain a {
   display: grid;
   grid-template-columns: 27px 1fr 16px;
   gap: 6px;
   align-items: center;
   padding: 13px 0;
   border-bottom: 1px solid var(--line);
   color: #655f58;
   font-size: 11px;
   line-height: 1.35;
}
.sidebar-card--plain a:last-child {
   border-bottom: 0;
}
.sidebar-card--plain a span {
   color: var(--orange);
   font-weight: 700;
}
.sidebar-card--plain a b {
   color: var(--orange);
   font-size: 17px;
}
.sidebar-note {
   display: flex;
   gap: 12px;
   padding: 5px 0;
   color: #8b837a;
}
.note-line {
   flex: 0 0 3px;
   background: var(--yellow);
}
.sidebar-note p {
   margin: 0;
   font-size: 11px;
   line-height: 1.7;
}
.service-strip {
   background: var(--warm);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
}
.service-strip__inner {
   min-height: 113px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr auto;
   gap: 31px;
   align-items: center;
}
.service-strip__inner > div {
   display: flex;
   align-items: center;
   gap: 13px;
}
.service-icon {
   display: grid;
   place-items: center;
   width: 35px;
   height: 35px;
   color: var(--orange);
   border: 1px solid #dfb38d;
   font: 23px/1 var(--serif);
}
.service-strip b {
   display: block;
   font-size: 12px;
}
.service-strip small {
   display: block;
   color: #8d857d;
   font-size: 10px;
}
.service-strip .button {
   min-width: 211px;
}
.article-page {
   padding: 25px 0 98px;
}
.article-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 284px;
   gap: 48px;
   align-items: start;
}
.article-main {
   min-width: 0;
}
.article-main > h1 {
   margin: 0 0 14px;
   font: 700 clamp(33px, 4.2vw, 53px) / 1.08 var(--serif);
   letter-spacing: -0.022em;
}
.article-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 21px;
   margin-bottom: 25px;
   color: #9b938b;
   font-size: 11px;
}
.article-hero {
   min-height: 346px;
   border-radius: 2px;
}
.author-card {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 22px 0 21px;
   border-bottom: 1px solid var(--line);
}
.author-avatar {
   display: grid;
   place-items: center;
   flex: 0 0 88px;
   width: 88px;
   height: 88px;
   border-radius: 50%;
   color: #fff;
   background: radial-gradient(
         circle at 50% 29%,
         #f3b48e 0 13%,
         transparent 14%
      ),
      radial-gradient(circle at 50% 69%, #273a3f 0 27%, transparent 28%),
      linear-gradient(135deg, #e6e0da, #b8a99b);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.08em;
}
.author-card h3 {
   margin: 0 0 3px;
   font: 700 19px var(--serif);
}
.author-card p {
   margin: 0 0 9px;
   color: var(--red);
   font-size: 11px;
}
.author-card span {
   color: #77716c;
   font-size: 11px;
   line-height: 1.65;
}
.article-intro {
   padding: 25px 0 30px;
   border-bottom: 1px solid var(--line);
}
.article-intro p {
   margin: 0 0 11px;
   color: #514d49;
   font-size: 14px;
   line-height: 1.8;
}
.article-intro .text-link {
   margin-top: 3px;
}
.article-highlights {
   display: grid;
   gap: 7px;
   padding: 29px 0 30px;
}
.highlight-card {
   min-height: 103px;
   display: grid;
   grid-template-columns: 55px 1fr 143px 21px;
   align-items: center;
   gap: 14px;
   padding: 13px 14px 13px 19px;
   border: 1px solid transparent;
   background: #fbfaf8;
}
.highlight-card:hover {
   border-color: #edcfb3;
   background: #fff8ed;
}
.highlight-icon {
   display: grid;
   place-items: center;
   width: 42px;
   height: 54px;
   color: var(--orange);
   font: 37px/1 var(--serif);
}
.highlight-icon--size {
   font-size: 42px;
   color: #b99f86;
}
.highlight-icon--drop {
   font-size: 38px;
   color: #b99f86;
}
.highlight-card b {
   display: block;
   font: 700 15px/1.35 var(--serif);
}
.highlight-card small {
   display: block;
   margin-top: 5px;
   color: #827970;
   font-size: 10px;
   line-height: 1.45;
}
.highlight-image {
   min-height: 74px;
   border-radius: 2px;
}
.highlight-card i {
   color: var(--orange);
   font: 29px/1 var(--serif);
   font-style: normal;
   text-align: center;
}
.article-body {
   color: #4e4944;
}
.article-body > .eyebrow {
   margin-top: 4px;
}
.article-body h2 {
   scroll-margin-top: 20px;
   margin: 36px 0 13px;
   color: #242424;
   font: 700 26px/1.22 var(--serif);
}
.article-body p {
   margin: 0 0 16px;
   font-size: 14px;
   line-height: 1.85;
}
.article-body ul {
   margin: 7px 0 26px;
   padding-left: 23px;
}
.article-body li {
   margin: 5px 0;
   padding-left: 4px;
   font-size: 14px;
}
.article-body li::marker {
   color: var(--orange);
}
.tip-row {
   display: flex;
   gap: 15px;
   align-items: flex-start;
   margin: 23px 0 28px;
   padding: 17px 20px;
   border-left: 3px solid var(--orange);
   background: #fff8ed;
}
.tip-row p {
   margin: 0;
   font-size: 12px;
   line-height: 1.7;
}
.tip-icon {
   display: grid;
   place-items: center;
   flex: 0 0 24px;
   width: 24px;
   height: 24px;
   color: #fff;
   border-radius: 50%;
   background: var(--orange);
   font-weight: 700;
}
.comparison-table {
   margin: 25px 0 29px;
   border: 1px solid var(--line);
   font-size: 12px;
}
.comparison-table > div {
   display: grid;
   grid-template-columns: 130px 1fr;
   gap: 18px;
   padding: 14px 17px;
   border-top: 1px solid var(--line);
}
.comparison-table__head {
   border-top: 0 !important;
   color: #fff;
   background: var(--ink);
   font-weight: 700;
}
.comparison-table > div span {
   color: #716961;
}
.comparison-table__head span {
   color: #fff !important;
}
.article-cta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   margin-top: 41px;
   padding: 27px 29px;
   background: var(--ink);
   color: #fff;
}
.article-cta .eyebrow {
   color: var(--yellow);
}
.article-cta h3 {
   margin: 0 0 3px;
   font: 700 23px var(--serif);
}
.article-cta p {
   margin: 0;
   color: #b8b2ab;
   font-size: 11px;
}
.article-cta .button {
   flex: 0 0 auto;
}
.article-sidebar {
   position: sticky;
   top: 22px;
   display: grid;
   gap: 18px;
}
.toc-card {
   border: 1px solid var(--line);
   background: #fbfaf8;
}
.toc-card__title {
   display: flex;
   justify-content: space-between;
   padding: 20px 20px 12px;
   font: 700 19px var(--serif);
}
.toc-card__title span {
   color: var(--orange);
   font-size: 25px;
}
.toc-link {
   display: grid;
   grid-template-columns: 19px 1fr 14px;
   gap: 5px;
   align-items: center;
   min-height: 56px;
   padding: 8px 15px 8px 20px;
   border-top: 1px solid var(--line);
   color: #6c655e;
   font-size: 10px;
   line-height: 1.45;
}
.toc-link b {
   color: var(--orange);
}
.toc-link i {
   color: var(--orange);
   font: 21px/1 var(--serif);
   font-style: normal;
   text-align: right;
}
.toc-link:hover,
.toc-link--active {
   color: var(--ink);
   background: #fff3df;
}
.article-sidebar .sidebar-card {
   padding: 27px 22px;
}
.article-sidebar .sidebar-card h3 {
   font-size: 19px;
}
.service-card {
   padding: 21px 20px;
   border: 1px solid var(--line);
}
.service-card > div {
   display: grid;
   grid-template-columns: 29px 1fr;
   gap: 10px;
   align-items: center;
   padding: 10px 0;
}
.service-card > div + div {
   border-top: 1px solid var(--line);
}
.service-card > div > span {
   color: var(--orange);
   font: 22px/1 var(--serif);
   text-align: center;
}
.service-card p {
   margin: 0;
}
.service-card b {
   display: block;
   font-size: 11px;
}
.service-card small {
   display: block;
   color: #928b83;
   font-size: 10px;
}
.related-card {
   padding: 22px 20px;
   border: 1px solid var(--line);
}
.related-card__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   margin-bottom: 4px;
}
.related-card h3 {
   margin: 0;
   font: 700 17px var(--serif);
}
.related-card__header a {
   color: var(--orange);
   font-size: 10px;
}
.related-card > a {
   display: grid;
   grid-template-columns: 1fr 16px;
   gap: 8px;
   padding: 12px 0;
   border-top: 1px solid var(--line);
   color: #6d665e;
   font-size: 10px;
   line-height: 1.4;
}
.related-card > a span {
   color: var(--orange);
   font-size: 16px;
}
[data-category].is-hidden {
   display: none;
}
@media (max-width: 1040px) {
   .blog-hero__content {
      gap: 34px;
   }
   .blog-layout,
   .article-layout {
      grid-template-columns: minmax(0, 1fr) 250px;
      gap: 24px;
   }
   .highlight-card {
      grid-template-columns: 45px 1fr 116px 16px;
      gap: 9px;
   }
   .highlight-card b {
      font-size: 13px;
   }
}
@media (max-width: 820px) {
   .container {
      width: min(100% - 36px, 640px);
   }
   .blog-hero__content {
      grid-template-columns: 1fr;
      padding-top: 36px;
   }
   .hero-visual {
      min-height: 240px;
   }
   .blog-layout,
   .article-layout {
      grid-template-columns: 1fr;
   }
   .blog-sidebar,
   .article-sidebar {
      position: static;
      grid-template-columns: repeat(2, 1fr);
   }
   .blog-sidebar .sidebar-note,
   .article-sidebar .related-card {
      grid-column: 1 / -1;
   }
   .article-sidebar .toc-card {
      grid-column: 1 / -1;
   }
   .article-sidebar .sidebar-card,
   .article-sidebar .service-card {
      min-height: 100%;
   }
   .service-strip__inner {
      grid-template-columns: repeat(2, 1fr);
      padding: 25px 0;
   }
   .service-strip .button {
      min-width: 0;
   }
   .article-main > h1 {
      font-size: 39px;
   }
   .article-hero {
      min-height: 280px;
   }
}
@media (max-width: 560px) {
   body {
      font-size: 13px;
   }
   .container {
      width: calc(100% - 28px);
   }
   .blog-hero {
      padding-top: 18px;
   }
   .blog-hero__content {
      padding: 29px 0 45px;
   }
   .blog-hero h1 {
      font-size: 39px;
   }
   .hero-lead {
      font-size: 13px;
   }
   .section-heading {
      align-items: flex-start;
      flex-direction: column;
      gap: 7px;
   }
   .section-heading h2 {
      font-size: 31px;
   }
   .featured-article {
      grid-template-columns: 1fr;
   }
   .featured-article__image {
      min-height: 220px;
   }
   .featured-article__body {
      padding: 27px 25px 31px;
   }
   .featured-article h3 {
      font-size: 28px;
   }
   .articles-grid {
      grid-template-columns: 1fr;
   }
   .blog-sidebar,
   .article-sidebar {
      grid-template-columns: 1fr;
   }
   .blog-sidebar .sidebar-note,
   .article-sidebar .related-card {
      grid-column: auto;
   }
   .article-sidebar .toc-card {
      grid-column: auto;
   }
   .service-strip__inner {
      grid-template-columns: 1fr;
      gap: 16px;
   }
   .service-strip .button {
      width: 100%;
   }
   .article-page {
      padding-top: 20px;
   }
   .article-main > h1 {
      font-size: 33px;
   }
   .desktop-only {
      display: none;
   }
   .article-meta {
      gap: 8px 14px;
      font-size: 10px;
   }
   .article-hero {
      min-height: 220px;
   }
   .author-card {
      align-items: flex-start;
   }
   .author-avatar {
      flex-basis: 68px;
      width: 68px;
      height: 68px;
   }
   .author-card span {
      display: block;
      font-size: 10px;
   }
   .highlight-card {
      grid-template-columns: 39px 1fr 17px;
      min-height: 95px;
      padding: 12px;
   }
   .highlight-card .highlight-image {
      display: none;
   }
   .highlight-card b {
      font-size: 13px;
   }
   .highlight-card small {
      font-size: 10px;
   }
   .article-body h2 {
      font-size: 23px;
   }
   .article-body p,
   .article-body li {
      font-size: 13px;
   }
   .comparison-table > div {
      grid-template-columns: 90px 1fr;
      gap: 10px;
      padding: 12px;
      font-size: 10px;
   }
   .article-cta {
      align-items: flex-start;
      flex-direction: column;
      padding: 22px;
   }
   .article-cta .button {
      width: 100%;
   }
}