:root {
  --color-primary: #4d5ad1;
  --color-primary-dark: #3f4fbe;
  --color-secondary: #d88e2f;
  --color-text: #2f3137;
  --color-text-soft: #666a73;
  --color-border: #e4ddd3;
  --color-surface: #ffffff;
  --color-surface-alt: #f7f4ef;
  --color-surface-soft: #f3eee7;
  --color-surface-dark: #262a33;
  --radius-xl: 36px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 18px 40px rgba(28, 34, 48, 0.08);
  --shadow-soft: 0 10px 24px rgba(32, 38, 54, 0.06);
  --container-width: 1180px;
}

@font-face {
  font-family: "Albert Sans";
  src: url("https://top5-mattresses.com/app/themes/topsites/public/fonts/albert-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Albert Sans";
  src: url("https://top5-mattresses.com/app/themes/topsites/public/fonts/albert-sans-semibold.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* Back pain lineup clone */
body.bp-page {
  margin: 0;
  color: #323738;
  background: #fff;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.bp-page img {
  display: block;
}

.bp-container {
  width: min(calc(100% - 80px), 1144px);
  margin: 0 auto;
}

.bp-disclaimer {
  position: relative;
  z-index: 21;
  min-height: 23px;
  padding: 3px 16px 4px;
  border-bottom: 1px solid rgba(25, 60, 30, 0.09);
  background: #eee;
  color: #193c1e;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
}

.bp-disclaimer button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.bp-header {
  position: relative;
  z-index: 20;
  height: 58px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.bp-header__inner {
  display: flex;
  align-items: center;
  height: 58px;
  padding: 0;
}

.bp-logo img {
  width: 149px;
  height: 32px;
  object-fit: contain;
  object-position: left center;
}

.bp-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.bp-nav__item {
  position: relative;
}

.bp-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  color: #303436;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.bp-nav a.is-active,
.bp-nav__item:hover > a,
.bp-nav__item:focus-within > a {
  background: #f4f5f7;
  color: #25439a;
}

.bp-nav__chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.16s ease;
}

.bp-nav__item:hover .bp-nav__chevron,
.bp-nav__item:focus-within .bp-nav__chevron {
  transform: translateY(2px) rotate(225deg);
}

.bp-nav__dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(154px, 1fr));
  gap: 4px 10px;
  width: 380px;
  padding: 16px;
  border: 1px solid rgba(226, 226, 226, 0.92);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.bp-nav__dropdown--reviews {
  grid-template-columns: 1fr;
  width: 220px;
}

.bp-nav__item:hover .bp-nav__dropdown,
.bp-nav__item:focus-within .bp-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bp-nav__dropdown a {
  justify-content: flex-start;
  height: auto;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #323738;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.bp-nav__dropdown a:hover,
.bp-nav__dropdown a:focus-visible {
  background: #f0f2fa;
  color: #25439a;
}

.bp-menu {
  display: none;
}

.bp-mobile-nav {
  display: none;
}

.bp-hero {
  position: relative;
  min-height: 266px;
  overflow: hidden;
  background: rgb(249, 244, 238);
}

.bp-hero__inner {
  position: relative;
  z-index: 2;
}

.bp-hero__copy {
  max-width: 560px;
  padding: 46px 0 44px;
}

.bp-hero h1 {
  margin: 0 0 8px;
  max-width: 520px;
  color: #323738;
  font-size: 36px;
  line-height: 40px;
  font-weight: 800;
}

.bp-hero p {
  margin: 0;
  max-width: 515px;
  color: #323738;
  font-size: 17px;
  line-height: 20px;
}

.bp-hero strong {
  display: block;
  margin-top: 8px;
  color: #d37b12;
  font-size: 14px;
  line-height: 20px;
}

.bp-hero__image {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(50vw - 53px);
  height: 100%;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}

.bp-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bp-tabs {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-top: -14px;
  padding: 0 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
  scrollbar-width: thin;
}

.bp-tabs.bp-container {
  width: min(calc(100% - 80px), 1240px);
}

.bp-tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  border-radius: 10px;
  color: #323738;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.bp-tabs a.is-active {
  background: #eef1fb;
  color: #25439a;
  font-weight: 500;
}

.bp-lineup {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 38px;
  margin-bottom: 40px;
}

.bp-card {
  position: relative;
  display: grid;
  grid-template-columns: 174px minmax(260px, 1fr) 148px 196px;
  gap: 16px;
  align-items: center;
  min-height: 190px;
  padding: 32px 24px 24px 16px;
  border: 1px solid rgba(226, 226, 226, 0.92);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}

.bp-card.is-promoted {
  border-color: #d97913;
}

.bp-card__rank {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 20px;
  overflow: hidden;
  border-top-left-radius: 16px;
  border-bottom-right-radius: 10px;
}

.bp-card__rank span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 35px;
  height: 20px;
  background: #e6e8ef;
  color: #111;
  font-size: 12px;
  line-height: 20px;
}

.bp-card__rank strong {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 16px;
  background: #2983d6;
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  font-weight: 800;
  text-transform: uppercase;
}

.bp-card__media {
  overflow: hidden;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background: #fff;
}

.bp-card__product {
  width: 100%;
  height: 98px;
  object-fit: cover;
}

.bp-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 5px 12px;
  background: #fff;
}

.bp-card__logo img {
  max-width: 130px;
  max-height: 27px;
  object-fit: contain;
}

.bp-card__details {
  align-self: start;
}

.bp-card__details h2 {
  margin: 0 0 8px;
  color: #323738;
  font-size: 17px;
  line-height: 22px;
  font-weight: 800;
}

.bp-offer {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  padding: 3px 7px;
  border: 1px dashed #d37b12;
  border-radius: 8px;
  color: #323738;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
}

.bp-card__details ul {
  display: grid;
  gap: 2px;
  margin: 8px 0 8px;
  padding: 0;
  list-style: none;
}

.bp-card__details li {
  position: relative;
  padding-left: 19px;
  color: #757575;
  font-size: 14px;
  line-height: 19px;
}

.bp-card__details li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 0;
  color: #35a853;
  font-size: 12px;
  line-height: 19px;
}

.bp-review,
.bp-site {
  color: #3158ff;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.bp-score-wrap {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.bp-award {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 130px;
  height: 20px;
  padding: 0 12px;
  border-radius: 5px;
  background: #db8d25;
  color: #fff;
  font-size: 10px;
  line-height: 20px;
  font-weight: 800;
  text-transform: uppercase;
}

.bp-award span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
  color: #ffb800;
  font-size: 12px;
}

.bp-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 102px;
  height: 102px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #fff;
}

.bp-score strong {
  color: #323738;
  font-size: 30px;
  line-height: 34px;
  font-weight: 800;
}

.bp-score span {
  margin-top: 4px;
  color: #323738;
  font-size: 12px;
  line-height: 15px;
}

.bp-score em {
  color: #ffb800;
  font-size: 13px;
  font-style: normal;
  letter-spacing: 1px;
  line-height: 16px;
}

.bp-card__actions {
  display: grid;
  justify-items: center;
  gap: 20px;
}

.bp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 172px;
  height: 40px;
  border-radius: 6px;
  background: #344a9a;
  box-shadow: 0 4px 10px rgba(34, 57, 133, 0.32);
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  font-weight: 800;
}

.bp-footnote {
  margin: -4px 0 0;
  color: #323738;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.bp-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
  padding-bottom: 72px;
}

.bp-content--wide {
  display: block;
}

.bp-article {
  max-width: 650px;
}

.bp-article--wide {
  max-width: none;
}

.bp-article h2 {
  margin: 0 0 2px;
  color: #323738;
  font-size: 28px;
  line-height: 34px;
  font-weight: 800;
}

.bp-article h3 {
  margin: 18px 0 8px;
  color: #323738;
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
}

.bp-article p {
  margin: 0 0 12px;
  color: #323738;
  font-size: 16px;
  line-height: 26px;
}

.bp-article img {
  width: 100%;
  margin: 22px 0;
  border-radius: 14px;
  object-fit: cover;
}

.bp-ranking-block,
.bp-shortcode-lineup {
  margin: 56px 0;
}

.bp-ranking-block--plain {
  width: 100%;
}

.bp-ranking-block--soft,
.bp-shortcode-lineup--soft {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 54px max(16px, calc((100vw - 1110px) / 2));
  background: #f6efe7;
}

.bp-ranking-block__title,
.bp-shortcode-lineup__title {
  margin: 0 0 28px;
  color: #323738;
  font-size: 32px;
  line-height: 38px;
  font-weight: 800;
  text-align: center;
}

.bp-ranking-block .bp-lineup,
.bp-shortcode-lineup .bp-lineup {
  margin: 0;
}

.bp-ranking-block .bp-card,
.bp-shortcode-lineup .bp-card {
  max-width: none;
}

.bp-sidebar {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 24px;
}

.bp-subscribe,
.bp-related {
  padding: 24px;
  border-radius: 8px;
  background: #edeff8;
}

.bp-subscribe h2,
.bp-related h2 {
  margin: 0 0 14px;
  color: #323738;
  font-size: 24px;
  line-height: 30px;
  font-weight: 800;
}

.bp-subscribe p {
  margin: 0 0 14px;
  color: #323738;
  font-size: 16px;
  line-height: 24px;
}

.bp-subscribe input {
  width: 100%;
  height: 46px;
  margin-bottom: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #193c1e;
  font-size: 14px;
}

.bp-subscribe button {
  width: 100%;
  height: 44px;
  margin-top: 4px;
  border: 0;
  border-radius: 6px;
  background: #344a9a;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.bp-subscribe small {
  display: block;
  margin-top: 14px;
  color: #323738;
  font-size: 12px;
  line-height: 18px;
}

.bp-subscribe small a {
  color: #3158ff;
}

.bp-related {
  background: rgba(44, 56, 98, 0.02);
}

.bp-related a {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  color: #323738;
  font-size: 14px;
  font-weight: 700;
}

.bp-related img {
  width: 100%;
  height: 118px;
  border-radius: 8px;
  object-fit: cover;
}

.bp-top {
  position: fixed;
  right: 16px;
  bottom: 56px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: #344a9a;
  color: #fff;
  font-size: 31px;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(34, 57, 133, 0.3);
}

