.bass-hub {
  --color-accent: var(--tool-traps-accent, #9A3412);
  --color-accent-hover: #92400E;
  --color-accent-soft: #FFEDD5;
  --color-accent-subtle: #FED7AA;
  --color-accent-on-dark: #C2410C;
  --bass-section-spacing: clamp(var(--space-10), 6vw, var(--space-16));
  --bass-pressure-hot: #DC2626;
  --bass-pressure-warm: #D97706;
  --bass-stage-check: #2563EB;
  --bass-stage-types: #7C3AED;
  --bass-stage-placement: #059669;
  --bass-stage-amount: #D97706;
  --bass-stage-rooms: #0F766E;
  --bass-stage-buy: #A21CAF;
  --bass-stage-install: #475569;
}

.bass-hub :where(#chapter-1, #chapter-2, #chapter-3, #chapter-4, #chapter-5, #chapter-6, #chapter-7, #bass-myths, #library, #next-topics) {
  scroll-margin-top: var(--space-20);
}

.bass-hub .mission--hub .mission__backdrop {
  color: var(--color-accent-on-dark);
  opacity: 0.24;
}

.bass-hub .mission__statement em {
  color: var(--color-accent-on-dark);
}

.bass-hub .bass-hero-visual {
  display: block;
  width: 100%;
  height: 100%;
}

.bass-hub .bass-hero-visual__room,
.bass-hub .bass-hero-visual__floor {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
}

.bass-hub .bass-hero-visual__trap {
  fill: url(#bass-hero-trap-fill);
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  opacity: 0.92;
}

.bass-hub .bass-hero-visual__fabric {
  fill: url(#bass-hero-fabric);
  opacity: 0.72;
}

.bass-hub .bass-hero-visual__speaker {
  fill: currentColor;
  opacity: 0.28;
}

.bass-hub .bass-hero-visual__driver,
.bass-hub .bass-hero-visual__listener,
.bass-hub .bass-hero-visual__chair {
  fill: currentColor;
  opacity: 0.62;
}

.bass-hub .bass-hero-visual__wave {
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none;
  opacity: 0.34;
}

.bass-hub .bass-hero-visual__calm {
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
  opacity: 0.48;
}

.bass-hub .bass-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.bass-hub .bass-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.bass-hub .bass-hero-cta--primary {
  padding: var(--space-3) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-accent-on-dark) 58%, transparent);
  border-radius: var(--radius-pill);
  background: var(--color-accent-on-dark);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bass-hub .bass-hero-cta--secondary {
  color: color-mix(in srgb, var(--color-surface) 88%, transparent);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-style: italic;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent-on-dark) 42%, transparent);
}

.bass-hub .bass-hero-cta:hover,
.bass-hub .bass-hero-cta:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

.bass-hub .bass-hero-cta--primary:hover,
.bass-hub .bass-hero-cta--primary:focus-visible {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
}

.bass-hub .bass-hero-cta--secondary:hover,
.bass-hub .bass-hero-cta--secondary:focus-visible {
  color: var(--color-accent-on-dark);
  border-bottom-color: var(--color-accent-on-dark);
}

.bass-hub .bass-hero-cta__icon {
  flex: 0 0 auto;
}

.bass-hub .bass-journey-wrap {
  padding-block: 0;
}

.bass-hub .bass-journey {
  gap: 0;
}

.bass-hub .bass-journey__chapter,
.bass-hub .treatment-shell > #bass-myths,
.bass-hub .treatment-shell > #library,
.bass-hub .treatment-shell > #next-topics {
  min-width: 0;
  padding-block: var(--bass-section-spacing);
  border-top: 1px solid var(--color-line);
}

.bass-hub .bass-journey__chapter:first-child {
  border-top: 0;
}

.bass-hub .treatment-shell > #bass-myths > .container,
.bass-hub .treatment-shell > #library > .container,
.bass-hub .treatment-shell > #next-topics > .container {
  max-width: none;
  padding-inline: 0;
}

.bass-hub .chapter-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
}

.bass-hub .chapter-heading__num {
  grid-column: 1;
  grid-row: 1;
}

.bass-hub .chapter-heading__copy-link {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.bass-hub .chapter-heading__text {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}

.bass-hub .bass-check,
.bass-hub .bass-pressure-map,
.bass-hub .bass-test-flow {
  display: grid;
  gap: var(--space-8);
}

.bass-hub .bass-check__visual,
.bass-hub .bass-pressure-map__visual {
  min-width: 0;
  position: sticky;
  top: calc(var(--header-height, 80px) + var(--space-5));
}

.bass-hub .bass-check__svg,
.bass-hub .bass-pressure-map__svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-accent);
}

.bass-hub .bass-check__ceiling {
  fill: var(--color-bg);
  stroke: var(--color-line);
  stroke-width: 1;
}

