/* SoundForgePro v121 "brass" homepage (v125: lighter, more compact headings and hero; v126: section intros under their headings; v127: task-link rule stops at the links). Loaded only on the home template.
   Tokens come from system-v121.css (--b-*). One accent family, system fonts. */

body.home-template {
  background: var(--b-paper);
  color: var(--b-ink);
  font: 16px/1.6 var(--b-read);
  -webkit-font-smoothing: antialiased;
}
.home-template .grain { display: none; }
.home-template .editorial-header a,
.home-template .editorial-footer a { text-decoration: none; }
.home-template .editorial-footer { margin-top: 0; }
.home-template #main-content { display: block; }

.bh-wrap { width: min(var(--sf-shell), calc(100% - 48px)); margin-inline: auto; }
.home-template :is(.bh-hero, .bh-dir, .bh-band, .bh-blk, .bh-deals) :is(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--b-ui);
  letter-spacing: -.025em;
  line-height: 1.06;
  text-wrap: balance;
}
.home-template :is(.bh-hero, .bh-dir, .bh-band, .bh-blk, .bh-deals) p { margin: 0; }
.home-template :is(.bh-hero, .bh-dir, .bh-band, .bh-blk, .bh-deals) a:focus-visible { outline: 3px solid var(--b-accent-ink); outline-offset: 3px; border-radius: 4px; }
.home-template :is(.bh-hero, .bh-deals) a:focus-visible { outline-color: var(--b-accent-lt); }