@media (max-width: 900px) {
  .bp-container {
    width: min(calc(100% - 32px), 430px);
  }

  .bp-disclaimer {
    font-size: 12px;
    line-height: 14px;
  }

  .bp-header,
  .bp-header__inner {
    height: 48px;
  }

  .bp-logo img {
    width: 130px;
  }

  .bp-nav {
    display: none;
  }

  .bp-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 0;
    background: transparent;
  }

  .bp-menu span,
  .bp-menu::before,
  .bp-menu::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #323738;
  }

  .bp-menu {
    flex-direction: column;
    gap: 5px;
  }

  .bp-mobile-nav {
    display: grid;
    gap: 0;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 0 16px 14px;
    border-top: 1px solid rgba(25, 60, 30, 0.09);
    background: #fff;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
  }

  .bp-mobile-nav[hidden] {
    display: none;
  }

  .bp-mobile-nav a,
  .bp-mobile-nav summary {
    display: block;
    padding: 11px 0;
    color: #323738;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
  }

  .bp-mobile-nav details {
    border-bottom: 1px solid #eeeeef;
  }

  .bp-mobile-nav details a {
    padding-left: 16px;
    color: #5f6368;
    font-size: 14px;
    font-weight: 500;
  }

  .bp-hero {
    min-height: 294px;
  }

  .bp-hero__copy {
    padding: 32px 0 112px;
  }

  .bp-hero h1 {
    font-size: 32px;
    line-height: 36px;
  }

  .bp-hero p {
    font-size: 15px;
    line-height: 20px;
  }

  .bp-hero__image {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 104px;
    clip-path: none;
  }

  .bp-tabs {
    display: flex;
    gap: 8px;
    width: calc(100% - 32px);
    overflow-x: auto;
    justify-content: flex-start;
    margin-top: -22px;
    border-radius: 14px;
  }

  .bp-lineup {
    margin-top: 28px;
  }

  .bp-card {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 430px;
    padding: 34px 16px 16px;
  }

  .bp-card__media {
    display: grid;
    grid-template-columns: 148px 1fr;
    align-items: center;
  }

  .bp-card__product {
    height: 104px;
  }

  .bp-card__logo {
    height: 104px;
  }

  .bp-score-wrap {
    grid-template-columns: auto auto;
    justify-content: center;
  }

  .bp-card__actions {
    gap: 12px;
  }

  .bp-button {
    width: 100%;
  }

  .bp-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .bp-ranking-block,
  .bp-shortcode-lineup {
    margin: 40px 0;
  }

  .bp-ranking-block--soft,
  .bp-shortcode-lineup--soft {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .bp-ranking-block__title,
  .bp-shortcode-lineup__title {
    margin-bottom: 22px;
    font-size: 28px;
    line-height: 34px;
  }

  .bp-sidebar {
    position: static;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Albert Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text);
  background: #fff;
}

img {
  max-width: 100%;
  height: auto;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

.container {
  width: min(calc(100% - 136px), var(--container-width));
  margin: 0 auto;
}

.site-shell {
  min-height: 100vh;
}

.site-main section:not(.homepage-hero) {
  padding: 52px 0;
}

.homepage-section {
  position: relative;
}

.section-center {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 28px;
}

.section-kicker,
.section-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: #6372d9;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.homepage-heading,
.section-title {
  margin: 0;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.18;
  font-weight: 700;
  color: #2f3137;
}

.comparison-lead,
.section-description {
  margin: 12px auto 0;
  max-width: 680px;
  color: var(--color-text-soft);
  font-size: 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.2s ease, background 0.2s ease, filter 0.2s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button--primary {
  color: #fff;
  background: var(--color-primary);
}

.button--primary:hover {
  background: var(--color-primary-dark);
}

.button--ghost {
  color: #5b5f68;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.94);
}

.button--block {
  width: 100%;
}

/* 顶部说明与导航 */
.disclaimer {
  position: relative;
  padding: 3px 0 4px;
  background: #ededeb;
  border-bottom: 1px solid #ddddda;
  font-size: 14px;
  line-height: 16px;
  color: #193c1e;
}

.disclaimer__inner {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.disclaimer__toggle {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.disclaimer__panel {
  border-top: 1px solid #ddddda;
  background: #fff;
}

.disclaimer__content {
  padding: 18px 0;
  max-width: 880px;
  color: var(--color-text-soft);
  font-size: 13px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.home .site-header {
  border-bottom-color: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  gap: 16px;
}

.site-header__inner.container {
  width: min(calc(100% - 80px), 1144px);
  max-width: 1144px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
}

.site-logo__image {
  display: block;
  width: 149px;
  height: 32px;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #282a2f;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

.site-nav__item {
  position: relative;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  transition: background 0.16s ease, color 0.16s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link.is-active,
.site-nav__item:hover > .site-nav__link,
.site-nav__item:focus-within > .site-nav__link {
  background: #f4f5f7;
  color: #25439a;
}

.site-nav__chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.16s ease;
}

.site-nav__item:hover .site-nav__chevron,
.site-nav__item:focus-within .site-nav__chevron {
  transform: translateY(2px) rotate(225deg);
}

.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: -16px;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 0;
  width: 440px;
  padding: 12px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  border: 1px solid #e4e4e5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(28, 34, 48, 0.12);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.site-nav__dropdown--reviews {
  width: 240px;
  grid-template-columns: 1fr;
}

.site-nav__item:hover .site-nav__dropdown,
.site-nav__item:focus-within .site-nav__dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.site-nav__dropdown a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #323738;
  font-size: 14px;
  font-weight: 500;
}

.site-nav__dropdown a:hover {
  background: #f0f2fa;
  color: #25439a;
}

.site-menu-toggle,
.site-mobile-nav {
  display: none;
}

/* 首页 Hero */
.homepage-hero {
  padding: 0;
  margin-top: -1px;
}

.hero-stage {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 375px;
  overflow: hidden;
  background: #fff;
}

.hero-banner {
  position: relative;
  width: 100%;
  min-height: 375px;
}

.hero-banner__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: top center;
}

.hero-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.66);
}

.hero-banner__container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
}

.hero-banner__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 336px;
  padding: 60px 0 56px;
  color: #fff;
}

.hero-banner__title {
  margin: 0;
  color: #fff;
  font-size: 36px;
  line-height: 38px;
  font-weight: 900;
}

.hero-banner__description {
  margin: 0;
  max-width: 405px;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
}

.hero-banner__actions {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.hero-banner__cta {
  align-self: flex-start;
  min-width: 176px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 4px;
  background: var(--color-secondary);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
}

.hero-banner__cta:hover {
  background: #e19730;
}

/* 首页共用区块 */
.homepage-section--icons {
  overflow: hidden;
  padding-top: 55px;
  padding-bottom: 70px;
}

.homepage-section--icons::before,
.homepage-section--icons::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.homepage-section--icons::before {
  left: -88px;
  top: 38px;
  width: 246px;
  height: 246px;
  border-radius: 50%;
  background: rgba(239, 239, 247, 0.82);
}

.homepage-section--icons::after {
  left: -84px;
  top: 4px;
  width: 320px;
  height: 320px;
  border: 2px dashed #d88e2f;
  border-radius: 50%;
  clip-path: inset(0 24% 22% 0);
}

.homepage-section--icons .container {
  position: relative;
  z-index: 1;
}

.homepage-section--partners {
  padding-top: 32px;
  padding-bottom: 32px;
  background: rgba(236, 231, 224, 0.42);
}

.icon-category-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  max-width: 912px;
  margin: 34px auto 0;
  justify-items: center;
}

.icon-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 142px);
  min-height: 132px;
  padding: 18px 14px;
  border: 1px solid #e4e4e5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(52, 74, 154, 0.12);
}

.icon-category-card__icon {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.icon-category-card__label {
  color: #45474d;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
}

.homepage-section--trust {
  overflow: hidden;
  padding-top: 10px;
}

.trust-metric-list {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr 1.02fr;
  gap: 14px;
  max-width: 1040px;
  margin: 46px auto 0;
  padding: 18px 0 26px;
  align-items: center;
}

.trust-metric-list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 0;
  width: 1440px;
  height: 178px;
  background: url("../images/trust-metrics-lines.svg") center center / 1440px 178px no-repeat;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0.98;
  pointer-events: none;
}

.trust-metric-card {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.trust-metric-card:nth-child(1) {
  justify-self: start;
  transform: translate(-26px, 6px);
}

.trust-metric-card:nth-child(2) {
  justify-self: center;
  transform: translateY(0);
}

.trust-metric-card:nth-child(3) {
  justify-self: end;
  transform: translate(48px, 6px);
}

.trust-metric-card__value {
  display: inline-flex;
  flex: 0 0 104px;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  padding-left: 10px;
  border: 1px solid #ece8e1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 16px rgba(52, 74, 154, 0.12);
  color: #d88e2f;
  font-size: 40px;
  line-height: 40px;
  font-weight: 600;
}

.trust-metric-card__copy {
  display: grid;
  gap: 2px;
  max-width: 210px;
}

.trust-metric-card__title {
  color: #4a4c52;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
}

.trust-metric-card__text {
  color: #4a4c52;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
}

.homepage-section--trust .section-kicker {
  padding: 8px 16px;
  margin-bottom: 22px;
  border-radius: 6px;
  background: #f2e9dc;
  color: #cb8c34;
  font-size: 10px;
  letter-spacing: 0.16em;
}

.homepage-section--trust .homepage-heading {
  font-size: clamp(28px, 2.9vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.homepage-section--trust .comparison-lead {
  max-width: 360px;
  margin-top: 14px;
  font-size: 12px;
  color: #7a7d84;
}

.homepage-section--trust::before {
  content: "";
  position: absolute;
  left: -54px;
  top: 176px;
  width: 154px;
  height: 102px;
  border-radius: 0 999px 999px 0;
  background: rgba(234, 229, 223, 0.78);
}

.homepage-section--trust::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 220px;
  height: 110px;
  border-radius: 999px 999px 0 0;
  background: rgba(236, 234, 241, 0.5);
  transform: translateX(-50%);
}

.decision-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-top: 44px;
}

.decision-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
 
}

.decision-visual__image {
  display: block;
  width: 100%;
  max-width: 520px;
  object-fit: contain;
}

.decision-copy {
  display: grid;
  gap: 22px;
  max-width: 490px;
}

.decision-copy .section-kicker {
  justify-self: start;
  padding: 8px 18px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: #f2e9dc;
  color: #cb8c34;
  font-size: 10px;
  letter-spacing: 0.16em;
}

