/* Buying Guide Detail — layout pieces unique to this page (prefix bg-).
   Sizes are tuned so the 1280 px render matches the design scaled to 1280 (navy headings, compact cards). */
#main { --bg-navy: #0f3361; --bg-navy-text: #2e4260; --bg-blue: #1d74e8; --bg-cta: #077a1c; }
#main h1, #main h2, #main h3 { color: var(--bg-navy); }

/* ---------- Hero ---------- */
.bg-hero .hero__inner { min-height: 306px; padding-block: .85rem 1.1rem; }
.bg-hero .hero__copy { max-width: 700px; }
.bg-hero .breadcrumb { margin-bottom: .55rem; font-size: .9rem; }
.bg-hero .breadcrumb a, .bg-hero .breadcrumb li { color: var(--bg-navy-text); }
.bg-hero .breadcrumb [aria-current="page"] { color: var(--bg-navy); font-weight: 700; }
.bg-hero .hero__bg img { object-position: 70% 0%; }
.bg-hero .hero__bg::after { background: linear-gradient(90deg, rgba(250, 252, 249, .98) 0%, rgba(250, 252, 249, .92) 44%, rgba(250, 252, 249, .25) 58%, rgba(250, 252, 249, 0) 68%); }
.bg-hero .hero__script { top: 2.2rem; right: .9rem; font-size: 2.15rem; line-height: 1.05; text-align: center; color: var(--bg-navy); transform: rotate(-6deg); }
.bg-hero__badge { margin-bottom: .45rem; border-radius: var(--radius-pill); font-size: .82rem; padding: .3rem .9rem; letter-spacing: .02em; background: var(--bg-cta); }
.bg-title { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.3rem); line-height: 1.02; font-weight: 700; margin-bottom: .2em; max-width: 12ch; }
.bg-hero .hero__lead { max-width: 33rem; font-size: clamp(1.02rem, .9rem + .5vw, 1.22rem); line-height: 1.3; color: var(--bg-navy-text); margin: 0; }
.bg-hero__points { list-style: none; padding: 0; margin: .95rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .875rem; color: var(--bg-navy-text); line-height: 1.3; }
.bg-hero__points li { display: inline-flex; align-items: center; gap: .55rem; }
.bg-hero__points .icon { width: 36px; height: 36px; color: var(--bg-cta); flex: none; }
@media (min-width: 1000px) { .bg-hero__points { flex-wrap: nowrap; } }

