/* Public product overviews: use the existing theme tokens and glass treatment. */
.mh-modules-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-block-start: clamp(1.5rem, 4vw, 2.75rem);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--mh-glass-edge, var(--mh-card-border));
  border-radius: 1.5rem;
  background: var(--mh-glass-fill, var(--mh-surface-soft));
  box-shadow: var(--mh-soft-shadow, 0 12px 36px rgba(0, 0, 0, .12));
  backdrop-filter: blur(var(--mh-glass-blur, 16px)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--mh-glass-blur, 16px)) saturate(1.25);
}
.mh-modules-preview > p { max-width: 54rem; margin: 0; }
.mh-modules-preview__link { flex: 0 0 auto; white-space: nowrap; }

.mh-module-page { position: relative; z-index: 1; padding-block: clamp(2rem, 5vw, 4.75rem); }
.mh-module-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; color: var(--mh-muted); font-size: .9rem; }
.mh-module-breadcrumb a, .mh-module-sources a, .mh-module-login { transition: color 160ms ease; }
.mh-module-breadcrumb a:hover, .mh-module-sources a:hover, .mh-module-login:hover { color: var(--mh-accent); }
.mh-module-article { display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); width: min(100%, 76rem); margin: clamp(1.5rem, 4vw, 3rem) auto 0; }