.decision-copy__title {
  margin: 0;
  max-width: 460px;
  font-size: 33px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.decision-copy__steps {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.decision-copy__steps li {
  display: grid;
  gap: 10px;
}

.decision-copy__steps strong {
  display: block;
  margin: 0;
  color: #35383d;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
}

.decision-copy__steps span {
  display: block;
  color: #6e7179;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
}

.ranking-carousel {
  position: relative;
  max-width: 1060px;
  margin: 24px auto 0;
  padding: 0 50px;
}

.ranking-card-grid,
.ranking-list {
  display: flex;
  gap: 22px;
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 0 4px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ranking-card-grid:focus-visible {
  outline: 2px solid #344a9a;
  outline-offset: 6px;
  border-radius: 16px;
}

.ranking-card-grid::-webkit-scrollbar,
.ranking-list::-webkit-scrollbar {
  display: none;
}

.ranking-carousel__button {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #e4e4e5;
  border-radius: 50%;
  background: #fff;
  color: #323738;
  box-shadow: 0 6px 18px rgba(52, 74, 154, 0.14);
  transform: translateY(-50%);
  cursor: pointer;
}

.ranking-carousel__button:hover,
.ranking-carousel__button:focus-visible {
  color: #344a9a;
  border-color: #344a9a;
}

.ranking-carousel__button span {
  display: block;
  margin-top: -2px;
  font-size: 28px;
  line-height: 1;
}

.ranking-carousel__button--prev {
  left: 0;
}

.ranking-carousel__button--next {
  right: 0;
}

.ranking-carousel__button[disabled] {
  opacity: 0.38;
  cursor: default;
}

.homepage-section--ranking {
  overflow: hidden;
}

.homepage-section--ranking .container {
  position: relative;
  z-index: 1;
}

.ranking-decoration {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.ranking-decoration img {
  display: block;
  width: 100%;
  height: auto;
}

.ranking-decoration--left {
  left: -205px;
  top: 15px;
  width: 395px;
  height: 390px;
  transform: translateX(70%);
}

.ranking-decoration--right {
  right: -200px;
  bottom: 35px;
  width: 358px;
  height: 279px;
  transform: translate(-70%, 50%);
}

.homepage-section--ranking .ranking-content {
  position: relative;
  z-index: 1;
}

.homepage-section--ranking .section-center,
.ranking-card-grid,
.ranking-slider-dots {
  position: relative;
}

.homepage-section--ranking .section-center {
  max-width: 620px;
}

.homepage-section--ranking .homepage-heading {
  font-size: clamp(34px, 3.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.homepage-section--ranking .comparison-lead {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.55;
  color: #767981;
}

.ranking-card {
  flex: 0 0 calc((100% - 44px) / 3);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e5e1d9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(52, 74, 154, 0.12);
  scroll-snap-align: start;
}

.ranking-card__media {
  position: relative;
  padding: 0;
  background: #e7edf4;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.ranking-card__score-corner {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 54px;
  height: 22px;
  padding: 0 8px;
  border-radius: 0 15px 0 16px;
  background: #fff;
  color: #323738;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  box-shadow: none;
}

.ranking-card__score-icon {
  display: block;
  width: auto;
  height: 14px;
  flex: 0 0 auto;
}

.ranking-card__image {
  display: block;
  width: 100%;
  height: 172px;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}

.ranking-card__image--placeholder {
  min-height: 152px;
  background:
    radial-gradient(circle at 22% 26%, rgba(255, 255, 255, 0.9), transparent 22%),
    linear-gradient(145deg, #d9d6d1, #f6f4f1 42%, #c8c3bc);
}

.ranking-card__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 18px 0;
}

.ranking-card__title {
  margin: 0;
  color: #323738;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
}

.ranking-card__summary {
  margin: 0;
  min-height: 18px;
  color: #727574;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ranking-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 24px 18px 18px;
}

.ranking-card__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid #344a9a;
  border-radius: 8px;
  background: #fff;
  color: #344a9a;
  font-size: 12px;
  font-weight: 500;
}

.ranking-card__primary {
  min-height: 40px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}

.ranking-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.ranking-slider-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(72, 79, 95, 0.2);
  cursor: pointer;
}

.ranking-slider-dots .is-active {
  background: #344a9a;
}

.partner-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 1150px;
  margin: 54px auto 0;
}

.partner-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 124px;
  padding: 24px 34px;
  border: 0;
  border-top: 1px solid #dce1f0;
  border-left: 1px solid #dce1f0;
  background: transparent;
  color: #323738;
  text-decoration: none;
}

.partner-logo-item:nth-child(4n+1) {
  border-left: 0;
}

.partner-logo-item:nth-child(-n+4) {
  border-top: 0;
}

.partner-logo-item__image {
  display: block;
  max-width: 188px;
  width: 100%;
  max-height: 54px;
  height: auto;
  object-fit: contain;
}

.partner-logo-item__fallback {
  color: #323738;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.homepage-section--comparison .section-kicker {
  display: none;
}

.homepage-section--comparison .section-center {
  max-width: 980px;
}

.homepage-section--comparison .homepage-heading {
  font-size: clamp(42px, 4vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.homepage-section--comparison .comparison-lead {
  max-width: 980px;
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.65;
  color: #666a73;
}

.comparison-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 280px;
  gap: 14px;
  max-width: 874px;
  margin: 40px auto 0;
  align-items: stretch;
}

.comparison-brand-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e4e1db;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(34, 38, 52, 0.05);
}

.comparison-brand-card__top {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 24px 20px 14px;
}

.comparison-brand-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  padding: 0 10px;
  overflow: hidden;
}

.comparison-brand-card__logo-image,
.comparison-brand-card__logo > img {
  display: block;
  max-width: 100%;
  height: 100%;
  width: auto;
  max-height: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

.comparison-brand-card__logo-fallback {
  color: #1f315d;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.comparison-brand-card__score {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #2f3137;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  text-align: center;
}

.comparison-brand-card__score span {
  margin-left: 4px;
  color: #f2bc23;
  font-size: 14px;
}

.comparison-brand-card__primary {
  min-height: 34px;
  max-width: 176px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
}

.comparison-brand-card__secondary {
  display: block;
  width: 100%;
  min-height: auto;
  border: 0;
  background: transparent;
  color: #5b77ee;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
}

.comparison-brand-card__section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 16px;
  background: #f2f2f2;
  color: #3f434a;
  font-size: 12px;
  font-weight: 700;
}

.comparison-brand-card__rating-list {
  display: grid;
  gap: 0;
  padding: 14px 28px 16px;
}

.comparison-brand-card__rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  font-size: 15px;
}

.comparison-brand-card__rating-row span {
  color: #43464d;
}

.comparison-brand-card__rating-row strong {
  color: #3d4048;
  font-weight: 700;
}

.comparison-brand-card__features {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px 28px 20px;
  list-style: none;
  color: #4a4d54;
  font-size: 14px;
  line-height: 1.55;
}

.comparison-brand-card__features li {
  position: relative;
  padding-left: 24px;
}

.comparison-brand-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #68bf6d;
  box-shadow: inset 0 0 0 1px rgba(76, 161, 82, 0.24);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l2.5 2.5 6-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

.comparison-brand-card--placeholder {
  align-self: start;
  min-height: 134px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 20px;
  background: #fff;
}

.comparison-brand-card__add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid #5b77ee;
  border-radius: 8px;
  background: transparent;
  color: #5b77ee;
  font-size: 18px;
  line-height: 1;
}

.comparison-brand-card__add-label {
  max-width: 120px;
  margin-top: 12px;
  color: #5b77ee;
  font-size: 16px;
  font-weight: 700;
}

.comparison-actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.homepage-section--comparison .button--ghost {
  min-width: 180px;
  min-height: 38px;
  border-color: #5166bf;
  border-radius: 6px;
  color: #4259b8;
  background: #fff;
  font-size: 12px;
}

.homepage-section--guides .section-kicker {
  margin-bottom: 22px;
  padding: 12px 24px;
  border-radius: 8px;
  background: rgba(215, 140, 41, 0.12);
  color: #d78c29;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.homepage-section--guides .homepage-heading {
  font-size: clamp(34px, 3.2vw, 40px);
  line-height: 1.1;
  font-weight: 500;
}

.guide-strip {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  padding: 10px 0 64px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.guide-strip::-webkit-scrollbar {
  display: none;
}

.guide-strip__card {
  flex: 0 0 calc((100% - 48px) / 4);
  min-width: 220px;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  scroll-snap-align: start;
}

.guide-strip__card:nth-child(odd) {
  transform: translateY(50px);
}

.guide-strip__image {
  display: block;
  width: 100%;
  height: 171px;
  object-fit: cover;
  background: #e5e0d8;
}

.guide-strip__body {
  padding: 24px;
}

.guide-strip__body h3 {
  display: -webkit-box;
  min-height: 40px;
  margin: 0;
  overflow: hidden;
  color: #323738;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.guide-strip__body p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 14px;
}

.homepage-section--faq .homepage-heading {
  font-size: clamp(34px, 3.4vw, 40px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0;
}

.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1140px;
  margin: 32px auto 0;
  align-items: start;
}

.faq-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  padding: 16px 24px 14px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(52, 74, 154, 0.12);
}

.faq-item::marker,
.faq-item__question::marker,
.faq-item__question::-webkit-details-marker {
  display: none;
  content: "";
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: #323738;
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
  list-style: none;
}

.faq-item__answer {
  padding: 0;
}

.faq-item__answer p {
  margin: 12px 0 0;
  color: #323738;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}

.homepage-section--cta .section-center {
  max-width: 100%;
}

.homepage-section--cta .container {
  position: relative;
}

.homepage-section--cta .section-kicker {
  margin-bottom: 40px;
  padding: 12px 24px;
  border-radius: 8px;
  background: rgba(215, 140, 41, 0.12);
  color: #d78c29;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.homepage-section--cta .homepage-heading {
  font-size: clamp(34px, 3.4vw, 40px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0;
}

.homepage-section--cta .comparison-lead {
  margin-top: 32px;
  max-width: none;
  font-size: 20px;
  line-height: 32px;
  color: #6e7070;
}

.sleep-match-panel {
  position: relative;
  max-width: 800px;
  margin: 48px auto 0;
  padding: 34px 28px 24px;
  border-radius: 12px;
  background: #f3f1f7;
}

.sleep-match-decoration {
  position: absolute;
  z-index: 0;
  display: none;
  pointer-events: none;
}

.sleep-match-decoration svg {
  display: block;
  height: auto;
}

.sleep-match-decoration--left {
  left: -116px;
  bottom: -8px;
  width: 164px;
  height: 116px;
  overflow: visible;
}

.sleep-match-decoration__trail {
  position: absolute;
  /* 让虚线更贴近信封开口，避免看起来像悬空 */
  top: 14px;
  left: 34px;
  width: 100px;
  transform: rotate(-12deg);
  transform-origin: left bottom;
}

.sleep-match-decoration__icon {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 110px;
}

.sleep-match-decoration--right {
  right: -104px;
  top: 18px;
  width: 160px;
}

.sleep-match-decoration--right svg {
  width: 160px;
}

.sleep-match-form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px;
  gap: 12px;
  margin-top: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sleep-match-form__field {
  display: block;
}

.sleep-match-form input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #dddde2;
  border-radius: 6px;
  background: #fff;
  color: #4b4e54;
  font-size: 15px;
}

.sleep-match-form input::placeholder {
  color: #666972;
}

.sleep-match-form button {
  min-width: 0;
  min-height: 44px;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 700;
}

.sleep-match-note {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding: 0 8px;
  color: #777a81;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.sleep-match-note p {
  margin: 0;
}

.sleep-match-note a {
  color: #777a81;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 640px) {
  .sleep-match-decoration {
    display: block;
  }
}

/* 品牌页 */
.site-main section.review-detail-breadcrumbs {
  padding: 24px 0 0;
}

.review-detail-breadcrumbs ul {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #727574;
  font-size: 14px;
  line-height: 20px;
}

.review-detail-breadcrumbs li:last-child {
  color: #323738;
  font-weight: 500;
}

.review-detail {
  padding: 0 0 48px;
}

.review-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 788px) minmax(280px, 1fr);
  gap: 32px;
  align-items: start;
}

.review-detail__main {
  min-width: 0;
}

.site-main section.review-detail-hero {
  padding: 16px 0 40px;
}

.review-detail-hero__top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.review-detail-hero__logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 216px;
  width: 216px;
  height: 114px;
  padding: 18px;
  border: 1px solid #e4e4e5;
  border-radius: 13px;
  background: #fff;
}

.review-detail-hero__logo-card img {
  max-width: 170px;
  max-height: 60px;
  object-fit: contain;
}

.review-detail-hero__heading {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 114px;
}

.review-detail-hero__heading h1 {
  margin: 0;
  color: #323738;
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
}

.review-detail-authors {
  display: flex;
  gap: 24px;
}

.review-detail-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-detail-author--validated {
  padding-left: 24px;
  border-left: 1px solid #e4e4e5;
}

.review-detail-author img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.review-detail-author div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-detail-author span {
  min-height: 18px;
  color: #727574;
  font-size: 12px;
  line-height: 18px;
}

.review-detail-author strong {
  color: #323738;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
}

.review-detail-about {
  margin-top: 24px;
}

.review-detail-about h2 {
  margin: 0 0 4px;
  color: #323738;
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
}

.review-detail-about p,
.review-detail-copy p {
  margin: 0;
  color: #323738;
  font-size: 16px;
  line-height: 28px;
}

.review-detail-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.review-detail-mobile-card {
  display: none;
  margin-top: 40px;
}

.review-detail-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 48px;
  margin-top: 16px;
}

.review-detail-benefit {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 128px;
}

.review-detail-benefit img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.review-detail-benefit span {
  color: #323738;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  text-transform: capitalize;
}

