/* Public /modules/ list and module pages (signed-out redesign, DESIGN.md). Tokens, buttons, store badges,
 * QR card and the drawn phone come from pro.css; the closing download panel (.hm-final) from home.css. */
.mh-module-page { position: relative; z-index: 1; padding-top: 40px; padding-bottom: var(--pr-section); }
.pm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pm-h3 { margin: 0; font-size: var(--pr-t-h3); line-height: 1.3; font-weight: 600; color: var(--pr-ink); }
.pr-get { margin-top: var(--pr-section); }

/* ---------------------------------------------------------------- list */
.pm-list__head { max-width: 46rem; padding-top: 32px; }
.pm-list__head .pr-lead { margin-top: 20px; }
.pm-list__scope { margin-top: 16px; max-width: 60ch; }
.pm-group { margin-top: 72px; }
.pm-group__title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 24px; padding-bottom: 14px;
  font-size: 1.125rem; font-weight: 600; color: var(--pr-ink); border-bottom: 1px solid var(--pr-line-2);
}
.pm-group__icon { display: inline-flex; color: var(--pr-link); }
.pm-grid { display: grid; gap: 32px 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; } }
.pm-card { display: flex; flex-direction: column; gap: 16px; height: 100%; color: inherit; text-decoration: none; }
.pm-card__thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 750; border-radius: var(--pr-r-md);
  border: 1px solid var(--pr-line); background: var(--pr-raised); transition: border-color .18s var(--pr-ease);
}
.pm-card__body { display: flex; flex-direction: column; gap: 6px; }
.pm-card h3 { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--pr-ink); }
.pm-card__text { margin: 0; }
.pm-card__text { font-size: var(--pr-t-small); line-height: 1.55; color: var(--pr-ink-2); }
.pm-card__link { margin-top: 6px; font-size: var(--pr-t-small); font-weight: 600; color: var(--pr-link); }
.pm-card:hover .pm-card__thumb { border-color: var(--pr-line-2); }
.pm-card:hover h3, .pm-exam:hover .pm-exam__title { color: var(--pr-link); }
.pm-exam {
  display: flex; flex-direction: column; gap: 8px; max-width: 40rem; padding: 24px; border-radius: var(--pr-r-md);
  border: 1px solid var(--pr-line); background: var(--pr-raised); color: inherit; text-decoration: none;
}
.pm-exam__title { font-size: 1.25rem; font-weight: 600; color: var(--pr-ink); }
.pm-exam__text { font-size: var(--pr-t-small); color: var(--pr-ink-2); line-height: 1.55; }

/* ---------------------------------------------------------------- detail */
.pm-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--pr-t-small); color: var(--pr-ink-3); }
.pm-crumbs a { color: var(--pr-ink-2); text-decoration: none; }
.pm-crumbs a:hover { color: var(--pr-ink); text-decoration: underline; text-underline-offset: 3px; }
.pm-notice { margin: 24px 0 0; padding: 12px 16px; border-radius: var(--pr-r-sm); border: 1px solid var(--pr-line-2); font-size: var(--pr-t-small); color: var(--pr-ink-2); }
.pm-hero { display: grid; gap: 48px; align-items: center; padding-top: 40px; }
.pm-hero__group { margin: 0 0 12px; font-size: var(--pr-t-small); font-weight: 600; color: var(--pr-link); }
.pm-hero__lede { margin-top: 20px; }
.pm-hero .hm-stores { margin-top: 32px; }
.pm-hero__web { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 20px 0 0; font-size: var(--pr-t-small); }
.pm-hero__login { color: var(--pr-ink-2); font-weight: 500; }
.pm-hero__media { margin: 0; display: flex; justify-content: center; min-width: 0; }
.pm-phone { width: min(70vw, 290px); }
.pm-shot { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 750; border-radius: var(--pr-r-md); border: 1px solid var(--pr-line); }
@media (min-width: 1024px) {
  .pm-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; padding-top: 56px; }
  .pm-hero--phone { grid-template-columns: minmax(0, 1fr) 300px; gap: 96px; }
  .pm-phone { width: 300px; }
}