.bass-hub .bass-check__side {
  fill: var(--color-surface-2);
  stroke: var(--color-line);
  stroke-width: 1;
}

.bass-hub .bass-check__front {
  fill: var(--color-surface);
  stroke: var(--color-line-strong);
  stroke-width: 1.5;
}

.bass-hub .bass-check__floor {
  fill: var(--color-line);
  stroke: var(--color-line);
  opacity: 0.5;
}

.bass-hub .bass-pressure-map__ceiling {
  fill: var(--color-bg);
  stroke: var(--color-line);
  stroke-width: 1;
}

.bass-hub .bass-pressure-map__side {
  fill: var(--color-surface-2);
  stroke: var(--color-line);
  stroke-width: 1;
}

.bass-hub .bass-pressure-map__front {
  fill: var(--color-surface);
  stroke: var(--color-line-strong);
  stroke-width: 1.5;
}

.bass-hub .bass-pressure-map__floor {
  fill: var(--color-line);
  stroke: var(--color-line);
  opacity: 0.5;
}

.bass-hub .bass-check__trap-shape {
  fill: color-mix(in srgb, var(--color-accent) 18%, transparent);
  stroke: var(--color-accent);
  stroke-width: 1.5;
  transition: fill var(--duration-fast) var(--ease-out),
              stroke-width var(--duration-fast) var(--ease-out);
}

.bass-hub .bass-pressure-map__zone--hot {
  fill: color-mix(in srgb, var(--bass-pressure-hot) 16%, transparent);
  stroke: color-mix(in srgb, var(--bass-pressure-hot) 62%, transparent);
  stroke-width: 1.5;
}

.bass-hub .bass-pressure-map__wave {
  fill: none;
  stroke: var(--color-ink-subtle);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}

.bass-hub .bass-pressure-map__speaker {
  fill: var(--color-ink);
}

.bass-hub .bass-pressure-map__tv {
  fill: var(--color-ink);
  opacity: 0.9;
}

.bass-hub .bass-pressure-map__console {
  fill: var(--color-ink-subtle);
  opacity: 0.5;
}

.bass-hub .bass-check__pov {
  opacity: 0.88;
}

.bass-hub .bass-check__sofa {
  fill: var(--color-line);
  stroke: var(--color-line-strong);
  stroke-width: 1;
}

.bass-hub .bass-check__sofa-seam {
  stroke: var(--color-line-strong);
  stroke-width: 0.8;
  opacity: 0.5;
}

.bass-hub .bass-check__person-body {
  fill: var(--color-ink-subtle);
  opacity: 0.6;
}

.bass-hub .bass-check__person-head {
  fill: var(--color-ink-subtle);
  opacity: 0.7;
}

.bass-hub .bass-check__zone {
  cursor: pointer;
  outline: none;
}

.bass-hub .bass-check__marker-core {
  fill: var(--color-accent);
  transition: fill var(--duration-fast) var(--ease-out);
}

.bass-hub .bass-check__marker-num {
  fill: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

.bass-hub .bass-check__zone:hover .bass-check__trap-shape,
.bass-hub .bass-check__zone:focus-visible .bass-check__trap-shape {
  fill: var(--color-accent);
  stroke-width: 2.5;
}

.bass-hub .bass-check__zone:hover .bass-check__marker-core,
.bass-hub .bass-check__zone:focus-visible .bass-check__marker-core {
  fill: var(--color-accent-hover);
}

.bass-hub .bass-check__console {
  fill: var(--color-line);
  stroke: var(--color-line-strong);
  stroke-width: 1;
}

.bass-hub .bass-check__tv {
  fill: var(--color-ink);
  stroke: var(--color-ink);
  stroke-width: 1;
}

.bass-hub .bass-check__tv-screen {
  fill: var(--color-surface-2);
  stroke: none;
}

.bass-hub .bass-check__soundbar {
  fill: var(--color-ink-subtle);
  stroke: var(--color-ink);
  stroke-width: 0.8;
}

.bass-hub .bass-check__speaker {
  fill: var(--color-ink-subtle);
  stroke: var(--color-ink);
  stroke-width: 1.2;
}

.bass-hub .bass-check__driver {
  fill: var(--color-surface);
  stroke: var(--color-ink);
  stroke-width: 0.8;
}

.bass-hub .bass-check__wavefront {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  animation: bass-check-pulse 2.4s ease-out infinite;
  animation-delay: var(--wd, 0s);
}

@keyframes bass-check-pulse {
  0% { opacity: 0; }
  12% { opacity: 0.8; }
  50% { opacity: 0.25; }
  100% { opacity: 0; }
}

.bass-hub .bass-check__ray {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.4;
  stroke-dasharray: 6 4;
  opacity: 0.65;
}

.bass-hub .bass-check__ray--direct {
  stroke-dasharray: none;
  stroke-width: 1.8;
  opacity: 0.85;
}

.bass-hub .bass-check__buildup-zones circle {
  opacity: 0.9;
}

.bass-hub .bass-check__ripple {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  opacity: 0;
  animation: bass-check-ripple 2.8s ease-out infinite;
}

.bass-hub .bass-check__ripple-set { --d: 0s; }

.bass-hub .bass-check__ripple:nth-child(1) { animation-delay: var(--d); }
.bass-hub .bass-check__ripple:nth-child(2) { animation-delay: calc(var(--d) + 0.15s); }
.bass-hub .bass-check__ripple:nth-child(3) { animation-delay: calc(var(--d) + 0.3s); }

@keyframes bass-check-ripple {
  0% { opacity: 0; }
  10% { opacity: 0.55; }
  40% { opacity: 0.15; }
  70%, 100% { opacity: 0; }
}

.bass-hub .bass-pressure-map__trap {
  fill: color-mix(in srgb, var(--color-accent) 34%, transparent);
  stroke: var(--color-accent-hover);
  stroke-width: 1.4;
}

.bass-hub .bass-pressure-map__pov {
  opacity: 0.88;
}

.bass-hub .bass-pressure-map__sofa {
  fill: var(--color-line);
  stroke: var(--color-line-strong);
  stroke-width: 1;
}

.bass-hub .bass-pressure-map__sofa-seam {
  stroke: var(--color-line-strong);
  stroke-width: 0.8;
  opacity: 0.5;
}

.bass-hub .bass-check__choices,
.bass-hub .bass-pressure-map__reads,
.bass-hub .bass-test-flow__reads,
.bass-hub .bass-room-rows {
  display: grid;
  gap: 0;
}

.bass-hub .bass-check-card,
.bass-hub .bass-read-row,
.bass-hub .bass-room-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--color-line);
  transition: color var(--duration-fast) var(--ease-out),
              padding-left var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.bass-hub .bass-check-card:first-child,