.review-detail-nav-sentinel {
  display: block;
  height: 0;
}

.review-detail-nav {
  position: sticky;
  top: 59px;
  z-index: 19;
  width: 100%;
  max-width: 778px;
  margin: 0 auto 40px;
  padding: 6px;
  overflow: hidden;
  border-bottom: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
  transition: none;
}

.review-detail-nav.is-stuck {
  width: min(calc(100vw - 136px), var(--container-width));
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  overflow: visible;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.review-detail-nav.is-stuck::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((min(calc(100vw - 136px), var(--container-width)) - 100vw) / 2);
  z-index: 0;
  width: 100vw;
  border-bottom: 1px solid #e1e1e1;
  background: #fff;
  pointer-events: none;
}

.review-detail-nav ul {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  white-space: nowrap;
  scrollbar-width: none;
}

.review-detail-nav.is-stuck ul {
  position: relative;
  z-index: 1;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  margin: 0;
}

.review-detail-nav ul::-webkit-scrollbar {
  display: none;
}

.review-detail-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: fit-content;
  height: 38px;
  padding: 8px 16px;
  border-radius: 10px;
  color: #323738;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.review-detail-nav a:hover {
  background: rgba(44, 56, 98, 0.05);
  color: #25439a;
}

.review-detail-nav.is-stuck a {
  padding: 0 18px;
  font-size: 14px;
  line-height: 20px;
}

.review-detail-nav.is-stuck a:hover,
.review-detail-nav.is-stuck a.is-active {
  background: #f0f2fa;
  color: #25439a;
}

.review-detail-nav.is-stuck a.is-active {
  font-weight: 700;
}

.site-main section.review-detail-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin-bottom: 40px;
  scroll-margin-top: 124px;
}

.site-main section.review-detail-section h2 {
  margin: 0;
  color: #323738;
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  text-transform: capitalize;
}

.review-detail-pros-cons h2 {
  font-size: 24px;
  line-height: 30px;
}

.review-detail-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.review-detail-list li {
  position: relative;
  padding-left: 24px;
  color: #323738;
  font-size: 16px;
  line-height: 24px;
}

.review-detail-list li::before {
  position: absolute;
  left: 0;
  top: 3px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.review-detail-list--pros li::before {
  content: "✓";
  background: #66bd6d;
}

.review-detail-list--cons li::before {
  content: "×";
  background: #df6464;
}

.review-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.review-product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  border: 1px solid #e4e4e5;
  border-radius: 16px;
  text-align: center;
}

.review-product-card h3 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  color: #323738;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
}

.review-product-card strong {
  margin: 16px 0;
  color: #4d5ad1;
  font-size: 28px;
  line-height: 22px;
}

.review-product-card span {
  color: #323738;
  font-size: 16px;
  line-height: 20px;
}

.review-product-card span + span {
  margin-top: 6px;
}

.review-product-card a,
.review-score-panel__button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 24px;
  border-radius: 8px;
  background: #4d5ad1;
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.review-product-card a {
  width: 100%;
}

.review-depth-card {
  display: grid;
  grid-template-columns: 359px minmax(0, 1fr);
  gap: 16px;
  padding: 24px;
  border: 1px solid #e4e4e5;
  border-radius: 16px;
}

.review-depth-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 202px;
  overflow: hidden;
  border: 1px solid #e4e4e5;
  border-radius: 8px;
  background: #fff;
}

.review-depth-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.review-depth-card__content h3 {
  margin: 0 0 10px;
  color: #323738;
  font-size: 20px;
  line-height: 24px;
}

.review-depth-card__content p {
  margin: 0;
  color: #323738;
  font-size: 15px;
  line-height: 24px;
}

.review-depth-card__content ul {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding-left: 18px;
  color: #323738;
  font-size: 14px;
  line-height: 22px;
}

.review-depth-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.review-depth-spec {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-depth-spec > span {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(44, 56, 98, 0.05);
  color: #4d5ad1;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

.review-depth-spec div {
  display: flex;
  flex-direction: column;
}

.review-depth-spec strong {
  color: #323738;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}

.review-depth-spec small {
  color: #323738;
  font-size: 11px;
  line-height: 18px;
}

.review-depth-offer {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 1fr);
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: #f9f9f9;
}

.review-depth-offer__coupon,
.review-depth-offer__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 8px;
  color: #323738;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
  text-align: center;
}

.review-depth-offer__coupon {
  border: 1px dashed #d88e2f;
  background: #f9f4ee;
}

.review-depth-offer__button {
  background: #4d5ad1;
  color: #fff;
  box-shadow: 0 4px 12px rgba(44, 56, 98, 0.2);
}

.review-depth-benefits {
  grid-column: 1 / -1;
  overflow: hidden;
  border-radius: 12px;
  background: #f9f9f9;
}

.review-depth-benefits > strong {
  display: block;
  padding: 12px 20px;
  color: #323738;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
}

.review-depth-benefits > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 48px;
  padding: 18px 32px 24px;
}

.review-depth-benefits span {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 96px;
  min-height: 96px;
  color: #323738;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

.review-depth-benefits span img {
  display: block;
  height: 64px;
  width: 64px;
}

.review-depth-benefits span[data-icon]::before {
  content: attr(data-icon);
  position: absolute;
  top: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #d88e2f;
  background: #fff;
  color: #d88e2f;
  font-size: 20px;
  font-weight: 700;
}

.review-video-card {
  position: relative;
  display: block;
  min-height: 250px;
  overflow: hidden;
  border-radius: 12px;
  background: #f2f2f2;
  color: inherit;
  text-decoration: none;
}

.review-video-card img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
}

.review-video-card span {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
}

.review-video-card span::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 22px solid #fff;
}

.review-depth-copy {
  display: grid;
  gap: 32px;
}

.review-scale-section h3 {
  margin: 0 0 16px;
  color: #323738;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  text-transform: capitalize;
}

.review-rich-content {
  display: grid;
  gap: 20px;
}

.review-rich-content :where(p, ul, ol) {
  margin: 0;
  color: #323738;
  font-size: 16px;
  line-height: 28px;
}

.review-rich-content :where(figure, .wp-block-table) {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
}

.review-rich-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.review-rich-content table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background: #fff;
}

.review-rich-content :where(th, td) {
  padding: 12px 14px;
  border: 1px solid #e4e4e5;
  color: #323738;
  font-size: 15px;
  line-height: 24px;
  text-align: left;
}

.review-scale {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 6px;
  min-height: 87px;
  margin-top: 20px;
}

.review-scale > span {
  color: #000;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}

.review-scale > span img {
  display: block;
  height: 47px;
  margin: 0 auto 8px;
  max-width: 58px;
}

.review-scale__track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2px;
  border-radius: 20px;
  background: #4d5ad1;
}

.review-scale__track i {
  position: relative;
  display: block;
  width: 4px;
  height: 6px;
  border-radius: 999px;
  background: #4d5ad1;
  font-style: normal;
}

.review-scale__track i.is-active {
  height: 18px;
}

.review-scale__track i.is-active::before {
  content: attr(data-score);
}

.review-scale__track i.is-active {
  display: grid;
  place-items: start center;
  color: #323738;
  font-size: 0;
}

.review-scale__track i.is-active::after {
  content: "";
  position: absolute;
  bottom: 18px;
  left: 50%;
  width: 36px;
  height: 50px;
  transform: translateX(-50%);
  border: 2px solid #4d5ad1;
  border-radius: 32px;
  background: #fff;
}

.review-scale__track i.is-active {
  counter-reset: score var(--marker);
}

.review-scale__track i.is-active::before {
  content: counter(score);
  position: absolute;
  bottom: 34px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  color: #323738;
  font-size: 20px;
  line-height: 24px;
  font-weight: 800;
}

.review-support-list,
.review-qa-list {
  display: grid;
  gap: 16px;
}

.review-support-list {
  gap: 16px;
}

.review-user-card,
.review-qa-list article {
  padding: 20px;
  border: 1px solid #e4e4e5;
  border-radius: 16px;
  background: #fff;
}

.review-support-list article {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 104px;
  padding: 22px 30px;
  border: 0;
  border-radius: 20px;
  background: #f5f5f7;
}

.review-support-list article > span {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
}

.review-support-list article > span img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.review-support-list p {
  margin: 0 0 6px;
  color: #727574;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

.review-support-list strong {
  display: block;
  color: #323738;
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
}

.review-user-panel {
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: 16px;
  background: #f2f2f2;
}

.review-user-panel__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.review-user-rating {
  display: grid;
  gap: 4px;
  width: 287px;
  padding: 8px 20px;
  border: 1px solid #e4e4e5;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.review-user-rating strong {
  color: #323738;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
}

.review-user-rating span {
  color: #d88e2f;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
}

.review-user-rating small {
  color: #323738;
  font-size: 12px;
}

.review-user-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #727574;
  font-size: 14px;
}

.review-user-panel select {
  height: 31px;
  padding: 0 12px;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  background: #fff;
}

.review-user-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
}

.review-user-card__head > span {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eabc7f;
  color: #323738;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
}

.review-user-card__head div {
  display: grid;
  gap: 1px;
}

.review-user-card__head strong {
  color: #323738;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
}

.review-user-card__head em {
  display: inline-flex;
  width: fit-content;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(77, 90, 209, 0.1);
  color: #4d5ad1;
  font-size: 10px;
  line-height: 14px;
  font-style: normal;
  font-weight: 700;
}

.review-user-card__head small {
  color: #d88e2f;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0;
}