.mh-module-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 17rem);
  align-items: center;
  gap: clamp(1rem, 4vw, 3.5rem);
  min-height: 23rem;
  padding: clamp(1.5rem, 5vw, 4.25rem);
  overflow: hidden;
  border-radius: clamp(1.5rem, 4vw, 2.75rem);
  isolation: isolate;
}
.mh-module-hero::before {
  position: absolute; z-index: -1; inset: 0; content: "";
  background: radial-gradient(ellipse at 88% 12%, color-mix(in srgb, var(--mh-accent) 16%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--mh-card-highlight) 92%, transparent), color-mix(in srgb, var(--mh-surface) 88%, transparent));
}
.mh-module-hero__content { position: relative; max-width: 58rem; }
.mh-module-hero h1 { max-width: 16ch; margin-block-start: .5rem; font-size: clamp(2.15rem, 5vw, 4rem); line-height: 1.08; }
.mh-module-lede { max-width: 54rem; margin-block-start: 1.15rem; color: var(--mh-muted-strong); font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.75; }
.mh-module-hero__actions, .mh-module-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block-start: 1.75rem; }
.mh-module-login { display: inline-flex; margin-block-start: 1.1rem; color: var(--mh-muted); font-size: .93rem; }
.mh-module-hero__mark { position: relative; display: grid; place-items: center; aspect-ratio: 1; width: min(100%, 15rem); margin-inline: auto; }
.mh-module-mark__ring, .mh-module-mark__core { position: absolute; display: grid; place-items: center; border-radius: 50%; }
.mh-module-mark__ring { inset: 0; border: 1px solid color-mix(in srgb, var(--mh-accent) 38%, var(--mh-card-border)); background: radial-gradient(circle, color-mix(in srgb, var(--mh-accent) 10%, transparent), transparent 68%); box-shadow: 0 0 70px color-mix(in srgb, var(--mh-accent) 17%, transparent), inset 0 0 35px color-mix(in srgb, var(--mh-accent) 8%, transparent); }
.mh-module-mark__ring::before, .mh-module-mark__ring::after { position: absolute; inset: 13%; content: ""; border: 1px solid color-mix(in srgb, var(--mh-accent) 23%, transparent); border-radius: inherit; transform: rotate(34deg) scaleX(.7); }
.mh-module-mark__ring::after { transform: rotate(-34deg) scaleX(.7); }
.mh-module-mark__core { width: 35%; aspect-ratio: 1; background: linear-gradient(145deg, var(--mh-accent), var(--mh-accent-secondary)); color: #04131f; font-size: 2.25rem; font-weight: 800; box-shadow: 0 12px 42px color-mix(in srgb, var(--mh-accent) 30%, transparent); }
.mh-module-orb { position: absolute; z-index: -1; width: 14rem; aspect-ratio: 1; border-radius: 50%; filter: blur(2px); opacity: .45; }
.mh-module-orb--one { inset-block-start: -9rem; inset-inline-end: 28%; background: radial-gradient(circle, color-mix(in srgb, var(--mh-accent) 14%, transparent), transparent 70%); }
.mh-module-orb--two { inset-block-end: -11rem; inset-inline-start: 5%; background: radial-gradient(circle, color-mix(in srgb, var(--mh-accent-secondary) 11%, transparent), transparent 70%); }

.mh-module-section, .mh-module-fact, .mh-module-sources, .mh-module-step {
  border: 1px solid color-mix(in srgb, var(--mh-glass-edge, var(--mh-card-border)) 85%, var(--mh-card-border));
  background: linear-gradient(150deg, color-mix(in srgb, var(--mh-card-highlight) 92%, transparent), color-mix(in srgb, var(--mh-surface-soft) 92%, transparent));
  box-shadow: var(--mh-soft-shadow, 0 14px 36px rgba(0, 0, 0, .12));
  backdrop-filter: blur(var(--mh-glass-blur, 16px)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--mh-glass-blur, 16px)) saturate(1.25);
}
.mh-module-section { padding: clamp(1.35rem, 3.5vw, 2.5rem); border-radius: 2rem; }
.mh-module-section__heading { display: flex; align-items: flex-start; gap: 1rem; margin-block-end: 1.25rem; }
.mh-module-kicker { display: grid; flex: 0 0 auto; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid color-mix(in srgb, var(--mh-accent) 28%, var(--mh-card-border)); border-radius: 1rem; background: var(--mh-accent-soft); color: var(--mh-accent); font-size: .8rem; font-weight: 800; }
.mh-module-section__heading .mh-eyebrow { margin: 0; }
.mh-module-section__heading h2 { margin-block-start: .2rem; color: var(--mh-text); font-size: clamp(1.4rem, 2.7vw, 2rem); line-height: 1.25; font-weight: 700; }
.mh-module-prose { max-width: 69ch; padding-inline-start: calc(2.75rem + 1rem); color: var(--mh-muted-strong); font-size: 1.02rem; line-height: 1.85; }
.mh-module-prose p + p { margin-block-start: 1rem; }
.mh-module-workflow { padding-block: .25rem; }
.mh-module-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.mh-module-step { position: relative; min-height: 13rem; padding: clamp(1.2rem, 2vw, 1.65rem); border-radius: 1.6rem; transition: transform 180ms ease, border-color 180ms ease; }
.mh-module-step:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--mh-accent) 32%, var(--mh-card-border)); }
.mh-module-step__number { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-block-end: 1.2rem; border-radius: .9rem; background: var(--mh-accent-soft); color: var(--mh-accent); font-size: .78rem; font-weight: 800; }
.mh-module-step h3 { color: var(--mh-text); font-size: 1.05rem; line-height: 1.4; font-weight: 700; }
.mh-module-step p, .mh-module-fact p { margin-block-start: .55rem; color: var(--mh-muted); line-height: 1.7; }
.mh-module-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mh-module-fact { padding: clamp(1.3rem, 3vw, 2rem); border-radius: 1.6rem; }
.mh-module-fact__icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; margin-block-end: 1rem; border-radius: 1rem; background: var(--mh-accent-soft); color: var(--mh-accent); font-size: 1.3rem; }
.mh-module-fact h2, .mh-module-sources h2 { color: var(--mh-text); font-size: 1.1rem; font-weight: 700; }
.mh-module-sources { padding: 1.5rem; border-radius: 1.5rem; }
.mh-module-sources ul { display: grid; gap: .6rem; margin-block-start: .8rem; overflow-wrap: anywhere; color: var(--mh-muted); font-size: .9rem; }
.mh-module-review { color: var(--mh-muted); font-size: .85rem; }
.mh-module-review strong { color: var(--mh-text); }
.mh-module-review > * + * { margin-inline-start: .45rem; }
.mh-module-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.75rem; padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: 2rem; }
.mh-module-cta h2 { margin-block-start: .25rem; color: var(--mh-text); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
.mh-module-cta p:not(.mh-eyebrow) { max-width: 45rem; margin-block-start: .55rem; color: var(--mh-muted); line-height: 1.7; }
.mh-module-cta__actions { flex: 0 0 auto; margin: 0; }
.mh-module-related { width: min(100%, 76rem); margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.mh-module-related .mh-module-section__heading { margin-block-end: 1.4rem; }
.mh-module-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.mh-module-related__grid a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; height: 100%; min-height: 4.5rem; padding: 1rem 1.1rem; border: 1px solid var(--mh-card-border); border-radius: 1.2rem; background: var(--mh-surface-soft); color: var(--mh-text); font-weight: 600; transition: border-color 160ms ease, transform 160ms ease, color 160ms ease; }
.mh-module-related__grid a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--mh-accent) 36%, var(--mh-card-border)); color: var(--mh-accent); }
.mh-module-disclaimer { max-width: 75ch; margin-block-start: 1.5rem; color: var(--mh-muted); font-size: .82rem; line-height: 1.65; }
.mh-module-page a:focus-visible { outline: 3px solid var(--mh-accent); outline-offset: 4px; }