.bass-hub .bass-read-row:first-child,
.bass-hub .bass-room-row:first-child {
  border-top: 2px solid var(--color-ink);
}

.bass-hub .bass-check-card:hover,
.bass-hub .bass-check-card:focus-visible,
.bass-hub .bass-read-row:hover,
.bass-hub .bass-read-row:focus-visible,
.bass-hub .bass-room-row:hover,
.bass-hub .bass-room-row:focus-visible {
  outline: none;
  padding-left: var(--space-3);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.bass-hub .bass-check-card__label,
.bass-hub .bass-read-row__num,
.bass-hub .bass-buy-lane__label,
.bass-hub .trap-type__kicker,
.bass-hub .trap-checklist__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.bass-hub .bass-check-card__title,
.bass-hub .bass-room-row__room,
.bass-hub .bass-read-row__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}

.bass-hub .bass-check-card__body,
.bass-hub .bass-room-row__body,
.bass-hub .bass-read-row__desc {
  margin: 0;
  color: var(--color-ink-muted);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.bass-hub .bass-check-card__cta,
.bass-hub .bass-room-row__cta {
  color: var(--color-accent-hover);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.bass-hub .trap-type-visual,
.bass-hub .bass-buy-lanes {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--color-ink);
}

.bass-hub .trap-type,
.bass-hub .bass-buy-lane {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              padding-inline var(--duration-fast) var(--ease-out);
}

.bass-hub .trap-type:hover,
.bass-hub .trap-type:focus-visible,
.bass-hub .bass-buy-lane:hover,
.bass-hub .bass-buy-lane:focus-visible {
  outline: none;
  color: var(--color-accent-hover);
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  padding-inline: var(--space-3);
}

.bass-hub .trap-type__diagram {
  display: block;
  box-sizing: border-box;
  width: min(100%, 8rem);
  aspect-ratio: 1 / 1;
  height: auto;
  color: var(--color-accent-hover);
  overflow: hidden;
}

.bass-hub .trap-type__diagram svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bass-hub .trap-type__diagram svg rect,
.bass-hub .trap-type__diagram svg path,
.bass-hub .trap-type__diagram svg line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: trap-diagram-draw 2s ease-out forwards,
             trap-diagram-breathe 3.5s ease-in-out 2s infinite;
}

.bass-hub .trap-type__diagram svg rect:nth-child(2),
.bass-hub .trap-type__diagram svg path:nth-child(2),
.bass-hub .trap-type__diagram svg line:nth-child(1) {
  animation-delay: 0.3s, 2.3s;
}

.bass-hub .trap-type__diagram svg path:nth-child(3),
.bass-hub .trap-type__diagram svg line:nth-child(2) {
  animation-delay: 0.6s, 2.6s;
}

.bass-hub .trap-type__diagram svg line:nth-child(3) {
  animation-delay: 0.9s, 2.9s;
}