.review-user-card strong,
.review-qa-list h3 {
  display: block;
  margin: 0 0 4px;
  color: #323738;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}

.review-user-card p,
.review-qa-list p {
  margin: 0;
  color: #323738;
  font-size: 14px;
  line-height: 22px;
}

.review-user-card h3 {
  margin: 0 0 4px;
  color: #323738;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}

.review-user-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.review-user-card__meta button {
  min-height: 30px;
  padding: 4px 8px;
  border: 1.8px solid #277dcc;
  border-radius: 6px;
  background: #fff;
  color: #277dcc;
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
}

.review-user-card__meta time {
  color: #727574;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

.review-detail__sidebar {
  position: sticky;
  top: 90px;
}

.review-score-panel {
  border: 1px solid #e4e4e5;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.review-score-panel__scores {
  display: flex;
}

.review-score-panel__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 1;
  gap: 12px;
  padding: 16px;
  background: #f9f9f9;
}

.review-score-panel__overall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  justify-content: center;
  min-width: 80px;
  padding: 16px;
  border-left: 1px solid #e4e4e5;
  background: #fff;
}

.review-score-panel__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.review-score-panel__circle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #fff 79%, transparent 85% 100%),
    conic-gradient(#4d5ad1 calc(var(--score) * 1%), #e9e9e9 0);
}

.review-score-panel__circle--overall {
  width: 45px;
  height: 45px;
  background:
    radial-gradient(closest-side, #fff 79%, transparent 85% 100%),
    conic-gradient(#d88e2f calc(var(--score) * 1%), #e9e9e9 0);
}

.review-score-panel__circle span {
  color: #323738;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
}

.review-score-panel__circle--overall span {
  font-size: 20px;
  line-height: 26px;
}

.review-score-panel__metric strong,
.review-score-panel__overall strong {
  color: #323738;
  font-size: 9px;
  line-height: 14px;
  font-weight: 600;
}

.review-score-panel__promo {
  border-top: 1px solid #e4e4e5;
}

.review-score-panel__coupon {
  display: block;
  padding: 16px;
  background: #f2f2f2;
}

.review-score-panel__coupon span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  border: 1px dashed #d88e2f;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #fff;
}

.review-score-panel__coupon img {
  max-width: 150px;
  max-height: 45px;
  object-fit: contain;
}

.review-score-panel__coupon strong {
  display: block;
  padding: 11px;
  border: 1px dashed #d88e2f;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  color: #323738;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  text-align: center;
}

.review-score-panel__button {
  width: 160px;
  margin: 16px auto;
  font-size: 16px;
}

.reviews-hero {
  display: flex;
  align-items: center;
  min-height: 230px;
  padding: 0;
  background: #f9f4ee;
}

.reviews-hero__inner {
  padding-top: 48px;
  padding-bottom: 48px;
}

.reviews-hero__title {
  margin: 0;
  color: #323738;
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
}

.reviews-hero__description {
  max-width: 620px;
  margin: 8px 0 0;
  color: #323738;
  font-size: 16px;
  line-height: 24px;
}

.reviews-hub {
  padding: 32px 0 0;
}

.reviews-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.review-hub-card {
  display: flex;
  flex-direction: column;
  min-height: 307px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(44, 56, 98, 0.05);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.review-hub-card__logo-wrap {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  padding: 20px 64px;
  border-radius: 8px;
  background: #fff;
}

.review-hub-card__logo {
  display: block;
  width: 130px;
  height: 50px;
  object-fit: contain;
}

.review-hub-card__title {
  margin: 8px 0 0;
  color: #323738;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}

.review-hub-card__summary {
  display: -webkit-box;
  margin: 4px 0 auto;
  overflow: hidden;
  color: #727574;
  font-size: 14px;
  line-height: 22px;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.review-hub-card__actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  text-align: center;
}

.review-hub-card__visit,
.review-hub-card__review {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 38px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
}

.review-hub-card__visit {
  color: #5878eb;
}

.review-hub-card__review {
  background: #4d5ad1;
  color: #fff;
  font-weight: 500;
}

.reviews-pagination-section {
  padding: 32px 0 0;
}

.reviews-pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.reviews-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: #344a9a;
  font-size: 14px;
  font-weight: 600;
}

.reviews-pagination .page-numbers.current {
  background: #344a9a;
  color: #fff;
}

.reviews-pagination .page-numbers.dots {
  color: #727574;
}

/* Articles hub */
.articles-page {
  background: #fff;
  color: #323738;
}

.articles-breadcrumbs {
  background: #fff;
}

.articles-breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.articles-breadcrumbs li {
  display: flex;
  align-items: center;
  color: #323738;
  font-size: 14px;
  line-height: 20px;
}

.articles-breadcrumbs li + li::before {
  content: ">";
  margin-right: 12px;
  color: #323738;
  font-weight: 400;
}

.articles-breadcrumbs a {
  color: #323738;
  font-weight: 400;
}

.articles-breadcrumbs span {
  font-weight: 500;
}

.articles-shell {
  padding-top: 0;
  padding-bottom: 34px;
}

.articles-featured-section h1 {
  margin: 0;
  color: #323738;
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
}

.articles-featured-card {
  display: flex;
  gap: 32px;
}

.articles-featured-card__image-link {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
}

.articles-featured-card__image {
  display: block;
  width: 100%;
  height: 445px;
  object-fit: cover;
}

.articles-featured-card__body {
  flex: 0 0 320px;
  max-width: 320px;
}

.articles-author {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.articles-author__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  margin-right: 2px;
  border-radius: 50%;
  background: rgba(216, 142, 47, 0.2);
  color: #323738;
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
}

.articles-author div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.articles-author strong {
  color: #323738;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
}

.articles-author span:not(.articles-author__avatar) {
  color: #727574;
  font-size: 12px;
  line-height: 17px;
}

.articles-featured-card__title {
  display: block;
  margin-top: 16px;
  color: #323738;
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
}

.articles-featured-card__excerpt {
  display: -webkit-box;
  margin-top: 12px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  color: #323738;
  font-size: 16px;
  line-height: 28px;
}

.articles-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 204px;
  height: 44px;
  margin-top: 12px;
  padding: 0 20px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  color: var(--color-primary);
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
}

.articles-read-more span:last-child {
  font-size: 20px;
  line-height: 1;
}

.articles-content-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 40px;
  margin-top: 32px;
}

.articles-list-wrap {
  min-width: 0;
}

.articles-list-wrap h2,
.articles-recommendations h2 {
  margin: 0;
  color: #323738;
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
}

.articles-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}

.articles-list-card {
  display: flex;
  align-items: center;
  gap: 24px;
}

.articles-list-card__image-link {
  display: block;
  flex: 0 0 206px;
  overflow: hidden;
  border-radius: 8px;
}

.articles-list-card__image {
  display: block;
  width: 206px;
  height: 116px;
  object-fit: cover;
}

.articles-list-card__body {
  width: min(100%, 490px);
}

.articles-list-card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #323738;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
}

.articles-list-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: #323738;
  font-size: 16px;
  line-height: 24px;
}

.articles-list-card__date {
  display: block;
  margin-top: 0;
  color: #727574;
  font-size: 12px;
  line-height: 18px;
}

.articles-sidebar {
  flex: 0 0 320px;
  width: 320px;
}

.articles-recommendations {
  padding: 20px 16px;
  border-radius: 16px;
  background: rgba(77, 90, 209, 0.05);
}

.articles-recommendations__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
}

.articles-recommendation-card {
  display: flex;
  align-items: center;
  width: 100%;
  height: 56px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
}

.articles-recommendation-card__logo {
  display: flex;
  flex: 2 1 0;
  justify-content: center;
  min-width: 0;
}

.articles-recommendation-card__logo img {
  display: block;
  max-width: 129px;
  max-height: 30px;
  object-fit: contain;
}

.articles-recommendation-card__button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 106px;
  width: 106px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.articles-pagination {
  margin-top: 16px;
}

.articles-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.articles-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #e4e4e5;
  border-radius: 8px;
  color: #323738;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.articles-pagination .page-numbers.current {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.articles-pagination .page-numbers.dots {
  border-color: transparent;
}

/* Article detail */
.article-detail-page {
  background: #fff;
  color: #323738;
}

.article-detail-hero {
  display: flex;
  align-items: center;
  min-height: 168px;
  padding: 28px 0;
  background: #f8f3ed;
}

.site-main .article-detail-page .article-detail-hero {
  padding: 28px 0;
}

.article-detail-hero h1 {
  max-width: 980px;
  margin: 0;
  color: #323738;
  font-size: 34px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: 0;
}

.article-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  color: #727574;
  font-size: 14px;
  line-height: 22px;
}

.article-detail-author-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #323738;
}

.article-detail-author-mini span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(216, 142, 47, 0.2);
  color: #323738;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
}

.article-detail-author-mini strong {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}

.article-detail-social {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.article-detail-social a,
.article-detail-social span {
  position: relative;
  color: #727574;
  font-size: 14px;
  line-height: 22px;
}

.article-detail-social a::before,
.article-detail-social span::before {
  margin-right: 5px;
  color: #727574;
}

.article-detail-social a::before {
  content: "\1F5E8";
}

.article-detail-social span::before {
  content: "\2661";
}

.article-detail-layout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-top: 40px;
  margin-bottom: 64px;
}

.site-main .article-detail-page .article-detail-layout {
  padding: 0;
}

.article-detail-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 788px;
}

.article-detail-sidebar {
  display: flex;
  flex: 0 0 320px;
  flex-direction: column;
  gap: 24px;
  width: 320px;
}

.article-detail-main__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}

.article-content {
  margin-top: 24px;
}

.article-content p {
  margin: 0 0 20px;
  color: #323738;
  font-size: 16px;
  line-height: 28px;
}

.article-content h2 {
  margin: 40px 0 16px;
  color: #323738;
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: 0;
}

.article-content h3 {
  margin: 28px 0 12px;
  color: #323738;
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
}

.article-content ul {
  display: grid;
  gap: 10px;
  margin: 0 0 24px 22px;
  padding: 0;
  color: #323738;
  font-size: 16px;
  line-height: 26px;
}

.article-top-picks {
  margin: 34px 0 44px;
}

.site-main .article-detail-page .article-top-picks,
.site-main .article-detail-page .article-section {
  padding: 0;
}

.article-top-picks h2 {
  margin-top: 0;
}

.article-top-pick-card {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 188px;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid #e4e4e5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(50, 55, 56, 0.08);
}

.article-top-pick-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 96px;
  border-radius: 10px;
  background: #f7f7f8;
}

.article-top-pick-card__image img {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: contain;
}

.article-top-pick-card__body h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 28px;
}

.article-top-pick-card__body span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #323738;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.article-top-pick-card__body ul {
  gap: 3px;
  margin: 8px 0 0 18px;
  font-size: 14px;
  line-height: 22px;
}

.article-top-pick-card__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.article-top-pick-card__offer {
  color: #d88e2f;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
}

.article-top-pick-card__button,
.article-product-card__button,
.article-inline-ctas a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  background: #05ae59;
  color: #fff;
  font-size: 18px;
  line-height: 22px;
  font-weight: 600;
  text-align: center;
}

.article-section {
  scroll-margin-top: 96px;
}

.article-product-card {
  margin: 18px 0 36px;
  padding: 28px 20px 20px;
  border: 1px solid #e4e4e5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(50, 55, 56, 0.08);
}

.article-product-card h3 {
  margin: 0 0 20px;
  text-align: center;
}

.article-product-card__main {
  display: grid;
  grid-template-columns: minmax(190px, 282px) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.article-product-card__image-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  overflow: hidden;
  border-radius: 12px;
  background: #fafafa;
}

.article-product-card__image-link img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 210px;
  object-fit: contain;
}

.article-product-card__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.article-product-card__detail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.article-product-card__detail > span {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(77, 90, 209, 0.1);
}

.article-product-card__detail strong {
  display: block;
  color: #323738;
  font-size: 14px;
  line-height: 19px;
  font-weight: 600;
}

.article-product-card__detail small {
  display: block;
  margin-top: 3px;
  color: #727574;
  font-size: 13px;
  line-height: 18px;
}

.article-product-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 16px;
  align-items: center;
  margin-top: 22px;
}

.article-product-card__offer {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  background: rgba(216, 142, 47, 0.12);
  color: #d88e2f;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}

.article-product-card__benefits {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e4e4e5;
}

.article-product-card__benefits > strong {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 24px;
}

.article-product-card__benefits div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-product-card__benefits span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f5f6ff;
  color: #323738;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.article-product-card__more {
  margin-top: 18px;
  border-top: 1px solid #e4e4e5;
}

.article-product-card__more summary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  color: var(--color-primary);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.article-product-card__more summary::-webkit-details-marker {
  display: none;
}

.article-product-card__more summary::after {
  content: "+";
  margin-left: 8px;
  font-size: 20px;
  line-height: 1;
}

.article-product-card__more[open] summary::after {
  content: "-";
}

.article-product-card__more h4 {
  margin: 18px 0 8px;
  color: #323738;
  font-size: 18px;
  line-height: 24px;
}

.article-product-card__pros-cons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.article-product-card__pros-cons ul {
  margin-bottom: 0;
}

.article-product-card__pros-cons ul:first-child li::marker {
  color: #05ae59;
}

.article-product-card__pros-cons ul:last-child li::marker {
  color: #d94141;
}

.article-inline-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 26px 0 34px;
}

.article-inline-ctas a {
  min-width: 190px;
}

