@import url("./blog-home.ca014c9daf0e.css");

.article-toolbar { background: #f8f8f8; }
.article-toolbar__inner { width: min(calc(100% - 42px), 1080px); min-height: 60px; margin-inline: auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px; position: relative; }
.article-toolbar__icons { display: flex; gap: 10px; }
.article-toolbar__icons button { display: grid; place-items: center; width: 35px; height: 35px; border: 0; border-radius: 50%; padding: 0; background: transparent; cursor: pointer; }
.article-toolbar__icons img { width: 35px; height: 35px; }
.article-toolbar__icons button:hover img { opacity: .8; }
.article-toolbar__back { display: none; }
.article-toolbar__status { position: absolute; right: 0; top: 100%; z-index: 1; background: #fff; font-size: 12px; }
.article-toolbar__status:empty { display: none; }
@media (max-width: 767px) {
  .article-toolbar { display: none; }
  .article-toolbar__inner { min-height: 40px; justify-content: flex-start; }
  .article-toolbar__icons { display: none; }
  .article-toolbar__back { display: grid; place-items: center; width: 28px; min-height: 32px; font-size: 28px; line-height: 1; }
}

.blog-page { font-size: 14px; line-height: 1.5; }
.blog-shell { width: min(calc(100% - 40px), 1200px); margin-inline: auto; }
.blog-page .site-footer { background: #f8f8f8; }
.blog-page h1, .blog-page h2, .blog-page h3 { font-family: var(--font-heading); }
.blog-page a:hover { text-decoration: underline; text-underline-offset: 4px; }
.blog-page .site-nav a:hover { text-decoration: none; }
.blog-page button:focus-visible, .blog-page select:focus-visible { outline: 2px solid #333; outline-offset: 3px; }
.blog-placeholder { background: #e5e5e5; border-radius: 10px; }
.blog-featured { display: grid; gap: 20px; padding-block: 24px; }
.blog-feature { border-radius: 12px; overflow: hidden; position: relative; }
.blog-page a.blog-feature:hover { text-decoration: none; }
.blog-feature img { transition: transform 280ms ease; }
.blog-feature__main-picture { position: absolute; inset: 0; }
.blog-feature__summary, .blog-article__lead { display: none; }
@media (hover: hover) {
  .blog-feature--main:hover .blog-feature__main-image { transform: scale(1.025); }
}
.blog-feature--main { aspect-ratio: 1084 / 775; display: flex; align-items: end; padding: 24px; background: #73716d; color: white; }
.blog-feature__main-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-feature--main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.4)); pointer-events: none; }
.blog-feature--main > div { position: relative; z-index: 1; width: 100%; }
.blog-feature--main h2 { font-size: 24px; font-weight: 500; line-height: 1.2; }
.blog-feature--main p { margin-top: 12px; max-width: 71.22%; font-size: 12px; color: rgba(255, 255, 255, .8); }
.blog-feature__tag { font-size: 12px; }
.blog-feature--main > .blog-feature__tag { position: absolute; z-index: 1; top: 24px; left: 24px; border-radius: 16px; padding: 4px 16px; background: rgba(0,0,0,.3); }
.blog-featured__side { display: grid; gap: 16px; }
.blog-feature--small { display: grid; grid-template-columns: 43% 57%; background: #f5f5f5; min-height: 160px; }
.blog-feature--small > div { position: relative; z-index: 1; padding: 44px 16px 20px; align-self: center; }
.blog-feature--small::after { content: ""; position: absolute; inset: 0 0 0 43%; background: linear-gradient(90deg, #f5f5f5, rgba(245,245,245,0) 32%); pointer-events: none; }
.blog-feature--small .blog-feature__tag { position: absolute; top: 0; left: 0; padding: 4px 12px; border-radius: 0 0 8px 0; background: #e9e9e9; }
.blog-feature--small h2 { font-size: 18px; line-height: 1.25; font-weight: 500; margin-top: 12px; }
.blog-feature__side-image { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.blog-press { background: linear-gradient(180deg, rgba(240, 240, 240, .19) 0%, #f0f0f0 100%); }
.blog-press__inner { display: grid; gap: 20px; padding-block: 24px; }
.blog-press .blog-outline-link { border-color: #bbb; background: rgba(255,255,255,.35); }
.blog-press h2 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.blog-press p { color: #666; font-size: 12px; max-width: 40ch; }
.blog-press .primary-pill { font-size: 12px; min-height: 36px; min-width: 0; }
.blog-press .primary-pill { border-radius: 5px; font-weight: 400; }
.blog-page .blog-press .primary-pill:hover { text-decoration: none; }
.blog-signup { display: flex; align-items: center; min-height: 36px; border: 1px solid #434343; padding-inline: 14px; }
.blog-signup input { min-width: 0; width: 100%; border: 0; padding: 8px 0; background: transparent; color: #111; font: inherit; font-size: 12px; }
.blog-signup input::placeholder { color: rgba(0, 0, 0, .4); }
.blog-signup input:focus { outline: none; box-shadow: none; border-radius: 0; }
.blog-signup:focus-within { border-color: #111; box-shadow: 0 0 0 1px #111; }
.blog-signup button { align-self: stretch; border: 0; padding: 0 0 0 12px; background: transparent; font: inherit; cursor: pointer; }
.blog-signup :disabled { opacity: .5; cursor: wait; }
.blog-press .blog-signup__terms { margin-top: 5px; font-size: 10px; color: rgba(0, 0, 0, .4); }
.blog-signup-group .footer-form-status { font-size: 12px; }
.blog-signup-group .footer-form-status:empty { display: none; }
.blog-outline-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #ccc; padding: 10px 16px; background: transparent; font-size: 12px; }
.blog-article-layout { display: grid; gap: 32px; padding-block: 24px 64px; }
.blog-toc { display: grid; gap: 16px; align-self: start; font-size: 12px; }
.blog-article { min-width: 0; max-width: 760px; }
.blog-article h1 { font-size: 30px; font-weight: 600; line-height: 1.2; }
.blog-article .blog-article__meta { font-size: 12px; color: #999; margin-top: 12px; }
.blog-article > p { margin-top: 24px; }
.blog-article > section { margin-top: 40px; scroll-margin-top: 112px; }
.blog-article h2 { font-size: 22px; line-height: 1.3; font-weight: 600; margin-bottom: 20px; }
.blog-article p { font-size: 14px; line-height: 1.6; }
.blog-not-found { padding-block: 80px; }
.blog-not-found p { margin-block: 24px; }
@media (max-width: 767px) {
  .page.blog-page { padding-top: 56px; }
  .blog-page > .site-header--hero-mobile { min-height: 56px; padding: 6px 21px; }
  .blog-page .site-header--hero-mobile .site-logo img { height: 11px; }
  .blog-page > .site-header--hero-mobile[data-open="true"] { min-height: 100dvh; padding: 16px var(--header-mobile-inset) 0; }
  .blog-page .site-header--hero-mobile-scrolled:not([data-open="true"]) .site-header__inner { grid-template-columns: 1fr auto auto; }
  .blog-page .site-header--hero-mobile-scrolled:not([data-open="true"]) .mobile-menu-button { grid-column: 3; }
  .blog-page .site-header--hero-mobile-scrolled:not([data-open="true"]) .site-header__inner > .primary-pill { display: inline-flex; grid-column: 2; grid-row: 1; min-width: 72px; min-height: 28px; padding: 0 12px; font-size: 10px; background: #000; color: #fff; }
  .blog-page { font-family: "Blog Manrope", var(--font-heading); font-size: 12px; }
  .blog-page > .site-footer { width: 100%; margin-inline: 0; }
  .blog-page h1, .blog-page h2, .blog-page h3 { font-family: "Blog Manrope", var(--font-heading); }
  .blog-page .blog-shell { width: calc(100% - 42px); }
  .blog-featured { display: block; padding-block: 16px 24px; }
  .blog-feature--main { display: flex; flex-direction: column; align-items: stretch; aspect-ratio: auto; padding: 0; border-radius: 0; overflow: visible; background: transparent; color: #000; }
  .blog-feature__main-picture { position: relative; display: block; aspect-ratio: 332.667 / 218.667; overflow: hidden; border-radius: 10px; margin-bottom: 10px; }
  .blog-feature__main-image { position: absolute; object-fit: cover; }
  .blog-feature--main::after, .blog-feature--small::after { content: none; }
  .blog-feature--main > .blog-feature__tag { position: static; align-self: start; padding: 0; margin-bottom: 5px; border-radius: 0; background: transparent; }
  .blog-feature__tag { color: #0052d1; font-size: 10px; line-height: 1.1; }
  .blog-feature--main h2, .blog-feature--small h2 { font-size: 14px; font-weight: 600; line-height: 19px; }
  .blog-feature--main h2 br { display: none; }
  .blog-feature--main p { max-width: none; margin-top: 5px; color: rgba(0,0,0,.6); font-size: 12px; line-height: 16px; }
  .blog-featured__side { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
  .blog-feature--small { display: flex; flex-direction: column; min-height: 0; background: transparent; border-radius: 0; }
  .blog-feature__side-image { order: -1; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin-bottom: 5px; }
  .blog-feature--small > div { width: 100%; padding: 0; align-self: stretch; }
  .blog-feature--small .blog-feature__tag { position: static; background: transparent; padding: 0; }
  .blog-feature--small h2 { margin-top: 5px; }
  .blog-feature--small .blog-feature__summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 12px; line-height: 16px; color: rgba(0,0,0,.6); margin-top: 5px; }
  .blog-press__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; padding-block: 16px 20px; }
  .blog-press h2 { font-size: 12px; line-height: 17px; margin-bottom: 3px; }
  .blog-press p { font-size: 10px; line-height: 14px; }
  .blog-press__inner > div:nth-child(3), .blog-press__inner > .primary-pill { grid-column: 1 / -1; }
  .blog-press__inner > div:nth-child(3) p { font-size: 12px; line-height: 16px; max-width: none; }
  .blog-press .primary-pill { justify-self: start; }
  .blog-signup { padding-inline: 8px; min-height: 28px; }
  .blog-signup input { font-size: 10px; padding-block: 4px; }
  .blog-press .blog-signup__terms { font-size: 8px; line-height: 1.4; }
  .blog-article-layout { display: block; padding-block: 16px 24px; }
  .blog-toc { display: none; }
  .blog-article { max-width: none; }
  .blog-article h1 { font-size: 24px; line-height: 1.375; font-weight: 700; }
  .blog-article .blog-article__meta { font-size: 12px; line-height: 16px; margin-top: 4px; }
  .blog-article__lead { display: block; aspect-ratio: 332.667 / 218.667; border-radius: 10px; margin-top: 24px; background: url("/about-us/images/human-design-sleeper.webp") center / cover no-repeat; }
  .blog-article > p { margin-top: 20px; }
  .blog-article > section { margin-top: 24px; scroll-margin-top: 90px; }
  .blog-article h2 { font-size: 14px; line-height: 19px; margin-bottom: 10px; }
  .blog-article p { font-size: 12px; line-height: 16px; }
}
@media (min-width: 768px) {
  .blog-featured { grid-template-columns: 1.073fr 1fr; align-items: start; padding-block: 24px 32px; }
  .blog-featured__side { gap: 20px; }
  .blog-feature--small { min-height: 0; aspect-ratio: 1010 / 334; }
  .blog-feature--small > div { position: static; padding-top: 32px; }
  .blog-feature--small h2 { position: relative; z-index: 1; margin-top: 0; }
  .blog-feature--small h2 { font-size: 18px; }
  .blog-press__inner { grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: 24px; }
  .blog-article-layout { grid-template-columns: 160px minmax(0, 760px); gap: 64px; justify-content: center; }
  .blog-toc { position: sticky; top: 120px; }
}
@media (min-width: 1280px) {
  .blog-shell { width: min(calc(100% - 120px), 1200px); }
  .blog-feature--main h2 { font-size: 32px; }
  .blog-feature--small h2 { font-size: 24px; }
  .blog-feature--small > div { padding: 40px 20px 20px; }
  .blog-article h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-feature:hover > img { transform: none; }
}
@font-face {
  font-family: "Blog Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/manrope-regular.ttf") format("truetype");
}

html[lang="zh-CN"] .blog-article p { font-size: 16px; line-height: 1.8; }
html[lang="zh-CN"] .blog-article h2 { font-size: 22px; line-height: 1.5; }

@media (max-width: 767px) {
  .blog-article #article-section-0 > h2 { display: block; }
}


/* Editorial detail pages: Figma 2560px desktop at half scale; 375px mobile at 1x. */
@font-face { font-family: "Editorial Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope-variable.ttf") format("truetype"); }
.snoring-layout { font-family: "Editorial Manrope", var(--font-heading); font-synthesis: none; }
.snoring-layout h1, .snoring-layout h2, .snoring-layout h3 { font-family: inherit; }
.snoring-article { max-width: none; }
.snoring-article h1 { font-size: 32px; line-height: 42px; font-weight: 700; }
.snoring-article > section { display: flex; flex-direction: column; gap: 16px; margin-top: 36px; }
.snoring-article h2, html[lang="zh-CN"] .snoring-article h2 { font-size: 24px; line-height: 34px; font-weight: 700; margin: 0; }
.snoring-article h3 { font-size: 18px; line-height: 26px; font-weight: 700; margin: 0; }
.snoring-article p, html[lang="zh-CN"] .snoring-article p { font-size: 14px; line-height: 25px; font-weight: 500; color: #262629; margin: 0; overflow-wrap: anywhere; }
.editorial-subsection { display: flex; flex-direction: column; gap: 12px; }
.snoring-article .snoring-note { color: #6b6b6b; font-size: 12px; line-height: 20px; }
.snoring-article a { text-decoration: underline; text-underline-offset: 3px; }
html .snoring-article p.snoring-author-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; line-height: 16.315px; font-weight: 400; color: rgba(0,0,0,.4); margin: 12px 0 0; }
.snoring-author-avatar { display: block; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: #000; object-fit: contain; }
.snoring-figure { margin: 0; }
.snoring-article a { text-decoration-skip-ink: none; }
.snoring-image { display: block; width: 100%; height: auto; border-radius: 8px; }
.founder-story { container-type: inline-size; }
.founder-story .snoring-image { border-radius: 1.428571cqw; }
.founder-story .snoring-image[src$="/controls.webp"] { width: 72.285714%; margin-inline: auto; }
.founder-story .snoring-image[src$="/privacy-switch.webp"] { width: 48.872576%; margin-inline: auto; border-radius: 0; }
.founder-story .snoring-image[src$="/nighttime-awakenings.webp"] { aspect-ratio: 1400 / 863; object-fit: cover; object-position: top; }
.founder-story .snoring-image[src$="/bedroom.webp"] { aspect-ratio: 1400 / 600; object-fit: cover; }
.founder-story .editorial-gallery { gap: 1.232071%; grid-template-columns: repeat(2, 49.282353%); aspect-ratio: 1400 / 540; overflow: hidden; }
.founder-story .editorial-gallery .snoring-image { border-radius: 6.25% / 8.333333%; }
@media (max-width: 767px) {
  .founder-story .snoring-image[src$="/controls.webp"], .founder-story .snoring-image[src$="/privacy-switch.webp"] { width: 100%; }
  .founder-story .editorial-gallery { grid-template-columns: minmax(0, 1fr); gap: 12px; aspect-ratio: auto; }
}
.snoring-toc { align-self: start; }
.snoring-toc a, .snoring-mobile-toc a { display: block; text-decoration: none; }
.snoring-toc a:hover, .snoring-mobile-toc a:hover { text-decoration: underline; }
.snoring-toc span { font-variant-numeric: tabular-nums; }
.snoring-mobile-toc { display: none; }
.editorial-table-wrap { width: 100%; margin: 0; }
.editorial-table { border-collapse: collapse; table-layout: fixed; width: 100%; font-size: 12px; line-height: 19px; font-weight: 500; color: #262629; }
.editorial-table th, .editorial-table td { border: .5px solid #dbded9; padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; white-space: pre-line; }
.editorial-table th { background: #f2f2f0; color: #000; font-weight: 700; }
.editorial-table th:first-child { width: 32.14%; }
.editorial-table:has(th:nth-child(3)) th:first-child { width: 8.5714%; }
.editorial-table:has(th:nth-child(3)) th:nth-child(2) { width: 22.8571%; }
.editorial-gallery { display: grid; grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr)); gap: 12px; margin: 0; }
.editorial-gallery figure { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.editorial-gallery figcaption { display: flex; flex-direction: column; gap: 0; }
.editorial-image-placeholder { width: 100%; display: grid; place-items: center; background: #ededed; border-radius: 8px; text-align: center; color: #666; font-size: 12px; }
.snoring-article .editorial-gallery figcaption p { font-size: 12px; line-height: 18px; }
@media (min-width: 768px) {
  .blog-page .snoring-layout { width: min(100%, 1280px); margin-inline: auto; grid-template-columns: minmax(0, 475fr) minmax(0, 1400fr); gap: 3.90625%; padding: 60px 15.0390625% 64px 7.8125%; justify-content: normal; }
  .snoring-layout .snoring-toc { padding-left: 16px; padding-right: 12px; gap: 12px; font-size: 12px; line-height: 19px; color: #000; }
  .snoring-toc strong { font-size: 14px; line-height: 20px; font-weight: 600; margin: 0; }
}
@media (min-width: 1280px) {
  .blog-page .snoring-layout { padding-left: 100px; padding-right: 192.5px; column-gap: 50px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .blog-page .snoring-layout { padding-inline: 24px; column-gap: 24px; grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr); }
  .snoring-layout .snoring-toc { padding-left: 0; }
}
@media (max-width: 767px) {
  .blog-page .snoring-layout { width: calc(100% - 42.334px); padding-block: 14px 32px; }
  .snoring-article h1 { font-size: 24px; line-height: 32px; }
  html .snoring-article p.snoring-author-meta { gap: 6px; line-height: 18px; }
  .snoring-mobile-toc { display: grid; gap: 8px; margin-block: 32px 0; font-size: 12px; line-height: 18px; font-weight: 400; }
  .snoring-mobile-toc strong { font-size: 14px; line-height: 21px; font-weight: 600; }
  .snoring-article > section { margin-top: 32px; gap: 10.667px; }
  .snoring-article h2, html[lang="zh-CN"] .snoring-article h2, .snoring-article h3 { font-size: 14px; line-height: 21px; font-weight: 600; }
  .snoring-article p, html[lang="zh-CN"] .snoring-article p { font-size: 12px; line-height: 18px; font-weight: 400; }
  .snoring-article .snoring-note { font-size: 12px; line-height: 18px; }
  .editorial-subsection { gap: 10.667px; }
  .editorial-table { font-size: 10px; line-height: 15px; font-weight: 400; }
  .editorial-table th, .editorial-table td { border-width: 1px; padding: 8px 6px; }
  .editorial-table th:first-child { width: 32.4649%; }
  .editorial-table:has(th:nth-child(3)) th:first-child { width: 10.2204%; }
  .editorial-table:has(th:nth-child(3)) th:nth-child(2) { width: 24.9499%; }
  .editorial-gallery { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .editorial-gallery figure { gap: 10.667px; }
}

html .snoring-article p.snoring-note { font-size: 12px; line-height: 20px; color: #6b6b6b; }
@media (max-width: 767px) { html .snoring-article p.snoring-note { line-height: 18px; } }

.snoring-article h1 { white-space: pre-line; }
.snoring-article .editorial-intro { margin-top: 36px; }
@media (max-width: 767px) { .snoring-article .editorial-intro { margin-top: 32px; } .editorial-image-placeholder { aspect-ratio: var(--mobile-image-ratio); } }

.editorial-image-placeholder { aspect-ratio: var(--image-ratio); }
@media (max-width: 767px) { .editorial-image-placeholder { aspect-ratio: var(--mobile-image-ratio); } }

/* Research article: preserve editorial line breaks and paragraph grouping. */
.research-article h2 { white-space: pre-line; }
.editorial-paragraph-group { display: flex; flex-direction: column; gap: 12px; }
.research-article .editorial-compact-section { gap: 10px; }
html .research-article .editorial-compact-section h2 { font-size: 18px; line-height: 25px; }
@media (max-width: 767px) {
  .editorial-paragraph-group { gap: 10.667px; }
  html .research-article .editorial-compact-section h2 { font-size: 14px; line-height: 21px; }
  .editorial-mobile-hidden { display: none; }
}

/* Explicit vertical layout prevents paragraph resets/margin collapse from closing gaps. */
.research-article { display: flex; flex-direction: column; gap: 36px; }
.research-article > header { display: flex; flex-direction: column; gap: 12px; }
html .research-article > header > p.snoring-author-meta { margin: 0; }
html .research-article > p.editorial-intro { margin: 0; }
.research-article > section { margin-top: 0; }
.research-article > .snoring-mobile-toc { margin: 0; }
@media (max-width: 767px) { .research-article { gap: 32px; } }

/* Optical compensation for thin system CJK body text on desktop and mobile. */
.snoring-article:lang(zh-CN) section p:not(.snoring-note),
.snoring-article:lang(zh-CN) .editorial-intro-blocks p,
.snoring-article:lang(zh-CN) > p.editorial-intro,
.snoring-article:lang(zh-CN) .editorial-table td {
  -webkit-text-stroke: .12px currentColor;
  paint-order: stroke fill;
}

.research-article .editorial-title-blocks { display: flex; flex-direction: column; gap: 0; white-space: normal; }
@media (max-width: 767px) { .research-article .editorial-title-blocks { gap: 10.667px; } }

.editorial-intro-blocks { display: flex; flex-direction: column; gap: 16px; }
.editorial-visual-group { display: flex; flex-direction: column; gap: 12px; }
.editorial-mobile-visual { display: none; }
@media (max-width: 767px) {
  .editorial-intro-blocks { gap: 10.667px; }
  .editorial-visual-group { gap: 16px; }
  .editorial-mobile-visual { display: block; }
  .editorial-desktop-visual { display: none; }
}

.research-article .editorial-heading-blocks { display: flex; flex-direction: column; gap: 0; white-space: normal; }
@media (max-width: 767px) { .research-article .editorial-heading-blocks { gap: 10.667px; } }

/* CES article 5 uses 24px Figma section gaps (12px at desktop half scale). */
.ces-press > section { gap: 12px; }
.ces-press .editorial-gallery { gap: .714286%; }
html .ces-press > header > p.editorial-subtitle { font-size: 12px; line-height: 18px; font-weight: 500; margin: 0; }
@media (max-width: 767px) {
  .ces-press > section { gap: 10.667px; }
  .ces-press .editorial-gallery { gap: 10.667px; }
  html .ces-press > header > p.editorial-subtitle { font-weight: 500; }
}

.ces-press .snoring-author-meta a { text-decoration: none; }
.ces-press .snoring-author-meta a:hover { text-decoration: underline; }

/* Article study graphic: reuse the Science paper with live, readable score labels. */
.research-comparison { margin: 0; width: 100%; container-type: inline-size; }
.research-comparison__inner { aspect-ratio: 1400 / 534; display: grid; grid-template-columns: 39.1892% 54.3659%; gap: 6.4449%; align-items: center; padding: 0 15.642857%; }
.research-comparison img { display: block; width: 100%; height: auto; }
.research-comparison figcaption { min-width: 0; display: flex; flex-direction: column; gap: 4.84836cqw; }
html .research-article .research-comparison figcaption > p { font-size: 2.2377cqw; line-height: 1.2; font-weight: 300; margin: 0; -webkit-text-stroke: 0; }
.research-comparison ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8cqw; }
.research-comparison li { display: flex; align-items: center; gap: .6cqw; font-size: 1.8cqw; line-height: 1.2; color: #777; }
.research-comparison li:first-child { color: #262629; }
.research-comparison li > span:first-child { flex: 0 0 34%; white-space: nowrap; }
.research-comparison__bar { flex: 0 0 calc(var(--score-width) * .4); height: 1.8cqw; border-radius: 2cqw; background: #e1d7c2; }
.research-comparison li:first-child .research-comparison__bar { background: #9a897d; }

/* Shared article ending: Figma 2025:296 and mobile 2046:2079. */
.article-end { container-type: inline-size; border-top: 1px solid #ddd; margin-top: 48px; padding-top: 32px; display: grid; gap: 32px; }
.research-article > .article-end { margin-top: 0; }
.article-end__top { display: grid; grid-template-columns: 35.2% minmax(0, 53.714286%); justify-content: space-between; align-items: center; }
html .blog-article .article-end h2 { display: block; font-size: 14px; line-height: 25px; font-weight: 700; margin: 0; }
html .blog-article .article-end p { margin: 0; font-weight: 400; -webkit-text-stroke: 0; }
.article-end__icons { display: flex; justify-content: space-between; margin-top: 20px; }
.article-end__icons button { position: relative; width: 4.703857cqw; height: 4.703857cqw; padding: 0; border: 0; border-radius: 50%; background: #000; cursor: pointer; }
.article-end__icons img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.article-end__icons button:focus-visible { outline: 2px solid #0052d1; outline-offset: 4px; }
.article-end__icons button:hover { opacity: .75; }
.article-end__copy-status:empty { display: none; }
html .blog-article .article-end__copy-status { font-size: 11px; line-height: 16px; margin-top: 8px; }
.article-end__brand { display: flex; align-items: center; gap: 2.285714cqw; border: 1px solid #d9d9d9; border-radius: 8px; padding: 2.857143cqw; min-width: 0; }
.article-end__brand > img { width: 8.571429cqw; height: 8.571429cqw; flex: none; }
.article-end__brand > div { min-width: 0; }
.article-end__brand-name { color: #262629; font-size: 1.428571cqw; line-height: 2cqw; font-weight: 600; }
html .blog-article .article-end__brand p { font-size: 1.142857cqw; line-height: 1.714286cqw; color: #262629; margin-top: .857143cqw; }
.article-end__subscribe { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-right: 2.785714%; }
.article-end__subscribe > div:first-child { max-width: 32.5%; }
html .blog-article .article-end__subscribe > div > p { font-size: 11px; line-height: 16px; color: #999; margin-top: 4px; }
.article-end__subscribe .blog-signup-group { width: 30.285714%; min-width: 0; }
.article-end .blog-signup { min-height: 30px; padding-inline: 15px; }
.article-end .blog-signup input { font-size: 11px; padding-block: 5px; }
.article-end .blog-signup button { font-size: 22px; color: #777; }
html .blog-article .article-end .footer-form-status { font-size: 11px; line-height: 16px; }
@media (max-width: 767px) {
  .article-end { margin-top: 24px; padding-top: 24px; gap: 24px; }
  .article-end__top { display: block; }
  .article-end__brand { display: none; }
  html .blog-article .article-end__share h2 { font-size: 14px; line-height: 16.667px; }
  .article-end__icons { width: 200px; margin-top: 13.333px; }
  .article-end__icons button { width: 26.706px; height: 26.706px; }
  .article-end__icons button::after { content: ""; position: absolute; inset: -8px; }
  .article-end__subscribe { flex-direction: column; align-items: start; padding: 0; gap: 13.333px; }
  .article-end__subscribe > div:first-child { max-width: 100%; }
  html .blog-article .article-end__subscribe h2 { font-size: 12px; line-height: 16.667px; }
  html .blog-article .article-end__subscribe > div > p { font-size: 10px; line-height: 14px; margin-top: 3px; }
  .article-end__subscribe .blog-signup-group { width: min(100%, 212px); }
  .article-end .blog-signup { min-height: 24px; padding-inline: 10px; }
  .article-end .blog-signup input { font-size: 10px; padding-block: 3px; }
  .article-end .blog-signup button { font-size: 18px; }
}