/*
 * Hub mode (products with heroBullets, e.g. ProDentim): competitor-style hub page.
 * Loaded by CatalogLayout only for those products, so every other page is unaffected.
 * Palette = site tokens: ink #1C1F26, ink-2 #4B5160, ink-3 #7A8090, line #E3E6EC, cobalt #1E40FF.
 * Design rules: hairlines and bands, no cards, mono labels, square corners.
 */

html { scroll-padding-top: 8.5rem; }

/* Long words and URLs must never widen the page on phones */
.hub-mode { overflow-wrap: break-word; }
.hub-mode img { max-width: 100%; }

/* ---- offer bar + sticky product bar ---- */
.hub-offerbar {
  margin: 0;
  background: #1C1F26;
  color: #fff;
  padding: 0.55rem 1rem;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}
.hub-bar {
  position: sticky;
  top: 4rem;
  z-index: 40;
  background: rgba(248, 249, 251, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #E3E6EC;
}
.hub-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
@media (min-width: 640px) { .hub-bar-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .hub-bar-inner { padding-left: 2rem; padding-right: 2rem; } }
.hub-bar-name { font-weight: 800; letter-spacing: -0.02em; color: #1C1F26; white-space: nowrap; }
.hub-bar-links { display: none; list-style: none; margin: 0; padding: 0; gap: 1.25rem; flex: 1; }
@media (min-width: 768px) { .hub-bar-links { display: flex; } }
.hub-bar-links a {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7A8090;
  text-decoration: none;
}
.hub-bar-links a:hover { color: #1E40FF; }
.hub-bar-cta { margin-left: auto; padding: 0.45rem 0.9rem !important; font-size: 0.8rem; white-space: nowrap; }
@media (min-width: 768px) { .hub-bar-cta { margin-left: 0; } }

/* ---- hero ---- */
.hub-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.hub-checks li {
  position: relative;
  padding-left: 1.6rem;
  font-weight: 600;
  line-height: 1.45;
  color: #1C1F26;
}
.hub-checks li::before {
  content: '';
  position: absolute;
  left: 0.35rem;
  top: 0.3em;
  width: 0.42rem;
  height: 0.78rem;
  border: solid #1E40FF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.hub-cta-main { padding: 0.8rem 1.3rem !important; max-width: 100%; text-align: center; white-space: normal; line-height: 1.3; }
.hub-hero-img {
  border: 1px solid #E3E6EC;
  background: #fff;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.hub-hero-img img { max-height: 100%; width: auto; object-fit: contain; }

/* ---- seals (as shown by the seller) + byline ---- */
.hub-seals { border-top: 1px solid #E3E6EC; border-bottom: 1px solid #E3E6EC; padding: 0.9rem 0; }
.hub-seals ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
.hub-seals li {
  position: relative;
  padding-left: 0.95rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4B5160;
}
.hub-seals li::before { content: ''; position: absolute; left: 0; top: 0.35em; width: 0.45rem; height: 0.45rem; background: #1E40FF; }
.hub-seals p { margin: 0.55rem 0 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.66rem; color: #7A8090; }
.hub-byline { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin: 1.1rem 0 0; }
.hub-byline dd { margin: 0.2rem 0 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; color: #4B5160; }

/* ---- page flow: prose column on the left edge of the site grid, wide blocks full width, bands bleed ---- */
.hub-flow {
  --hub-pad: 1rem;
  --hub-gutter: calc(max(0px, (100% - 1200px) / 2) + var(--hub-pad));
  margin-top: 2.5rem;
}
@media (min-width: 640px) { .hub-flow { --hub-pad: 1.5rem; } }
@media (min-width: 1024px) { .hub-flow { --hub-pad: 2rem; } }
.hub-flow > * { margin-left: var(--hub-gutter); margin-right: var(--hub-gutter); }
.hub-flow > :not(.hub-wide):not(.hub-bleed) { max-width: 700px; }
.hub-flow > .hub-wide { margin-top: 3rem; margin-bottom: 3rem; }
.hub-flow > .hub-bleed { margin-left: 0; margin-right: 0; padding-left: var(--hub-gutter); padding-right: var(--hub-gutter); margin-top: 3.5rem; margin-bottom: 3.5rem; }
.hub-flow > h2 { border-top: 2px solid #1C1F26; padding-top: 0.9rem; }

/* A bare <img> in hub MDX is a direct child of .hub-flow, which already carries side margins: keep it fluid inside them */
.hub-flow > img:not(.hub-wide):not(.hub-bleed) { display: block; height: auto; max-width: calc(100% - 2 * var(--hub-gutter)); margin-left: auto; margin-right: auto; }

/* Tables never widen the page on phones: they scroll inside themselves */
@media (max-width: 767px) {
  .hub-mode table { display: block; width: auto; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* the 700px cap rule above outranks max-width: 100%, and the side margins add to a 100% width: size the table to the space between the margins */
  .hub-flow > table:not(.hub-wide):not(.hub-bleed) { width: auto; max-width: calc(100% - 2 * var(--hub-gutter)); }
}

/* ---- package pricing (hub variant of BundlePricing) ---- */
.hub-pack-badge { min-height: 1.1rem; margin: 0; }
.hub-pack-img { height: 9rem; }
.hub-pack-btn { text-align: center; white-space: normal; line-height: 1.3; padding-left: 0.75rem; padding-right: 0.75rem; }
.hub-pack-best { background: #F1F4FF; box-shadow: inset 0 3px 0 #1E40FF; }

/* ---- bonuses band (graphite) ---- */
.hub-bonuses { background: #1C1F26; color: #fff; padding-top: 3rem; padding-bottom: 3rem; }
.hub-kicker {
  display: block;
  margin: 0 0 0.6rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9DB0FF;
}
.hub-bonuses h2 { margin: 0; font-size: 1.75rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; color: #fff; max-width: 40rem; }
.hub-bonuses-lede { margin: 0.9rem 0 0; max-width: 40rem; color: #D5D9E2; line-height: 1.6; }
.hub-bonuses-grid { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
@media (min-width: 768px) { .hub-bonuses-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) {
  .hub-bonuses-grid.hub-bonuses-2 { grid-template-columns: repeat(2, 1fr); }
  .hub-bonuses-grid.hub-bonuses-1 { grid-template-columns: minmax(0, 28rem); }
}
.hub-bonuses-grid li { padding: 1.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
@media (min-width: 768px) {
  .hub-bonuses-grid li { padding: 1.5rem 1.5rem 1.5rem 1.5rem; border-bottom: 0; border-left: 1px solid rgba(255, 255, 255, 0.22); }
  .hub-bonuses-grid li:first-child { padding-left: 0; border-left: 0; }
}
.hub-bonuses-grid img { width: 100%; height: auto; margin: 0.4rem 0 1rem; border: 1px solid rgba(255, 255, 255, 0.25); background: #fff; }
.hub-bonuses-grid h3 { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.25; color: #fff; }
.hub-bonuses-grid p { margin: 0.6rem 0 0; font-size: 0.92rem; line-height: 1.55; color: #D5D9E2; }
.hub-bonuses-grid .hub-bonus-price { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.72rem; color: #A6ABB8; }
.hub-bonuses-grid s { color: #A6ABB8; }
.hub-bonuses-cta { margin: 2rem 0 0; }
.hub-bonuses .btn-primary { background: #fff; color: #1C1F26; }
.hub-bonuses .btn-primary:hover { background: #E3E6EC; color: #1C1F26; }
.hub-bonuses-note { margin: 1rem 0 0; max-width: 44rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.68rem; line-height: 1.55; color: #A6ABB8; }

/* ---- guarantee band ---- */
.hub-guarantee { display: grid; gap: 1.5rem; border-top: 2px solid #1E40FF; border-bottom: 1px solid #E3E6EC; padding: 1.75rem 0; }
@media (min-width: 768px) { .hub-guarantee { grid-template-columns: 11rem 1fr; gap: 2.5rem; align-items: start; } }
.hub-guarantee-num { display: flex; align-items: baseline; gap: 0.5rem; }
@media (min-width: 768px) { .hub-guarantee-num { flex-direction: column; gap: 0; border-right: 1px solid #E3E6EC; } }
.hub-guarantee-num b { font-size: 4.5rem; line-height: 0.95; font-weight: 800; letter-spacing: -0.04em; color: #1E40FF; }
.hub-guarantee-num span { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #4B5160; }
.hub-guarantee h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: #1C1F26; max-width: 36rem; }
.hub-guarantee-body { margin-top: 0.9rem; max-width: 40rem; color: #4B5160; line-height: 1.65; }
.hub-guarantee-body p { margin: 0 0 0.75rem; }
.hub-guarantee-body ul { margin: 0.5rem 0 0.75rem; padding-left: 1.1rem; list-style: disc; }
.hub-guarantee-body ol { margin: 0.5rem 0 0.75rem; padding-left: 1.4rem; list-style: decimal; }
.hub-guarantee-body li { margin: 0.3rem 0; padding-left: 0.2rem; }