.article-cheat-table {
  overflow-x: auto;
  margin: 24px 0 36px;
  border: 1px solid #e4e4e5;
  border-radius: 14px;
  background: #fff;
}

.article-cheat-table table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.article-cheat-table th,
.article-cheat-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e4e4e5;
  color: #323738;
  font-size: 14px;
  line-height: 22px;
  text-align: left;
  vertical-align: top;
}

.article-cheat-table th {
  background: #f8f3ed;
  font-weight: 700;
}

.article-cheat-table tr:last-child td {
  border-bottom: 0;
}

.article-faqs {
  display: grid;
  gap: 10px;
}

.article-faqs p {
  margin-bottom: 2px;
}

.article-liked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 82px;
  margin-top: 48px;
  padding: 18px;
  border: 1px solid #e4e4e5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(50, 55, 56, 0.08);
}

.article-liked strong {
  color: #323738;
  font-size: 20px;
  line-height: 28px;
}

.article-liked button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #e4e4e5;
  border-radius: 50%;
  background: #fff;
  color: #d88e2f;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.article-author-box {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  padding: 20px;
  border-radius: 16px;
  background: #f8f3ed;
}

.article-author-box__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(216, 142, 47, 0.24);
  color: #323738;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}

.article-author-box h2 {
  margin: 0 0 8px;
  color: #323738;
  font-size: 20px;
  line-height: 28px;
}

.article-author-box p {
  margin: 0;
  color: #323738;
  font-size: 15px;
  line-height: 24px;
}

.article-toc {
  padding: 20px 18px;
  border-radius: 16px;
  background: #f8f3ed;
}

.article-toc h2 {
  margin: 0;
  color: #323738;
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
}

.article-toc ol {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.article-toc a {
  display: block;
  color: #323738;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
}

.article-toc a:hover {
  color: var(--color-primary);
}

/* Side-by-side comparison */
.sbs-page {
  background: #fff;
}

.sbs-hero {
  padding: 56px 0 32px;
}

.sbs-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
  color: #727574;
  font-size: 14px;
  line-height: 20px;
}

.sbs-breadcrumbs li:not(:last-child)::after {
  content: ">";
  margin-left: 8px;
  color: #727574;
}

.sbs-breadcrumbs a {
  color: #727574;
}

.sbs-breadcrumbs span {
  color: #323738;
  font-weight: 500;
}

.sbs-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #323738;
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
}

.sbs-hero p {
  max-width: 940px;
  margin: 8px 0 0;
  color: #323738;
  font-size: 16px;
  line-height: 24px;
}

.sbs-tool-section {
  padding: 0 0 40px;
}

.sbs-tool {
  position: relative;
}

.sbs-top-scroll,
.sbs-table-scroll {
  overflow-x: auto;
  scrollbar-width: none;
}

.sbs-top-scroll::-webkit-scrollbar,
.sbs-table-scroll::-webkit-scrollbar {
  display: none;
}

.sbs-top-grid,
.sbs-row__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(374px, 1fr));
  gap: 0 9px;
  min-width: 1140px;
}

.sbs-top-grid {
  align-items: start;
  margin-bottom: 0;
}

.sbs-brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 190px;
  min-height: 190px;
  padding: 28px 32px 12px;
  border: 1px solid #e4e4e5;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: #fff;
}

.sbs-brand-card__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #727574;
  font-size: 22px;
  line-height: 1;
}

.sbs-brand-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 200px;
  max-width: 100%;
  height: 38px;
}

.sbs-brand-card__logo img {
  max-width: 200px;
  max-height: 36px;
  object-fit: contain;
}

.sbs-brand-card__score {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 4px;
  color: #323738;
}

.sbs-brand-card__score strong {
  font-size: 27px;
  line-height: 34px;
  font-weight: 700;
}

.sbs-brand-card__score span {
  color: #d88e2f;
  font-size: 19px;
}

.sbs-brand-card__visit,
.sbs-brand-card__review {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-weight: 500;
  text-align: center;
}

.sbs-brand-card__visit {
  width: 196px;
  height: 38px;
  min-height: 38px;
  border-radius: 8px;
  background: #4d5ad1;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
}

.sbs-brand-card__review {
  min-height: 18px;
  color: #5878eb;
  font-size: 14px;
  line-height: 18px;
}

.sbs-add-wrap {
  position: relative;
  height: 190px;
}

.sbs-add-wrap.is-open .sbs-add-card {
  border-color: #e4e4e5;
  background: #fff;
}

.sbs-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 190px;
  min-height: 190px;
  border: 1px dashed #e4e4e5;
  border-radius: 12px;
  background: #fff;
  color: #5878eb;
  cursor: pointer;
}

.sbs-add-card:focus {
  outline: none;
}

.sbs-add-card__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #5878eb;
  border-radius: 7px;
  color: #5878eb;
  font-size: 21px;
  line-height: 1;
  font-weight: 400;
}

.sbs-add-card strong {
  margin-top: 18px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

.sbs-add-wrap.is-open .sbs-add-card strong {
  margin-top: 22px;
}

.sbs-brand-picker {
  position: absolute;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  width: 374px;
  margin: 0;
  padding: 0 30px 0 24px;
}

.sbs-brand-picker[hidden] {
  display: none;
}

.sbs-brand-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 8px 18px;
  border: 1px solid #e1e1e2;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

.sbs-brand-option:focus {
  outline: none;
}

.sbs-brand-option:hover {
  border-color: #5878eb;
}

.sbs-brand-option[aria-disabled="true"] {
  cursor: default;
}

.sbs-brand-option.is-selected {
  border-color: #4d5ad1;
}

.sbs-brand-option img {
  max-width: 116px;
  max-height: 28px;
  object-fit: contain;
}

.sbs-brand-option__check {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #4d5ad1;
  color: #fff;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
}

.sbs-row {
  min-width: 0;
}

.sbs-cell-section-label {
  padding: 4px;
  background: #f2f2f2;
  color: #323738;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-align: center;
}

.sbs-cell {
  min-width: 0;
  border-left: 1px solid #e4e4e5;
  border-right: 1px solid #e4e4e5;
  background: #fff;
}

.sbs-row:last-child .sbs-cell {
  border-bottom: 1px solid #e4e4e5;
  border-radius: 0 0 12px 12px;
}

.sbs-cell--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: transparent;
  font-size: 14px;
  text-align: center;
}

.sbs-row:last-child .sbs-cell--empty {
  border-bottom-color: transparent;
}

.sbs-cell--empty > * {
  display: none;
}

.sbs-overview,
.sbs-price,
.sbs-pros-cons,
.sbs-rating,
.sbs-properties,
.sbs-suitable,
.sbs-reviews,
.sbs-list--plain {
  padding: 24px 32px;
}

.sbs-overview__image {
  width: 100%;
  height: 178px;
  margin-bottom: 24px;
  border-radius: 8px;
  object-fit: cover;
}

.sbs-key-value-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sbs-key-value-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  color: #323738;
  font-size: 16px;
  line-height: 28px;
}

.sbs-key-value-list span {
  text-transform: capitalize;
}

.sbs-key-value-list strong {
  font-weight: 700;
  text-align: right;
}

.sbs-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.sbs-price > strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  color: #99a5c5;
  font-size: 24px;
  line-height: 34px;
}

.sbs-price > span {
  min-height: 49px;
  color: #323738;
  font-size: 24px;
  line-height: 34px;
  font-weight: 700;
}

.sbs-price a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 4px 20px;
  border: 1px dashed #d88e2f;
  border-radius: 8px;
  background: #f9f4ee;
  color: #323738;
  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
}

.sbs-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sbs-list + .sbs-list {
  margin-top: 32px;
}

.sbs-list li {
  position: relative;
  padding-left: 22px;
  color: #323738;
  font-size: 16px;
  line-height: 24px;
}

.sbs-list li::before {
  position: absolute;
  left: 0;
  top: 4px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.sbs-list--pros li::before {
  content: "✓";
  background: #66bd6d;
}

.sbs-list--cons li::before {
  content: "×";
  background: #df6464;
}

.sbs-list--plain {
  gap: 16px;
}

.sbs-list--plain li {
  padding-left: 26px;
}

.sbs-list--plain li::before {
  display: none;
}

.sbs-overall-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
  border: 1px solid #e4e4e5;
  border-radius: 8px;
}

.sbs-overall-score span {
  color: #323738;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  white-space: nowrap;
}

.sbs-overall-score strong {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #323738;
  font-size: 24px;
  line-height: 1.2;
}

.sbs-overall-score small {
  color: #d88e2f;
  font-size: 18px;
}

.sbs-properties p {
  margin: 12px 0 0;
  color: #b7bab9;
  font-size: 13px;
  line-height: 24px;
  text-align: center;
}

.sbs-suitable {
  display: grid;
  gap: 12px;
}

.sbs-suitable__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  padding-left: 0;
  color: #323738;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.sbs-suitable__item::before {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid #d98f2e;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

.sbs-suitable__item.is-supported::before {
  content: "✓";
  border-color: #66bd6d;
  background: #66bd6d;
  color: #fff;
}

.sbs-suitable__item.is-unsupported::before {
  content: "×";
  border-color: #df6464;
  background: #df6464;
  color: #fff;
}

.sbs-reviews {
  display: grid;
  gap: 12px;
  background: #fff;
}

.sbs-review-summary {
  display: grid;
  gap: 4px;
  padding: 8px 20px;
  border: 1px solid #e4e4e5;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.sbs-review-summary strong {
  color: #323738;
  font-size: 20px;
  line-height: 26px;
}

.sbs-review-summary span {
  color: #d88e2f;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
}

.sbs-review-summary small {
  color: #323738;
  font-size: 12px;
}

.sbs-review-card {
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  background: #fff;
}

.sbs-review-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
}

.sbs-review-card__head > span {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eabc7f;
  color: #323738;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
}

.sbs-review-card__head div {
  display: grid;
  gap: 2px;
}

.sbs-review-card__head strong {
  color: #323738;
  font-size: 14px;
  line-height: 18px;
}

.sbs-review-card__head em {
  width: fit-content;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(77, 90, 209, 0.1);
  color: #4d5ad1;
  font-size: 10px;
  line-height: 14px;
  font-style: normal;
  font-weight: 700;
}

.sbs-review-card__head small {
  color: #d88e2f;
  font-size: 13px;
  letter-spacing: 0;
}

.sbs-review-card h3 {
  margin: 0 0 4px;
  color: #323738;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}

.sbs-review-card p {
  margin: 0;
  color: #323738;
  font-size: 14px;
  line-height: 22px;
}

.sbs-review-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.sbs-review-card__meta button {
  min-height: 30px;
  padding: 4px 8px;
  border: 1.8px solid #277dcc;
  border-radius: 6px;
  background: #fff;
  color: #277dcc;
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
}

.sbs-review-card__meta time {
  color: #727574;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

.sbs-review-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 8px;
  background: #4d5ad1;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
}

.archive-hero,
.brand-hero {
  padding: 48px 0;
}

.archive-hero .container,
.brand-hero__content,
.fallback-entry {
  max-width: 760px;
}

.brand-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 24px;
  align-items: start;
}

.brand-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.brand-score-card,
.metric-card,
.brand-main-card,
.brand-list-card,
.fallback-entry {
  padding: 24px;
  border: 1px solid #e7e0d6;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.brand-score-card {
  display: grid;
  gap: 12px;
  text-align: center;
}

.brand-score-card__label {
  color: #5f6673;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-score-card__value {
  color: #4658c5;
  font-size: 56px;
  line-height: 1;
}