@keyframes trap-diagram-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes trap-diagram-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.bass-hub .trap-type__title,
.bass-hub .bass-buy-lane h3,
.bass-hub .trap-checklist__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}

.bass-hub .trap-type__body,
.bass-hub .bass-buy-lane p,
.bass-hub .trap-checklist__intro {
  margin: 0;
  color: var(--color-ink-muted);
  font-family: var(--font-serif);
  line-height: var(--lh-relaxed);
}

.bass-hub .trap-checklist {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent-soft) 18%, var(--color-surface));
}

.bass-hub .trap-checklist__items {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: var(--space-5) 0 0;
  list-style: none;
}

.bass-hub .trap-checklist__items li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--color-ink);
  line-height: var(--lh-normal);
}

.bass-hub .trap-checklist__items li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
}

.bass-hub .coverage-plan {
  border-top: 2px solid var(--color-ink);
}

.bass-hub .coverage-ladder {
  position: relative;
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: coverage-step;
}

.bass-hub .coverage-ladder::before {
  content: "";
  position: absolute;
  top: calc(var(--space-6) + 2.35rem / 2);
  bottom: calc(var(--space-6) + 2.35rem / 2);
  left: calc(2.35rem / 2);
  width: 1px;
  background: color-mix(in srgb, var(--color-accent) 38%, transparent);
}

.bass-hub .coverage-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-6) 0;
}

.bass-hub .coverage-step__num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 48%, var(--color-line));
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent-hover);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}


.bass-hub .coverage-step__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.bass-hub .coverage-step__body {
  margin: var(--space-2) 0 0;
  color: var(--color-ink-muted);
  font-family: var(--font-serif);
  line-height: var(--lh-relaxed);
}

.bass-hub .thickness-scale {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.bass-hub .thickness-scale__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.bass-hub .thickness-scale__title {
  margin: var(--space-2) 0 0;
  color: var(--color-ink);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* Four thickness comparison cards. On mobile, 4 columns crushes each card to
   ~70px — unreadable. With 4 items, only 1 / 2 / 4 columns avoid orphans. */
.bass-hub .thickness-scale__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
}

@media (min-width: 720px) {
  .bass-hub .thickness-scale__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bass-hub .thickness-scale__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.bass-hub .thickness-scale__visual {
  display: block;
  width: 100%;
  max-height: 7rem;
  color: var(--color-accent-hover);
}

.bass-hub .thickness-scale__visual svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bass-hub .thickness-scale__visual svg rect,
.bass-hub .thickness-scale__visual svg path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: trap-diagram-draw 1.8s ease-out forwards,
             trap-diagram-breathe 3.5s ease-in-out 1.8s infinite;
}

.bass-hub .thickness-scale__list dt {
  color: var(--color-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.bass-hub .thickness-scale__list dd {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

.bass-hub .bass-room-map {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg, 0.75rem);
}

.bass-hub .bass-room-map__svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-ink);
}

.bass-hub .bass-room-map__frame {
  position: relative;
  width: 100%;
}

.bass-hub .bass-room-map__hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bass-hub .bass-room-map__hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(0.75rem, 1.4vw, 1rem);
  height: clamp(0.75rem, 1.4vw, 1rem);
  color: var(--color-surface);
  text-decoration: none;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.bass-hub .bass-room-map__hotspot::before {
  content: "";
  position: absolute;
  inset: -0.9rem;
  border-radius: 999px;
}

.bass-hub .bass-room-map__hotspot-dot {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  border: 2px solid var(--color-surface);
  border-radius: 999px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 32%, transparent),
              0 0.35rem 0.9rem rgba(21, 35, 64, 0.18);
  animation: bass-hotspot-pulse 2.4s ease-in-out infinite;
}

@keyframes bass-hotspot-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 32%, transparent),
                0 0.35rem 0.9rem rgba(21, 35, 64, 0.18);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 16%, transparent),
                0 0.35rem 0.9rem rgba(21, 35, 64, 0.10);
  }
}

.bass-hub .bass-room-map__hotspot-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  display: inline-flex;
  width: max-content;
  max-width: 9rem;
  padding: 0.28rem 0.5rem;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-line));
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translate(-50%, 0.25rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.bass-hub .bass-room-map__hotspot:focus-visible .bass-room-map__hotspot-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

.bass-hub .bass-room-map__hotspot-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2.15rem);
  display: grid;
  gap: 0.35rem;
  width: min(16rem, 52vw);
  padding: var(--space-4);
  color: var(--color-ink);
  text-align: left;
  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-accent-soft));
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-line));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translate(-50%, 0.45rem);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  pointer-events: none;
}

.bass-hub .bass-room-map__hotspot-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0.75rem;
  height: 0.75rem;
  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-accent-soft));
  border-right: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-line));
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-line));
  transform: translate(-50%, -50%) rotate(45deg);
}

