/* Shared Hum styling for both products. No product-specific color assignments.
 * Keep the lighter layout; visible names and standard selected states provide context.
 */

/* Product entry cards: shared neutral framing and actual product screenshots. */
.hh-product-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:32px;
  background:var(--hh-white);
  color:var(--hh-navy);
  border:1px solid var(--hh-line);
}
.hh-product-top{
  align-self:flex-start;
  margin:0 0 24px;
  padding:14px 20px;
  background:var(--hh-navy);
  border-radius:4px;
}
.hh-product-card .hh-product-logo{width:200px;max-width:100%}
.hh-product-card h3{color:var(--hh-navy)}
.hh-product-card>p{color:var(--hh-ink);max-width:none;margin-bottom:24px}
.hh-product-card h3{margin-bottom:8px}
.hh-product-card .hh-button{
  align-self:flex-start;
  margin-top:auto;
  background:transparent;
  border:1px solid var(--hh-navy);
  color:var(--hh-navy)!important;
  font-size:.9375rem;
  min-height:44px;
  padding:9px 18px;
}
.hh-product-card .hh-button:hover{
  background:var(--hh-surface);
  border-color:var(--hh-blue-hover);
  color:var(--hh-blue-hover)!important;
}
.hh-product-card :focus-visible,.hh-hub-hero :focus-visible{outline-color:var(--hh-blue-hover)}

/* Product hubs: no full-bleed tint or boxed color banner. */
.hh-hub-hero{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;
  gap:40px;
  padding:8px 0 32px;
  border:0;
  border-bottom:1px solid var(--hh-line);
  border-radius:0;
  background:var(--hh-white);
  color:var(--hh-navy);
}
.hh-hub-hero h1{color:var(--hh-navy);margin-bottom:12px}
.hh-hub-hero p:last-child{color:var(--hh-ink)}
.hh-hub-logo{
  display:table;
  max-width:100%;
  padding:14px 20px;
  margin-bottom:24px;
  border-radius:4px;
  background:var(--hh-navy);
}
.hh-hub-hero .hh-product-logo{width:200px;max-width:100%;margin:0}

/* Keep the supplied UI intact: no cropping, recoloring, or simulated controls. */
.hh-product-preview{min-width:0;width:100%;margin:0 0 24px}
.hh-product-preview-image{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2.12 / 1;
  object-fit:contain;
  background:var(--hh-white);
  border:1px solid var(--hh-line);
  border-radius:8px;
}
.hh-hub-intro{min-width:0}
.hh-hub-hero .hh-product-preview{margin:0}

/* Identical navigation, labels, and selected states for both products. */
.hh-main-nav a[data-help-product]{padding-inline:4px}
.hh-main-nav a[data-help-product][aria-current]{background:transparent;color:var(--hh-navy)}
.hh-main-nav a[data-help-product][aria-current]::after{height:2px;background:var(--hh-navy);left:4px;right:4px}
.hh-badge{background:var(--hh-surface);color:var(--hh-navy);border:1px solid var(--hh-line)}
.hh-toc a[aria-current]{
  color:var(--hh-navy);background:transparent;
  text-decoration:underline;text-decoration-color:var(--hh-navy);
  text-decoration-thickness:2px;
}

/* Support is a shared utility, not a competing colored callout. */
.hh-support-banner{background:var(--hh-surface);border:1px solid var(--hh-line)}
.hh-support-banner .hh-button{font-size:.9375rem;border-width:1px}
@media(max-width:1100px){.hh-main-nav{gap:12px}}
@media(max-width:820px){
  .hh-product-card{padding:24px}
  .hh-hub-hero{grid-template-columns:1fr;gap:24px}
  .hh-hub-hero .hh-product-preview{max-width:680px;width:100%}
  .hh-main-nav{gap:12px 16px}
  .hh-main-nav a[data-help-product]{padding:8px 4px}
  .hh-main-nav a[data-help-product][aria-current]::after{bottom:2px}
}
@media(max-width:580px){
  .hh-product-card{padding:20px}
  .hh-main-nav{gap:8px}
  .hh-main-nav a{font-size:.8125rem}
}
@media print{.hh-badge{background:transparent;border-color:var(--hh-line)}}