.pm-example { margin-top: 72px; padding: 24px; border-radius: var(--pr-r-md); border: 1px solid var(--pr-line); background: var(--pr-raised); }
:root[data-theme="dark"] .pm-example { background: color-mix(in srgb, var(--pr-raised) 82%, transparent); }
.pm-example__io { display: grid; gap: 0; margin: 16px 0 0; }
.pm-example__io > div { padding: 14px 0; border-top: 1px solid var(--pr-line); }
.pm-example__io dd { margin: 0; }
.pm-example__in { font-weight: 600; color: var(--pr-ink); }
.pm-example__out { color: var(--pr-ink-2); line-height: 1.6; }
.pm-example__out::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 10px; border-radius: 50%; background: var(--pr-mint); vertical-align: .1em; }
@media (min-width: 768px) { .pm-example { padding: 32px; } .pm-example__io { grid-template-columns: 2fr 5fr; column-gap: 32px; } .pm-example__io > div { padding: 16px 0 0; } }

.pm-row { display: grid; gap: 24px; margin-top: 80px; padding-top: 32px; border-top: 1px solid var(--pr-line); }
@media (min-width: 1024px) { .pm-row { grid-template-columns: 4fr 8fr; gap: 64px; } }
.pm-row__title:empty { display: none; }
@media (min-width: 1024px) { .pm-row__title:empty { display: block; } }
.pm-prose { max-width: 64ch; font-size: var(--pr-t-body); line-height: var(--pr-lh-body); color: var(--pr-ink-2); }
.pm-prose p { margin: 0 0 16px; }
.pm-steps { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 768px) { .pm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.pm-step__n {
  display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 14px; border-radius: 50%;
  border: 1px solid var(--pr-accent); color: var(--pr-link); font-size: var(--pr-t-caption); font-weight: 700;
}
.pm-step p { margin: 8px 0 0; font-size: var(--pr-t-small); line-height: 1.55; color: var(--pr-ink-2); }
.pm-facts { display: grid; gap: 24px; margin: 0; }
@media (min-width: 768px) { .pm-facts { grid-template-columns: 1fr 1fr; gap: 32px; } .pm-facts__wide { grid-column: 1 / -1; } }
.pm-facts dt { font-size: var(--pr-t-small); font-weight: 600; color: var(--pr-ink); }
.pm-facts dd { margin: 6px 0 0; font-size: var(--pr-t-small); line-height: 1.6; color: var(--pr-ink-2); }
.pm-sources { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pm-sources a { color: var(--pr-link); overflow-wrap: anywhere; }
.pm-review { margin: 32px 0 0; font-size: var(--pr-t-small); color: var(--pr-ink-3); }
.pm-review strong { color: var(--pr-ink-2); font-weight: 600; }
.pm-access { margin-top: 72px; padding: 28px; border-radius: var(--pr-r-md); border: 1px solid var(--pr-line-2); }
.pm-access p { margin: 10px 0 0; max-width: 60ch; font-size: var(--pr-t-small); line-height: 1.6; color: var(--pr-ink-2); }
.pm-access .pm-access__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }
.pm-related { margin-top: 72px; }
.pm-related__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.pm-related__list a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--pr-r-sm);
  border: 1px solid var(--pr-line-2); color: var(--pr-ink); font-size: var(--pr-t-small); font-weight: 500; text-decoration: none;
}
.pm-related__list a:hover { border-color: var(--pr-ink-3); background: var(--pr-glass); }
.pm-disclaimer { margin-top: 24px; max-width: 70ch; }
.mh-module-directory-empty { margin-top: 48px; color: var(--pr-ink-2); }
@media (hover: hover) {
  .pm-card .pm-card__thumb { transition: transform .45s var(--pr-ease), border-color .3s var(--pr-ease), box-shadow .45s var(--pr-ease); }
  .pm-card:hover .pm-card__thumb { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .6); }
}
@media (prefers-reduced-motion: reduce) { .pm-card .pm-card__thumb { transition: none; } .pm-card:hover .pm-card__thumb { transform: none; } }