.bass-hub .bass-room-map__hotspot-kicker,
.bass-hub .bass-room-map__hotspot-cta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.bass-hub .bass-room-map__hotspot-title {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--color-ink);
}

.bass-hub .bass-room-map__hotspot-cta {
  margin-top: var(--space-1);
}

.bass-hub .bass-room-map__hotspot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 0.35rem;
  border-radius: 999px;
}

.bass-hub .bass-room-map__caption {
  max-width: 30rem;
  margin: var(--space-4) auto 0;
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: var(--lh-normal);
  text-align: center;
  color: var(--color-ink-muted);
}

.bass-hub .bass-room-rows {
  display: none;
}

.bass-hub .bass-room-row[id] {
  scroll-margin-top: calc(var(--site-header-h, 0px) + 4rem);
}

@media (min-width: 760px) {
  .bass-hub .bass-room-map__hotspot:hover,
  .bass-hub .bass-room-map__hotspot:focus-visible {
    z-index: 3;
  }

  .bass-hub .bass-room-map__hotspot:hover .bass-room-map__hotspot-dot {
    animation: none;
    transform: scale(1.25);
    transition: transform 160ms ease;
  }

  .bass-hub .bass-room-map__hotspot:hover .bass-room-map__hotspot-label {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .bass-hub .bass-room-map__hotspot:hover .bass-room-map__hotspot-card,
  .bass-hub .bass-room-map__hotspot:focus-visible .bass-room-map__hotspot-card {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (hover: none), (pointer: coarse) {
  .bass-hub .bass-room-map__hotspot {
    width: clamp(1rem, 2.4vw, 1.25rem);
    height: clamp(1rem, 2.4vw, 1.25rem);
  }

  .bass-hub .bass-room-map__hotspot-label {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .bass-hub .bass-room-rows {
    display: grid;
  }
}

@media (max-width: 759px) {
  .bass-hub .bass-room-map__hotspot-label {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .bass-hub .bass-room-map__hotspot-card {
    display: none;
  }

  .bass-hub .bass-room-rows {
    display: grid;
  }
}

.bass-hub .bass-room-row {
  grid-template-columns: minmax(9rem, 0.8fr) minmax(0, 1.5fr) auto;
  align-items: baseline;
  column-gap: var(--space-5);
}

.bass-hub .bass-buy-lane > span:last-child {
  margin-top: auto;
  color: var(--color-accent-hover);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.bass-hub .bass-buy-map {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}

.bass-hub .bass-buy-map__visual {
  color: var(--color-ink);
}

.bass-hub .bass-buy-map__diagram {
  display: block;
  width: min(100%, 23rem);
  height: auto;
  margin-inline: auto;
  color: var(--color-accent-hover);
}

.bass-hub .bass-buy-map__shell,
.bass-hub .bass-buy-map__branch,
.bass-hub .bass-buy-map__tile,
.bass-hub .bass-buy-map__tool {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bass-hub .bass-buy-map__shell {
  stroke-opacity: 0.4;
  stroke-width: 2;
}

.bass-hub .bass-buy-map__branch {
  stroke-opacity: 0.28;
  stroke-width: 1.4;
}

.bass-hub .bass-buy-map__trap {
  fill: var(--color-accent);
  fill-opacity: 0.14;
  stroke: var(--color-accent);
  stroke-opacity: 0.52;
}

.bass-hub .bass-buy-map__tile {
  fill: var(--color-surface);
  fill-opacity: 0.82;
  stroke-opacity: 0.34;
  stroke-width: 1.1;
}

.bass-hub .bass-buy-map__tool {
  fill: none;
  stroke-opacity: 0.5;
  stroke-width: 1.5;
}

.bass-hub .bass-buy-map__tile-line {
  stroke: currentColor;
  stroke-opacity: 0.18;
  stroke-width: 1.2;
  stroke-linecap: round;
}

.bass-hub .bass-buy-map__node-pulse {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.2;
  animation: buy-node-pulse 2.5s ease-in-out infinite;
}

.bass-hub .bass-buy-map__node {
  fill: var(--color-surface);
  stroke: var(--color-accent);
  stroke-opacity: 0.5;
  stroke-width: 1.4;
}

.bass-hub .bass-buy-map__node-core {
  fill: var(--color-accent);
}

@keyframes buy-node-pulse {
  0%, 100% { r: 17; stroke-opacity: 0; }
  50% { r: 26; stroke-opacity: 0.35; }
}

.bass-hub .bass-buy-map__note {
  display: grid;
  gap: var(--space-2);
}

.bass-hub .bass-buy-map__eyebrow {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bass-hub .bass-buy-map__note strong {
  color: var(--color-ink);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.bass-hub .bass-buy-map__note span:last-child {
  color: var(--color-ink-muted);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.bass-hub .bass-buy-map .bass-buy-lanes {
  gap: var(--space-3);
  border-top: 0;
}

.bass-hub .bass-buy-map .bass-buy-lane {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-line);
  transition: color var(--duration-fast) var(--ease-out);
}

.bass-hub .bass-buy-map .bass-buy-lane:hover,
.bass-hub .bass-buy-map .bass-buy-lane:focus-visible {
  color: var(--color-accent-hover);
}

.bass-hub .bass-buy-lane__icon {
  display: grid;
  grid-row: 1 / span 3;
  place-items: center;
  width: 3.4rem;
  aspect-ratio: 1;
  color: var(--color-accent-hover);
}

.bass-hub .bass-buy-lane__icon svg {
  display: block;
  width: 2.35rem;
  height: 2.35rem;
}

.bass-hub .bass-buy-lane__icon path,
.bass-hub .bass-buy-lane__icon rect,
.bass-hub .bass-buy-lane__icon circle,
.bass-hub .bass-buy-lane__icon line {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bass-hub .bass-buy-lane__content {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.bass-hub .bass-buy-map .bass-buy-lane h3 {
  font-size: clamp(var(--fs-lg), 2vw, var(--fs-xl));
}

.bass-hub .bass-buy-map .bass-buy-lane p {
  font-size: var(--fs-sm);
}

.bass-hub .bass-buy-lane__cta {
  grid-column: 2;
  align-self: end;
}

.bass-hub .bass-buy-lane--featured {
  border-bottom-width: 2px;
  border-bottom-color: var(--color-accent);
}

.bass-hub .bass-buy-lane--featured .bass-buy-lane__icon {
  color: var(--color-accent);
}

.bass-hub .bass-test-flow__section {
  display: grid;
  gap: var(--space-4);
}

.bass-hub .bass-test-flow__section--guides {
  align-self: start;
  padding-top: var(--space-1);
  color: var(--color-ink-muted);
}

.bass-hub .bass-test-flow__label {
  margin: 0;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bass-hub .bass-test-flow__section--guides .bass-test-flow__label {
  color: color-mix(in srgb, var(--color-accent) 72%, var(--color-ink-muted));
}

.bass-hub .bass-test-flow__steps {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

.bass-hub .bass-test-flow__steps::before {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  left: 1rem;
  width: 1px;
  background: color-mix(in srgb, var(--color-accent) 34%, transparent);
}

.bass-hub .bass-test-flow__steps li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: 0;
}

.bass-hub .bass-test-flow__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--color-accent);
  background: var(--color-bg);
  box-shadow: 0 0 0 0.45rem var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.bass-hub .bass-test-flow__step-body {
  display: grid;
  gap: var(--space-1);
}

.bass-hub .bass-test-flow__step-body strong {
  color: var(--color-ink);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.bass-hub .bass-test-flow__step-body p {
  margin: 0;
  color: var(--color-ink-muted);
  line-height: var(--lh-normal);
}

.bass-hub .bass-test-flow__decision {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-4);
  padding-left: var(--space-4);
  border-top: 1px solid var(--color-line);
  border-left: 2px solid var(--color-accent);
}

.bass-hub .bass-test-flow__decision-label,
.bass-hub .bass-test-flow__guide-kicker {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bass-hub .bass-test-flow__decision p {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-serif);
  line-height: var(--lh-relaxed);
}

.bass-hub .bass-test-flow__guide {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent);
  transition: color var(--duration-fast) var(--ease-out),
              padding-left var(--duration-fast) var(--ease-out);
}

.bass-hub .bass-test-flow__guide:first-child {
  border-top-color: var(--color-line);
}

.bass-hub .bass-test-flow__guide:hover,
.bass-hub .bass-test-flow__guide:focus-visible {
  color: var(--color-accent-hover);
  padding-left: var(--space-2);
}

.bass-hub .bass-test-flow__guide-title {
  color: var(--color-ink);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.bass-hub .bass-test-flow__guide-desc {
  color: var(--color-ink-muted);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.bass-hub .bass-read-row {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
}

.bass-hub .bass-myth-list {
  --myth-claim-color: #991B1B;
  display: grid;
  gap: 0;
}

.bass-hub .myth-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) auto minmax(0, 7fr);
  column-gap: var(--space-8);
  align-items: stretch;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-line);
}

.bass-hub .myth-row:first-child {
  border-top: 2px solid var(--color-ink);
}

.bass-hub .myth-row:last-child {
  border-bottom: 1px solid var(--color-line);
}

.bass-hub .myth-row__myth,
.bass-hub .myth-row__reality {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.bass-hub .myth-row__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bass-hub .myth-row__tag--myth {
  color: color-mix(in srgb, var(--myth-claim-color) 68%, var(--color-ink-muted));
}

.bass-hub .myth-row__tag--reality {
  color: var(--color-accent);
}

.bass-hub .myth-row__tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.bass-hub .myth-row__tag--myth .myth-row__tag-icon {
  color: currentColor;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--myth-claim-color) 38%, var(--color-line));
}

.bass-hub .myth-row__tag--reality .myth-row__tag-icon {
  background: var(--color-accent);
  color: var(--color-surface);
}

.bass-hub .myth-row__claim {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: var(--tracking-snug);
  text-decoration-line: line-through;
  text-decoration-color: color-mix(in srgb, var(--myth-claim-color) 30%, var(--color-line-strong));
  text-decoration-thickness: 1px;
}

.bass-hub .myth-row__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
}

.bass-hub .myth-row__truth {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.bass-hub .myth-row__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.bass-hub .myth-row__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.bass-hub .myth-row__link:hover,
.bass-hub .myth-row__link:focus-visible {
  outline: none;
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.bass-hub .myth-row__link::after {
  content: "→";
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: currentColor;
  margin-left: var(--space-1);
  transition: transform var(--duration-fast) var(--ease-out);
}

.bass-hub .myth-row__link:hover::after,
.bass-hub .myth-row__link:focus-visible::after {
  transform: translateX(2px);
}

.bass-hub .library__featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.bass-hub .library__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 188px;
  padding: var(--space-5);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.bass-hub .library__hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--color-accent);
  opacity: 0.7;
}

.bass-hub .library__hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.bass-hub .library__hero-title {
  color: var(--color-ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
}

.bass-hub .library__hero-desc {
  flex: 1;
  color: var(--color-ink-muted);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.bass-hub .library__hero-cta {
  margin-top: var(--space-2);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}

.bass-hub .library__hero:hover,
.bass-hub .library__hero:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--color-accent) 45%, transparent);
  transform: translateY(-2px);
}

.bass-hub .library__filter-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--stage-color, var(--color-accent));
}

.bass-hub [data-filter="all"] .library__filter-dot { background: var(--color-accent); }
.bass-hub [data-filter="check"] .library__filter-dot { background: var(--bass-stage-check); }
.bass-hub [data-filter="types"] .library__filter-dot { background: var(--bass-stage-types); }
.bass-hub [data-filter="placement"] .library__filter-dot { background: var(--bass-stage-placement); }
.bass-hub [data-filter="amount"] .library__filter-dot { background: var(--bass-stage-amount); }
.bass-hub [data-filter="rooms"] .library__filter-dot { background: var(--bass-stage-rooms); }
.bass-hub [data-filter="buy"] .library__filter-dot { background: var(--bass-stage-buy); }
.bass-hub [data-filter="install"] .library__filter-dot { background: var(--bass-stage-install); }

.bass-hub .library__item {
  --stage-color: var(--color-accent);
  border-top: 0;
  border-left: 3px solid var(--stage-color);
  padding-left: var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.bass-hub .library__item[data-stage="check"] { --stage-color: var(--bass-stage-check); }
.bass-hub .library__item[data-stage="types"] { --stage-color: var(--bass-stage-types); }
.bass-hub .library__item[data-stage="placement"] { --stage-color: var(--bass-stage-placement); }
.bass-hub .library__item[data-stage="amount"] { --stage-color: var(--bass-stage-amount); }
.bass-hub .library__item[data-stage="rooms"] { --stage-color: var(--bass-stage-rooms); }
.bass-hub .library__item[data-stage="buy"] { --stage-color: var(--bass-stage-buy); }
.bass-hub .library__item[data-stage="install"] { --stage-color: var(--bass-stage-install); }

.bass-hub .library__link {
  grid-template-rows: auto auto auto;
  padding: var(--space-4) var(--space-3);
}

.bass-hub .library__link:hover,
.bass-hub .library__link:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--stage-color) 7%, transparent);
  padding-left: var(--space-4);
}

.bass-hub .library__stage-tag {
  color: var(--stage-color);
}

.bass-hub .library__desc {
  display: block;
  grid-column: 1;
  grid-row: 3;
  margin-top: 2px;
  color: var(--color-ink-muted);
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.bass-hub #next-topics {
  border-bottom: 0;
}

.bass-hub .panel-library-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.75rem), 1fr));
  gap: clamp(var(--space-4), 2.5vw, var(--space-6));
  margin: 0 0 clamp(var(--space-8), 5vw, var(--space-10));
}