/* ---------- Shared bits ---------- */
.bg-feat h3, .bg-type h3, .bg-steps h3 { font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em; }
.bg-h2 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.55rem); margin-bottom: .3rem; line-height: 1.15; }
.bg-h2--icon { display: flex; align-items: center; gap: .55rem; }
.bg-sub { color: var(--bg-navy-text); font-size: .95rem; margin-bottom: .7rem; line-height: 1.35; }
.bg-glyph { flex: none; display: grid; place-items: center; width: 36px; height: 36px; }
.bg-glyph .icon { width: 100%; height: 100%; }
.bg-glyph--green { color: #138a2b; }
.bg-glyph--red { color: #e3242b; }
.bg-glyph--purple { color: #7d5ce6; }
.bg-glyph--blue { color: #1d74e8; }
.bg-glyph--orange { color: #f57c0c; }

/* ---------- TOC + Why + Key features ---------- */
.bg-top-wrap { padding-block: .65rem 1.4rem; }
@media (min-width: 1000px) { .bg-top.layout-sidebar--left { grid-template-columns: 288px minmax(0, 1fr); gap: 1.25rem; } }
.bg-toc { padding: .7rem .5rem .55rem; border-radius: var(--radius); }
.bg-toc__title { display: flex; align-items: center; gap: .55rem; font-size: 1.25rem; margin: 0 0 .45rem .5rem; }
.bg-toc__title .icon { color: #138a2b; width: 26px; height: 26px; }
.bg-toc ol { list-style: none; margin: 0; padding: .15rem .4rem; display: grid; background: rgba(255, 255, 255, .65); border: 1px solid var(--mint-100); border-radius: var(--radius-sm); }
.bg-toc li + li { border-top: 1px solid var(--mint-100); }
.bg-toc a { display: flex; align-items: center; gap: .55rem; padding: .42rem .25rem; font-size: .875rem; line-height: 1.3; color: var(--bg-navy-text); text-decoration: none; }
.bg-toc a:hover { color: var(--green-700); background: #fff; }
.bg-toc a .icon { margin-left: auto; color: var(--bg-navy); }
.bg-toc__n { font-weight: 700; color: var(--bg-navy); min-width: 1rem; font-size: .95rem; }
@media (max-width: 999px) { .bg-toc.sticky { position: static; } }

.bg-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; min-width: 0; }
.bg-why { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 900px) { .bg-why { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.bg-why p { font-size: .95rem; line-height: 1.35; color: var(--bg-navy-text); margin-bottom: .8rem; }
.bg-why__tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 520px) { .bg-why__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bg-why__tiles .tile { padding: .8rem .35rem .7rem; gap: .35rem; border-radius: var(--radius-sm); }
.bg-why__tiles .bg-glyph { width: 34px; height: 34px; }
.bg-why__tiles .tile__text { color: var(--bg-navy-text); font-size: .875rem; line-height: 1.25; }
.bg-why__media { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); min-height: 220px; }
.bg-why__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.bg-why__script { position: absolute; right: .75rem; top: .9rem; font-size: 1.5rem; color: var(--bg-navy); background: rgba(255, 255, 255, .85); padding: .45rem .75rem; border-radius: var(--radius-sm); margin: 0; line-height: 1.2; transform: rotate(-5deg); }
.bg-why__script .icon { color: #138a2b; width: .8em; height: .8em; }

.bg-feat-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem .55rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
@media (min-width: 1100px) { .bg-feat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bg-feat { display: flex; gap: .55rem; align-items: flex-start; padding: .65rem .4rem .65rem .6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); }
.bg-feat h3 { font-size: .875rem; margin: 0 0 .15rem; line-height: 1.25; }
.bg-feat p { font-size: .8rem; color: var(--bg-navy-text); margin: 0; line-height: 1.35; }

/* ---------- Types + choose ---------- */
.bg-band { padding-block: 0 1rem; }
.bg-split { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1000px) { .bg-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .8rem; } }
.bg-types { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
@media (min-width: 1000px) { .bg-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bg-type { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: .55rem .4rem .5rem; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.bg-type img { width: 112px; height: 112px; object-fit: contain; mix-blend-mode: multiply; }
.bg-type h3 { font-size: .875rem; margin: .2rem 0 0; line-height: 1.25; }
.bg-type p { font-size: .8rem; color: var(--bg-navy-text); margin: 0 0 .4rem; line-height: 1.35; }
.bg-type__price { margin-top: auto; width: 100%; padding: .4rem .25rem; border-radius: var(--radius-xs); background: #def0d8; font-family: var(--font-head); font-weight: 700; color: #136d1a; font-size: .95rem; }
.bg-type--blue { background: linear-gradient(180deg, #f2f7fd, #eaf2fb); border-color: #dbe7f6; }
.bg-type--green { background: linear-gradient(180deg, #f3f9f1, #ebf5e8); border-color: #d9ebd3; }
.bg-type--gold { background: linear-gradient(180deg, #fffbef, #fcf5e2); border-color: #f2e7c6; }
.bg-type--pink { background: linear-gradient(180deg, #fff6f7, #fcedef); border-color: #f4d9dd; }
.bg-choose { padding: .9rem .75rem .75rem; border-radius: var(--radius-sm); }
.bg-choose .bg-h2 { font-size: 1.06rem; letter-spacing: -.015em; margin-bottom: .45rem; }
.bg-steps { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .45rem; }
.bg-steps li { display: flex; gap: .7rem; align-items: flex-start; background: rgba(255, 255, 255, .55); border-radius: var(--radius-xs); }
.bg-steps__n { flex: none; width: 24px; height: 24px; margin-top: .15rem; border-radius: 50%; display: grid; place-items: center; background: #5bae59; color: #fff; font-weight: 700; font-size: .8rem; }
.bg-steps h3 { font-size: .9rem; margin: 0; line-height: 1.3; }
.bg-steps p { font-size: .78rem; color: var(--bg-navy-text); margin: 0; line-height: 1.35; }
.bg-choose__cta { --btn-bg: var(--bg-cta); --btn-bd: var(--bg-cta); border-radius: var(--radius-xs); white-space: normal; padding-block: .7rem; font-size: 1rem; }

/* ---------- Top picks ---------- */
.bg-picks__head { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem 2rem; flex-wrap: wrap; margin-bottom: .55rem; }
.bg-picks__head .bg-h2 { margin: 0; }
.bg-picks__head .bg-glyph { width: 32px; height: 32px; }
.bg-picks__lead { margin: 0 0 0 2.6rem; color: var(--bg-navy-text); font-size: .95rem; line-height: 1.3; }
.bg-picks__note { display: block; font-size: .72rem; line-height: 1.4; color: var(--muted); }
.bg-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--bg-blue); font-weight: 600; font-size: .9rem; text-decoration: none; margin-bottom: 1.1rem; }
.bg-link .icon { width: 1em; height: 1em; }
.bg-link:hover { color: var(--teal-800); text-decoration: underline; }
.bg-picks { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
@media (min-width: 1100px) { .bg-picks { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.bg-pick { display: grid; align-content: start; gap: .1rem; padding: .45rem .6rem .6rem; border-radius: var(--radius-sm); }
.bg-pick__tag { justify-self: start; padding: .2rem .6rem; border-radius: 4px; color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.3; position: relative; z-index: 1; }
.bg-pick__tag--green { background: #13881f; }
.bg-pick__tag--blue { background: #1673f0; }
.bg-pick__tag--purple { background: #6a4df0; }
.bg-pick__tag--orange { background: #f06a08; }
.bg-pick__tag--red { background: #e01b2a; }
.bg-pick__img { width: 112px; height: 96px; object-fit: contain; mix-blend-mode: multiply; justify-self: center; margin: -1.15rem 0 .1rem 2.4rem; }
.bg-pick__name { font-size: .95rem; margin: 0; line-height: 1.2; }
.bg-pick .rating { font-size: .72rem; gap: .25rem; line-height: 1.3; margin: 0; flex-wrap: nowrap; color: var(--bg-navy-text); }
.bg-pick .stars .icon { width: 12px; height: 12px; }
.bg-pick__price { margin: 0; line-height: 1.25; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--bg-navy); }
.bg-pick__btn { justify-self: start; --btn-bg: var(--bg-cta); --btn-bd: var(--bg-cta); border-radius: var(--radius-xs); padding: .3rem 1.4rem; min-height: 0; font-size: .8rem; margin-top: .25rem; }

/* ---------- Mistakes + FAQ ---------- */
.bg-mf { padding-block: 0; }
.bg-mf__grid { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 1000px) {
  .bg-mf__grid { grid-template-columns: 400fr 345fr 455fr; gap: 0; padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
}
.bg-mf__img { align-self: stretch; min-height: 210px; position: relative; }
.bg-mf__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.bg-mistakes, .bg-faq { padding-inline: var(--gutter); }
@media (min-width: 1000px) {
  .bg-mistakes { padding: 0 1.25rem 0 0; border-right: 1px solid var(--line); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .bg-faq { padding: 0 0 0 1.25rem; }
}
.bg-mistakes .bg-h2, .bg-faq .bg-h2 { font-size: 1.2rem; margin-bottom: .5rem; white-space: nowrap; }
.bg-faq .bg-h2 { font-size: 1.3rem; }
.bg-mistakes .x-list { gap: .45rem; padding-left: 2.2rem; }
.bg-mistakes .x-list li { font-size: .95rem; line-height: 1.3; color: var(--bg-navy-text); align-items: center; }
.bg-mistakes .x-list .icon { width: 18px; height: 18px; margin: 0; background: #e3242b; color: #fff; border-radius: 50%; padding: 3.5px; }
.bg-alert { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e3242b; color: #fff; flex: none; }
.bg-alert .icon { width: 18px; height: 18px; }
.bg-qmark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-navy); color: #fff; font-weight: 700; font-size: 1.05rem; flex: none; }
.bg-faq .accordion { gap: .3rem; }
.bg-faq details { border-radius: var(--radius-xs); }
.bg-faq summary { font-size: .88rem; font-weight: 500; line-height: 1.3; padding: .28rem .8rem .28rem 1rem; color: var(--bg-navy); }
.bg-faq summary::after { color: var(--bg-navy); font-weight: 600; font-size: 1.15rem; }
.bg-faq .accordion__body { font-size: .86rem; padding: .6rem 1rem .75rem; }

/* ---------- Final thoughts (compact line) ---------- */
.bg-final { padding-block: .9rem .8rem; }
.bg-final__inner { display: flex; gap: .4rem 1rem; align-items: baseline; flex-wrap: wrap; }
.bg-final h2 { display: inline-flex; align-items: center; gap: .4rem; font-size: 1rem; margin: 0; white-space: nowrap; }
.bg-final h2 .icon { width: 20px; height: 20px; color: #138a2b; }
.bg-final p { flex: 1 1 520px; margin: 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }

/* ---------- Deals band ---------- */
.bg-deals { position: relative; overflow: hidden; background: linear-gradient(100deg, #e9f4e5, #f5faf3 50%, #e9f4e5); padding-block: .4rem; }
.bg-deals .leaf-deco--left { left: 0; }
.bg-deals .leaf-deco--right { right: 0; }
.bg-deals__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; position: relative; }
.bg-deals__icon { color: #138a2b; }
.bg-deals__icon .icon { width: 48px; height: 48px; }
.bg-deals h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); margin: 0 0 .1rem; }
.bg-deals p { margin: 0; color: var(--bg-navy-text); font-size: .95rem; }
.bg-deals__btn { --btn-bg: var(--bg-cta); --btn-bd: var(--bg-cta); border-radius: var(--radius-xs); min-width: 14rem; min-height: 44px; padding: .55rem 1.5rem; justify-content: center; margin-left: 1rem; }

/* Placeholder values: wrap between words, never mid-token */
#main .rating .ph { overflow-wrap: normal; word-break: normal; white-space: nowrap; }

/* ---------- Small screens ---------- */
@media (max-width: 999px) {
  .bg-mf__img { min-height: 200px; }
  .bg-mistakes .x-list { padding-left: 0; }
  .bg-picks__lead { margin-left: 0; }
  .bg-link { margin-bottom: 0; }
  .bg-deals__btn { margin-left: 0; }
}
@media (max-width: 480px) {
  .bg-pick .rating { flex-wrap: wrap; }
  .bg-hero__points { gap: .6rem 1rem; }
}

/* FAQ head with "View All FAQs" link (design) */
.bg-faq__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.bg-faq__head .bg-h2 { margin: 0; }
.bg-faq__head .bg-link { margin: 0; font-size: .85rem; }
.bg-why__media img { object-position: 50% 50%; }
.bg-faq .bg-faq__head .bg-h2 { font-size: 1.2rem; white-space: nowrap; }
@media (min-width: 1000px) { .bg-faq__head { flex-wrap: nowrap; } }
@media (max-width: 599px) {
  .bg-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .bg-pick__img { margin-left: 1.2rem; }
  .bg-pick__btn { padding-inline: .9rem; }
}
/* Hero leaves (design frames the photo with leaves) */
.bg-hero__leaf { z-index: 1; width: 150px; opacity: .95; }
.bg-hero__leaf--a { left: auto; right: 0; bottom: 0; top: auto; transform: scaleX(-1); }
.bg-hero__leaf--b { left: 54%; top: 0; bottom: auto; width: 130px; transform: rotate(160deg); }
@media (max-width: 899px) { .bg-hero__leaf { display: none; } }