/* ---------- hero ---------- */
.bh-hero { position: relative; overflow: hidden; background: var(--b-night); color: var(--b-on-night); }
.bh-hero-media { position: absolute; inset: 0 0 0 38%; margin: 0; }
.bh-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bh-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--b-night) 0%, rgba(19,18,15,.78) 24%, rgba(19,18,15,.18) 62%, rgba(19,18,15,0) 100%);
}
.bh-hero-copy { position: relative; display: grid; gap: 18px; padding-block: 52px 30px; }
.bh-hero h1 { max-width: 21ch; font-size: clamp(30px, 3.5vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.bh-lede { max-width: 58ch; color: var(--b-on-night-2); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; }
.bh-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.home-template .bh-hero .sf-home-download > a.sf-download-btn {
  min-height: 46px;
  padding: 11px 20px;
  border-color: var(--b-btn) !important;
  font-size: 15.5px;
  line-height: 1.2;
}
.bh-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid #5c5547;
  border-radius: 10px;
  color: var(--b-on-night);
  font: 600 15px/1.2 var(--b-ui);
  text-decoration: none;
}
.bh-ghost:hover { border-color: var(--b-accent-lt); }
.bh-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; color: var(--b-on-night-2); font-size: 13.5px; }
.bh-facts li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--b-accent-lt); vertical-align: 1px; }
/* The rule above the task links ends with the links, so it never crosses the photo. */
.bh-routes { display: flex; flex-wrap: wrap; align-items: baseline; justify-self: start; gap: 8px 24px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--b-night-line); font-size: 14.5px; }
.bh-routes b { color: var(--b-on-night); font-weight: 650; }
.bh-routes a { color: var(--b-on-night-2); text-decoration: none; border-bottom: 1px solid #4a4439; }
.bh-routes a:hover { color: var(--b-on-night); border-color: var(--b-accent-lt); }
.bh-by { color: var(--b-on-night-2); font-size: 13.5px; }
.bh-by a { color: var(--b-on-night); text-decoration: underline; text-decoration-color: var(--b-accent-lt); text-underline-offset: 3px; }
.bh-by a:hover { color: #ffffff; }

/* ---------- section directory ---------- */
.bh-dir { padding-block: 46px 18px; }
.bh-dir h2, .bh-blk h2 { font-size: clamp(26px, 2.7vw, 36px); font-weight: 700; }
.bh-dir p { max-width: 60ch; margin-top: 10px !important; color: var(--b-ink-2); }

.bh-band { border-top: 1px solid var(--b-line); }
.bh-band.is-first { border-top: 2px solid var(--b-ink); }
.bh-band-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 240px; gap: 32px; align-items: start; padding-block: 28px; }
.bh-band h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; }
.bh-band h3 a { text-decoration: none; }
.bh-band h3 a:hover { color: var(--b-accent-ink); }
.bh-sub { max-width: 36ch; margin-top: 10px !important; color: var(--b-ink-2); font-size: 15.5px; }
.bh-all { display: inline-block; margin-top: 16px; padding-bottom: 2px; border-bottom: 2px solid currentColor; color: var(--b-accent-ink); font: 700 15px/1.3 var(--b-ui); text-decoration: none; }
.bh-all + .bh-all { margin-left: 18px; }
.bh-band ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; }
.bh-band li { break-inside: avoid; padding: 9px 0; border-top: 1px solid var(--b-line); }
.bh-band li a { color: var(--b-ink); font: 600 15.5px/1.35 var(--b-ui); text-decoration: none; }
.bh-band li a:hover { color: var(--b-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.bh-band li small { display: block; margin-top: 2px; color: var(--b-ink-3); font-size: 13px; line-height: 1.45; }
.bh-pic { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }

/* ---------- generic blocks ---------- */
.bh-blk { padding-block: 52px; }
/* Heading and its one-line intro read as one unit: intro sits directly under the heading. */
.bh-blk-head { display: grid; justify-items: start; gap: 8px; margin-bottom: 26px; }
.bh-blk-head p { max-width: 62ch; color: var(--b-ink-2); }

/* ---------- fix a problem ---------- */
.bh-fix { background: var(--b-paper-2); }
.bh-fixlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.bh-fixlist li { border-top: 1px solid var(--b-line); }
.bh-fixlist a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; min-height: 48px; padding: 13px 0; text-decoration: none; }
.bh-fixlist a:hover .bh-q { color: var(--b-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.bh-q { color: var(--b-ink); font: 600 16.5px/1.35 var(--b-ui); }
.bh-tag { flex: none; color: var(--b-ink-3); font: 600 13px/1 var(--b-ui); white-space: nowrap; letter-spacing: .01em; }
.bh-fix-more { margin-top: 22px !important; }

/* ---------- new on the site ---------- */
.bh-news { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; }
.bh-lead { display: grid; gap: 14px; align-content: start; color: var(--b-ink); text-decoration: none; }
.bh-lead img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.bh-lead h3 { font-size: clamp(22px, 2.1vw, 28px); font-weight: 700; }
.bh-lead p { color: var(--b-ink-2); font-size: 16.5px; }
.bh-lead:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.bh-kicker { color: var(--b-accent-ink); font: 700 12.5px/1.2 var(--b-ui); letter-spacing: .06em; text-transform: uppercase; }
.bh-stories { display: grid; align-content: start; margin: 0; padding: 0; list-style: none; }
.bh-stories li { border-top: 1px solid var(--b-line); }
.bh-stories li:last-child { border-bottom: 1px solid var(--b-line); }
.bh-stories a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; color: var(--b-ink); text-decoration: none; }
.bh-stories a.no-thumb { grid-template-columns: minmax(0, 1fr); }
.bh-stories img { width: 112px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; }
.bh-stories h4 { margin: 5px 0 0 !important; font: 700 16.5px/1.3 var(--b-ui); letter-spacing: -.01em; }
.bh-stories a:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
.bh-hubs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.bh-hubs li { border-top: 1px solid var(--b-line); }
.bh-hubs a { display: block; padding: 13px 0; color: var(--b-ink); font: 600 16.5px/1.35 var(--b-ui); text-decoration: none; }
.bh-hubs a:hover { color: var(--b-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.bh-hubs small { display: block; margin-top: 2px; color: var(--b-ink-3); font: 400 13.5px/1.45 var(--b-read); }

/* ---------- deals strip ---------- */
.bh-deals { background: var(--b-deep); color: var(--b-on-night); }
.bh-deals-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px 48px; align-items: start; padding-block: 44px; }
.bh-deals h2 { font-size: clamp(24px, 2.5vw, 32px); font-weight: 700; }
.bh-deals-in > div > p { margin-top: 12px !important; color: var(--b-on-night-2); }
.bh-deals dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 20px; margin: 0; }
.bh-deals dt { color: var(--b-accent-lt); font: 800 15px/1.5 var(--b-ui); }
.bh-deals dd { margin: 0; color: var(--b-on-night-2); font-size: 15.5px; }
.bh-deals a { color: var(--b-on-night); font-weight: 700; text-decoration: underline; text-decoration-color: var(--b-accent-lt); text-underline-offset: 3px; }
.bh-deals a:hover { color: #ffffff; }

/* ---------- method + faq ---------- */
.bh-method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px 56px; align-items: start; }
.bh-method p { max-width: 52ch; margin-top: 12px !important; color: var(--b-ink-2); }
.bh-method a, .bh-faq a { color: var(--b-accent-ink); text-decoration: underline; text-decoration-color: var(--b-accent); text-underline-offset: 3px; }
.bh-evidence { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 22px; margin: 0; border-top: 2px solid var(--b-ink); }
.bh-evidence dt, .bh-evidence dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--b-line); }
.bh-evidence dt { color: var(--b-ink); font: 700 14.5px/1.45 var(--b-ui); }
.bh-evidence dd { color: var(--b-ink-2); font-size: 15px; }
.bh-faq-blk { border-top: 1px solid var(--b-line); }
.bh-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; }
.bh-faq h3 { margin-bottom: 8px !important; font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.bh-faq p { color: var(--b-ink-2); font-size: 15.5px; line-height: 1.62; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .bh-band-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .bh-pic { display: none; }
}
@media (max-width: 900px) {
  .bh-wrap { width: calc(100% - 30px); }
  .bh-news { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .bh-deals-in, .bh-method, .bh-faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .bh-hero-media { position: relative; inset: auto; height: 220px; }
  .bh-hero-media::after { background: linear-gradient(0deg, var(--b-night) 0%, rgba(19,18,15,.35) 55%, rgba(19,18,15,0) 100%); }
  .bh-hero-copy { padding-block: 6px 28px; }
  .bh-fixlist, .bh-hubs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bh-band-in { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 28px; }
  .bh-band ul { columns: 1; }
  .bh-blk { padding-block: 40px; }
  .bh-evidence { grid-template-columns: minmax(0, 1fr); }
  .bh-evidence dt { padding-bottom: 0; border-bottom: 0; }
  .bh-evidence dd { padding-top: 2px; }
  .bh-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-template * { transition: none !important; }
}