
.hb-mertra-detail {
  --ink:#151515;
  --copy:#343434;
  --muted:#696969;
  --line:#dedede;
  --soft:#f5f5f5;
  --white:#ffffff;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0;
  color:var(--copy);
  font-family:Arial,Helvetica,sans-serif;
  font-size:17px;
  line-height:1.78;
  overflow-wrap:break-word;
}

.hb-mertra-detail,
.hb-mertra-detail * {
  box-sizing:border-box;
}

.hb-mertra-detail h2,
.hb-mertra-detail h3,
.hb-mertra-detail p,
.hb-mertra-detail figure {
  margin-top:0;
}

.hb-mertra-detail p {
  margin-bottom:23px;
}

.hb-mertra-detail h2 {
  margin:68px 0 27px;
  padding-top:21px;
  border-top:2px solid var(--ink);
  color:var(--ink);
  font-size:clamp(27px,3vw,36px);
  line-height:1.23;
  letter-spacing:-.025em;
  scroll-margin-top:28px;
}

.hb-mertra-detail h3 {
  margin:29px 0 13px;
  color:var(--ink);
  font-size:21px;
  line-height:1.36;
}

.hb-mertra-detail a {
  color:var(--ink);
  font-weight:700;
  text-decoration-color:#888;
  text-underline-offset:4px;
}

.hb-mertra-detail a:hover {
  text-decoration-color:var(--ink);
}

.hb-mertra-detail .hb-lede {
  margin:0 0 31px;
  color:#272727;
  font-size:20px;
  line-height:1.7;
}

/* ARTICLE NAVIGATION */

.hb-mertra-detail .hb-toc {
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  width:100%;
  margin:31px 0 43px;
  padding:10px;
  border:1px solid var(--line);
  background:var(--soft);
}

.hb-mertra-detail .hb-toc a {
  flex:1 1 0;
  min-width:0;
  padding:10px 3px;
  border:1px solid #c9c9c9;
  background:var(--white);
  color:var(--ink);
  font-size:12px;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
}

.hb-mertra-detail .hb-toc a:hover {
  border-color:var(--ink);
  background:var(--ink);
  color:var(--white);
}

/* IMAGE PRESENTATION */

.hb-mertra-detail .hb-photo {
  width:100%;
  margin:32px 0 38px;
}

.hb-mertra-detail .hb-photo-link {
  display:block;
  width:100%;
  max-width:690px;
  margin:0 auto;
  background:#ededed;
  text-decoration:none;
}

.hb-mertra-detail .hb-photo img {
  display:block;
  width:100%;
  height:auto;
  max-height:680px;
  object-fit:contain;
}

.hb-mertra-detail .hb-photo figcaption {
  max-width:690px;
  margin:12px auto 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
  text-align:center;
}

/* EDITORIAL NOTE */

.hb-mertra-detail .hb-editorial-note {
  margin:31px 0 35px;
  padding:21px 25px;
  border-left:4px solid var(--ink);
  background:var(--soft);
}

.hb-mertra-detail .hb-editorial-note strong {
  display:block;
  margin-bottom:8px;
  color:var(--ink);
  font-size:17px;
}

.hb-mertra-detail .hb-editorial-note p {
  margin:0;
  font-size:16px;
  line-height:1.72;
}

/* PRODUCT SECTION */

.hb-mertra-detail .hb-product-feature {
  width:100%;
  margin:37px 0 43px;
  padding:clamp(23px,3vw,35px);
  border:1px solid var(--line);
  background:#fafafa;
}

.hb-mertra-detail .hb-product-kicker {
  margin-bottom:10px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.hb-mertra-detail .hb-product-feature h3 {
  margin:0 0 19px;
  font-size:clamp(23px,2.6vw,29px);
}

.hb-mertra-detail .hb-product-feature p {
  margin-bottom:21px;
}

.hb-mertra-detail .hb-product-feature .hb-photo {
  margin:25px 0 29px;
}

.hb-mertra-detail .hb-product-feature .hb-photo-link,
.hb-mertra-detail .hb-product-feature .hb-photo figcaption {
  max-width:710px;
}

/* BUTTON */

.hb-mertra-detail .hb-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  min-height:47px;
  padding:13px 23px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--white);
  font-size:14px;
  line-height:1.4;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  transition:background .2s ease,color .2s ease;
}

.hb-mertra-detail .hb-button:hover {
  background:var(--white);
  color:var(--ink);
}

/* FAQ */

.hb-mertra-detail .hb-faq {
  width:100%;
}

.hb-mertra-detail .hb-faq-item {
  padding:24px 26px;
  border:1px solid var(--line);
  border-bottom:0;
  background:var(--white);
}

.hb-mertra-detail .hb-faq-item:last-child {
  border-bottom:1px solid var(--line);
}

.hb-mertra-detail .hb-faq-item h3 {
  margin:0 0 12px;
  font-size:19px;
  line-height:1.42;
}

.hb-mertra-detail .hb-faq-item p {
  margin:0;
  font-size:16px;
  line-height:1.75;
}

/* FINAL CTA */

.hb-mertra-detail .hb-final {
  width:100%;
  margin:64px 0 0;
  padding:clamp(28px,5vw,49px);
  border:2px solid var(--ink);
  background:var(--soft);
}

.hb-mertra-detail .hb-final-title {
  margin:0 0 19px;
  color:var(--ink);
  font-size:clamp(25px,3vw,34px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.02em;
}

.hb-mertra-detail .hb-final .hb-button {
  margin-top:5px;
}

/* RESPONSIVE */

@media(max-width:760px) {
  .hb-mertra-detail {
    font-size:16px;
    line-height:1.73;
  }

  .hb-mertra-detail h2 {
    margin-top:54px;
    font-size:28px;
  }

  .hb-mertra-detail .hb-lede {
    font-size:18px;
  }

  .hb-mertra-detail .hb-toc a {
    flex:1 1 0;
    font-size:10px;
  }
}

@media(max-width:520px) {
  .hb-mertra-detail .hb-toc a {
    flex:1 1 0;
    padding:8px 1px;
    font-size:9px;
  }

  .hb-mertra-detail .hb-product-feature {
    padding:17px;
  }

  .hb-mertra-detail .hb-faq-item {
    padding:20px 18px;
  }

  .hb-mertra-detail .hb-faq-item h3 {
    font-size:17px;
  }

  .hb-mertra-detail .hb-button {
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hb-mertra-detail .hb-button {
    transition:none;
  }
}