.mh-module-directory-hero { position: relative; max-width: 68rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 4rem); overflow: hidden; border-radius: clamp(1.5rem, 4vw, 2.75rem); isolation: isolate; }
.mh-module-directory-hero::before { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(ellipse at 90% 5%, color-mix(in srgb, var(--mh-accent) 17%, transparent), transparent 45%), linear-gradient(140deg, color-mix(in srgb, var(--mh-card-highlight) 92%, transparent), color-mix(in srgb, var(--mh-surface) 92%, transparent)); }
.mh-module-directory-hero h1 { margin-block-start: .5rem; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.1; }
.mh-module-directory-hero > p:not(.mh-eyebrow) { max-width: 58rem; margin-block-start: 1rem; color: var(--mh-muted-strong); font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.8; }
.mh-module-directory-hero__meta { display: flex; gap: .7rem; max-width: 65rem; margin-block-start: 1.35rem; color: var(--mh-muted); font-size: .85rem; line-height: 1.6; }
.mh-module-directory-hero__meta > span:first-child { flex: 0 0 auto; color: var(--mh-accent); }
.mh-module-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block-start: clamp(1.5rem, 4vw, 3rem); }
.mh-module-directory-card { display: flex; min-width: 0; min-height: 17rem; flex-direction: column; padding: clamp(1.25rem, 2.6vw, 1.75rem); border: 1px solid color-mix(in srgb, var(--mh-glass-edge, var(--mh-card-border)) 82%, var(--mh-card-border)); border-radius: 1.65rem; background: linear-gradient(145deg, color-mix(in srgb, var(--mh-card-highlight) 95%, transparent), color-mix(in srgb, var(--mh-surface-soft) 92%, transparent)); box-shadow: var(--mh-soft-shadow, 0 12px 36px rgba(0, 0, 0, .12)); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.mh-module-directory-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--mh-accent) 36%, var(--mh-card-border)); box-shadow: var(--mh-shadow, 0 20px 50px rgba(0, 0, 0, .15)); }
.mh-module-directory-card:focus-visible { outline: 3px solid var(--mh-accent); outline-offset: 4px; }
.mh-module-directory-card__top { display: flex; align-items: center; justify-content: space-between; }
.mh-module-directory-card__index { display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding-inline: .45rem; border-radius: .85rem; background: var(--mh-accent-soft); color: var(--mh-accent); font-size: .78rem; font-weight: 800; }
.mh-module-directory-card__arrow { color: var(--mh-muted); font-size: 1.15rem; transition: color 150ms ease, transform 150ms ease; }
.mh-module-directory-card:hover .mh-module-directory-card__arrow { color: var(--mh-accent); transform: translate(2px, -2px); }
.mh-module-directory-card h2 { margin-block-start: 1.1rem; color: var(--mh-text); font-size: 1.25rem; line-height: 1.35; font-weight: 700; }
.mh-module-directory-card p { margin-block-start: .55rem; color: var(--mh-muted); font-size: .92rem; line-height: 1.65; }
.mh-module-directory-card__link { display: inline-flex; align-items: center; gap: .35rem; margin-block-start: auto; padding-block-start: 1.25rem; color: var(--mh-accent); font-size: .9rem; font-weight: 700; }
.mh-module-directory-empty { grid-column: 1 / -1; text-align: center; color: var(--mh-muted); }

@media (max-width: 900px) {
  .mh-module-hero { grid-template-columns: minmax(0, 1fr) 10rem; }
  .mh-module-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-module-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-module-cta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
  .mh-modules-preview { align-items: stretch; flex-direction: column; gap: 1rem; }
  .mh-modules-preview__link { width: 100%; }
  .mh-module-hero { grid-template-columns: 1fr; min-height: auto; }
  .mh-module-hero__mark { display: none; }
  .mh-module-hero__actions { align-items: stretch; flex-direction: column; }
  .mh-module-hero__actions > a, .mh-module-cta__actions > a { width: 100%; }
  .mh-module-steps, .mh-module-facts, .mh-module-directory-grid { grid-template-columns: 1fr; }
  .mh-module-step { min-height: auto; }
  .mh-module-prose { padding-inline-start: 0; }
  .mh-module-related__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-module-step, .mh-module-related__grid a, .mh-module-breadcrumb a, .mh-module-sources a, .mh-module-directory-card { transition: none; }
  .mh-module-step:hover, .mh-module-related__grid a:hover, .mh-module-directory-card:hover { transform: none; }
}