/* ---------------------------------------------------------------- round 2: covers, phones, tablets */
.pm-card__stage {
  display: flex; align-items: center; justify-content: center; height: 300px; overflow: hidden; border-radius: var(--pr-r-md);
  border: 1px solid var(--pr-line);
  background: radial-gradient(80% 70% at 50% 0%, rgba(0, 217, 255, .14), transparent 70%), var(--pr-bg-2);
}
.pm-card__stage .pm-card__thumb { border: 0; border-radius: 0; height: 100%; width: 100%; object-fit: contain; aspect-ratio: auto; background: transparent; }
.pm-card__phone { width: auto; padding: 5px; border-radius: 22px; }
.pm-card__phone img { width: auto; height: 260px; border-radius: 17px; }
.pm-phones { display: flex; align-items: flex-start; justify-content: center; gap: 16px; }
.pm-phones--two .pm-phone--inside { width: min(44vw, 230px); margin-top: 48px; }
@media (min-width: 1024px) {
  .pm-hero--phone { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; }
  .pm-phones--two .pm-phone { width: 270px; }
  .pm-phones--two .pm-phone--inside { width: 240px; }
}
@media (max-width: 1023px) {
  .pm-list__head, .pm-hero__copy { text-align: center; margin-inline: auto; }
  .pm-list__head .pr-lead, .pm-list__scope, .pm-hero__lede { margin-inline: auto; }
  .pm-hero .hm-stores, .pm-hero__web { justify-content: center; }
  .pm-group__title { justify-content: center; }
  .pm-crumbs { justify-content: center; }
  .pm-row { text-align: center; }
  .pm-prose { margin-inline: auto; text-align: start; }
  .pm-steps { text-align: start; }
  .pm-facts { text-align: start; }
  .pm-related__list { justify-content: center; }
  .pm-access, .pm-related { text-align: center; }
  .pm-access .pm-access__actions { justify-content: center; }
  .pm-access p { margin-inline: auto; }
}
@media (max-width: 767px) {
  .mh-module-page { padding-top: 16px; }
  .pm-list__head { padding-top: 12px; }
  .pm-group { margin-top: 40px; }
  .pm-group__title { margin-bottom: 16px; font-size: 1rem; }
  .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .pm-card { gap: 10px; text-align: center; }
  .pm-card__stage { height: 200px; }
  .pm-card__phone img { height: 176px; }
  .pm-card h3 { font-size: .9375rem; }
  .pm-card__text { font-size: var(--pr-t-caption); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pm-card__link { display: none; }
  .pm-hero { padding-top: 20px; gap: 28px; }
  .pm-phone { width: min(52vw, 240px); }
  .pm-phones--two .pm-phone { width: min(44vw, 200px); }
  .pm-phones--two .pm-phone--inside { width: min(38vw, 170px); margin-top: 32px; }
  .pm-example { margin-top: 40px; padding: 20px; text-align: start; }
  .pm-row { margin-top: 40px; padding-top: 24px; gap: 16px; }
  .pm-access { margin-top: 40px; padding: 22px; }
  .pm-related { margin-top: 40px; }
  .pm-steps { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .pm-steps::-webkit-scrollbar { display: none; }
  .pm-step { scroll-snap-align: start; padding: 18px; border-radius: 16px; border: 1px solid var(--pr-line); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .pm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; }
  .pm-card__stage { height: 240px; }
  .pm-card__phone img { height: 210px; }
}
.pm-card__mark { width: 56px; height: 56px; border-radius: 14px; opacity: .9; }
.pm-wait {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: min(100%, 360px); min-height: 380px;
  border-radius: 28px; border: 1px dashed var(--pr-line-2); color: var(--pr-ink-2); font-weight: 600;
  background: radial-gradient(80% 70% at 50% 0%, rgba(0, 217, 255, .14), transparent 70%), var(--pr-bg-2);
}
.pm-wait img { border-radius: 24px; }
@media (max-width: 767px) { .pm-wait { min-height: 260px; } .pm-card__mark { width: 44px; height: 44px; } }