.bass-hub .panel-library-route {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  min-height: 11.5rem;
  padding: clamp(var(--space-5), 2.4vw, var(--space-6));
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  box-shadow: 0 14px 36px -30px color-mix(in srgb, var(--color-accent) 35%, transparent);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.bass-hub .panel-library-route__label {
  width: fit-content;
  padding: 3px 8px;
  color: var(--color-accent-hover);
  background: color-mix(in srgb, var(--color-accent-soft) 52%, var(--color-surface) 48%);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bass-hub .panel-library-route strong {
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}

.bass-hub .panel-library-route span:not(.panel-library-route__label) {
  color: var(--color-ink-muted);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-sm), 1.1vw, var(--fs-base));
  line-height: 1.5;
}

.bass-hub .panel-library-route:hover,
.bass-hub .panel-library-route:focus-visible {
  outline: none;
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-line) 66%);
  box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--color-accent) 32%, transparent);
  transform: translateY(-1px);
}

.bass-hub .adj-card[data-hub="acoustic"] { --hub-accent: #0891B2; }
.bass-hub .adj-card[data-hub="panels"] { --hub-accent: #0284C7; }
.bass-hub .adj-card[data-hub="foam"] { --hub-accent: #06B6D4; }
.bass-hub .adj-card[data-hub="diffusers"] { --hub-accent: #7C3AED; }
.bass-hub .adj-card[data-hub="soundproofing"] { --hub-accent: #475569; }

.bass-hub .adj-reads {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-8);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: var(--space-3);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.bass-hub .adj-reads .adj-card {
  flex: 0 0 min(22rem, 82vw);
  scroll-snap-align: start;
}

.bass-hub .adj-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--color-ink);
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg, 16px);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.bass-hub .adj-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--hub-accent, var(--color-accent));
}

.bass-hub .adj-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  padding: var(--space-5);
  color: var(--hub-accent, var(--color-accent));
  background: color-mix(in srgb, var(--hub-accent, var(--color-accent)) 5%, transparent);
}