.brand-score-card__meta {
  display: grid;
  gap: 8px;
  color: var(--color-text-soft);
  font-size: 13px;
}

.brand-specs__grid,
.brand-ratings__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.brand-content__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
}

.metric-card {
  display: grid;
  gap: 8px;
}

.metric-card strong {
  font-size: 15px;
}

.metric-card span {
  color: var(--color-text-soft);
  font-size: 14px;
}

.brand-section-title {
  font-size: 28px;
}

.brand-editor-note {
  margin: 0 0 16px;
  color: var(--color-text-soft);
  font-size: 15px;
}

.brand-body-copy {
  color: var(--color-text-soft);
  font-size: 15px;
}

.brand-body-copy > *:first-child {
  margin-top: 0;
}

.brand-body-copy > *:last-child {
  margin-bottom: 0;
}

.brand-side-column {
  display: grid;
  gap: 18px;
}

.brand-list-card h3 {
  margin: 0 0 14px;
  font-size: 20px;
}

.brand-list-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-soft);
  font-size: 14px;
}

.brand-related .ranking-list {
  margin-top: 0;
}

.brand-ratings,
.brand-related,
.brand-content,
.brand-specs,
.brand-archive {
  padding-top: 0;
}

.fallback-page {
  min-height: 50vh;
}

.fallback-entry__content {
  color: var(--color-text-soft);
}

/* 底部 */
.footer-objectivity {
  padding: 40px 0 0;
}

.footer-objectivity__card {
  display: grid;
  grid-template-columns: 174px minmax(0, 1fr);
  max-width: 1024px;
  min-height: 164px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(52, 74, 154, 0.12);
}

.footer-objectivity__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 164px;
  color: #d88e2f;
  background: #f8f4ef;
}

.footer-objectivity__icon {
  display: block;
  width: 87px;
  height: 84px;
}

.footer-objectivity__text {
  align-self: center;
  margin: 0;
  padding: 28px 24px;
  color: #323738;
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
}

.site-footer {
  margin-top: 40px;
}

.site-footer__top {
  padding: 34px 0 29px;
  background: #efefef;
  border-top: 1px solid #e1e1e1;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 169px 206px 121px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.site-footer__logo {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 3px;
}

.site-footer__logo-mark {
  color: #2f3137;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.site-footer__logo-text {
  color: #4d5ad1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.site-footer__title {
  margin: 0 0 14px;
  color: #2f3137;
  font-size: 14px;
  font-weight: 700;
}

.site-footer__links {
  display: grid;
  gap: 10px;
  color: #5f636b;
  font-size: 14px;
  line-height: 1.25;
}

.site-footer__links a:hover {
  color: #3947b8;
}

.site-footer__contact-copy {
  margin: 0 0 17px;
  max-width: 678px;
  color: #4f5259;
  font-size: 14px;
  line-height: 1.45;
}

.site-footer__contact-copy a,
.site-footer__privacy a {
  color: #4f5259;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__form {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr) 182px;
  grid-template-areas:
    "name message message"
    "email message submit";
  gap: 8px 10px;
  align-items: stretch;
}

.site-footer__form input,
.site-footer__form textarea {
  width: 100%;
  border: 1px solid #dddddd;
  background: #f5f5f5;
  color: #494c53;
  font-size: 14px;
}

.site-footer__form input {
  height: 32px;
  padding: 0 12px;
}

.site-footer__form textarea {
  min-height: 70px;
  padding: 10px 12px;
  resize: none;
}

.site-footer__form input::placeholder,
.site-footer__form textarea::placeholder {
  color: #7a7d84;
}

#footer-full-name {
  grid-area: name;
}

#footer-email {
  grid-area: email;
}

#footer-message {
  grid-area: message;
}

.site-footer__submit {
  grid-area: submit;
  align-self: end;
  min-height: 34px;
  padding: 8px 20px;
  border-radius: 4px;
  background: #d08a2d;
  font-size: 14px;
}

.site-footer__submit:hover {
  background: #be7d29;
}

.site-footer__privacy {
  margin: 6px 0 0;
  color: #767982;
  font-size: 12px;
  line-height: 1.3;
}

.site-footer__bottom {
  padding: 14px 0 12px;
  background: #2d3338;
}

