/* AUDIT #22 — hệ token ngữ nghĩa.
 *
 * Trước đây chỉ có 8 token nên giao diện tối phải override thủ công từng
 * component: 12 selector cùng khai `background: #17232c`. Mỗi component mới
 * lại thêm một dòng override — không bền vững.
 *
 * Giờ component tham chiếu token; đổi giao diện chỉ cần đổi giá trị token. */
:root {
  /* Fonts */
  --font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;

  /* Nền */
  --paper: #f8fafb; /* nền trang */
  --surface: #ffffff; /* thẻ, panel, ô nhập */
  --surface-sunken: #eef3f6; /* vùng chìm */
  --surface-inverse: #0b141c; /* khối tối trên nền sáng */

  /* Chữ */
  --ink: #14222f;
  --muted: #52636f;
  --on-inverse: #8fa1ad;

  /* Viền */
  --line: #d8e0e7;
  --line-strong: #2d3c47;

  /* Nhấn */
  --blue: #1558d6;
  --orange: #bd451f;
  --mint: #b9eadc;
  --lav: #d8d6ff;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans), Arial, sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
}
.site {
  min-height: 100vh;
  background: var(--paper);
  transition:
    background 0.25s,
    color 0.25s;
}
.announcement-dot,
.sticky-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff8763;
  box-shadow: 0 0 0 4px #ff876322;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.06em;
  white-space: nowrap;
}
.brand > span:last-child > span {
  color: var(--blue);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--blue);
  border-radius: 10px 10px 10px 3px;
  font:
    700 19px var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.06em;
}
.hero {
  max-width: 1260px;
  padding: 74px 28px 86px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.eyebrow,
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font:
    500 10px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.13em;
  color: var(--blue);
}
.eyebrow-line {
  width: 32px;
  height: 1px;
  background: var(--blue);
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1 {
  font:
    700 clamp(48px, 6.2vw, 82px)/0.99 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.055em;
  margin: 23px 0 24px;
}
h1 em,
h2 em {
  color: var(--orange);
  font-style: italic;
}
.hero-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 460px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 34px;
}
.primary-button,
.dark-button,
.affiliate-button {
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.primary-button {
  padding: 14px 18px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 7px 20px #2469f52b;
}
.primary-button:hover,
.affiliate-button:hover,
.dark-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px #2469f52b;
}
.secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  transition:
    transform 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.secondary-button:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  background: #2469f50d;
}
.text-link,
.view-all,
.arrow-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.text-link span,
.view-all span {
  color: var(--blue);
  margin-left: 5px;
}
.trust-row {
  display: flex;
  gap: 24px;
  margin-top: 58px;
  color: var(--muted);
  font:
    10px var(--font-mono),
    ui-monospace,
    monospace;
}
.trust-row b {
  display: block;
  color: var(--ink);
  font:
    600 20px var(--font-sans),
    Arial,
    sans-serif;
  margin-bottom: 4px;
}
.hero-visual {
  position: relative;
  min-height: 480px;
}
.hero-card-main {
  position: absolute;
  top: 0;
  right: 45px;
  width: min(90%, 490px);
  height: 385px;
  overflow: hidden;
  border-radius: 140px 12px 12px 12px;
  border: 1px solid var(--line);
  background: #dde3e8;
}
.hero-card-main picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-card-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-card-overlay {
  position: absolute;
  inset: auto 20px 20px 20px;
  border-radius: 8px;
  background: #14222fe9;
  color: #fff;
  padding: 15px 17px;
}
.hero-card-overlay p {
  font-size: 13px;
  line-height: 1.35;
  margin-top: 12px;
}
.hero-card-arrow {
  position: absolute;
  right: 16px;
  bottom: 18px;
  color: #ff9d79;
  font-size: 22px;
}
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  font:
    500 9px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
}
.pill.orange {
  background: #ffeadf;
  color: #a63c19;
}
.pill.blue {
  background: #e3ecff;
  color: #1558d6;
}
.pill.violet {
  background: #e8e6ff;
  color: #5d55c7;
}
.pill.ink {
  background: #e9eff3;
  color: #40515d;
}
.hero-score {
  position: absolute;
  right: 0;
  top: 318px;
  width: 154px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 12px 30px #14222f12;
}
.score-label {
  display: block;
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.hero-score strong {
  font-size: 43px;
  letter-spacing: -0.08em;
}
.hero-score > span:not(.score-label) {
  color: var(--muted);
  font-size: 11px;
}
.mini-stars {
  color: var(--orange);
  letter-spacing: 2px;
  font-size: 12px;
  margin-top: 2px;
}
.hero-note {
  position: absolute;
  left: 0;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 12px 15px;
  border-radius: 8px;
  box-shadow: 0 12px 30px #14222f12;
}
.hero-note > span {
  color: var(--blue);
  font-size: 24px;
}
.hero-note b,
.hero-note small {
  display: block;
}
.hero-note b {
  font-size: 11px;
}
.hero-note small {
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
}
.ticker {
  overflow: hidden;
  background: var(--orange);
  color: #fff;
  padding: 12px 0;
  font:
    500 10px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 26px;
  animation: marquee 35s linear infinite;
}
.ticker i {
  font-style: normal;
  font-size: 14px;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.section {
  max-width: 1260px;
  margin: auto;
  padding: 100px 28px;
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}
.section-muted {
  max-width: none;
  background: var(--surface-sunken);
  padding-left: max(28px, calc((100vw - 1204px) / 2));
  padding-right: max(28px, calc((100vw - 1204px) / 2));
}
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: end;
  margin-bottom: 38px;
}
.section-heading h2 {
  font:
    600 clamp(38px, 4vw, 60px)/0.98 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.055em;
  margin-top: 15px;
}
.section-intro {
  width: 280px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  padding-bottom: 3px;
}
.view-all {
  color: var(--muted);
  padding-bottom: 9px;
}
.trend-section {
  padding-bottom: 52px;
}
.trend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.trend-card {
  position: relative;
  display: grid;
  grid-template-columns: 115px 1fr;
  min-height: 190px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.trend-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trend-rank {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 1;
  color: #fff;
  background: #14222fc7;
  border-radius: 4px;
  padding: 4px 6px;
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
}
.trend-card-body {
  padding: 16px 15px;
  display: flex;
  flex-direction: column;
}
.trend-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
  text-transform: uppercase;
}
.trend-meta .verified {
  color: #d85d37;
}
.trend-meta .researched {
  color: var(--blue);
}
.trend-card h3 {
  font:
    600 18px/1.1 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.035em;
  margin: 14px 0 7px;
}
.trend-card p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trend-footer {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.trend-footer strong {
  font-size: 11px;
}
.trend-footer span {
  color: var(--blue);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.data-note {
  margin-top: 17px;
  color: var(--muted);
  font:
    9px/1.55 var(--font-mono),
    ui-monospace,
    monospace;
  max-width: 850px;
}
.trend-loading {
  grid-column: 1/-1;
  padding: 30px;
  border: 1px dashed var(--line);
  color: var(--muted);
  text-align: center;
  border-radius: 8px;
  font-size: 12px;
}
.deal-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
}
.deal-feature,
.deal-small {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.deal-feature {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
}
.deal-feature-img {
  position: relative;
  min-height: 300px;
}
.deal-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.discount {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--orange);
  color: #fff;
  border-radius: 4px;
  padding: 7px 9px;
  font:
    500 11px var(--font-mono),
    ui-monospace,
    monospace;
}
.deal-body {
  padding: 27px 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.product-meta,
.card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}
.product-meta > span:last-child {
  color: var(--muted);
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
}
.deal-body h3 {
  font:
    600 29px var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.04em;
  margin-top: 27px;
}
.muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.price-row {
  margin: 21px 0 22px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.price-row strong {
  font-size: 23px;
  letter-spacing: -0.04em;
}
.price-row del {
  color: #a3adb3;
  font-size: 11px;
}
.affiliate-button {
  padding: 12px 14px;
  color: #fff;
  background: var(--blue);
  font-size: 11px;
}
.affiliate-button.disabled {
  background: #d8e0e7;
  color: #4d5b66;
  cursor: not-allowed;
  box-shadow: none;
}
.affiliate-button.disabled:hover {
  transform: none;
  box-shadow: none;
}
.affiliate-button.compact {
  padding: 9px 11px;
  font-size: 10px;
}
.deal-side {
  display: grid;
  gap: 18px;
}
.deal-small {
  display: grid;
  grid-template-columns: 145px 1fr;
  min-height: 143px;
}
.deal-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.deal-small > div {
  padding: 18px 18px;
}
.deal-small h4 {
  font:
    600 17px var(--font-display),
    Georgia,
    serif;
  margin: 15px 0 8px;
}
.deal-small strong {
  display: block;
  font-size: 16px;
}
.arrow-link {
  display: inline-block;
  color: var(--blue);
  margin-top: 12px;
  font-size: 10px;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.category-card {
  min-height: 160px;
  padding: 20px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid transparent;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px #14222f12;
}
.category-card.coral {
  background: #ffe6db;
}
.category-card.sky {
  background: #dcedff;
}
.category-card.violet {
  background: #e8e6ff;
}
.category-card.mint {
  background: #d9f2ea;
}
.category-icon {
  font-size: 30px;
}
.category-card h3 {
  font:
    600 19px var(--font-display),
    Georgia,
    serif;
}
.category-card span:last-child {
  color: #53626c;
  font:
    10px var(--font-mono),
    ui-monospace,
    monospace;
}
.category-card span:last-child b {
  float: right;
  color: var(--ink);
  font-size: 16px;
}
.collections-section {
  padding-top: 64px;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.collection-card {
  min-height: 244px;
  border-radius: 10px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px #14222f17;
}
.collection-card.coral {
  background: linear-gradient(140deg, #ffe8de, #ffd4c3);
}
.collection-card.sky {
  background: linear-gradient(140deg, #e5f1ff, #cfe4ff);
}
.collection-card.violet {
  background: linear-gradient(140deg, #eeedff, #dcd9ff);
}
.collection-eyebrow {
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.12em;
  color: #586872;
}
.collection-card h3 {
  font:
    600 31px/0.95 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.05em;
  margin: 35px 0 10px;
}
.collection-card p {
  font-size: 11px;
  color: #596b76;
}
.collection-arrow {
  margin-top: auto;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}
.collection-arrow b {
  color: var(--blue);
  font-size: 15px;
  margin-left: 5px;
}
.coupon-strip {
  margin-top: 16px;
  border: 1px dashed #aab9c4;
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
}
.coupon-icon {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: #fff;
  font:
    600 16px var(--font-display),
    Georgia,
    serif;
}
.coupon-strip b,
.coupon-strip small {
  display: block;
}
.coupon-strip b {
  font-size: 12px;
}
.coupon-strip small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.coupon-strip a {
  margin-left: auto;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.review-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.review-card.featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.18fr 1fr;
}
.review-image {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: #dce4e9;
}
.featured .review-image {
  height: 100%;
  min-height: 300px;
}
.review-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.review-card:hover img {
  transform: scale(1.04);
}
.review-image .pill {
  position: absolute;
  top: 14px;
  left: 14px;
}
.image-number {
  position: absolute;
  right: 14px;
  top: 14px;
  font:
    10px var(--font-mono),
    ui-monospace,
    monospace;
  color: #fff;
  mix-blend-mode: difference;
}
.review-content {
  padding: 19px 20px 18px;
}
.card-topline > span:first-child {
  color: var(--muted);
  font:
    10px var(--font-mono),
    ui-monospace,
    monospace;
  text-transform: uppercase;
}
.score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.score small {
  color: var(--muted);
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
}
.score-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.review-content h3 {
  font:
    600 24px var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.04em;
  margin: 20px 0 7px;
}
.review-content p {
  color: var(--muted);
  font-size: 12px;
}
.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 15px;
}
.review-footer strong {
  font-size: 15px;
}
.review-footer a {
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
}
.test-section {
  background: var(--ink);
  max-width: none;
  color: #eef7fb;
  padding-left: max(28px, calc((100vw - 1204px) / 2));
  padding-right: max(28px, calc((100vw - 1204px) / 2));
}
.test-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 90px;
  align-items: center;
}
.test-copy h2 {
  font:
    600 clamp(39px, 4vw, 58px)/1 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.055em;
  margin: 16px 0 23px;
}
.test-copy h2 em {
  color: #ff9c73;
}
.test-copy > p {
  color: #a9bac5;
  font-size: 14px;
  line-height: 1.6;
  max-width: 380px;
}
.dark-button {
  margin-top: 28px;
  padding: 13px 15px;
  background: #f4fbff;
  color: var(--ink);
  font-size: 12px;
}
.test-stats {
  display: flex;
  gap: 38px;
  border-top: 1px solid #3a4b57;
  margin-top: 54px;
  padding-top: 20px;
}
.test-stats strong {
  display: block;
  font:
    600 31px var(--font-display),
    Georgia,
    serif;
}
.test-stats span {
  display: block;
  color: #9aaeb9;
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
  line-height: 1.4;
  margin-top: 3px;
}
.test-visual {
  position: relative;
  min-height: 430px;
  border-radius: 10px;
  overflow: hidden;
}
.test-visual > img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  filter: saturate(0.8);
}
.test-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #14222fdd 0%, transparent 60%);
}
.test-stamp {
  position: absolute;
  z-index: 1;
  top: 19px;
  right: 19px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: #14222f;
  background: #d9f2ea;
  border-radius: 50%;
  width: 86px;
  height: 86px;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transform: rotate(12deg);
}
.test-stamp span {
  font-size: 17px;
}
.test-stamp b {
  font:
    500 8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.08em;
}
.test-caption {
  position: absolute;
  z-index: 1;
  left: 21px;
  right: 21px;
  bottom: 20px;
}
.test-caption span {
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
  color: #ffad8b;
}
.test-caption strong {
  display: block;
  font:
    600 30px/1.05 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.04em;
  margin: 10px 0 15px;
}
.test-caption a {
  font-size: 11px;
  color: #d9f2ea;
}
.test-section .kicker {
  color: #8fb2ff;
}
.comparison-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 9px;
  display: grid;
  grid-template-columns: 1fr 58px 1fr 1.25fr;
  align-items: center;
  padding: 25px 25px 25px 30px;
  gap: 18px;
}
.comparison-product {
  position: relative;
  text-align: center;
}
.comparison-product img {
  width: 140px;
  height: 110px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
  margin: 8px auto 12px;
}
.comparison-product h3 {
  font:
    600 20px var(--font-display),
    Georgia,
    serif;
}
.comparison-product > strong {
  display: block;
  font-size: 14px;
  margin: 4px 0 7px;
}
.comparison-label {
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
  color: var(--muted);
}
.comparison-label.winner {
  color: var(--blue);
}
.versus {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font:
    10px var(--font-mono),
    ui-monospace,
    monospace;
}
.comparison-summary {
  border-left: 1px solid var(--line);
  padding-left: 28px;
}
.comparison-summary h3 {
  font:
    600 24px/1.12 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.04em;
  margin: 11px 0;
}
.comparison-summary p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  max-width: 260px;
}
.comparison-summary .text-link {
  display: inline-block;
  margin-top: 18px;
}
.newsletter {
  max-width: 1260px;
  margin: 0 auto;
  padding: 82px 28px 90px;
  display: flex;
  justify-content: space-between;
  gap: 60px;
}
.newsletter h2 {
  font:
    600 50px/0.98 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.055em;
  margin: 16px 0 17px;
}
.newsletter p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  max-width: 335px;
}
.newsletter form {
  width: 390px;
  padding-top: 17px;
}
.newsletter label {
  display: block;
  font:
    10px var(--font-mono),
    ui-monospace,
    monospace;
  color: var(--muted);
  margin-bottom: 9px;
}
.email-row {
  display: flex;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
}
.email-row input {
  border: 0;
  outline: 0;
  flex: 1;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
}
.email-row button {
  background: transparent;
  border: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.newsletter small {
  color: var(--muted);
  font-size: 10px;
  display: block;
  margin-top: 10px;
}
.email-row button:disabled,
.email-row input:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
.newsletter-consent {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  margin-top: 13px !important;
  color: var(--muted);
  font:
    10px/1.45 var(--font-sans),
    Arial,
    sans-serif !important;
}
.newsletter-consent input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--blue);
}
.newsletter-consent span {
  flex: 1;
}
.newsletter-consent a,
.newsletter small a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.newsletter-honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.newsletter small.success {
  color: #176b52;
}
.newsletter small.error {
  color: #a33b24;
}
.sticky-cta {
  display: none;
}
.finder-page {
  min-height: 100vh;
  background: var(--paper);
}
.finder-announcement {
  min-height: 34px;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--ink);
  color: #e9f0f4;
  font:
    500 10px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.05em;
}
.finder-hero {
  color: #fff;
  background: var(--ink);
  padding: 72px max(28px, calc((100vw - 1204px) / 2));
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: end;
}
.finder-hero h1 {
  max-width: 800px;
  font-size: clamp(50px, 6vw, 82px);
  margin-bottom: 20px;
}
.finder-hero p {
  color: #a9bac5;
  max-width: 620px;
  line-height: 1.65;
}
.finder-hero .kicker {
  color: #8fb2ff;
}
.finder-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #344652;
  border-radius: 14px;
  overflow: hidden;
}
.finder-trust div {
  padding: 20px 15px;
  text-align: center;
  border-right: 1px solid #344652;
}
.finder-trust div:last-child {
  border: 0;
}
.finder-trust strong,
.finder-trust span {
  display: block;
}
.finder-trust strong {
  font:
    600 28px var(--font-display),
    Georgia,
    serif;
  color: #ffad8b;
}
.finder-trust span {
  margin-top: 5px;
  color: #9fb0ba;
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
}
.finder-workspace {
  max-width: 1260px;
  margin: auto;
  padding: 72px 28px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  align-items: start;
}
.finder-form,
.finder-results {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 14px 40px #14222f0d;
}
.finder-form-title span,
.finder-results-heading span {
  color: var(--blue);
  font:
    500 9px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.12em;
}
.finder-form-title h2,
.finder-results-heading h2 {
  margin-top: 8px;
  font:
    600 27px var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.04em;
}
.finder-form label {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 700;
}
.finder-form select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 9px;
  padding: 0 12px;
  outline: none;
}
.finder-form select:focus {
  border-color: var(--blue);
}
.finder-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.finder-submit {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  margin-top: 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px #1558d62e;
}
.finder-fineprint {
  color: var(--muted);
  font:
    9px/1.55 var(--font-mono),
    ui-monospace,
    monospace;
  margin-top: 15px;
}
.finder-results-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
}
.finder-results-heading b {
  color: #176b52;
  background: #daf3e7;
  border-radius: 999px;
  padding: 7px 11px;
  font:
    700 10px var(--font-mono),
    ui-monospace,
    monospace;
  white-space: nowrap;
}
.finder-empty {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: var(--muted);
}
.finder-empty > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--blue);
  font-size: 25px;
}
.finder-empty strong {
  color: var(--ink);
  margin-top: 17px;
}
.finder-empty p {
  margin-top: 7px;
  font-size: 12px;
}
.finder-result-list {
  display: grid;
  gap: 10px;
  margin-top: 21px;
}
.finder-result-list article {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 15px;
}
.finder-result-list article.best {
  border-color: #8fb2ff;
  background: #f2f6ff;
}
.finder-result-rank {
  color: var(--blue);
  font:
    700 9px var(--font-mono),
    ui-monospace,
    monospace;
}
.finder-result-list article > div:nth-child(2) > span {
  color: var(--muted);
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
}
.finder-result-list h3 {
  font:
    600 19px var(--font-display),
    Georgia,
    serif;
  margin: 5px 0;
}
.finder-result-list p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  max-width: 440px;
}
.finder-result-list small {
  display: block;
  color: var(--blue);
  margin-top: 7px;
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
}
.finder-result-action {
  text-align: right;
}
.finder-result-action strong,
.finder-result-action a {
  display: block;
}
.finder-result-action strong {
  font-size: 13px;
}
.finder-result-action a {
  color: var(--blue);
  margin-top: 10px;
  font-size: 10px;
  font-weight: 700;
}
.finder-guidance {
  max-width: 1204px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  padding: 0 28px;
}
.finder-guidance article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}
.finder-guidance span {
  color: var(--blue);
  font:
    10px var(--font-mono),
    ui-monospace,
    monospace;
}
.finder-guidance h2 {
  font:
    600 21px var(--font-display),
    Georgia,
    serif;
  margin-top: 10px;
}
.finder-guidance p {
  color: var(--muted);
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.55;
}
@media (max-width: 960px) {
  .hero {
    gap: 35px;
  }
  .hero-card-main {
    right: 10px;
  }
  .trend-grid {
    grid-template-columns: 1fr 1fr;
  }
  .test-layout {
    gap: 40px;
  }
  .comparison-card {
    grid-template-columns: 1fr 42px 1fr;
  }
  .comparison-summary {
    grid-column: 1/-1;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 22px 0 0;
    text-align: center;
  }
  .comparison-summary p {
    margin: auto;
  }
  .comparison-summary .text-link {
    margin-top: 14px;
  }
}
@media (max-width: 700px) {
  .brand {
    font-size: 20px;
  }
  .hero {
    display: block;
    padding: 44px 16px 54px;
  }
  .hero h1 {
    font-size: 53px;
  }
  .hero-lede {
    font-size: 15px;
  }
  .hero-actions {
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 26px;
  }
  .hero-actions .primary-button,
  .hero-actions .secondary-button {
    flex: 1;
    min-width: 145px;
  }
  .trust-row {
    margin-top: 40px;
    gap: 17px;
  }
  .trust-row b {
    font-size: 16px;
  }
  .hero-visual {
    min-height: 400px;
    margin-top: 36px;
  }
  .hero-card-main {
    width: calc(100% - 22px);
    height: 315px;
    right: 0;
    border-radius: 95px 10px 10px 10px;
  }
  .hero-score {
    top: 252px;
    right: -1px;
  }
  .hero-note {
    bottom: 5px;
    left: 3px;
  }
  .section,
  .newsletter {
    padding: 66px 16px;
  }
  .section-muted,
  .test-section {
    padding-left: 16px;
    padding-right: 16px;
  }
  .section-heading {
    display: block;
    margin-bottom: 28px;
  }
  .section-heading h2 {
    font-size: 43px;
  }
  .view-all {
    display: inline-block;
    margin-top: 18px;
  }
  .section-intro {
    width: auto;
    margin-top: 20px;
  }
  .deal-grid {
    display: block;
  }
  .deal-feature {
    display: block;
  }
  .deal-feature-img {
    min-height: 230px;
  }
  .deal-body h3 {
    font-size: 25px;
  }
  .deal-side {
    margin-top: 14px;
  }
  .deal-small {
    grid-template-columns: 125px 1fr;
  }
  .category-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .category-card {
    min-height: 140px;
    padding: 15px;
  }
  .category-card h3 {
    font-size: 16px;
  }
  .review-grid {
    display: block;
  }
  .review-card,
  .review-card.featured {
    display: block;
    margin-bottom: 14px;
  }
  .featured .review-image,
  .review-image {
    height: 220px;
    min-height: 0;
  }
  .collection-grid {
    grid-template-columns: 1fr;
  }
  .collection-card {
    min-height: 205px;
  }
  .collection-card h3 {
    margin-top: 28px;
  }
  .coupon-strip {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .coupon-strip a {
    margin-left: 43px;
  }
  .test-layout {
    display: block;
  }
  .test-copy {
    margin-bottom: 30px;
  }
  .test-copy h2 {
    font-size: 43px;
  }
  .test-stats {
    gap: 20px;
    margin-top: 37px;
  }
  .test-visual,
  .test-visual > img {
    min-height: 340px;
  }
  .test-caption strong {
    font-size: 27px;
  }
  .comparison-card {
    grid-template-columns: 1fr 32px 1fr;
    padding: 18px 12px;
    gap: 5px;
  }
  .comparison-product img {
    width: 100px;
    height: 78px;
  }
  .comparison-product h3 {
    font-size: 16px;
  }
  .newsletter {
    display: block;
  }
  .newsletter h2 {
    font-size: 43px;
  }
  .newsletter form {
    width: auto;
    margin-top: 31px;
  }
  .sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: #14222ff2;
    backdrop-filter: blur(12px);
    color: #fff;
    padding: 11px 14px;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
  }
  .sticky-cta > div {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .sticky-cta b {
    color: #ffab89;
  }
  .sticky-cta a {
    background: var(--orange);
    padding: 9px 13px;
    border-radius: 5px;
    font-size: 11px;
  }
}
@media (max-width: 700px) {
  .trend-grid {
    grid-template-columns: 1fr;
  }
  .trend-card {
    grid-template-columns: 105px 1fr;
    min-height: 176px;
  }
}
@media (max-width: 760px) {
  .finder-hero {
    display: block;
    padding: 48px 16px;
  }
  .finder-hero h1 {
    font-size: 51px;
  }
  .finder-trust {
    margin-top: 32px;
  }
  .finder-workspace {
    display: block;
    padding: 38px 16px;
  }
  .finder-results {
    margin-top: 15px;
  }
  .finder-form-grid {
    grid-template-columns: 1fr;
  }
  .finder-result-list article {
    grid-template-columns: 1fr;
  }
  .finder-result-rank {
    margin-bottom: -4px;
  }
  .finder-result-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .finder-result-action a {
    margin: 0;
  }
  .finder-guidance {
    grid-template-columns: 1fr;
    padding: 0 16px;
    margin-bottom: 55px;
  }
  .finder-announcement {
    font-size: 8px;
    text-align: center;
  }
}

/* Editorial hub routes */
.hub-page {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
}
.hub-hero {
  min-height: 500px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items: end;
  gap: 70px;
  padding: 84px max(28px, calc((100vw - 1204px) / 2));
  color: #fff;
  background: var(--ink);
}
.hub-hero .kicker {
  color: #8fb2ff;
}
.hub-hero h1 {
  max-width: 850px;
  margin: 18px 0 24px;
  font:
    600 clamp(58px, 7vw, 96px)/0.91 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.065em;
}
.hub-hero h1 em {
  color: #ff9b72;
  font-weight: 500;
}
.hub-hero p {
  max-width: 650px;
  color: #b3c0c8;
  font-size: 16px;
  line-height: 1.7;
}
.hub-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #344652;
  border-radius: 16px;
  overflow: hidden;
}
.hub-stats div {
  padding: 22px 14px;
  text-align: center;
  border-right: 1px solid #344652;
}
.hub-stats div:last-child {
  border: 0;
}
.hub-stats strong,
.hub-stats span {
  display: block;
}
.hub-stats strong {
  color: #ffb08e;
  font:
    600 28px var(--font-display),
    Georgia,
    serif;
}
.hub-stats span {
  margin-top: 6px;
  color: #94a7b3;
  font:
    9px/1.35 var(--font-mono),
    ui-monospace,
    monospace;
}
.hub-content {
  max-width: 1260px;
  margin: auto;
  padding: 92px 28px 105px;
}
.hub-content-heading {
  display: flex;
  justify-content: space-between;
  gap: 45px;
  align-items: end;
  margin-bottom: 40px;
}
.hub-content-heading h2 {
  margin-top: 14px;
  font:
    600 clamp(39px, 4vw, 58px)/0.98 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.055em;
}
.hub-content-heading h2 em {
  color: var(--blue);
}
.hub-content-heading > p {
  max-width: 330px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.hub-card {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 14px 35px #14222f09;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.hub-card:hover {
  transform: translateY(-4px);
  border-color: #9db8ed;
}
.hub-card-top {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
}
.hub-card-top span,
.hub-card-top b {
  font:
    700 9px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.06em;
}
.hub-card-top span {
  color: var(--blue);
}
.hub-card-top b {
  padding: 7px 9px;
  border-radius: 999px;
  color: #176b52;
  background: #dcf3e9;
}
.hub-card.orange .hub-card-top span {
  color: #d8562d;
}
.hub-card.violet .hub-card-top span {
  color: #7651b7;
}
.hub-card.mint .hub-card-top span {
  color: #176b52;
}
.hub-card h3 {
  margin: 42px 0 15px;
  font:
    600 29px/1.04 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.045em;
}
.hub-card > p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.hub-card-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 30px;
}
.hub-card-footer span {
  color: var(--muted);
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
}
.hub-card-footer a {
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.hub-cta {
  padding: 75px max(28px, calc((100vw - 1204px) / 2));
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 50px;
  color: #fff;
  background: var(--blue);
}
.hub-cta .kicker {
  color: #cbdcff;
}
.hub-cta h2 {
  max-width: 720px;
  margin-top: 14px;
  font:
    600 clamp(38px, 4vw, 57px)/1 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.05em;
}
.hub-cta p {
  max-width: 630px;
  margin-top: 14px;
  color: #dce8ff;
  font-size: 13px;
  line-height: 1.6;
}
.hub-cta > a {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 0 19px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .hub-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .hub-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hub-card:last-child {
    grid-column: 1/-1;
  }
  .hub-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 650px) {
  .hub-hero {
    padding: 54px 16px;
    gap: 38px;
  }
  .hub-hero h1 {
    font-size: 53px;
  }
  .hub-hero p {
    font-size: 14px;
  }
  .hub-stats strong {
    font-size: 22px;
  }
  .hub-stats div {
    padding: 16px 8px;
  }
  .hub-content {
    padding: 62px 16px 70px;
  }
  .hub-content-heading {
    display: block;
  }
  .hub-content-heading > p {
    margin-top: 20px;
  }
  .hub-grid {
    grid-template-columns: 1fr;
  }
  .hub-card:last-child {
    grid-column: auto;
  }
  .hub-card {
    min-height: 300px;
  }
  .hub-cta {
    padding: 55px 16px;
  }
  .hub-cta > a {
    width: 100%;
    justify-content: space-between;
  }
}

/* Evidence-first review detail */
.review-detail-page {
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
}
.review-detail-hero {
  max-width: 1260px;
  margin: auto;
  padding: 55px 28px 70px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 55px;
  align-items: center;
}
.review-product-visual {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  border-radius: 140px 18px 18px 18px;
  background: #e8eef2;
}
.review-product-visual img {
  width: 100%;
  height: 100%;
  min-height: 540px;
  object-fit: cover;
}
.product-image-disclosure {
  position: absolute;
  left: 20px;
  bottom: 18px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #fff;
  background: #14222fd9;
  backdrop-filter: blur(8px);
  font:
    700 8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.06em;
}
.review-hero-copy h1 {
  margin: 16px 0 17px;
  font:
    600 clamp(47px, 5vw, 72px)/0.94 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.06em;
}
.review-trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  color: var(--muted);
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
}
.review-trust-line > * {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.review-trust-line b.researched {
  color: #9b4b28;
  background: #fff0e8;
  border-color: #ffd1bd;
}
.review-trust-line b.tested {
  color: #176b52;
  background: #dcf3e9;
  border-color: #a9dfca;
}
.quick-verdict {
  margin-top: 27px;
  padding: 20px;
  border-left: 4px solid var(--blue);
  background: #edf3ff;
}
.quick-verdict span {
  color: var(--blue);
  font:
    700 9px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.08em;
}
.quick-verdict p {
  margin-top: 9px;
  font:
    600 19px/1.35 var(--font-display),
    Georgia,
    serif;
}
.review-price-line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-top: 23px;
}
.review-price-line small,
.review-price-line strong {
  display: block;
}
.review-price-line small {
  color: var(--muted);
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
}
.review-price-line > div:first-child strong {
  margin-top: 6px;
  font-size: 24px;
}
.review-score {
  text-align: right;
}
.review-score strong {
  display: inline;
  color: var(--blue);
  font:
    600 38px var(--font-display),
    Georgia,
    serif;
}
.review-score span {
  margin-left: 4px;
  color: var(--muted);
  font-size: 10px;
}
.review-offers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 22px;
}
.review-offers a,
.review-offers span {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.review-offers a {
  color: #fff;
  background: var(--blue);
}
.review-offers a.best-deal {
  color: #5f310d;
  background: #ffd8a8;
}
.review-offers span {
  color: #8d9ca6;
  background: #eef2f4;
  border: 1px solid var(--line);
}
.review-jump {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: 30px;
  min-height: 48px;
  padding: 0 18px;
  align-items: center;
  overflow: auto;
  white-space: nowrap;
  background: #fffdf8f2;
  backdrop-filter: blur(12px);
  border-block: 1px solid var(--line);
}
.review-jump a {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.review-section {
  max-width: 1120px;
  margin: auto;
  padding: 90px 28px;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 70px;
  border-bottom: 1px solid var(--line);
}
.review-section-title > span {
  color: var(--blue);
  font:
    700 9px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.08em;
}
.review-section-title h2 {
  margin-top: 14px;
  font:
    600 clamp(37px, 4vw, 55px)/0.98 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.055em;
}
.review-section-title h2 em {
  color: var(--orange);
}
.score-panel {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 26px;
  align-items: center;
  padding: 30px;
  border-radius: 18px;
  color: #fff;
  background: var(--ink);
}
.score-panel > strong {
  display: grid;
  place-items: center;
  width: 145px;
  height: 145px;
  border: 1px solid #49606f;
  border-radius: 50%;
  color: #ffad8b;
  font:
    600 38px var(--font-display),
    Georgia,
    serif;
}
.score-panel h3 {
  font:
    600 27px var(--font-display),
    Georgia,
    serif;
}
.score-panel p {
  margin-top: 10px;
  color: #aebcc5;
  font-size: 12px;
  line-height: 1.7;
}
.pros-cons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pros-cons-grid article {
  padding: 26px;
  border-radius: 16px;
  background: #e4f5ee;
  border: 1px solid #b8e5d2;
}
.pros-cons-grid article.cons {
  background: #fff0eb;
  border-color: #ffd1c1;
}
.pros-cons-grid h3 {
  margin-bottom: 18px;
  font:
    600 24px var(--font-display),
    Georgia,
    serif;
}
.pros-cons-grid p {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
}
.pros-cons-grid article:not(.cons) p {
  color: #176b52;
}
.pros-cons-grid .cons p {
  color: #9b4b28;
}
.spec-table {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.spec-table > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 17px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.spec-table > div:last-child {
  border: 0;
}
.spec-table span {
  color: var(--muted);
  font-size: 11px;
}
.spec-table strong {
  font-size: 11px;
  text-align: right;
}
.review-test-section {
  padding: 90px max(28px, calc((100vw - 1064px) / 2));
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  color: #fff;
  background: var(--ink);
}
.review-test-section .kicker {
  color: #8fb2ff;
}
.review-test-section h2 {
  margin: 15px 0;
  font:
    600 clamp(40px, 4vw, 58px)/0.98 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.055em;
}
.review-test-section h2 em {
  color: #ffad8b;
}
.review-test-section > div:first-child p {
  color: #aebcc5;
  font-size: 13px;
  line-height: 1.7;
}
.test-checklist {
  border: 1px solid #344652;
  border-radius: 14px;
  overflow: hidden;
}
.test-checklist > div {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 15px 17px;
  border-bottom: 1px solid #344652;
}
.test-checklist > div:last-child {
  border: 0;
}
.test-checklist span {
  color: #ffad8b;
}
.test-checklist b {
  font-size: 11px;
}
.test-checklist small,
.test-checklist a {
  color: #80939f;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.final-verdict {
  padding: 32px;
  border: 1px solid #bad1ff;
  border-radius: 18px;
  background: #eef4ff;
}
.final-verdict > b {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  font:
    800 9px var(--font-mono),
    ui-monospace,
    monospace;
}
.final-verdict h3 {
  margin: 19px 0 12px;
  font:
    600 30px/1.05 var(--font-display),
    Georgia,
    serif;
}
.final-verdict p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.final-verdict a {
  display: inline-block;
  margin-top: 23px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}
.review-mobile-cta {
  display: none;
}

@media (max-width: 800px) {
  .review-detail-hero {
    grid-template-columns: 1fr;
  }
  .review-product-visual,
  .review-product-visual img {
    min-height: 360px;
  }
  .review-product-visual {
    border-radius: 90px 14px 14px 14px;
  }
  .review-section,
  .review-test-section {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .review-offers {
    grid-template-columns: 1fr;
  }
  .review-mobile-cta {
    position: fixed;
    z-index: 40;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    color: #fff;
    background: #14222ff2;
    backdrop-filter: blur(12px);
  }
  .review-mobile-cta small,
  .review-mobile-cta strong {
    display: block;
  }
  .review-mobile-cta small {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #aebcc5;
    font-size: 8px;
  }
  .review-mobile-cta strong {
    margin-top: 3px;
    font-size: 12px;
  }
  .review-mobile-cta a {
    padding: 10px 13px;
    border-radius: 7px;
    color: #fff;
    background: var(--orange);
    font-size: 10px;
    font-weight: 800;
  }
}
@media (max-width: 560px) {
  .review-detail-hero {
    padding: 35px 16px 50px;
    gap: 32px;
  }
  .review-hero-copy h1 {
    font-size: 48px;
  }
  .review-jump {
    justify-content: flex-start;
  }
  .review-section {
    padding: 65px 16px;
  }
  .score-panel {
    grid-template-columns: 1fr;
  }
  .score-panel > strong {
    width: 110px;
    height: 110px;
  }
  .pros-cons-grid {
    grid-template-columns: 1fr;
  }
  .review-test-section {
    padding: 65px 16px;
  }
  .spec-table > div {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .spec-table strong {
    text-align: left;
  }
}

/* Comparison detail */
.comparison-detail-page {
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
}
.comparison-detail-hero {
  padding: 75px max(28px, calc((100vw - 1100px) / 2));
  text-align: center;
  color: #fff;
  background: var(--ink);
}
.comparison-detail-hero .kicker {
  color: #8fb2ff;
}
.comparison-detail-hero h1 {
  max-width: 1000px;
  margin: 18px auto;
  display: grid;
  grid-template-columns: 1fr 75px 1fr;
  align-items: center;
  gap: 20px;
  font:
    600 clamp(38px, 5vw, 67px)/0.96 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.055em;
}
.comparison-detail-hero h1 i {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid #526773;
  border-radius: 50%;
  color: #ffad8b;
  font:
    700 15px var(--font-mono),
    ui-monospace,
    monospace;
}
.comparison-detail-hero > p {
  max-width: 720px;
  margin: auto;
  color: #aebcc5;
  font-size: 13px;
  line-height: 1.7;
}
.comparison-quick {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 20px;
  display: grid;
  gap: 8px;
  border: 1px solid #456070;
  border-radius: 14px;
  background: #172936;
}
.comparison-quick b {
  color: #8fb2ff;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.comparison-quick strong {
  font:
    600 22px var(--font-display),
    Georgia,
    serif;
}
.comparison-quick span {
  color: #aebcc5;
  font-size: 11px;
}
.comparison-products {
  max-width: 1100px;
  margin: -1px auto 0;
  padding: 55px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.comparison-products article {
  padding: 27px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
}
.comparison-products article > span {
  color: var(--blue);
  font:
    700 9px var(--font-mono),
    ui-monospace,
    monospace;
}
.comparison-products h2 {
  margin: 20px 0;
  font:
    600 34px/1 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.045em;
}
.comparison-product-meta {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
}
.comparison-product-meta > strong {
  font-size: 19px;
}
.comparison-product-meta > b {
  padding: 7px 9px;
  border-radius: 999px;
  color: #9b4b28;
  background: #fff0e8;
  font:
    7px var(--font-mono),
    ui-monospace,
    monospace;
}
.comparison-products article > p {
  min-height: 48px;
  margin-top: 17px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.comparison-offers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 18px;
}
.comparison-offers a,
.comparison-offers span {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  padding: 6px;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
}
.comparison-offers a {
  color: #fff;
  background: var(--blue);
}
.comparison-offers span {
  color: #8d9ca6;
  background: #edf1f3;
}
.comparison-offers a.best-deal {
  color: #5f310d;
  background: #ffd8a8;
  box-shadow: inset 0 0 0 1px #eea858;
}
.comparison-affiliate-disclosure {
  display: block;
  margin-top: 10px;
  color: #7c8991;
  font-size: 7px;
  line-height: 1.45;
}
.comparison-table-section {
  max-width: 1100px;
  margin: auto;
  padding: 70px 28px 95px;
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: 55px;
}
.comparison-data-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.comparison-data-table > div {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.1fr;
  gap: 10px;
  padding: 14px 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.comparison-data-table > div:last-child {
  border: 0;
}
.comparison-data-table .comparison-table-head {
  color: #fff;
  background: var(--ink);
}
.comparison-data-table b,
.comparison-data-table span,
.comparison-data-table small {
  font-size: 9px;
  line-height: 1.4;
}
.comparison-data-table span {
  color: #415361;
}
.comparison-data-table small {
  color: var(--blue);
  font-weight: 700;
}
.comparison-test-block {
  padding: 85px max(28px, calc((100vw - 1044px) / 2));
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 65px;
  color: #fff;
  background: var(--ink);
}
.comparison-test-block .kicker {
  color: #8fb2ff;
}
.comparison-test-block h2 {
  margin: 15px 0;
  font:
    600 clamp(40px, 4vw, 58px)/0.98 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.05em;
}
.comparison-test-block h2 em {
  color: #ffad8b;
}
.comparison-test-block > div:first-child p {
  color: #aebcc5;
  font-size: 12px;
  line-height: 1.7;
}
.comparison-test-block > div:last-child {
  border: 1px solid #344652;
  border-radius: 14px;
  overflow: hidden;
}
.comparison-test-block > div:last-child p {
  display: grid;
  grid-template-columns: 1fr 110px 110px;
  gap: 10px;
  padding: 14px 17px;
  border-bottom: 1px solid #344652;
}
.comparison-test-block > div:last-child p:last-child {
  border: 0;
}
.comparison-test-block p b {
  font-size: 10px;
}
.comparison-test-block p span {
  color: #8296a2;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
  text-align: right;
}
.comparison-personas {
  max-width: 1100px;
  margin: auto;
  padding: 90px 28px;
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 60px;
}
.comparison-personas > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.comparison-personas article {
  min-height: 230px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.comparison-personas article > b {
  color: var(--blue);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.comparison-personas h3 {
  margin-top: auto;
  font:
    600 24px var(--font-display),
    Georgia,
    serif;
}
.comparison-personas p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.comparison-final {
  padding: 75px max(28px, calc((100vw - 1044px) / 2));
  text-align: center;
  color: #fff;
  background: var(--blue);
}
.comparison-final > b {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--blue);
  background: var(--surface);
  font:
    800 9px var(--font-mono),
    ui-monospace,
    monospace;
}
.comparison-final h2 {
  margin: 18px 0 12px;
  font:
    600 clamp(43px, 5vw, 66px) var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.055em;
}
.comparison-final p {
  max-width: 750px;
  margin: auto;
  color: #dce8ff;
  font-size: 13px;
  line-height: 1.7;
}
.comparison-final a {
  display: inline-flex;
  margin-top: 27px;
  padding: 13px 17px;
  border-radius: 7px;
  color: var(--blue);
  background: var(--surface);
  font-size: 11px;
  font-weight: 800;
}
.comparison-detail-hero h1.multi {
  display: block;
}
.comparison-jump {
  position: sticky;
  top: 0;
  z-index: 24;
  min-height: 49px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 27px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: #fffdf8ed;
  backdrop-filter: blur(12px);
  white-space: nowrap;
}
.comparison-jump a {
  color: #536771;
  font-size: 9px;
  font-weight: 800;
}
.comparison-products.multi {
  grid-template-columns: repeat(3, 1fr);
}
.comparison-products article.recommended {
  border-color: #87a9f5;
  box-shadow: 0 12px 34px rgba(36, 105, 245, 0.12);
}
.comparison-score-meter {
  height: 5px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf0;
}
.comparison-score-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), #67a5ff);
}
.comparison-product-link {
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
}
.comparison-table-section .review-section-title > p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}
.comparison-data-table.dynamic > div {
  grid-template-columns: minmax(145px, 1.1fr) repeat(var(--comparison-count), minmax(130px, 1fr)) minmax(115px, 0.85fr);
}
.comparison-feature-winners,
.comparison-decision,
.comparison-alternatives,
.comparison-faq {
  max-width: 1100px;
  margin: auto;
  padding: 80px 28px;
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 58px;
}
.comparison-feature-winners > div:first-child h2,
.comparison-decision > div:first-child h2 {
  margin: 14px 0;
  font:
    600 clamp(40px, 4vw, 55px)/0.98 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.05em;
}
.comparison-feature-winners > div:first-child h2 em,
.comparison-decision > div:first-child h2 em {
  color: var(--orange);
}
.comparison-feature-winners > div:first-child p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}
.comparison-feature-winners > div:last-child {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.comparison-feature-winners article {
  min-height: 55px;
  padding: 12px 15px;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.comparison-feature-winners article:last-child {
  border: 0;
}
.comparison-feature-winners article small {
  color: var(--blue);
  font:
    7px var(--font-mono),
    ui-monospace,
    monospace;
  text-transform: uppercase;
}
.comparison-feature-winners article b {
  font-size: 10px;
}
.comparison-feature-winners article strong {
  justify-self: end;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 8px;
}
.comparison-feature-winners article strong.winner {
  color: #176b52;
  background: #e6f8f1;
}
.comparison-feature-winners article strong.tie {
  color: #687a85;
  background: #eef2f4;
}
.comparison-test-block > div:last-child article {
  padding: 17px;
  border-bottom: 1px solid #344652;
}
.comparison-test-block > div:last-child article:last-child {
  border: 0;
}
.comparison-test-block article > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
.comparison-test-block article > div:first-child b {
  font-size: 11px;
}
.comparison-test-block article > div:first-child strong {
  color: #8fb2ff;
  font-size: 9px;
}
.comparison-test-scores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 13px;
}
.comparison-test-scores span {
  position: relative;
  min-height: 29px;
  padding: 8px 9px;
  overflow: hidden;
  border-radius: 6px;
  color: #dbe4e9 !important;
  background: #263a47;
  text-align: left !important;
}
.comparison-test-scores i {
  position: absolute;
  inset: auto auto 0 0;
  height: 3px;
  background: #67a5ff;
}
.comparison-test-block > div:last-child article > p {
  display: block;
  margin-top: 12px;
  padding: 0;
  color: #93a5af;
  border: 0;
  font-size: 9px;
  line-height: 1.55;
}
.comparison-test-pending {
  padding: 28px;
}
.comparison-test-pending b {
  color: #ffbd9e;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.comparison-test-block > div:last-child .comparison-test-pending p {
  display: block;
  margin: 13px 0;
  padding: 0;
  color: #aebcc5;
  border: 0;
  font-size: 11px;
  line-height: 1.7;
}
.comparison-test-pending a {
  color: #8fb2ff;
  font-size: 9px;
  font-weight: 800;
}
.comparison-personas article a {
  margin-top: 14px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
}
.comparison-decision {
  max-width: none;
  padding-inline: max(28px, calc((100vw - 1044px) / 2));
  color: #fff;
  background: #0f1c25;
}
.comparison-decision .kicker {
  color: #8fb2ff;
}
.comparison-decision > div:first-child h2 em {
  color: #ffad8b;
}
.comparison-decision > div:last-child {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.comparison-decision article {
  min-height: 210px;
  padding: 22px;
  border: 1px solid #344652;
  border-radius: 13px;
  background: #172936;
}
.comparison-decision article small {
  color: #8fb2ff;
  font:
    7px var(--font-mono),
    ui-monospace,
    monospace;
}
.comparison-decision article h3 {
  margin: 13px 0;
  font:
    600 23px/1.15 var(--font-display),
    Georgia,
    serif;
}
.comparison-decision article p {
  color: #aebcc5;
  font-size: 10px;
  line-height: 1.6;
}
.comparison-decision article strong {
  display: block;
  margin-top: 18px;
  color: #ffbd9e;
  font-size: 10px;
}
.comparison-alternatives > div:last-child {
  display: grid;
  gap: 8px;
}
.comparison-alternatives > div:last-child > a {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 15px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.comparison-alternatives a small {
  color: var(--blue);
  font:
    7px var(--font-mono),
    ui-monospace,
    monospace;
}
.comparison-alternatives a strong {
  font:
    600 20px var(--font-display),
    Georgia,
    serif;
}
.comparison-alternatives a span {
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
}
.comparison-faq > div:last-child {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.comparison-faq details {
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.comparison-faq details:last-child {
  border: 0;
}
.comparison-faq summary {
  padding: 19px 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}
.comparison-faq details p {
  padding: 0 0 16px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}
.comparison-mobile-sticky {
  display: none;
}
@media (max-width: 800px) {
  .comparison-detail-hero h1 {
    grid-template-columns: 1fr;
  }
  .comparison-detail-hero h1 i {
    margin: auto;
    width: 52px;
    height: 52px;
  }
  .comparison-products,
  .comparison-table-section,
  .comparison-test-block,
  .comparison-personas {
    grid-template-columns: 1fr;
  }
  .comparison-personas > div:last-child {
    grid-template-columns: 1fr 1fr;
  }
  .comparison-personas article:last-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 800px) {
  .comparison-products.multi {
    grid-template-columns: 1fr 1fr;
  }
  .comparison-feature-winners,
  .comparison-decision,
  .comparison-alternatives,
  .comparison-faq {
    grid-template-columns: 1fr;
    gap: 35px;
  }
}
@media (max-width: 600px) {
  .comparison-detail-page {
    padding-bottom: 74px;
  }
  .comparison-detail-hero {
    padding: 55px 16px;
  }
  .comparison-detail-hero h1 {
    font-size: 43px;
  }
  .comparison-jump {
    justify-content: flex-start;
  }
  .comparison-products,
  .comparison-products.multi {
    grid-template-columns: 1fr;
    padding: 35px 16px;
  }
  .comparison-offers {
    grid-template-columns: 1fr;
  }
  .comparison-table-section {
    padding: 60px 16px;
  }
  .comparison-data-table {
    overflow-x: auto;
  }
  .comparison-data-table > div {
    min-width: var(--comparison-table-width, 570px);
  }
  .comparison-test-block {
    padding: 65px 16px;
  }
  .comparison-personas,
  .comparison-feature-winners,
  .comparison-alternatives,
  .comparison-faq {
    padding: 65px 16px;
  }
  .comparison-personas > div:last-child {
    grid-template-columns: 1fr;
  }
  .comparison-personas article:last-child {
    grid-column: auto;
  }
  .comparison-feature-winners article {
    grid-template-columns: 1fr 1fr;
  }
  .comparison-feature-winners article small {
    grid-column: 1/-1;
  }
  .comparison-decision {
    padding: 65px 16px;
  }
  .comparison-decision > div:last-child {
    grid-template-columns: 1fr;
  }
  .comparison-alternatives > div:last-child > a {
    grid-template-columns: 1fr auto;
  }
  .comparison-alternatives a small {
    grid-column: 1/-1;
  }
  .comparison-final {
    padding: 60px 16px;
  }
  .comparison-mobile-sticky {
    position: fixed;
    inset: auto 0 0;
    z-index: 45;
    min-height: 66px;
    padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    border-top: 1px solid #cbd6dc;
    background: #fffdf8f2;
    backdrop-filter: blur(14px);
    box-shadow: 0 -8px 26px rgba(20, 34, 47, 0.12);
  }
  .comparison-mobile-sticky a {
    min-width: 0;
    min-height: 48px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 8px;
    color: #fff;
    background: var(--blue);
    text-align: center;
  }
  .comparison-mobile-sticky a:nth-child(2) {
    color: var(--blue);
    border: 1px solid #b7c9f4;
    background: #edf3ff;
  }
  .comparison-mobile-sticky small {
    max-width: 100%;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .comparison-mobile-sticky b {
    margin-top: 3px;
    font-size: 9px;
  }
}

/* Global search */
.search-page {
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
}
.search-hero {
  padding: 76px max(28px, calc((100vw - 1120px) / 2)) 68px;
  color: #fff;
  background: var(--ink);
}
.search-hero .kicker {
  color: #8fb2ff;
}
.search-hero h1 {
  max-width: 850px;
  margin: 18px 0;
  font:
    600 clamp(48px, 6vw, 76px)/0.96 var(--font-display),
    Georgia,
    serif;
}
.search-hero > p {
  max-width: 680px;
  color: #aebcc5;
  font-size: 14px;
  line-height: 1.7;
}
.search-main-form {
  max-width: 850px;
  margin-top: 34px;
}
.search-main-form > label {
  display: block;
  margin-bottom: 9px;
  color: #aebcc5;
  font:
    9px var(--font-mono),
    ui-monospace,
    monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.search-main-form > div {
  min-height: 62px;
  padding: 7px 7px 7px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #4c606c;
  border-radius: 10px;
  background: var(--surface);
}
.search-main-form > div > span {
  color: var(--blue);
  font-size: 24px;
}
.search-main-form input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: #14222f;
  background: transparent;
  font-size: 15px;
}
.search-main-form button {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: var(--blue);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.search-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: #8799a5;
  font-size: 10px;
}
.search-suggestions button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #415460;
  border-radius: 999px;
  color: #d7e0e5;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
}
.search-suggestions button:hover {
  border-color: #8fb2ff;
  color: #fff;
}
.search-results-section {
  max-width: 1120px;
  min-height: 520px;
  margin: auto;
  padding: 70px 28px 100px;
}
.search-results-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  padding-bottom: 27px;
  border-bottom: 1px solid var(--line);
}
.search-results-heading h2 {
  margin-top: 12px;
  font:
    600 clamp(32px, 4vw, 50px)/1 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.045em;
}
.search-results-heading > p {
  max-width: 330px;
  color: var(--muted);
  text-align: right;
  font-size: 11px;
  line-height: 1.5;
}
.search-results-heading > p.error {
  color: #a43e20;
}
.search-filters {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 20px 0 8px;
  scrollbar-width: none;
}
.search-filters::-webkit-scrollbar {
  display: none;
}
.search-filters button {
  min-height: 38px;
  padding: 7px 12px;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}
.search-filters button span {
  margin-left: 4px;
  color: #8699a5;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.search-filters button.active {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}
.search-filters button.active span {
  color: #dce7ff;
}
.search-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
}
.search-result-card {
  min-height: 245px;
  display: grid;
  grid-template-columns: 155px 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.search-result-image {
  overflow: hidden;
  background: #e6edf1;
}
.search-result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.search-result-placeholder {
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--blue), #1c2b39);
  font:
    600 70px var(--font-display),
    Georgia,
    serif;
}
.search-result-body {
  min-width: 0;
  padding: 19px;
  display: flex;
  flex-direction: column;
}
.search-result-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--blue);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
  text-transform: uppercase;
}
.search-result-meta span:last-child {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-card h3 {
  margin: 16px 0 8px;
  font:
    600 23px/1.08 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.035em;
}
.search-result-card h3 a:hover {
  color: var(--blue);
}
.search-result-card p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.search-result-footer {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin-top: auto;
  padding-top: 17px;
}
.search-result-footer strong,
.search-result-footer small {
  display: block;
}
.search-result-footer strong {
  font-size: 11px;
}
.search-result-footer small {
  margin-top: 4px;
  color: var(--muted);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.search-result-footer > a {
  color: var(--blue);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
}
.search-empty {
  max-width: 680px;
  margin: 40px auto 0;
  padding: 62px 30px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
}
.search-empty > span {
  color: var(--blue);
  font-size: 35px;
}
.search-empty h2 {
  margin-top: 15px;
  font:
    600 31px var(--font-display),
    Georgia,
    serif;
}
.search-empty p {
  max-width: 500px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.search-empty > div {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.search-loading {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
}
.search-loading span {
  min-height: 235px;
  border-radius: 13px;
  background: linear-gradient(90deg, #e7edf1 25%, #f5f7f8 50%, #e7edf1 75%);
  background-size: 200% 100%;
  animation: search-shimmer 1.2s infinite;
}
@keyframes search-shimmer {
  to {
    background-position: -200% 0;
  }
}
@media (max-width: 800px) {
  .search-result-grid {
    grid-template-columns: 1fr;
  }
  .search-loading {
    grid-template-columns: 1fr;
  }
  .search-loading span:nth-child(n + 3) {
    display: none;
  }
}
@media (max-width: 600px) {
  .search-hero {
    padding: 54px 16px;
  }
  .search-hero h1 {
    font-size: 49px;
  }
  .search-main-form > div {
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 10px 10px 10px 15px;
  }
  .search-main-form button {
    grid-column: 1/-1;
    width: 100%;
  }
  .search-results-section {
    padding: 52px 16px 80px;
  }
  .search-results-heading {
    display: block;
  }
  .search-results-heading > p {
    margin-top: 14px;
    text-align: left;
  }
  .search-result-card {
    grid-template-columns: 105px 1fr;
    min-height: 230px;
  }
  .search-result-body {
    padding: 15px;
  }
  .search-result-card h3 {
    font-size: 20px;
  }
  .search-result-footer {
    display: block;
  }
  .search-result-footer > a {
    display: inline-flex;
    min-height: 38px;
    align-items: end;
    margin-top: 8px;
  }
  .search-empty {
    padding: 45px 18px;
  }
  .search-empty > div {
    display: grid;
  }
  .search-empty > div > a {
    width: 100%;
  }
}

/* Product detail */
.product-price-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}
.product-description > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.product-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 25px;
}
.product-profile-grid article {
  min-height: 105px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.product-profile-grid span {
  color: var(--muted);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
  text-transform: uppercase;
}
.product-profile-grid strong {
  font-size: 12px;
}
.product-related-actions {
  display: grid;
  gap: 9px;
}
.product-related-actions a {
  min-height: 64px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.product-related-actions a:hover {
  border-color: var(--blue);
  transform: translateX(3px);
}
.product-related-actions a div {
  min-width: 0;
}
.product-related-actions a small,
.product-related-actions a strong,
.product-related-actions a p {
  display: block;
}
.product-related-actions a small {
  color: var(--blue);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
  text-transform: uppercase;
}
.product-related-actions a strong {
  margin-top: 5px;
  font:
    600 20px var(--font-display),
    Georgia,
    serif;
}
.product-related-actions a p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
}
.product-related-actions span {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 17px;
}
.price-history-panel {
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.price-history-summary span,
.price-history-summary strong,
.price-history-summary small {
  display: block;
}
.price-history-summary span {
  color: var(--blue);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.price-history-summary strong {
  margin-top: 9px;
  font:
    600 27px var(--font-display),
    Georgia,
    serif;
}
.price-history-summary small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}
.price-history-chart {
  height: 210px;
  margin-top: 25px;
  padding-top: 12px;
  display: flex;
  align-items: end;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}
.price-history-chart > div {
  flex: 1 0 38px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}
.price-history-chart > div > span {
  width: 65%;
  min-height: 8px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #6e9dff, var(--blue));
}
.price-history-chart small {
  margin-top: 7px;
  color: var(--muted);
  font:
    7px var(--font-mono),
    ui-monospace,
    monospace;
}
.price-history-chart b {
  margin-top: 3px;
  font-size: 7px;
  white-space: nowrap;
}
.price-history-panel > p {
  margin-top: 16px;
  color: var(--muted);
  font:
    8px/1.55 var(--font-mono),
    ui-monospace,
    monospace;
}
.price-history-empty {
  padding: 30px;
  border: 1px dashed #c5d1d8;
  border-radius: 14px;
  background: #f2f6f8;
}
.price-history-empty > span {
  color: var(--orange);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.price-history-empty h3 {
  margin: 13px 0 8px;
  font:
    600 28px var(--font-display),
    Georgia,
    serif;
}
.price-history-empty p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}
.product-jump-nav {
  padding: 9px max(28px, calc((100vw - 1080px) / 2));
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  scrollbar-width: none;
}
.product-jump-nav span,
.product-jump-nav a {
  padding: 8px 10px;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
}
.product-jump-nav span {
  color: var(--orange);
}
.product-jump-nav a {
  border-radius: 999px;
  color: #51636e;
}
.product-detail-page .review-section {
  scroll-margin-top: 120px;
}
.product-score-breakdown {
  margin-top: 22px;
}
@media (max-width: 800px) {
  .product-detail-page .review-detail-hero {
    display: flex;
    flex-direction: column;
  }
  .product-detail-page .review-hero-copy {
    order: 1;
  }
  .product-detail-page .review-product-visual {
    order: 2;
    margin-top: 12px;
  }
  .product-jump-nav {
    padding-inline: 16px;
  }
}
@media (max-width: 560px) {
  .product-profile-grid {
    grid-template-columns: 1fr 1fr;
  }
  .product-profile-grid article {
    min-height: 92px;
    padding: 14px;
  }
  .product-detail-page .review-product-visual,
  .product-detail-page .review-product-visual img {
    min-height: 310px;
    max-height: 420px;
  }
}

/* Editorial content details: Top List, Deal, Coupon, HouseLab Test */
.editorial-detail-page {
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
}
.editorial-detail-hero {
  padding: 78px max(28px, calc((100vw - 1080px) / 2));
  color: #fff;
  background: var(--ink);
}
.editorial-detail-hero .kicker {
  color: #8fb2ff;
}
.editorial-detail-hero h1 {
  max-width: 950px;
  margin: 19px 0;
  font:
    600 clamp(46px, 6vw, 76px)/0.96 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.055em;
}
.editorial-detail-hero > p {
  max-width: 720px;
  color: #aebcc5;
  font-size: 14px;
  line-height: 1.7;
}
.editorial-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}
.editorial-detail-meta span {
  padding: 7px 10px;
  border: 1px solid #405460;
  border-radius: 999px;
  color: #c5d0d6;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.ranked-product-list {
  max-width: 1080px;
  margin: auto;
  padding: 70px 28px;
}
.ranked-product-list article {
  display: grid;
  grid-template-columns: 90px 1fr 165px;
  gap: 28px;
  align-items: center;
  padding: 31px 0;
  border-bottom: 1px solid var(--line);
}
.ranked-product-list article:first-child {
  padding-top: 0;
}
.ranked-number {
  color: var(--orange);
  font:
    600 53px var(--font-display),
    Georgia,
    serif;
}
.ranked-product-copy > span {
  color: var(--blue);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.ranked-product-copy h2 {
  margin: 11px 0 8px;
  font:
    600 31px var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.04em;
}
.ranked-product-copy > p {
  max-width: 620px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.ranked-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.ranked-trust b {
  padding: 6px 8px;
  border-radius: 999px;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.ranked-trust b.tested {
  color: #176b52;
  background: #dcf3e9;
}
.ranked-trust b.researched {
  color: #9b4b28;
  background: #fff0e8;
}
.ranked-trust strong {
  font-size: 12px;
}
.ranked-actions {
  display: grid;
  gap: 7px;
}
.ranked-actions a {
  min-height: 39px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--blue);
  background: var(--surface);
  text-align: center;
  font-size: 9px;
  font-weight: 800;
}
.ranked-actions a:not(:first-child) {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}
.toplist-quick-picks {
  max-width: 1080px;
  margin: -28px auto 0;
  padding: 12px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 55px #14222f1a;
}
.toplist-quick-picks > div:first-child {
  padding: 20px;
  border-radius: 11px;
  color: #fff;
  background: var(--ink);
}
.toplist-quick-picks > div:first-child > * {
  display: block;
}
.toplist-quick-picks > div:first-child span {
  color: #8fb2ff;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.toplist-quick-picks > div:first-child strong {
  margin-top: 10px;
  font:
    600 22px/1.08 var(--font-display),
    Georgia,
    serif;
}
.toplist-quick-picks > div:first-child small {
  margin-top: 9px;
  color: #aebcc5;
  font-size: 9px;
  line-height: 1.5;
}
.ranked-product-list article {
  scroll-margin-top: 65px;
}
.editorial-methodology {
  padding: 80px max(28px, calc((100vw - 1024px) / 2));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  color: #fff;
  background: var(--ink);
}
.editorial-methodology h2 {
  margin: 15px 0;
  font:
    600 clamp(38px, 4vw, 55px)/0.98 var(--font-display),
    Georgia,
    serif;
}
.editorial-methodology p {
  margin-top: 12px;
  color: #aebcc5;
  font-size: 12px;
  line-height: 1.7;
}
.editorial-methodology ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #344652;
  border-radius: 13px;
  overflow: hidden;
}
.editorial-methodology li {
  padding: 17px 20px;
  border-bottom: 1px solid #344652;
  color: #dce5ea;
  font-size: 11px;
  counter-increment: method;
}
.editorial-methodology li:last-child {
  border: 0;
}
.editorial-methodology li::before {
  content: counter(method, decimal-leading-zero);
  margin-right: 15px;
  color: #ffad8b;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.editorial-methodology ol {
  counter-reset: method;
}
.editorial-final-cta {
  padding: 75px 28px;
  text-align: center;
  background: #eaf1ff;
}
.editorial-final-cta h2 {
  font:
    600 clamp(35px, 4vw, 52px) var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.045em;
}
.editorial-final-cta p {
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 12px;
}
.editorial-final-cta a {
  margin-top: 23px;
  padding: 13px 16px;
  display: inline-flex;
  border-radius: 7px;
  color: #fff;
  background: var(--blue);
  font-size: 11px;
  font-weight: 800;
}
.deal-detail-hero {
  padding: 75px max(28px, calc((100vw - 1080px) / 2));
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 70px;
  align-items: center;
  color: #fff;
  background: var(--ink);
}
.deal-detail-hero .kicker {
  color: #ffad8b;
}
.deal-detail-hero h1 {
  margin: 18px 0;
  font:
    600 clamp(45px, 5vw, 69px)/0.96 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.05em;
}
.deal-detail-hero > div:first-child > p {
  max-width: 620px;
  color: #aebcc5;
  font-size: 13px;
  line-height: 1.7;
}
.deal-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 25px;
}
.deal-trust-row span {
  padding: 7px 9px;
  border: 1px solid #405460;
  border-radius: 999px;
  color: #c5d0d6;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.deal-price-card {
  padding: 28px;
  border: 1px solid #455c69;
  border-radius: 16px;
  background: #172936;
}
.deal-price-card > small,
.deal-price-card > strong,
.deal-price-card > del {
  display: block;
}
.deal-price-card > small {
  color: #8fb2ff;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.deal-price-card > strong {
  margin-top: 12px;
  color: #fff;
  font:
    600 36px var(--font-display),
    Georgia,
    serif;
}
.deal-price-card > del {
  margin-top: 5px;
  color: #7f939f;
  font-size: 11px;
}
.deal-countdown {
  margin-top: 25px;
  padding-top: 18px;
  border-top: 1px solid #3d5360;
}
.deal-countdown small {
  display: block;
  color: #8297a3;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.deal-countdown span {
  display: block;
  margin-top: 8px;
  color: #ffad8b;
  font-size: 13px;
  font-weight: 800;
}
.deal-countdown span.expired {
  color: #aebcc5;
}
.deal-offer-section {
  max-width: 1024px;
  margin: auto;
  padding: 80px 28px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
}
.deal-offer-section h2 {
  margin: 14px 0;
  font:
    600 43px/1 var(--font-display),
    Georgia,
    serif;
}
.deal-offer-section > div:first-child > p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.deal-offer-actions {
  display: grid;
  gap: 8px;
}
.deal-offer-actions a,
.deal-offer-actions span {
  min-height: 50px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
}
.deal-offer-actions a {
  color: #fff;
  background: var(--blue);
}
.deal-offer-actions a:last-child {
  color: var(--blue);
  border: 1px solid var(--line);
  background: var(--surface);
}
.deal-offer-actions span {
  color: #8d9ca6;
  border: 1px solid var(--line);
  background: #edf1f3;
}
.deal-disclosure {
  max-width: 1024px;
  margin: 0 auto 80px;
  padding: 22px 25px;
  border-left: 4px solid var(--orange);
  background: #fff0e8;
}
.deal-disclosure b {
  font-size: 12px;
}
.deal-disclosure p {
  margin-top: 7px;
  color: #745144;
  font-size: 11px;
  line-height: 1.6;
}
.coupon-detail-hero {
  padding: 75px max(28px, calc((100vw - 980px) / 2));
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, #14222f, #173e62);
}
.coupon-detail-hero .kicker {
  justify-content: center;
  color: #8fb2ff;
}
.coupon-detail-hero h1 {
  margin: 18px 0 12px;
  font:
    600 clamp(45px, 6vw, 72px)/0.96 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.05em;
}
.coupon-detail-hero > p {
  max-width: 650px;
  margin: auto;
  color: #b9c7cf;
  font-size: 13px;
  line-height: 1.7;
}
.coupon-code-card {
  max-width: 560px;
  margin: 32px auto 0;
  padding: 11px 11px 11px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  border: 1px solid #506b7a;
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
}
.coupon-code-card small {
  color: #687a85;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.coupon-code-card strong {
  overflow: hidden;
  color: #14222f;
  font:
    800 22px var(--font-mono),
    ui-monospace,
    monospace;
  text-overflow: ellipsis;
}
.coupon-code-card button {
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: var(--blue);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.coupon-detail-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.coupon-detail-meta span {
  padding: 7px 9px;
  border: 1px solid #4a6371;
  border-radius: 999px;
  color: #d3dee4;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.coupon-products-section {
  max-width: 1024px;
  margin: auto;
  padding: 80px 28px;
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 65px;
}
.coupon-products-section h2 {
  margin: 14px 0;
  font:
    600 40px/1 var(--font-display),
    Georgia,
    serif;
}
.coupon-products-section > div:first-child > p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.coupon-product-list article {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 25px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.coupon-product-list article + article {
  margin-top: 9px;
}
.coupon-product-list article span {
  color: var(--blue);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.coupon-product-list article h3 {
  margin: 9px 0 6px;
  font:
    600 23px var(--font-display),
    Georgia,
    serif;
}
.coupon-product-list article p {
  color: var(--muted);
  font-size: 10px;
}
.coupon-product-list article > div:last-child {
  display: grid;
  align-content: center;
  gap: 7px;
}
.coupon-product-list article a {
  min-height: 38px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: var(--blue);
  border: 1px solid var(--line);
  font-size: 9px;
  font-weight: 800;
}
.coupon-product-list article a:last-child:not(:first-child) {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}
.coupon-no-products {
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: center;
}
.coupon-no-products > span {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  margin: auto;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font:
    700 15px var(--font-display),
    Georgia,
    serif;
}
.coupon-no-products p {
  margin: 15px auto;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}
.coupon-no-products a {
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}
.test-detail-hero {
  padding: 76px max(28px, calc((100vw - 1040px) / 2));
  color: #fff;
  background: var(--ink);
}
.test-detail-hero .kicker {
  color: #8fb2ff;
}
.test-detail-hero h1 {
  max-width: 900px;
  margin: 18px 0;
  font:
    600 clamp(45px, 6vw, 74px)/0.96 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.05em;
}
.test-detail-hero > p {
  max-width: 730px;
  color: #b6c3ca;
  font-size: 14px;
  line-height: 1.7;
}
.test-evidence-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 33px;
  border: 1px solid #3a4f5b;
  border-radius: 11px;
  overflow: hidden;
}
.test-evidence-strip span {
  padding: 17px;
  color: #7f949f;
  border-right: 1px solid #3a4f5b;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.test-evidence-strip span:last-child {
  border: 0;
}
.test-evidence-strip b {
  display: block;
  margin-top: 7px;
  color: #fff;
  font:
    700 11px var(--font-sans),
    Arial,
    sans-serif;
}
.test-metrics-section {
  max-width: 1040px;
  margin: auto;
  padding: 75px 28px;
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 60px;
}
.test-metrics-section h2 {
  margin: 13px 0;
  color: var(--orange);
  font:
    600 54px var(--font-display),
    Georgia,
    serif;
}
.test-metrics-section > div:first-child > p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.test-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}
.test-metric-grid article {
  min-height: 125px;
  padding: 19px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.test-metric-grid span {
  color: var(--muted);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.test-metric-grid strong {
  font:
    600 25px var(--font-display),
    Georgia,
    serif;
}
.test-metric-grid small {
  margin-left: 4px;
  color: var(--muted);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.test-results-section {
  max-width: 1040px;
  margin: auto;
  padding: 80px 28px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 65px;
}
.test-results-section h2 {
  margin: 14px 0 18px;
  font:
    600 43px/1 var(--font-display),
    Georgia,
    serif;
}
.test-results-section > div:first-child > p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.test-product-list {
  display: grid;
  gap: 9px;
}
.test-product-list article {
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.test-product-list article > span {
  color: var(--blue);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.test-product-list h3 {
  margin: 11px 0 7px;
  font:
    600 25px var(--font-display),
    Georgia,
    serif;
}
.test-product-list p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.test-product-list a {
  display: inline-flex;
  margin-top: 15px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}
.test-evidence-gallery {
  padding: 75px max(28px, calc((100vw - 1040px) / 2));
  color: #fff;
  background: #0f1c25;
}
.test-evidence-gallery h2 {
  margin: 13px 0 28px;
  font:
    600 43px var(--font-display),
    Georgia,
    serif;
}
.test-evidence-gallery > div:last-child {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.test-evidence-gallery img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  border-radius: 12px;
}
@media (max-width: 800px) {
  .toplist-quick-picks {
    margin: -22px 16px 0;
    grid-template-columns: 1fr;
  }
  .ranked-product-list article {
    grid-template-columns: 65px 1fr;
  }
  .ranked-actions {
    grid-column: 2;
    grid-template-columns: repeat(2, 1fr);
  }
  .editorial-methodology,
  .deal-detail-hero,
  .deal-offer-section,
  .coupon-products-section,
  .test-metrics-section,
  .test-results-section {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .test-evidence-strip {
    grid-template-columns: 1fr 1fr;
  }
  .test-evidence-strip span:nth-child(2) {
    border-right: 0;
  }
  .test-evidence-strip span:nth-child(-n + 2) {
    border-bottom: 1px solid #3a4f5b;
  }
}
@media (max-width: 560px) {
  .editorial-detail-hero,
  .deal-detail-hero,
  .coupon-detail-hero,
  .test-detail-hero {
    padding: 45px 16px 52px;
  }
  .editorial-detail-hero h1,
  .deal-detail-hero h1,
  .coupon-detail-hero h1,
  .test-detail-hero h1 {
    font-size: 42px;
  }
  .toplist-quick-picks {
    padding: 8px;
  }
  .toplist-quick-picks > div:first-child {
    padding: 16px;
  }
  .ranked-product-list {
    padding: 45px 16px 52px;
  }
  .ranked-product-list article {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ranked-number {
    font-size: 38px;
  }
  .ranked-actions {
    grid-column: auto;
    grid-template-columns: 1fr 1fr;
  }
  .editorial-methodology,
  .deal-offer-section,
  .coupon-products-section,
  .test-metrics-section,
  .test-results-section {
    padding: 60px 16px;
  }
  .editorial-final-cta {
    padding: 60px 16px;
  }
  .deal-price-card {
    padding: 22px;
  }
  .deal-disclosure {
    margin: 0 16px 60px;
  }
  .coupon-code-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 16px;
  }
  .coupon-code-card button {
    width: 100%;
  }
  .coupon-product-list article {
    grid-template-columns: 1fr;
  }
  .test-evidence-strip {
    grid-template-columns: 1fr;
  }
  .test-evidence-strip span {
    border-right: 0;
    border-bottom: 1px solid #3a4f5b;
  }
  .test-evidence-strip span:nth-child(2) {
    border-bottom: 1px solid #3a4f5b;
  }
  .test-metric-grid {
    grid-template-columns: 1fr;
  }
  .test-evidence-gallery {
    padding: 60px 16px;
  }
  .test-evidence-gallery > div:last-child {
    grid-template-columns: 1fr;
  }
  .test-evidence-gallery img {
    height: 250px;
  }
}
@media (max-width: 600px) {
  .comparison-data-table > div > *:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    margin: -14px 0 -14px -16px;
    padding: 14px 12px 14px 16px;
    background: var(--surface);
    box-shadow: 8px 0 12px -12px #14222f99;
  }
  .comparison-data-table .comparison-table-head > *:first-child {
    z-index: 3;
    color: #fff;
    background: var(--ink);
  }
}

/* Reader feedback and author trust */
.price-report {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.price-report summary {
  padding: 13px 0 4px;
  color: var(--blue);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  list-style-position: inside;
}
.price-report form {
  margin-top: 12px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.price-report form > p,
.price-report form > output {
  grid-column: 1/-1;
}
.price-report form > p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.price-report label {
  display: grid;
  gap: 6px;
  color: #546773;
  font-size: 9px;
  font-weight: 700;
}
.price-report input,
.price-report select,
.price-report textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #cbd6dc;
  border-radius: 7px;
  color: var(--ink);
  background: var(--surface);
  font:
    11px var(--font-sans),
    Arial,
    sans-serif;
}
.price-report textarea {
  resize: vertical;
}
.price-report button {
  min-height: 43px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: var(--blue);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.price-report button:disabled {
  cursor: wait;
  opacity: 0.65;
}
.price-report output {
  color: #176b52;
  font-size: 10px;
  line-height: 1.5;
}
.price-report-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}
.author-card {
  min-height: 150px;
  padding: 24px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
}
.author-card.compact {
  max-width: 720px;
  margin: 20px auto 0;
  text-align: left;
}
.author-avatar,
.author-profile-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--blue), #173e62);
  font:
    600 25px var(--font-display),
    Georgia,
    serif;
}
.author-avatar {
  width: 96px;
  height: 96px;
}
.author-avatar img,
.author-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-card small {
  color: var(--blue);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.07em;
}
.author-card strong {
  display: block;
  margin-top: 7px;
  font:
    600 24px var(--font-display),
    Georgia,
    serif;
}
.author-card p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.author-card a {
  display: inline-flex;
  margin-top: 12px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}
.comparison-author {
  padding: 62px 28px;
  text-align: center;
  background: #edf3ff;
}
.author-profile-page {
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
}
.author-profile-hero {
  max-width: 1040px;
  margin: auto;
  padding: 75px 28px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 65px;
  align-items: center;
}
.author-profile-avatar {
  width: 280px;
  height: 280px;
  border-radius: 90px 16px 16px 16px;
  font-size: 64px;
}
.author-profile-hero h1 {
  margin: 15px 0 10px;
  font:
    600 clamp(48px, 6vw, 75px)/0.96 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.055em;
}
.author-profile-hero > div:last-child > strong {
  color: var(--blue);
  font-size: 13px;
}
.author-profile-hero p {
  max-width: 650px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.author-profile-hero small {
  display: block;
  margin-top: 16px;
  color: #71838e;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.author-trust-grid {
  padding: 0 max(28px, calc((100vw - 1040px) / 2)) 75px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.author-trust-grid article {
  min-height: 210px;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.author-trust-grid span {
  color: var(--blue);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.author-trust-grid p,
.author-trust-grid li {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}
.author-trust-grid p,
.author-trust-grid ul {
  margin-top: 15px;
}
.author-trust-grid ul {
  padding-left: 17px;
}
.author-content-list {
  display: grid;
  gap: 9px;
}
.author-content-list > a {
  padding: 19px 21px;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.author-content-list small {
  color: var(--blue);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
  text-transform: uppercase;
}
.author-content-list strong {
  margin-top: 8px;
  font:
    600 23px var(--font-display),
    Georgia,
    serif;
}
.author-content-list p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.author-content-list a > span {
  margin-top: 12px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
}
@media (max-width: 760px) {
  .price-report form {
    grid-template-columns: 1fr;
  }
  .price-report form > * {
    grid-column: 1 !important;
  }
  .author-profile-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .author-profile-avatar {
    width: 180px;
    height: 180px;
    border-radius: 60px 12px 12px 12px;
  }
  .author-trust-grid {
    grid-template-columns: 1fr;
  }
  .author-card {
    grid-template-columns: 72px 1fr;
    padding: 18px;
  }
  .author-avatar {
    width: 72px;
    height: 72px;
  }
  .author-card strong {
    font-size: 20px;
  }
}
@media (max-width: 560px) {
  .author-profile-hero {
    padding: 52px 16px;
  }
  .author-trust-grid {
    padding: 0 16px 55px;
  }
  .comparison-author {
    padding: 50px 16px;
  }
}

/* Private editor preview */
.preview-access-page,
.editor-preview-page,
.editor-preview-detail {
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
}
.preview-access-page {
  display: grid;
  place-items: center;
  padding: 30px;
  background: var(--ink);
}
.preview-access-page section {
  max-width: 680px;
  padding: 45px;
  border: 1px solid #3d5260;
  border-radius: 20px;
  color: #fff;
  background: #172936;
}
.preview-access-page section > span,
.editor-preview-hero > span,
.preview-document-hero > span {
  color: #8fb2ff;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.1em;
}
.preview-access-page h1 {
  margin: 16px 0;
  font:
    600 45px/1 var(--font-display),
    Georgia,
    serif;
}
.preview-access-page p {
  color: #b5c2ca;
  font-size: 13px;
  line-height: 1.7;
}
.preview-access-page section > div {
  display: flex;
  gap: 9px;
  margin-top: 25px;
}
.preview-access-page a {
  padding: 11px 14px;
  border: 1px solid #526977;
  border-radius: 7px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.preview-access-page a:first-child {
  border-color: var(--blue);
  background: var(--blue);
}
.editor-preview-page > header {
  height: 72px;
  padding: 0 max(28px, calc((100vw - 1120px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.editor-preview-page > header > div {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--muted);
  font-size: 10px;
}
.editor-preview-page > header > div a {
  color: var(--blue);
  font-weight: 800;
}
.editor-preview-hero {
  padding: 72px max(28px, calc((100vw - 1120px) / 2));
  color: #fff;
  background: var(--ink);
}
.editor-preview-hero h1 {
  max-width: 800px;
  margin: 17px 0;
  font:
    600 clamp(49px, 6vw, 75px)/0.95 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.055em;
}
.editor-preview-hero h1 em {
  color: #ffad8b;
}
.editor-preview-hero p {
  max-width: 700px;
  color: #aebcc5;
  font-size: 13px;
  line-height: 1.7;
}
.editor-preview-content {
  max-width: 1120px;
  margin: auto;
  padding: 70px 28px 100px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 45px;
}
.editor-preview-summary strong,
.editor-preview-summary span {
  display: block;
}
.editor-preview-summary strong {
  color: var(--blue);
  font:
    600 58px var(--font-display),
    Georgia,
    serif;
}
.editor-preview-summary span {
  font-size: 12px;
  font-weight: 800;
}
.editor-preview-summary p {
  margin-top: 13px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.editor-preview-list {
  display: grid;
  gap: 9px;
}
.editor-preview-list article {
  padding: 19px 21px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 25px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.editor-preview-list small {
  color: var(--blue);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
  text-transform: uppercase;
}
.editor-preview-list h2 {
  margin-top: 8px;
  font:
    600 23px var(--font-display),
    Georgia,
    serif;
}
.editor-preview-list p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
}
.editor-preview-list article > div:last-child {
  display: grid;
  gap: 6px;
  min-width: 125px;
}
.editor-preview-list article a,
.editor-preview-list article > div:last-child > span {
  min-height: 35px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
  font-size: 8px;
  font-weight: 800;
}
.editor-preview-list article a:first-child {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}
.editor-preview-list article > div:last-child > span {
  color: #8c9aa3;
  background: #eef2f4;
}
.editor-preview-empty {
  padding: 45px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 13px;
}
.editor-preview-empty h2 {
  font:
    600 28px var(--font-display),
    Georgia,
    serif;
}
.editor-preview-empty p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}
.preview-mode-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 42px;
  padding: 8px max(16px, calc((100vw - 1120px) / 2));
  display: flex;
  align-items: center;
  gap: 15px;
  color: #fff;
  background: #7b2cbf;
}
.preview-mode-banner b {
  font:
    800 9px var(--font-mono),
    ui-monospace,
    monospace;
}
.preview-mode-banner span {
  color: #e9d6f8;
  font-size: 9px;
}
.preview-mode-banner a {
  margin-left: auto;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}
.preview-document-hero {
  padding: 75px max(28px, calc((100vw - 1000px) / 2));
  color: #fff;
  background: var(--ink);
}
.preview-document-hero h1 {
  max-width: 900px;
  margin: 17px 0;
  font:
    600 clamp(47px, 6vw, 72px)/0.96 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.05em;
}
.preview-document-hero > p {
  max-width: 720px;
  color: #b5c2ca;
  font-size: 14px;
  line-height: 1.7;
}
.preview-document-hero > div {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 25px;
}
.preview-document-hero small {
  padding: 7px 9px;
  border: 1px solid #405460;
  border-radius: 999px;
  color: #d0dbe1;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.preview-document-grid {
  max-width: 1000px;
  margin: auto;
  padding: 65px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.preview-document-grid article {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.preview-document-grid article > span {
  display: block;
  padding: 16px 18px;
  color: var(--blue);
  border-bottom: 1px solid var(--line);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.preview-document-grid p {
  display: grid;
  grid-template-columns: 25px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
}
.preview-document-grid p:last-child {
  border: 0;
}
.preview-document-grid p b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: #198764;
}
.preview-document-grid p.failed b {
  background: #d97706;
}
.preview-document-grid p small {
  color: #198764;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.preview-document-grid p.failed small {
  color: #b45b0a;
}
.preview-document-actions {
  max-width: 1000px;
  margin: auto;
  padding: 0 28px 80px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.preview-document-actions a {
  min-height: 43px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  border-radius: 7px;
  color: #fff;
  background: var(--blue);
  font-size: 10px;
  font-weight: 800;
}
.preview-document-actions span {
  color: var(--muted);
  font-size: 10px;
}
@media (max-width: 760px) {
  .editor-preview-content,
  .preview-document-grid {
    grid-template-columns: 1fr;
  }
  .editor-preview-list article {
    grid-template-columns: 1fr;
  }
  .editor-preview-list article > div:last-child {
    grid-template-columns: 1fr 1fr;
  }
  .preview-document-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .preview-mode-banner span {
    display: none;
  }
}
@media (max-width: 560px) {
  .preview-access-page {
    padding: 16px;
  }
  .preview-access-page section {
    padding: 28px;
  }
  .preview-access-page h1 {
    font-size: 37px;
  }
  .editor-preview-page > header {
    padding: 0 16px;
  }
  .editor-preview-page > header > div > span {
    display: none;
  }
  .editor-preview-hero {
    padding: 55px 16px;
  }
  .editor-preview-content {
    padding: 50px 16px 80px;
  }
  .editor-preview-list article > div:last-child {
    grid-template-columns: 1fr;
  }
  .preview-document-hero {
    padding: 55px 16px;
  }
  .preview-document-grid {
    padding: 50px 16px;
  }
  .preview-document-actions {
    padding: 0 16px 65px;
  }
}

/* Category clusters and buying guides */
.hub-empty-state {
  grid-column: 1/-1;
  padding: 48px;
  text-align: center;
  border: 1px dashed #aebfc8;
  border-radius: 16px;
  background: var(--surface);
}
.hub-empty-state h3 {
  font:
    600 30px var(--font-display),
    Georgia,
    serif;
}
.hub-empty-state p {
  max-width: 580px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.category-detail-page,
.buying-guide-page {
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
}
.category-detail-hero {
  min-height: 520px;
  padding: 90px max(28px, calc((100vw - 1100px) / 2));
  display: flex;
  flex-direction: column;
  justify-content: end;
  color: #fff;
  background: linear-gradient(145deg, #14222f, #1d4058);
  background-position: center;
  background-size: cover;
}
.category-detail-hero > span,
.buying-guide-hero > span {
  color: #9ebcff;
  font:
    700 9px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.1em;
}
.category-detail-hero h1 {
  max-width: 850px;
  margin: 18px 0;
  font:
    600 clamp(56px, 7vw, 90px)/0.91 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.065em;
}
.category-detail-hero > p {
  max-width: 690px;
  color: #c0ccd3;
  font-size: 15px;
  line-height: 1.7;
}
.category-detail-hero > div {
  margin-top: 30px;
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px 18px;
  align-items: end;
  width: max-content;
}
.category-detail-hero b {
  color: #ffad8b;
  font:
    600 29px var(--font-display),
    Georgia,
    serif;
}
.category-detail-hero small {
  padding-bottom: 4px;
  color: #aabac4;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.category-intro,
.buying-guide-intro {
  max-width: 1060px;
  margin: auto;
  padding: 90px 28px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  border-bottom: 1px solid var(--line);
}
.category-intro h2,
.buying-guide-intro h2 {
  margin-top: 14px;
  font:
    600 clamp(40px, 4vw, 56px)/0.98 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.055em;
}
.category-intro h2 em,
.buying-guide-intro h2 em {
  color: var(--orange);
}
.category-intro p,
.buying-guide-intro p {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.category-intro ul {
  margin-top: 24px;
  padding-left: 20px;
}
.category-intro li {
  margin-top: 9px;
  color: #435560;
  font-size: 12px;
  line-height: 1.55;
}
.category-products,
.category-content-section,
.buying-guide-criteria,
.buying-guide-products {
  max-width: 1160px;
  margin: auto;
  padding: 85px 28px;
}
.category-section-heading {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 40px;
  align-items: end;
  margin-bottom: 36px;
}
.category-section-heading .kicker {
  grid-column: 1/-1;
}
.category-section-heading h2 {
  font:
    600 clamp(39px, 4vw, 55px)/0.98 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.05em;
}
.category-section-heading p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}
.category-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}
.category-product-grid > article {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.category-product-image {
  position: relative;
}
.category-product-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: #e7edf0;
}
.category-product-image > span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 8px;
  border-radius: 5px;
  color: #fff;
  background: #14222fd9;
  font:
    700 7px var(--font-mono),
    ui-monospace,
    monospace;
}
.category-product-grid article > div:not(.category-product-image) {
  padding: 21px;
}
.category-product-grid small {
  color: var(--blue);
  font:
    700 8px var(--font-mono),
    ui-monospace,
    monospace;
}
.category-product-grid h3 {
  margin: 12px 0 9px;
  font:
    600 26px/1.05 var(--font-display),
    Georgia,
    serif;
}
.category-product-grid p {
  min-height: 55px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.category-product-grid strong {
  display: block;
  margin-top: 16px;
  font-size: 17px;
}
.category-product-grid article > div:not(.category-product-image) > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 17px;
}
.category-product-grid a {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
}
.category-product-grid a:last-child {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}
.category-content-section {
  padding-top: 45px;
}
.category-content-section > div:last-child {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.category-content-section a,
.category-content-empty {
  min-height: 205px;
  padding: 23px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.category-content-section small {
  color: var(--blue);
  font:
    700 8px var(--font-mono),
    ui-monospace,
    monospace;
}
.category-content-section h3 {
  margin: 22px 0 10px;
  font:
    600 27px/1.05 var(--font-display),
    Georgia,
    serif;
}
.category-content-section p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}
.category-content-section a > span {
  margin-top: auto;
  padding-top: 20px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
}
.category-content-empty {
  grid-column: 1/-1;
  justify-content: center;
  text-align: center;
}
.buying-guide-hero {
  padding: 90px max(28px, calc((100vw - 1000px) / 2));
  color: #fff;
  background: var(--ink);
}
.buying-guide-hero h1 {
  max-width: 920px;
  margin: 18px 0;
  font:
    600 clamp(53px, 6vw, 78px)/0.93 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.06em;
}
.buying-guide-hero > p {
  max-width: 690px;
  color: #b6c4cc;
  font-size: 14px;
  line-height: 1.7;
}
.buying-guide-hero > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 27px;
}
.buying-guide-hero small {
  padding: 7px 9px;
  border: 1px solid #415561;
  border-radius: 999px;
  color: #d2dce2;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.buying-guide-criteria > div:last-child {
  display: grid;
  gap: 9px;
}
.buying-guide-criteria article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.buying-guide-criteria article > div {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 12px;
  align-items: center;
}
.buying-guide-criteria article > div > span {
  color: var(--blue);
  font:
    700 10px var(--font-mono),
    ui-monospace,
    monospace;
}
.buying-guide-criteria h3 {
  font:
    600 24px var(--font-display),
    Georgia,
    serif;
}
.buying-guide-criteria strong {
  color: var(--blue);
  font-size: 14px;
}
.buying-guide-criteria article p {
  margin: 12px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.buying-guide-criteria i {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: #e4eaed;
}
.buying-guide-criteria i b {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), #7ca4ff);
}
.buying-guide-budget {
  padding: 75px max(28px, calc((100vw - 1104px) / 2));
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 50px;
  color: #fff;
  background: #173043;
}
.buying-guide-budget h2 {
  margin-top: 14px;
  font:
    600 40px/1 var(--font-display),
    Georgia,
    serif;
}
.buying-guide-budget > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.buying-guide-budget article {
  padding: 20px;
  border: 1px solid #40596a;
  border-radius: 11px;
  background: #1c394e;
}
.buying-guide-budget small,
.buying-guide-budget strong {
  display: block;
}
.buying-guide-budget small {
  color: #91b1ff;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.buying-guide-budget strong {
  margin-top: 13px;
  color: #ffad8b;
  font-size: 17px;
}
.buying-guide-budget p {
  margin-top: 10px;
  color: #b7c5cd;
  font-size: 10px;
  line-height: 1.6;
}
.buying-guide-products > div:last-child {
  display: grid;
  gap: 9px;
}
.buying-guide-products article {
  padding: 22px;
  display: grid;
  grid-template-columns: 55px 1fr 170px;
  gap: 22px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.buying-guide-products article > span {
  color: #c7d0d5;
  font:
    600 35px var(--font-display),
    Georgia,
    serif;
}
.buying-guide-products small {
  color: var(--blue);
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
}
.buying-guide-products h3 {
  margin: 8px 0;
  font:
    600 26px var(--font-display),
    Georgia,
    serif;
}
.buying-guide-products p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.buying-guide-products article > div:last-child {
  display: grid;
  gap: 7px;
}
.buying-guide-products article > div:last-child strong {
  margin-bottom: 4px;
  font-size: 16px;
}
.buying-guide-products article a {
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
}
.buying-guide-products article a:last-child {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}
.buying-guide-final {
  padding: 80px max(28px, calc((100vw - 1040px) / 2));
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: end;
  color: #fff;
  background: var(--blue);
}
.buying-guide-final h2 {
  font:
    600 clamp(40px, 4vw, 57px)/0.98 var(--font-display),
    Georgia,
    serif;
}
.buying-guide-final > div {
  display: grid;
  gap: 8px;
}
.buying-guide-final a {
  min-height: 43px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: var(--blue);
  background: var(--surface);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
@media (max-width: 850px) {
  .category-intro,
  .buying-guide-intro,
  .buying-guide-budget {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .category-product-grid {
    grid-template-columns: 1fr 1fr;
  }
  .buying-guide-budget > div:last-child {
    grid-template-columns: 1fr 1fr;
  }
  .buying-guide-products article {
    grid-template-columns: 45px 1fr;
  }
  .buying-guide-products article > div:last-child {
    grid-column: 2;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .hub-empty-state {
    padding: 32px 20px;
  }
  .category-detail-hero,
  .buying-guide-hero {
    min-height: 0;
    padding: 62px 16px;
  }
  .category-detail-hero h1,
  .buying-guide-hero h1 {
    font-size: 49px;
  }
  .category-detail-hero > div {
    grid-template-columns: auto 1fr;
  }
  .category-intro,
  .buying-guide-intro,
  .category-products,
  .category-content-section,
  .buying-guide-criteria,
  .buying-guide-products {
    padding: 60px 16px;
  }
  .category-section-heading {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .category-section-heading .kicker {
    grid-column: auto;
  }
  .category-product-grid,
  .category-content-section > div:last-child,
  .buying-guide-budget > div:last-child {
    grid-template-columns: 1fr;
  }
  .category-product-grid img {
    height: 245px;
  }
  .buying-guide-budget {
    padding: 60px 16px;
  }
  .buying-guide-products article {
    grid-template-columns: 1fr;
  }
  .buying-guide-products article > div:last-child {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .buying-guide-final {
    padding: 60px 16px;
    align-items: flex-start;
    flex-direction: column;
  }
  .buying-guide-final > div,
  .buying-guide-final a {
    width: 100%;
  }
}

/* HouseLab legal center */
.legal-page {
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
}
.legal-hero {
  min-height: 470px;
  padding: 82px max(28px, calc((100vw - 1204px) / 2));
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  align-items: end;
  gap: 80px;
  color: #f4f8fa;
  background: linear-gradient(135deg, #101c26 0%, #173043 72%, #1d3d55 100%);
}
.legal-hero .kicker {
  color: #8fb2ff;
}
.legal-hero h1 {
  max-width: 880px;
  margin: 20px 0 22px;
  font-size: clamp(52px, 6vw, 78px);
}
.legal-hero-copy > p {
  max-width: 720px;
  color: #b7c6ce;
  font-size: 15px;
  line-height: 1.7;
}
.legal-meta {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #405462;
  border-radius: 14px;
  overflow: hidden;
}
.legal-meta > div {
  min-height: 95px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #405462;
  border-bottom: 1px solid #405462;
}
.legal-meta > div:nth-child(2n) {
  border-right: 0;
}
.legal-meta > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.legal-meta dt {
  color: #8ea2ae;
  font:
    8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.legal-meta dd {
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.legal-key-points {
  max-width: 1204px;
  margin: 36px auto 0;
  padding: 25px 27px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 35px;
  border: 1px solid #efc2b2;
  border-radius: 14px;
  background: #fff1ea;
}
.legal-key-points > div > span {
  color: var(--orange);
  font:
    800 8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.12em;
}
.legal-key-points h2 {
  margin-top: 9px;
  font:
    600 27px var(--font-display),
    Georgia,
    serif;
}
.legal-key-points ol {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  counter-reset: legal-points;
}
.legal-key-points li {
  position: relative;
  padding-left: 30px;
  color: #425560;
  font-size: 11px;
  line-height: 1.6;
  counter-increment: legal-points;
}
.legal-key-points li:before {
  content: counter(legal-points);
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--orange);
  font:
    700 9px var(--font-mono),
    ui-monospace,
    monospace;
}
.legal-shell {
  max-width: 1204px;
  margin: 0 auto;
  padding: 72px 0 100px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 12px 34px #14222f0a;
}
.legal-toc > span {
  color: var(--blue);
  font:
    800 8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.13em;
}
.legal-toc nav {
  margin-top: 15px;
  display: grid;
}
.legal-toc a {
  min-height: 39px;
  padding: 9px 0;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 6px;
  align-items: start;
  border-top: 1px solid #edf1f3;
  color: #5a6972;
  font-size: 10px;
  line-height: 1.4;
}
.legal-toc a:hover {
  color: var(--blue);
}
.legal-toc a b {
  color: #a6b2b9;
  font:
    700 8px var(--font-mono),
    ui-monospace,
    monospace;
}
.legal-content {
  min-width: 0;
}
.legal-section {
  scroll-margin-top: 30px;
  padding: 0 0 52px;
  margin-bottom: 52px;
  border-bottom: 1px solid var(--line);
}
.legal-section-number {
  color: var(--blue);
  font:
    800 10px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.1em;
}
.legal-section h2 {
  max-width: 760px;
  margin: 10px 0 20px;
  font:
    600 clamp(30px, 3vw, 42px)/1.05 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.04em;
}
.legal-section > p {
  max-width: 810px;
  margin-top: 14px;
  color: #455762;
  font-size: 13px;
  line-height: 1.8;
}
.legal-section ul {
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}
.legal-section li {
  position: relative;
  padding: 13px 15px 13px 41px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #455762;
  background: var(--surface);
  font-size: 12px;
  line-height: 1.6;
}
.legal-section li:before {
  content: "✓";
  position: absolute;
  left: 15px;
  top: 13px;
  color: #176b52;
  font-weight: 900;
}
.legal-note {
  margin-top: 22px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 15px;
  border-left: 3px solid var(--blue);
  border-radius: 0 9px 9px 0;
  background: #edf3ff;
}
.legal-note b {
  color: var(--blue);
  font:
    800 9px var(--font-mono),
    ui-monospace,
    monospace;
  text-transform: uppercase;
}
.legal-note p {
  color: #405564;
  font-size: 11px;
  line-height: 1.6;
}
.legal-table-scroll {
  margin-top: 23px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.legal-table-scroll table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
}
.legal-table-scroll th {
  padding: 13px 15px;
  color: #fff;
  background: #173043;
  text-align: left;
  font:
    700 9px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
}
.legal-table-scroll td {
  padding: 15px;
  border-top: 1px solid var(--line);
  color: #4a5c67;
  font-size: 10px;
  line-height: 1.55;
  vertical-align: top;
}
.legal-table-scroll td:first-child {
  width: 22%;
  color: var(--ink);
  font-weight: 800;
}
.legal-sources > div {
  margin-top: 22px;
  display: grid;
  gap: 8px;
}
.legal-sources a {
  min-height: 78px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr 1.2fr 24px;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.legal-sources a:hover {
  transform: translateY(-2px);
  border-color: #8fb2ff;
}
.legal-sources a strong {
  font-size: 11px;
}
.legal-sources a span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.legal-sources a b {
  color: var(--blue);
  font-size: 16px;
}
.legal-contact-card {
  padding: 36px;
  border-radius: 15px;
  color: #fff;
  background: var(--blue);
}
.legal-contact-card > span {
  color: #c9d9ff;
  font:
    800 8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.13em;
}
.legal-contact-card h2 {
  margin-top: 14px;
  font:
    600 36px/1.04 var(--font-display),
    Georgia,
    serif;
}
.legal-contact-card p {
  max-width: 550px;
  margin-top: 12px;
  color: #dce6ff;
  font-size: 11px;
  line-height: 1.6;
}
.legal-contact-card a {
  min-height: 44px;
  margin-top: 22px;
  padding: 10px 13px;
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  color: var(--blue);
  background: var(--surface);
  font-size: 11px;
  font-weight: 800;
}
.legal-related {
  padding: 82px max(28px, calc((100vw - 1204px) / 2));
  color: #eef5f8;
  background: var(--ink);
}
.legal-related > div:first-child {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}
.legal-related h2 {
  margin-top: 10px;
  font:
    600 43px var(--font-display),
    Georgia,
    serif;
}
.legal-related > div:last-child {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.legal-related a {
  min-height: 230px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  border: 1px solid #3c4f5c;
  border-radius: 13px;
  background: #192b38;
}
.legal-related a > span {
  color: #8fb2ff;
  font:
    800 8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.1em;
}
.legal-related h3 {
  margin-top: 25px;
  font:
    600 29px var(--font-display),
    Georgia,
    serif;
}
.legal-related p {
  margin-top: 10px;
  color: #a8b8c1;
  font-size: 11px;
  line-height: 1.6;
}
.legal-related a > b {
  margin-top: auto;
  padding-top: 20px;
  color: #ffad8b;
  font-size: 10px;
}
.cookie-consent {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 80;
  max-width: 920px;
  margin: auto;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  border: 1px solid #526773;
  border-radius: 14px;
  color: #edf5f8;
  background: #10202bea;
  box-shadow: 0 22px 70px #07101766;
  backdrop-filter: blur(18px);
}
.cookie-consent span {
  color: #8fb2ff;
  font:
    800 8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.12em;
}
.cookie-consent h2 {
  margin-top: 8px;
  font:
    600 25px var(--font-display),
    Georgia,
    serif;
}
.cookie-consent p {
  max-width: 590px;
  margin-top: 7px;
  color: #b9c8d0;
  font-size: 10px;
  line-height: 1.55;
}
.cookie-consent a {
  min-height: 36px;
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  color: #ffad8b;
  font-size: 9px;
  font-weight: 800;
}
.cookie-consent-actions {
  display: flex;
  gap: 8px;
}
.cookie-consent button {
  min-height: 43px;
  padding: 10px 14px;
  border: 1px solid #587080;
  border-radius: 7px;
  color: #e9f1f5;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.cookie-consent button:last-child {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}
.cookie-settings {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 45;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #526773;
  border-radius: 999px;
  color: #d6e1e6;
  background: #10202bd9;
  cursor: pointer;
  font-size: 8px;
}
@media (max-width: 900px) {
  .legal-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .legal-meta {
    max-width: 560px;
  }
  .legal-key-points {
    margin-left: 20px;
    margin-right: 20px;
    grid-template-columns: 1fr;
  }
  .legal-shell {
    padding-left: 20px;
    padding-right: 20px;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 35px;
  }
}
@media (max-width: 680px) {
  .legal-hero {
    min-height: 0;
    padding: 58px 16px;
  }
  .legal-hero h1 {
    font-size: 49px;
  }
  .legal-hero-copy > p {
    font-size: 13px;
  }
  .legal-meta > div {
    min-height: 80px;
    padding: 14px;
  }
  .legal-key-points {
    margin: 16px;
    padding: 21px;
  }
  .legal-key-points ol {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .legal-shell {
    display: block;
    padding: 35px 16px 65px;
  }
  .legal-toc {
    position: relative;
    top: auto;
    max-height: none;
    margin-bottom: 45px;
  }
  .legal-toc nav {
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
  }
  .legal-section {
    margin-bottom: 38px;
    padding-bottom: 38px;
  }
  .legal-section h2 {
    font-size: 33px;
  }
  .legal-section > p {
    font-size: 12px;
    line-height: 1.72;
  }
  .legal-note {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .legal-sources a {
    grid-template-columns: 1fr 22px;
    gap: 8px;
  }
  .legal-sources a span {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .legal-sources a b {
    grid-column: 2;
    grid-row: 1;
  }
  .legal-contact-card {
    padding: 27px 23px;
  }
  .legal-contact-card h2 {
    font-size: 31px;
  }
  .legal-related {
    padding: 58px 16px;
  }
  .legal-related h2 {
    font-size: 38px;
  }
  .legal-related > div:last-child {
    grid-template-columns: 1fr;
  }
  .legal-links-bar > div {
    padding: 25px 16px;
    display: block;
    text-align: center;
  }
  .legal-links-bar nav {
    margin: 16px 0 10px;
    gap: 4px 16px;
  }
  .legal-links-bar nav a {
    min-height: 39px;
  }
  .legal-links-bar > div > span {
    display: block;
  }
  .cookie-consent {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 13px;
    grid-template-columns: 1fr;
    gap: 9px;
    border-radius: 11px;
  }
  .cookie-consent h2 {
    margin-top: 5px;
    font-size: 20px;
  }
  .cookie-consent p {
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.4;
  }
  .cookie-consent a {
    min-height: 28px;
    font-size: 8px;
  }
  .cookie-consent-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .cookie-consent button {
    min-height: 38px;
    padding: 8px 10px;
    white-space: normal;
  }
  .cookie-settings {
    bottom: 74px;
  }
}
@media (max-width: 680px) {
  .cookie-settings {
    bottom: 12px;
  }
  body:has(.review-mobile-cta, .comparison-mobile-sticky) .cookie-settings {
    bottom: 74px;
  }
}

/* Global commerce navigation and conversion footer */
.skip-link {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 10px;
  padding: 11px 14px;
  border-radius: 7px;
  color: #fff;
  background: var(--blue);
  transform: translateY(-150%);
  transition: transform 0.2s;
}
.skip-link:focus {
  transform: translateY(0);
}
.commerce-trustbar {
  min-height: 31px;
  padding: 6px 24px;
  color: #dfe9ef;
  background: #101d28;
  font:
    600 9px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.035em;
}
.commerce-trustbar > div {
  max-width: 1204px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.commerce-trustbar span:first-child {
  margin-right: auto;
}
.commerce-trustbar i,
.global-data-status i,
.nav-deal i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #50c99b;
  box-shadow: 0 0 0 4px #50c99b20;
}
.commerce-trustbar a {
  color: #ffb092;
}
.commerce-trustbar a:hover {
  color: #fff;
}
.commerce-trustbar b {
  margin-left: 5px;
}
.global-header {
  position: sticky;
  z-index: 80;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 250, 251, 0.97);
  box-shadow: 0 8px 30px #14222f0a;
  backdrop-filter: blur(18px);
}
.global-header-main {
  max-width: 1260px;
  min-height: 76px;
  margin: auto;
  padding: 12px 28px;
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) auto;
  align-items: center;
  gap: 28px;
}
.global-brand {
  gap: 11px;
}
.global-brand > span:last-child {
  display: grid;
  line-height: 1;
}
.global-brand small {
  margin-top: 6px;
  color: var(--muted);
  font:
    600 7px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.13em;
}
.global-search {
  height: 45px;
  max-width: 610px;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 4px 5px 4px 15px;
  border: 1.5px solid #9eb8e9;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 4px 16px #1558d60c;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.global-search:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px #1558d612;
}
.global-search > span {
  color: var(--blue);
  font-size: 19px;
}
.global-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 12px;
}
.global-search input::placeholder {
  color: #82919b;
}
.global-search button {
  height: 35px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: var(--blue);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.global-header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.header-deal-link {
  min-width: 92px;
  display: grid;
}
.header-deal-link span {
  color: var(--orange);
  font:
    700 8px var(--font-mono),
    ui-monospace,
    monospace;
}
.header-deal-link b {
  margin-top: 3px;
  font-size: 10px;
}
.header-finder-button {
  min-height: 40px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 8px;
  color: #fff;
  background: #14222f;
  font-size: 10px;
  font-weight: 800;
}
.header-finder-button span {
  color: #ffad8b;
}
.theme-toggle,
.global-menu-button {
  min-width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.theme-toggle {
  font-size: 17px;
}
.global-menu-button {
  display: none;
}
.global-menu-button b {
  font-size: 0;
}
.global-nav-shell {
  position: relative;
  max-width: 1260px;
  min-height: 42px;
  margin: auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid #e5ebf0;
}
.global-nav {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 3px;
}
.global-nav > a,
.nav-mega > summary {
  min-height: 41px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  transition:
    color 0.2s,
    background 0.2s;
}
.nav-mega > summary::-webkit-details-marker {
  display: none;
}
.global-nav > a:hover,
.nav-mega > summary:hover,
.nav-mega[open] > summary {
  color: var(--blue);
  background: #edf3ff;
}
.nav-coupon b {
  padding: 3px 5px;
  border-radius: 4px;
  color: #fff;
  background: var(--orange);
  font:
    700 6px var(--font-mono),
    ui-monospace,
    monospace;
}
.global-nav .nav-deal {
  color: #b54420;
}
.nav-deal i {
  background: #ed6a42;
  box-shadow: 0 0 0 4px #ed6a4218;
}
.global-data-status {
  color: #71818c;
  white-space: nowrap;
  font:
    600 8px var(--font-mono),
    ui-monospace,
    monospace;
}
.global-data-status i {
  width: 5px;
  height: 5px;
  margin-right: 7px;
}
.nav-mega {
  position: static;
}
.nav-mega-panel {
  position: absolute;
  z-index: 90;
  top: 100%;
  left: 28px;
  right: 28px;
  padding: 28px;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 38px;
  border: 1px solid var(--line);
  border-radius: 0 0 16px 16px;
  background: var(--surface);
  box-shadow: 0 24px 50px #14222f22;
}
.nav-panel-kicker {
  color: var(--blue);
  font:
    700 8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.12em;
}
.nav-mega-panel h2 {
  margin: 15px 0 21px;
  font:
    600 29px/1 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.04em;
}
.nav-mega-panel > div:first-child > a {
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}
.nav-category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.nav-category-grid > a {
  position: relative;
  min-height: 88px;
  padding: 15px 42px 15px 16px;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafb;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.nav-category-grid > a:hover {
  transform: translateY(-2px);
  border-color: #9fb9eb;
}
.nav-category-grid > a > span {
  grid-row: 1/3;
  color: var(--orange);
  font:
    700 8px var(--font-mono),
    ui-monospace,
    monospace;
}
.nav-category-grid b {
  font:
    600 15px var(--font-display),
    Georgia,
    serif;
}
.nav-category-grid small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 8px;
}
.nav-category-grid i {
  position: absolute;
  right: 15px;
  top: 34px;
  color: var(--blue);
  font-style: normal;
}
.global-mobile-menu {
  display: none;
}

.site-footer {
  color: #edf5f8;
  background: #0d1923;
}
.footer-conversion {
  max-width: 1204px;
  margin: auto;
  padding: 44px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border-bottom: 1px solid #31414c;
}
.footer-conversion > div > span {
  color: #ff9e7b;
  font:
    700 8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.12em;
}
.footer-conversion h2 {
  margin: 7px 0 5px;
  font:
    600 31px var(--font-display),
    Georgia,
    serif;
}
.footer-conversion p {
  color: #9fb0bb;
  font-size: 11px;
}
.footer-conversion > a {
  min-height: 46px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 35px;
  border-radius: 8px;
  color: #10202b;
  background: #d9f2ea;
  font-size: 11px;
  font-weight: 800;
}
.footer-conversion > a b {
  font-size: 16px;
}
.footer-trust-grid {
  max-width: 1204px;
  margin: auto;
  padding: 24px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #31414c;
}
.footer-trust-grid > div {
  padding: 4px 28px;
  display: flex;
  gap: 16px;
  border-right: 1px solid #31414c;
}
.footer-trust-grid > div:first-child {
  padding-left: 0;
}
.footer-trust-grid > div:last-child {
  border: 0;
}
.footer-trust-grid > div > b {
  color: #ff9e7b;
  font:
    700 8px var(--font-mono),
    ui-monospace,
    monospace;
}
.footer-trust-grid strong,
.footer-trust-grid small {
  display: block;
}
.footer-trust-grid strong {
  font-size: 11px;
}
.footer-trust-grid small {
  margin-top: 5px;
  color: #8ea1ad;
  font-size: 9px;
  line-height: 1.45;
}
.footer-main-shell {
  max-width: 1204px;
  margin: auto;
  padding: 55px 0 48px;
  display: grid;
  grid-template-columns: 1.15fr 2fr;
  gap: 75px;
}
.footer-global-brand {
  color: #fff;
}
.footer-intro h2 {
  margin: 32px 0 15px;
  font:
    600 35px/1 var(--font-display),
    Georgia,
    serif;
  letter-spacing: -0.045em;
}
.footer-intro h2 em {
  color: #ff9e7b;
  font-style: italic;
}
.footer-intro > p {
  max-width: 330px;
  color: #9dafba;
  font-size: 11px;
  line-height: 1.65;
}
.footer-letter-link {
  margin-top: 24px;
  display: inline-flex;
  gap: 20px;
  color: #d9f2ea;
  font-size: 10px;
  font-weight: 800;
}
.footer-letter-link span {
  color: #ff9e7b;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.footer-nav > div > b {
  margin-bottom: 17px;
  display: block;
  color: #ff9e7b;
  font:
    700 8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.footer-nav a {
  min-height: 29px;
  display: flex;
  align-items: center;
  color: #aebdc6;
  font-size: 10px;
  transition:
    color 0.2s,
    transform 0.2s;
}
.footer-nav a:hover {
  color: #fff;
  transform: translateX(3px);
}
.footer-disclosure {
  max-width: 1204px;
  margin: auto;
  padding: 20px 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border-top: 1px solid #31414c;
  color: #758b98;
  font:
    500 8px/1.6 var(--font-mono),
    ui-monospace,
    monospace;
}
.footer-disclosure p {
  max-width: 730px;
}
.footer-disclosure strong {
  color: #a9bac5;
}
.footer-disclosure > div {
  display: flex;
  gap: 22px;
  white-space: nowrap;
}
.footer-disclosure a {
  color: #d9f2ea;
}

html[data-theme="dark"] {
  --paper: #111b23;
  --surface: #17232c;
  --surface-sunken: #15212a;
  --surface-inverse: #0b141c;
  --ink: #edf5f8;
  --muted: #a6b6c0;
  --on-inverse: #8fa1ad;
  --line: #34444f;
  --line-strong: #2d3c47;
  color-scheme: dark;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .site {
  background: var(--paper);
  color: var(--ink);
}
/* Header trong suốt cần rgba riêng, không biểu diễn được bằng token. */
html[data-theme="dark"] .global-header {
  background: rgba(17, 27, 35, 0.97);
}
html[data-theme="dark"] .global-nav-shell {
  border-top-color: var(--line-strong);
}
/* Bốn thành phần này không khai nền ở giao diện sáng (trong suốt trên --paper)
   nên vẫn cần nền riêng để nổi khối trên nền tối. */
html[data-theme="dark"] .nav-category-grid > a,
html[data-theme="dark"] .legal-key-points,
html[data-theme="dark"] .legal-note,
html[data-theme="dark"] .legal-contact-card {
  background: var(--surface);
  border-color: var(--line);
}

@media (max-width: 1100px) {
  .global-header-main {
    gap: 17px;
  }
  .header-deal-link {
    display: none;
  }
  .global-nav > a:nth-of-type(4),
  .global-nav > a:nth-of-type(5) {
    display: none;
  }
  .footer-conversion,
  .footer-trust-grid,
  .footer-main-shell,
  .footer-disclosure {
    margin-left: 28px;
    margin-right: 28px;
  }
  .footer-main-shell {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 780px) {
  .commerce-trustbar {
    padding: 7px 16px;
  }
  .commerce-trustbar > div {
    justify-content: center;
  }
  .commerce-trustbar span:first-child {
    margin: 0;
  }
  .commerce-trustbar span:nth-child(2) {
    display: none;
  }
  .commerce-trustbar a {
    margin-left: auto;
  }
  .global-header-main {
    min-height: 64px;
    padding: 9px 16px;
    grid-template-columns: auto 1fr;
  }
  .global-brand {
    font-size: 20px;
  }
  .global-brand small,
  .global-search,
  .header-finder-button,
  .theme-toggle {
    display: none;
  }
  .global-header-actions {
    justify-content: flex-end;
  }
  .global-menu-button {
    display: grid;
    place-items: center;
  }
  .global-menu-button span {
    font-size: 20px;
    line-height: 1;
  }
  .global-nav-shell {
    display: none;
  }
  .global-mobile-menu {
    padding: 15px 16px 22px;
    border-top: 1px solid var(--line);
    background: var(--paper);
    box-shadow: 0 20px 35px #14222f18;
  }
  .global-mobile-menu.open {
    display: block;
  }
  .mobile-global-search {
    height: 46px;
    padding: 4px 4px 4px 13px;
    display: grid;
    grid-template-columns: 1fr 38px;
    gap: 7px;
    border: 1px solid #9eb8e9;
    border-radius: 9px;
    background: var(--surface);
  }
  .mobile-global-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
  }
  .mobile-global-search button {
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--blue);
    font-size: 18px;
  }
  .mobile-menu-primary {
    margin: 12px 0 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .mobile-menu-primary > a {
    min-height: 70px;
    padding: 13px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 9px;
    color: #fff;
    background: var(--blue);
    font-size: 13px;
    font-weight: 800;
  }
  .mobile-menu-primary > a:last-child {
    background: var(--orange);
  }
  .mobile-menu-primary span {
    font-size: 8px;
    font-weight: 600;
    opacity: 0.85;
  }
  .mobile-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
  .mobile-menu-grid > div > b {
    display: block;
    margin-bottom: 9px;
    color: var(--orange);
    font:
      700 8px var(--font-mono),
      ui-monospace,
      monospace;
  }
  .mobile-menu-grid a {
    min-height: 36px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
  }
  .mobile-menu-foot {
    margin-top: 18px;
    padding-top: 13px;
    display: flex;
    gap: 18px;
    border-top: 1px solid var(--line);
  }
  .mobile-menu-foot a,
  .mobile-menu-foot button {
    padding: 0;
    border: 0;
    color: var(--muted);
    background: transparent;
    font-size: 9px;
  }
  .footer-conversion {
    margin: 0 16px;
    padding: 35px 0;
    display: block;
  }
  .footer-conversion h2 {
    font-size: 27px;
  }
  .footer-conversion p {
    margin-top: 8px;
    line-height: 1.55;
  }
  .footer-conversion > a {
    margin-top: 22px;
    width: 100%;
    justify-content: space-between;
  }
  .footer-trust-grid {
    margin: 0 16px;
    padding: 16px 0;
    grid-template-columns: 1fr;
  }
  .footer-trust-grid > div,
  .footer-trust-grid > div:first-child {
    padding: 13px 0;
    border-right: 0;
    border-bottom: 1px solid #31414c;
  }
  .footer-main-shell {
    margin: 0 16px;
    padding: 40px 0 35px;
    display: block;
  }
  .footer-intro h2 {
    font-size: 31px;
  }
  .footer-nav {
    margin-top: 40px;
    grid-template-columns: 1fr 1fr;
    gap: 32px 18px;
  }
  .footer-disclosure {
    margin: 0 16px;
    padding: 19px 0 90px;
    display: block;
  }
  .footer-disclosure > div {
    margin-top: 16px;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-category-grid > a,
  .footer-nav a,
  .skip-link {
    transition: none;
  }
}

/* Newsletter preference center */
.unsubscribe-page {
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
}
.unsubscribe-shell {
  min-height: calc(100vh - 76px);
  padding: 80px max(28px, calc((100vw - 1100px) / 2));
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  align-items: center;
  gap: 80px;
}
.unsubscribe-copy .kicker {
  color: var(--blue);
}
.unsubscribe-copy h1 {
  margin: 20px 0;
  font-size: clamp(52px, 6vw, 76px);
}
.unsubscribe-copy > p {
  max-width: 610px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.unsubscribe-copy ul {
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
}
.unsubscribe-copy li {
  position: relative;
  padding-left: 29px;
  color: #445762;
  font-size: 11px;
}
.unsubscribe-copy li:before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -2px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #176b52;
  font-size: 9px;
}
.unsubscribe-card {
  padding: 31px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: 0 20px 55px #14222f0d;
}
.unsubscribe-card > span {
  color: var(--orange);
  font:
    800 8px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.12em;
}
.unsubscribe-card > h2 {
  margin-top: 11px;
  font:
    600 32px var(--font-display),
    Georgia,
    serif;
}
.unsubscribe-card > p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.unsubscribe-card > a {
  min-height: 38px;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
}
.unsubscribe-form {
  margin-top: 22px;
}
.unsubscribe-form > label:first-child {
  display: block;
  margin-bottom: 8px;
  color: #52636f;
  font-size: 10px;
  font-weight: 800;
}
.unsubscribe-form > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.unsubscribe-form input {
  min-width: 0;
  min-height: 45px;
  padding: 10px 12px;
  border: 1px solid #cbd6dc;
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
}
.unsubscribe-form input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #1558d611;
}
.unsubscribe-form button {
  min-height: 45px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--blue);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.unsubscribe-form button:disabled {
  cursor: wait;
  opacity: 0.65;
}
.unsubscribe-form small {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}
.unsubscribe-form small.success {
  color: #176b52;
}
.unsubscribe-form small.error {
  color: #a33b24;
}
.unsubscribe-result {
  margin-top: 20px;
  padding: 16px;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 11px;
  border-radius: 10px;
}
.unsubscribe-result > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
}
.unsubscribe-result h2 {
  font-size: 14px;
}
.unsubscribe-result p {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.5;
}
.unsubscribe-result.success {
  color: #145a45;
  background: #e5f6ef;
}
.unsubscribe-result.success > span {
  background: #176b52;
}
.unsubscribe-result.warning {
  color: #7a4b09;
  background: #fff3d8;
}
.unsubscribe-result.warning > span {
  background: #d97706;
}
@media (max-width: 760px) {
  .unsubscribe-shell {
    min-height: 0;
    padding: 55px 16px 70px;
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .unsubscribe-copy h1 {
    font-size: 50px;
  }
  .unsubscribe-card {
    padding: 24px 20px;
  }
  .unsubscribe-form > div {
    grid-template-columns: 1fr;
  }
  .unsubscribe-form button {
    width: 100%;
  }
}

@media (max-width: 780px) {
  .global-mobile-menu {
    max-height: calc(100vh - 95px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* AUDIT #8, #15 — breadcrumb thay cho header lặp lại trên trang chi tiết. */
.breadcrumb {
  max-width: 1260px;
  margin: 0 auto;
  padding: 18px 28px 0;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  font:
    10px var(--font-mono),
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
}
.breadcrumb a {
  color: var(--blue);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb span {
  color: var(--muted);
}
.breadcrumb li:last-child span {
  color: var(--ink);
  font-weight: 700;
}
.breadcrumb i {
  color: var(--line);
  font-style: normal;
}
@media (max-width: 700px) {
  .breadcrumb {
    padding: 14px 16px 0;
  }
  .breadcrumb ol {
    font-size: 9px;
    gap: 5px;
  }
}
/* AUDIT #8 — ghi chú minh bạch cuối trang, thay cho footer lặp lại. */
.page-disclosure {
  max-width: 1064px;
  margin: 0 auto;
  padding: 26px 28px 44px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
  border-top: 1px solid var(--line);
}
@media (max-width: 700px) {
  .page-disclosure {
    padding: 22px 16px 36px;
    font-size: 10px;
  }
}

/* ===========================================================================
   AUDIT #28 — Accessibility: focus và chuyển động
   =========================================================================== */

/* CSS đặt `outline:0` ở 6 chỗ (ô tìm kiếm, input newsletter, select Finder…)
   mà không phải chỗ nào cũng có chỉ báo thay thế. Người dùng bàn phím mất
   hoàn toàn dấu focus. `:focus-visible` chỉ hiện khi điều hướng bằng bàn
   phím, nên không ảnh hưởng cảm giác khi bấm chuột. */
:where(a, button, input, select, textarea, summary, details, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}
html[data-theme="dark"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: #7ea8ff;
}
/* Ô nhập có outline:0 riêng — dùng viền + quầng sáng để không phá layout. */
.email-row:focus-within,
.global-search:focus-within,
.mobile-global-search:focus-within {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Bản cũ chỉ tắt transition cho 3 selector, trong khi file có 15 transition
   và 2 animation — trong đó ticker chạy vô hạn. Tôn trọng thiết lập hệ thống
   trên toàn bộ site. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track {
    animation: none !important;
    transform: none !important;
  }
}

/* Vùng chạm tối thiểu trên cảm ứng. Nhiều link footer/nav dùng font 9-10px
   nên vùng bấm thực tế nhỏ hơn ngưỡng khuyến nghị 44px. */
@media (pointer: coarse) {
  .footer-nav a,
  .legal-links-bar nav a,
  .breadcrumb a,
  .nav-mega summary,
  .global-nav > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* AUDIT #30 — biểu đồ lịch sử giá: thêm đường lưới và tooltip gốc.
   Bản cũ chỉ là các div cao thấp, không trục, không tham chiếu. */
.price-history-chart > div > span {
  position: relative;
  cursor: default;
}
.price-history-chart > div:hover > b {
  color: var(--blue);
  font-weight: 700;
}

/* ==========================================================================
   HOUSELAB 2026 UI POLISH & FIXES
   Styles for Comparison Grid, Top Lists, Finder Banner & Finder Quiz
   ========================================================================== */

.comparison-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.toplist-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.toplist-summary-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.toplist-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.toplist-card-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.toplist-count {
  font: 11px var(--font-mono), monospace;
  color: var(--muted);
}

.toplist-summary-card h3 {
  font: 600 20px/1.25 var(--font-display), Georgia, serif;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.toplist-summary-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.toplist-summary-card h3 a:hover {
  color: var(--blue);
}

.toplist-summary-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 20px;
  flex: 1;
}

.toplist-meta {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.finder-banner-section {
  max-width: 1260px;
  margin: 40px auto 70px;
  padding: 0 28px;
}

.finder-banner-inner {
  background: linear-gradient(135deg, #14222f 0%, #1e3347 100%);
  color: #fff;
  border-radius: 12px;
  padding: 48px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

.finder-banner-inner::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 107, 74, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.finder-banner-copy {
  max-width: 640px;
  z-index: 1;
}

.finder-banner-copy .kicker {
  color: #ffad8b;
  font: 11px var(--font-mono), monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
}

.finder-banner-copy h2 {
  font: 600 36px/1.15 var(--font-display), Georgia, serif;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  color: #fff;
}

.finder-banner-copy h2 em {
  font-style: italic;
  color: #8fb2ff;
}

.finder-banner-copy p {
  font-size: 15px;
  line-height: 1.6;
  color: #d1dde6;
  margin-bottom: 24px;
}

.finder-banner-visual {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.finder-icon {
  font-size: 80px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.finder-container {
  margin-top: 30px;
}

.finder-controls {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 20px 24px;
  margin-bottom: 28px;
}

.finder-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.finder-group label {
  font-size: 13px;
  color: var(--ink);
}

.finder-group select {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.finder-results-header {
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--muted);
}

.finder-results-header b {
  color: var(--ink);
}

.finder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.finder-product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.finder-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.finder-product-card img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  background: #f8fafc;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.finder-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.finder-card-body .pill {
  align-self: flex-start;
  margin-bottom: 10px;
}

.finder-card-body h3 {
  font: 600 18px/1.3 var(--font-display), Georgia, serif;
  margin: 0 0 8px;
}

.finder-card-body h3 a {
  color: var(--ink);
  text-decoration: none;
}

.finder-card-body h3 a:hover {
  color: var(--blue);
}

.finder-card-body p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 16px;
  flex: 1;
}

.finder-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.finder-card-footer strong {
  font-size: 15px;
  color: var(--ink);
}

.review-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f8fafc;
}

.comparison-product img {
  width: 140px;
  height: 110px;
  object-fit: contain;
  background: #f8fafc;
  border-radius: 7px;
  display: block;
  margin: 8px auto 12px;
  padding: 6px;
}

@media (max-width: 900px) {
  .toplist-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .finder-banner-inner {
    flex-direction: column;
    padding: 32px 24px;
    text-align: left;
  }
  .finder-banner-copy h2 {
    font-size: 26px;
  }
  .finder-banner-visual {
    display: none;
  }
}

/* Deal Detail */
.deal-detail-box {
  display: flex;
  gap: 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 36px;
  align-items: center;
  margin-top: 30px;
}
.deal-detail-box img {
  width: 360px;
  height: 260px;
  object-fit: contain;
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px;
}
.deal-info {
  flex: 1;
}
.deal-info h3 {
  font: 600 24px var(--font-display), Georgia, serif;
  margin: 12px 0 16px;
}
.deal-info .price-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
}
.deal-info .price-row strong {
  font-size: 26px;
  color: var(--blue);
}
.deal-info .price-row del {
  color: var(--muted);
  font-size: 16px;
}
.deal-info p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
}

/* Ranked Card */
.toplist-ranked-items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}
.ranked-card {
  display: flex;
  gap: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  align-items: center;
  position: relative;
}
.rank-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--ink);
  color: #fff;
  font: 700 13px var(--font-mono), monospace;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 2;
}
.ranked-card img {
  width: 220px;
  height: 160px;
  object-fit: contain;
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px;
}
.ranked-card-info {
  flex: 1;
}
.ranked-card-info h3 {
  font: 600 22px var(--font-display), Georgia, serif;
  margin: 0 0 10px;
}
.ranked-score {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}
.ranked-card-info strong {
  display: block;
  font-size: 18px;
  color: var(--blue);
  margin-bottom: 16px;
}

/* Comparison Detail Battle */
.comparison-hero-battle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 36px 24px;
  margin: 32px 0 40px;
}
.battle-card {
  flex: 1;
  text-align: center;
}
.battle-card img {
  width: 220px;
  height: 160px;
  object-fit: contain;
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px;
  margin: 0 auto 16px;
  display: block;
}
.battle-card h3 {
  font: 600 20px var(--font-display), Georgia, serif;
  margin: 0 0 8px;
}
.battle-card strong {
  font-size: 17px;
  color: var(--blue);
}
.battle-vs {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 14px var(--font-mono), monospace;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .deal-detail-box,
  .ranked-card,
  .comparison-hero-battle {
    flex-direction: column;
    text-align: center;
  }
  .deal-detail-box img,
  .ranked-card img,
  .battle-card img {
    width: 100%;
    max-width: 280px;
    height: auto;
  }
}