.bass-hub .adj-card__svg {
  display: block;
  width: 100%;
  max-width: 10rem;
}

.bass-hub .adj-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.bass-hub .adj-card__role {
  color: var(--hub-accent, var(--color-accent));
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bass-hub .adj-card__name {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.bass-hub .adj-card__hook {
  flex: 1;
  margin: 0;
  color: var(--color-ink-muted);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.bass-hub .adj-card__cta {
  margin-top: var(--space-2);
  color: var(--hub-accent, var(--color-accent));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.bass-hub .adj-card:hover,
.bass-hub .adj-card:focus-visible {
  outline: none;
  border-color: var(--hub-accent, var(--color-accent));
  box-shadow: 0 16px 36px -24px color-mix(in srgb, var(--hub-accent, var(--color-accent)) 52%, transparent);
  transform: translateY(-2px);
}

@media (min-width: 560px) {
  .bass-hub .bass-buy-lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .bass-hub .bass-buy-lane:nth-child(2) {
    border-top: 0;
  }
}

@media (min-width: 1040px) {
  .bass-hub .bass-buy-map {
    grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr);
    gap: var(--space-6);
  }

  .bass-hub .bass-buy-map__visual {
    position: sticky;
    top: calc(var(--site-header-h, 0px) + var(--space-8));
    align-self: start;
  }

  .bass-hub .bass-buy-map .bass-buy-lanes {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 680px) {
  .bass-hub .trap-type-visual {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .bass-hub .trap-type {
    border-bottom: 0;
    border-left: 1px solid var(--color-line);
    padding-inline: var(--space-5);
  }

  .bass-hub .trap-type:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .bass-hub .trap-type:last-child {
    padding-right: 0;
  }
}

@media (min-width: 900px) {
  .bass-hub .bass-check {
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.9fr);
    align-items: start;
  }

  .bass-hub .bass-pressure-map {
    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.85fr);
    align-items: center;
  }

  .bass-hub .bass-test-flow {
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.72fr);
    column-gap: var(--space-10);
    align-items: start;
  }
}

@media (min-width: 1100px) {
  .bass-hub .treatment-shell > #bass-myths,
  .bass-hub .treatment-shell > #library,
  .bass-hub .treatment-shell > #next-topics {
    grid-column: 2 / -1;
  }
}

@media (max-width: 899px) and (min-width: 620px) {
  .bass-hub .library__featured {
    grid-template-columns: 1fr;
  }

  .bass-hub .library__hero {
    min-height: 0;
  }

  .bass-hub .myth-row {
    column-gap: var(--space-5);
    padding: var(--space-6) 0;
  }

  .bass-hub .myth-row__claim {
    font-size: var(--fs-lg);
  }
}

@media (max-width: 679px) {
  .bass-hub .mission--hub .mission__backdrop {
    opacity: 0.17;
  }

  .bass-hub .bass-hero-ctas {
    align-items: stretch;
  }

  .bass-hub .bass-hero-cta--primary {
    width: 100%;
  }

  .bass-hub .bass-room-row {
    grid-template-columns: 1fr;
  }

  .bass-hub .myth-row {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-6) 0;
  }

  .bass-hub .myth-row__divider {
    justify-content: flex-start;
    transform: rotate(90deg);
    transform-origin: left center;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: var(--space-1);
  }

  .bass-hub .library__featured {
    grid-template-columns: 1fr;
  }

  .bass-hub .library__hero {
    min-height: 0;
  }
}