.site-footer__legal {
  margin: 0 auto;
  max-width: 1120px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.site-footer__copyright {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  text-align: center;
}

/* 断点 */
@media (min-width: 640px) {
  .hero-stage,
  .hero-banner {
    min-height: 540px;
  }

  .hero-banner__content {
    max-width: 392px;
    padding: 68px 0 62px;
  }
}

@media (min-width: 768px) {
  .hero-banner__image {
    height: 100%;
    object-position: center;
  }

  .hero-banner__overlay {
    display: none;
  }

  .hero-banner__content {
    max-width: 392px;
    padding: 88px 0 76px;
  }

  .hero-banner__title {
    font-size: 44px;
    line-height: 48px;
  }
}

@media (min-width: 1024px) {
  .hero-banner__content {
    max-width: 481px;
  }

  .trust-metric-card__value {
    flex-basis: 120px;
    width: 120px;
    height: 120px;
  }
}

@media (min-width: 1280px) {
  .hero-stage,
  .hero-banner {
    min-height: 620px;
  }

  .hero-banner__image {
    object-position: right center;
  }
}

@media (max-width: 1080px) {
  .ranking-decoration--left {
    left: -120px;
    top: 72px;
    width: 300px;
    height: 296px;
  }

  .ranking-decoration--right {
    right: -80px;
    bottom: 28px;
    width: 260px;
    height: 203px;
  }

  .homepage-section--ranking .ranking-content {
    transform: none;
  }

  .ranking-carousel {
    max-width: 760px;
  }

  .ranking-card {
    flex-basis: calc((100% - 22px) / 2);
  }

  .icon-category-list,
  .trust-metric-list,
  .ranking-card-grid,
  .ranking-list,
  .guide-strip,
  .comparison-card-grid,
  .brand-specs__grid,
  .brand-ratings__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comparison-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .partner-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 860px;
  }

  .partner-logo-item {
    min-height: 112px;
    padding: 22px 28px;
    border-top: 1px solid #dce1f0;
    border-left: 1px solid #dce1f0;
  }

  .partner-logo-item:nth-child(4n+1) {
    border-left: 1px solid #dce1f0;
  }

  .partner-logo-item:nth-child(-n+4) {
    border-top: 1px solid #dce1f0;
  }

  .partner-logo-item:nth-child(3n+1) {
    border-left: 0;
  }

  .partner-logo-item:nth-child(-n+3) {
    border-top: 0;
  }

  .comparison-brand-card--placeholder {
    min-height: 134px;
  }

  .trust-metric-list::before {
    width: 1200px;
    height: 148px;
    background-size: 1200px 148px;
  }

  .trust-metric-card:nth-child(1),
  .trust-metric-card:nth-child(2),
  .trust-metric-card:nth-child(3) {
    transform: none;
  }

  .trust-metric-card__title,
  .trust-metric-card__text {
    font-size: 15px;
    line-height: 1.45;
  }

  .decision-copy {
    max-width: 100%;
  }

  .decision-copy__title {
    font-size: 29px;
  }

  .decision-copy__steps strong,
  .decision-copy__steps span {
    font-size: 15px;
  }

  .homepage-section--comparison .homepage-heading {
    font-size: 40px;
  }

  .homepage-section--comparison .comparison-lead {
    font-size: 16px;
  }

  .reviews-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .articles-featured-card__image {
    height: auto;
    max-height: 406px;
  }

  .article-detail-layout {
    gap: 24px;
  }

  .article-detail-sidebar {
    flex-basis: 292px;
    width: 292px;
  }

  .article-product-card__main {
    grid-template-columns: 1fr;
  }

  .article-product-card__image-link {
    min-height: 210px;
  }

  .sbs-top-grid,
  .sbs-row__grid {
    grid-template-columns: repeat(3, minmax(309px, 1fr));
    min-width: 945px;
  }

  .sbs-overview,
  .sbs-price,
  .sbs-pros-cons,
  .sbs-rating,
  .sbs-properties,
  .sbs-suitable,
  .sbs-reviews,
  .sbs-list--plain {
    padding: 24px;
  }

  .sbs-overview__image {
    height: 147px;
  }

  .review-detail__layout {
    grid-template-columns: 1fr;
  }

  .review-detail__sidebar {
    display: none;
  }

  .review-detail-mobile-card {
    display: block;
  }

  .review-detail-hero__logo-card {
    flex-basis: 152px;
    width: 152px;
  }

  .review-depth-card {
    grid-template-columns: 1fr;
  }

  .review-depth-offer,
  .review-depth-benefits {
    grid-column: auto;
  }

  .review-depth-card__image {
    height: 240px;
  }

  .review-hub-card__visit,
  .review-hub-card__review {
    width: 125px;
  }

  .sleep-match-panel {
    max-width: 720px;
    padding: 28px 18px 20px;
  }

  .sleep-match-decoration--left {
    left: -42px;
    bottom: -22px;
    width: 92px;
  }

  .sleep-match-decoration--right {
    right: -54px;
    top: 20px;
    width: 128px;
  }

  .homepage-section--ranking .homepage-heading {
    font-size: 36px;
  }

  .homepage-section--ranking .comparison-lead {
    font-size: 15px;
  }

  .icon-category-card {
    width: min(100%, 142px);
    min-height: 142px;
  }

  .partner-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .decision-layout,
  .brand-hero__inner,
  .brand-content__grid,
  .sleep-match-form,
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .footer-objectivity__card {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .footer-objectivity__text {
    font-size: 18px;
    line-height: 29px;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(calc(100% - 28px), var(--container-width));
  }

  .site-main section:not(.homepage-hero) {
    padding: 32px 0;
  }

  .reviews-hero {
    min-height: 134px;
    padding: 0;
  }

  .reviews-hero__inner {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .reviews-hero__description {
    font-size: 14px;
    line-height: 20px;
  }

  .site-main section.review-detail-breadcrumbs {
    padding: 18px 0 0;
  }

  .articles-breadcrumbs ol {
    min-height: 38px;
  }

  .site-main .article-detail-page .article-detail-hero {
    min-height: 142px;
    padding: 24px 0;
  }

  .article-detail-hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .article-detail-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }

  .article-detail-layout {
    display: block;
    margin-top: 24px;
    margin-bottom: 40px;
  }

  .article-detail-main {
    max-width: none;
  }

  .article-detail-sidebar {
    display: none;
  }

  .article-content h2 {
    margin-top: 32px;
    font-size: 25px;
    line-height: 32px;
  }

  .article-content h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .article-top-pick-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .article-top-pick-card__image img {
    height: 140px;
  }

  .article-product-card {
    padding: 22px 16px 16px;
  }

  .article-product-card__details,
  .article-product-card__actions,
  .article-product-card__pros-cons {
    grid-template-columns: 1fr;
  }

  .article-product-card__offer {
    justify-content: center;
    text-align: center;
  }

  .article-inline-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .article-author-box {
    flex-direction: column;
  }

  .articles-shell {
    padding-bottom: 28px;
  }

  .articles-featured-section h1 {
    font-size: 28px;
    line-height: 40px;
  }

  .articles-featured-card {
    flex-direction: column;
    gap: 0;
  }

  .articles-featured-card__image-link,
  .articles-featured-card__body {
    flex: none;
    max-width: none;
    width: 100%;
  }

  .articles-featured-card__image {
    height: 405px;
    max-height: 406px;
  }

  .articles-author {
    margin-top: 24px;
  }

  .articles-featured-card__title {
    font-size: 28px;
    line-height: 34px;
  }

  .articles-featured-card__excerpt {
    -webkit-line-clamp: 3;
  }

  .articles-content-section {
    flex-direction: column-reverse;
    gap: 40px;
    margin-top: 32px;
  }

  .articles-sidebar {
    flex: none;
    width: 100%;
  }

  .articles-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .articles-list-card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    overflow: hidden;
    border: 1px solid #e4e4e5;
    border-radius: 16px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
  }

  .articles-list-card__image-link {
    flex: none;
    border-radius: 8px 8px 0 0;
  }

  .articles-list-card__image {
    width: 100%;
    height: 194px;
  }

  .articles-list-card__body {
    width: 100%;
    padding: 0 16px 16px;
  }

  .articles-list-card__excerpt {
    line-height: 28px;
  }

  .articles-list-card__date {
    margin-top: 8px;
  }

  .articles-recommendations__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }

  .articles-recommendation-card__button {
    flex-basis: 156px;
    width: 156px;
  }

  .sbs-hero {
    padding: 32px 0 24px;
  }

  .sbs-breadcrumbs ol {
    margin-bottom: 32px;
  }

  .sbs-hero h1 {
    font-size: 34px;
    line-height: 40px;
  }

  .sbs-hero p {
    font-size: 14px;
    line-height: 20px;
  }

  .sbs-top-grid,
  .sbs-row__grid {
    grid-template-columns: repeat(3, minmax(234px, 1fr));
    min-width: 720px;
  }

  .sbs-brand-card {
    height: 190px;
    min-height: 190px;
    padding: 28px 16px 12px;
  }

  .sbs-brand-card__visit {
    width: 180px;
  }

  .sbs-add-card {
    height: 190px;
    min-height: 190px;
  }

  .sbs-brand-picker {
    gap: 8px;
    width: 100%;
    padding: 0 12px;
  }

  .sbs-overview,
  .sbs-price,
  .sbs-pros-cons,
  .sbs-rating,
  .sbs-properties,
  .sbs-suitable,
  .sbs-reviews,
  .sbs-list--plain {
    padding: 24px 16px;
  }

  .sbs-overview__image {
    height: 104px;
  }

  .sbs-key-value-list li,
  .sbs-list li {
    font-size: 13px;
    line-height: 24px;
  }

  .sbs-price > strong,
  .sbs-price > span {
    font-size: 22px;
    line-height: 30px;
  }

  .sbs-overall-score {
    gap: 10px;
    padding: 10px;
  }

  .sbs-overall-score span {
    font-size: 16px;
    line-height: 22px;
  }

  .sbs-suitable {
    grid-template-columns: 1fr;
  }

  .review-detail__layout {
    display: block;
  }

  .site-main section.review-detail-hero {
    padding: 16px 0 32px;
  }

  .review-detail-hero__top {
    flex-direction: column;
    gap: 24px;
  }

  .review-detail-hero__logo-card {
    flex: none;
    width: 100%;
    height: 85px;
  }

  .review-detail-hero__logo-card img {
    max-width: 170px;
    max-height: 46px;
  }

  .review-detail-hero__heading {
    min-height: 0;
    gap: 24px;
  }

  .review-detail-authors {
    flex-direction: column;
    gap: 16px;
  }

  .review-detail-author--validated {
    padding-top: 16px;
    padding-left: 0;
    border-top: 1px solid #e4e4e5;
    border-left: 0;
  }

  .review-score-panel__scores {
    align-items: stretch;
  }

  .review-score-panel__metrics {
    gap: 10px;
    padding: 16px;
  }

  .review-detail-benefits {
    justify-content: center;
    gap: 12px 24px;
  }

  .review-detail-nav {
    top: 59px;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-bottom: 24px;
    padding: 6px;
    border-radius: 16px;
  }

  .review-detail-nav.is-stuck {
    width: 100%;
    margin-left: 0;
    padding: 0;
    border-radius: 0;
  }

  .review-detail-nav.is-stuck::before {
    left: -14px;
  }

  .review-detail-nav ul {
    gap: 8px;
    width: 100%;
    min-height: 38px;
  }

  .review-detail-nav.is-stuck ul {
    gap: 8px;
    width: 100%;
    min-height: 48px;
    margin: 0;
  }

  .review-detail-nav a {
    height: 38px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 20px;
  }

  .review-detail-nav.is-stuck a {
    padding: 0 11px;
    font-size: 12px;
    line-height: 16px;
  }

  .site-main section.review-detail-section {
    padding: 0;
    scroll-margin-top: 116px;
  }

  .review-product-grid {
    grid-template-columns: 1fr;
  }

  .review-depth-card {
    padding: 16px;
  }

  .review-depth-specs,
  .review-depth-offer {
    grid-template-columns: 1fr;
  }

  .review-depth-benefits > div {
    gap: 20px;
    padding: 16px;
  }

  .review-video-card,
  .review-video-card img {
    min-height: 190px;
  }

  .review-scale {
    grid-template-columns: 66px minmax(0, 1fr) 72px;
  }

  .review-scale > span {
    font-size: 12px;
    line-height: 16px;
  }

  .review-user-panel {
    padding: 16px;
  }

  .review-user-panel__top {
    align-items: stretch;
    flex-direction: column;
  }

  .review-user-rating {
    width: 100%;
  }

  .review-support-list {
    gap: 12px;
  }

  .review-support-list article {
    gap: 12px;
    min-height: 78px;
    padding: 14px 16px;
    border-radius: 16px;
  }

  .review-support-list article > span {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  .review-support-list article > span img {
    width: 38px;
    height: 38px;
  }

  .review-support-list p {
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 22px;
  }

  .review-support-list strong {
    font-size: 16px;
    line-height: 22px;
  }

  .review-depth-card__image {
    height: 175px;
  }

  .site-header__inner {
    min-height: 58px;
    padding: 0;
  }

  .site-nav {
    display: none;
  }

  .site-menu-toggle {
    display: inline-grid;
    gap: 4px;
    align-content: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
  }

  .site-menu-toggle span {
    display: block;
    width: 21px;
    height: 2px;
    border-radius: 999px;
    background: #323738;
  }

  .site-mobile-nav {
    display: grid;
    gap: 0;
    padding: 0 14px 14px;
    border-top: 1px solid #e4e4e5;
    background: #fff;
  }

  .site-mobile-nav[hidden] {
    display: none;
  }

  .site-mobile-nav a,
  .site-mobile-nav summary {
    display: block;
    padding: 11px 0;
    color: #323738;
    font-size: 15px;
    font-weight: 600;
  }

  .site-mobile-nav details a {
    padding-left: 16px;
    color: #5f6368;
    font-size: 14px;
  }

  .footer-objectivity {
    padding-top: 28px;
  }

  .footer-objectivity__card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .footer-objectivity__badge {
    min-height: 132px;
  }

  .footer-objectivity__icon {
    width: 76px;
    height: auto;
  }

  .footer-objectivity__text {
    padding: 22px 20px;
    font-size: 17px;
    line-height: 28px;
  }

  .site-footer__top {
    padding: 24px 0 20px;
  }

  .site-footer__inner {
    gap: 20px;
  }

  .site-footer__form {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "email"
      "message"
      "submit";
  }

  .site-footer__form textarea {
    min-height: 88px;
  }

  .site-footer__submit {
    width: 100%;
  }

  .icon-category-list,
  .trust-metric-list,
  .ranking-card-grid,
  .ranking-list,
  .partner-logo-grid,
  .guide-strip,
  .reviews-card-grid,
  .comparison-card-grid,
  .brand-specs__grid,
  .brand-ratings__grid {
    grid-template-columns: 1fr;
  }

  .review-hub-card__actions {
    gap: 8px;
  }

  .ranking-carousel {
    padding: 0;
  }

  .ranking-card {
    flex-basis: 100%;
  }

  .ranking-carousel__button {
    display: none;
  }

  .partner-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 32px;
  }

  .partner-logo-item {
    min-height: 96px;
    padding: 18px 22px;
    border-top: 1px solid #dce1f0;
    border-left: 1px solid #dce1f0;
  }

  .partner-logo-item:nth-child(4n+1),
  .partner-logo-item:nth-child(3n+1) {
    border-left: 1px solid #dce1f0;
  }

  .partner-logo-item:nth-child(-n+4),
  .partner-logo-item:nth-child(-n+3) {
    border-top: 1px solid #dce1f0;
  }

  .partner-logo-item:nth-child(2n+1) {
    border-left: 0;
  }

  .partner-logo-item:nth-child(-n+2) {
    border-top: 0;
  }

  .partner-logo-item__image {
    max-width: 150px;
    max-height: 44px;
  }

  .partner-logo-item__fallback {
    font-size: 18px;
  }

  .review-hub-card__visit,
  .review-hub-card__review {
    flex: 1;
    width: auto;
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
  }

  .homepage-section--trust::before,
  .homepage-section--trust::after,
  .ranking-decoration {
    display: none;
  }

  .homepage-section--ranking .ranking-content {
    transform: none;
  }

  .trust-metric-list {
    gap: 18px;
    padding: 0;
  }

  .trust-metric-list::before {
    display: none;
  }

  .trust-metric-card {
    justify-content: flex-start;
  }

  .trust-metric-card__value {
    flex-basis: 96px;
    width: 96px;
    height: 96px;
    font-size: 34px;
    line-height: 34px;
  }

  .trust-metric-card__copy {
    max-width: 100%;
  }

  .decision-copy {
    gap: 18px;
  }

  .decision-copy__title {
    font-size: 26px;
    line-height: 1.15;
  }

  .decision-copy__steps {
    gap: 18px;
  }

  .decision-copy__steps li {
    gap: 8px;
  }

  .homepage-section--ranking .homepage-heading {
    font-size: 29px;
  }

  .homepage-section--ranking .comparison-lead {
    font-size: 14px;
  }

  .homepage-section--comparison .homepage-heading {
    font-size: 30px;
  }

  .homepage-section--comparison .comparison-lead {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.6;
  }

  .faq-list {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .faq-item {
    padding: 12px;
  }

  .homepage-section--cta .section-kicker {
    padding: 8px 14px;
    letter-spacing: 0.12em;
  }

  .homepage-section--cta .homepage-heading {
    font-size: 34px;
  }

  .homepage-section--cta .comparison-lead {
    margin-top: 16px;
    font-size: 17px;
  }

  .sleep-match-panel {
    margin-top: 24px;
    padding: 0;
  }

  .sleep-match-decoration {
    display: none;
  }

  .sleep-match-form {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .sleep-match-form button {
    width: 100%;
  }

  .sleep-match-note {
    margin-top: 10px;
    font-size: 12px;
  }

  .ranking-card__actions {
    grid-template-columns: 1fr;
  }

  .icon-category-card {
    width: min(100%, 220px);
    min-height: 120px;
  }

  .section-heading {
    align-items: flex-start;
  }

  .faq-item__question {
    font-size: 16px;
    line-height: 28px;
  }

  .faq-item__answer p {
    font-size: 16px;
    line-height: 28px;
  }

  .sleep-match-form {
    padding: 16px;
  }
}

@media (max-width: 640px) {
  .articles-featured-card__image {
    height: auto;
    max-height: 406px;
  }

  .articles-list {
    grid-template-columns: 1fr;
  }

  .articles-list-card__image {
    height: 162px;
  }

  .articles-recommendations__list {
    grid-template-columns: 1fr;
  }

  .articles-recommendation-card__button {
    flex-basis: 130px;
    width: 130px;
    height: 38px;
  }
}