/* Career roadmap: the public guide (signed out) and the signed-in tracker share these styles.
   Pages: templates/web_auth/roadmap_index.html, roadmap_detail.html and their partials; the guides' "Track this path"
   block (Home/templates/Home/guide.html); the Home card (templates/web_auth/home.html). Not part of the public CSS bundle.

   Mobile first. Theme-aware through the --mh-* tokens (dark default, [data-theme="light"] overrides below).
   Each destination has its own identity: .mh-rmx--<theme> sets --rmx-a (accent), --rmx-ink (accent for text) and
   --rmx-stripe (a flag-inspired bar). Logical properties only, so Arabic, Persian, Urdu and Hebrew mirror.
   No inline styles anywhere (strict CSP): the progress ring arc is an SVG attribute that js/roadmap.js updates. */

.mh-rmx {
  --rmx-a: #2dd4bf;
  --rmx-ink: #5eead4;
  --rmx-stripe: linear-gradient(90deg, #2dd4bf, #38bdf8);
  --rm-accent: var(--rmx-a);
  --rm-done: var(--mh-ui-success, #34d399);
  --rm-line: var(--mh-card-border, rgba(160, 214, 255, 0.16));
  --rm-panel: color-mix(in srgb, var(--mh-surface, #1e293b) 90%, transparent);
  --rm-raise: color-mix(in srgb, var(--mh-text, #fff) 6%, transparent);
  --rmx-text: var(--mh-text, #f8fafc);
  --rmx-muted: var(--mh-muted, #94a3b8);
  max-width: 960px;
  margin-inline: auto;
  color: var(--rmx-text);
}
[data-theme="light"] .mh-rmx { --rmx-ink: #0f766e; --rm-panel: color-mix(in srgb, var(--mh-surface, #fff) 96%, transparent); --rm-raise: color-mix(in srgb, var(--mh-text, #0f172a) 5%, transparent); }

/* ---------- destination identities ---------- */
.mh-rmx--us { --rmx-a: #60a5fa; --rmx-ink: #93c5fd; --rmx-stripe: linear-gradient(90deg, #ef4444 0 34%, #f8fafc 34% 66%, #3b82f6 66%); }
.mh-rmx--de { --rmx-a: #fbbf24; --rmx-ink: #fcd34d; --rmx-stripe: linear-gradient(90deg, #64748b 0 34%, #ef4444 34% 66%, #facc15 66%); }
.mh-rmx--sa { --rmx-a: #34d399; --rmx-ink: #6ee7b7; --rmx-stripe: linear-gradient(90deg, #16a34a 0 70%, #f8fafc 70% 78%, #16a34a 78%); }
.mh-rmx--dha { --rmx-a: #fb7185; --rmx-ink: #fda4af; --rmx-stripe: linear-gradient(90deg, #e11d48 0 25%, #16a34a 25% 50%, #f8fafc 50% 75%, #475569 75%); }
.mh-rmx--doh { --rmx-a: #22d3ee; --rmx-ink: #67e8f9; --rmx-stripe: linear-gradient(90deg, #0ea5e9 0 25%, #16a34a 25% 50%, #f8fafc 50% 75%, #475569 75%); }
.mh-rmx--mohap { --rmx-a: #fb923c; --rmx-ink: #fdba74; --rmx-stripe: linear-gradient(90deg, #dc2626 0 25%, #16a34a 25% 50%, #f8fafc 50% 75%, #475569 75%); }
.mh-rmx--om { --rmx-a: #f87171; --rmx-ink: #fca5a5; --rmx-stripe: linear-gradient(90deg, #dc2626 0 34%, #f8fafc 34% 66%, #16a34a 66%); }
[data-theme="light"] .mh-rmx--us { --rmx-a: #2563eb; --rmx-ink: #1d4ed8; }
[data-theme="light"] .mh-rmx--de { --rmx-a: #d97706; --rmx-ink: #92400e; --rmx-stripe: linear-gradient(90deg, #111827 0 34%, #dc2626 34% 66%, #eab308 66%); }
[data-theme="light"] .mh-rmx--sa { --rmx-a: #059669; --rmx-ink: #047857; --rmx-stripe: linear-gradient(90deg, #15803d 0 70%, #e2e8f0 70% 78%, #15803d 78%); }
[data-theme="light"] .mh-rmx--dha { --rmx-a: #e11d48; --rmx-ink: #be123c; --rmx-stripe: linear-gradient(90deg, #e11d48 0 25%, #15803d 25% 50%, #e2e8f0 50% 75%, #111827 75%); }
[data-theme="light"] .mh-rmx--doh { --rmx-a: #0891b2; --rmx-ink: #0e7490; --rmx-stripe: linear-gradient(90deg, #0284c7 0 25%, #15803d 25% 50%, #e2e8f0 50% 75%, #111827 75%); }
[data-theme="light"] .mh-rmx--mohap { --rmx-a: #ea580c; --rmx-ink: #c2410c; --rmx-stripe: linear-gradient(90deg, #dc2626 0 25%, #15803d 25% 50%, #e2e8f0 50% 75%, #111827 75%); }
[data-theme="light"] .mh-rmx--om { --rmx-a: #dc2626; --rmx-ink: #b91c1c; --rmx-stripe: linear-gradient(90deg, #dc2626 0 34%, #e2e8f0 34% 66%, #15803d 66%); }

/* ---------- page frame ---------- */
.mh-rmx-wrap { padding: 20px 16px 56px; }
.mh-rmx-wrap .mh-rmx { padding-block: 8px; }
.mh-rmx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 0.82rem; font-weight: 700; color: var(--rmx-muted); }
.mh-rmx-crumbs a { color: var(--rmx-muted); text-decoration: none; }
.mh-rmx-crumbs a:hover, .mh-rmx-crumbs a:focus-visible { color: var(--rmx-ink); text-decoration: underline; text-underline-offset: 3px; }
.mh-rmx-crumbs li + li::before { content: "/"; margin-inline-end: 8px; opacity: 0.5; }
.mh-rm-back { display: inline-flex; align-items: center; gap: 6px; margin-block-end: 12px; font-size: 0.85rem; font-weight: 700; color: var(--rmx-muted); text-decoration: none; }
.mh-rm-back:hover, .mh-rm-back:focus-visible { color: var(--rmx-ink); }

/* ---------- hero (index and path) ---------- */
.mh-rmx-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; margin-block-end: 20px;
  padding: 26px 20px 22px; border: 1px solid var(--rm-line); border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--rmx-a) 22%, transparent), transparent 46%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--rmx-a) 9%, transparent), transparent 42%),
    var(--rm-panel);
  box-shadow: 0 12px 32px rgba(2, 8, 20, 0.12);
}
.mh-rmx-hero::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 5px; background: var(--rmx-stripe); }
.mh-rmx-hero__mark {
  position: absolute; inset-block-end: -18px; inset-inline-end: 8px; font-size: 7.5rem; font-weight: 900; line-height: 1;
  letter-spacing: -0.04em; color: color-mix(in srgb, var(--rmx-a) 13%, transparent); pointer-events: none; user-select: none;
}
.mh-rmx-hero__text { position: relative; flex: 1 1 auto; min-width: 0; }
.mh-rmx-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.mh-rmx-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--rmx-ink);
  background: color-mix(in srgb, var(--rmx-a) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rmx-a) 38%, transparent);
}
.mh-rmx-tag--code { font-variant-numeric: tabular-nums; }
.mh-rmx-tag--staff { color: var(--rmx-text); background: transparent; border-style: dashed; border-color: var(--rm-line); }
.mh-rmx-hero h1 { margin: 0 0 10px; font-size: clamp(1.5rem, 5.4vw, 2.3rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.02em; color: var(--rmx-text); overflow-wrap: anywhere; }
.mh-rmx-hero__summary { margin: 0; max-width: 680px; font-size: 0.98rem; font-weight: 600; line-height: 1.6; color: var(--rmx-muted); }
.mh-rmx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.mh-rmx-note { margin: 10px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--rmx-muted); }

/* ---------- chips and buttons ---------- */
.mh-rm-chip, .mh-rmx-chip {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--rm-line); background: var(--rm-raise); font-size: 0.76rem; font-weight: 700;
  color: var(--rmx-muted); line-height: 1.4;
}
.mh-rmx-chip svg { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mh-rmx-chip--cost { color: var(--rmx-ink); border-color: color-mix(in srgb, var(--rmx-a) 36%, transparent); background: color-mix(in srgb, var(--rmx-a) 10%, transparent); }
.mh-rm-chip--on { color: var(--rmx-ink); border-color: color-mix(in srgb, var(--rmx-a) 40%, transparent); }
.mh-rm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px;
  border: 1px solid transparent; font-weight: 800; font-size: 0.92rem; cursor: pointer; text-decoration: none;
  transition: filter 0.2s ease, background-color 0.2s ease;
}
.mh-rm-btn--primary, .mh-rmx a.mh-rm-btn--primary { background: var(--mh-ui-accent, var(--mh-accent, #00d9ff)); color: var(--mh-ui-on-accent, #04131f); }
.mh-rm-btn--primary:hover, .mh-rm-btn--primary:focus-visible { filter: brightness(1.08); }
.mh-rm-btn--ghost, .mh-rmx a.mh-rm-btn--ghost { background: transparent; border-color: var(--rm-line); color: var(--rmx-text); }
.mh-rm-btn--ghost:hover, .mh-rm-btn--ghost:focus-visible { border-color: var(--rmx-a); }
.mh-rm-btn--quiet { background: transparent; border-color: var(--rm-line); color: var(--rmx-muted); min-height: 36px; padding: 0 14px; font-size: 0.8rem; }
.mh-rm-btn--quiet:hover, .mh-rm-btn--quiet:focus-visible { color: var(--rmx-text); }
.mh-rm-btn[disabled], .mh-rm-btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

/* ---------- progress ring ---------- */
.mh-rm-ring { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: 56px; height: 56px; }
.mh-rm-ring--lg { width: 92px; height: 92px; }
.mh-rm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
[dir="rtl"] .mh-rm-ring svg { transform: rotate(-90deg) scaleY(-1); }
.mh-rm-ring__track { fill: none; stroke: var(--rm-raise); stroke-width: 6; }
.mh-rm-ring__arc { fill: none; stroke: var(--rmx-a); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.45s ease; }
.mh-rm-ring__value { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 0.8rem; color: var(--rmx-text); }
.mh-rm-ring--lg .mh-rm-ring__value { font-size: 1.2rem; }

/* ---------- index: destination cards ---------- */
.mh-rmx-grid { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mh-rmx-card {
  position: relative; display: grid; gap: 8px; align-content: start; height: 100%; padding: 20px 18px 16px; overflow: hidden;
  border: 1px solid var(--rm-line); border-radius: 22px; background: var(--rm-panel);
  color: var(--rmx-text); text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.mh-rmx-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--rmx-stripe); }
.mh-rmx-card:hover, .mh-rmx-card:focus-visible {
  border-color: color-mix(in srgb, var(--rmx-a) 55%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--rmx-a) 14%, transparent); transform: translateY(-1px);
}
.mh-rmx-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--rmx-a) 55%, transparent); outline-offset: 2px; }
.mh-rmx-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mh-rmx-card__title { margin: 0; font-size: 1.12rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.mh-rmx-card__summary { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--rmx-muted); }
.mh-rmx-card__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 0.78rem; font-weight: 600; color: var(--rmx-muted); }
.mh-rmx-card__go { font-size: 0.86rem; font-weight: 800; color: var(--rmx-ink); }
.mh-rmx-card__row { display: flex; align-items: center; gap: 12px; }
.mh-rmx-card__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 8px; }
.mh-rmx-section-title { margin: 28px 0 12px; font-size: 1.2rem; font-weight: 900; color: var(--rmx-text); }

/* ---------- sign-up / track call to action ---------- */
.mh-rmx-cta, .mh-rm-enroll, .mh-rm-next {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-block: 0 22px; padding: 18px 20px;
  border-radius: 20px; border: 1px solid color-mix(in srgb, var(--rmx-a) 38%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rmx-a) 12%, transparent), transparent 70%), var(--rm-panel);
}
.mh-rmx-cta__text { flex: 1 1 260px; display: grid; gap: 4px; min-width: 0; }
.mh-rmx-cta__title { margin: 0; font-size: 1.08rem; font-weight: 900; color: var(--rmx-text); }
.mh-rmx-cta__body, .mh-rm-enroll p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--rmx-muted); }
.mh-rm-enroll p { flex: 1 1 260px; font-weight: 600; color: var(--rmx-text); }
.mh-rmx-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mh-rm-next__label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rmx-ink); }
.mh-rm-next__link, .mh-rm-next__done { flex: 1 1 240px; font-weight: 800; color: var(--rmx-text); text-decoration: none; }
.mh-rm-next__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- step timeline ---------- */
.mh-rmx-steps-title { margin: 8px 0 14px; font-size: 1.25rem; font-weight: 900; color: var(--rmx-text); }
.mh-rmx-timeline { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mh-rmx-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; scroll-margin-block-start: calc(var(--mh-header-h, 64px) + 16px); }
/* The rail: a dotted line through the nodes (none after the last step). */
.mh-rmx-step::before {
  content: ""; position: absolute; inset-block: 44px -14px; inset-inline-start: 21px; width: 2px;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--rmx-a) 55%, transparent) 0 6px, transparent 6px 11px);
}
.mh-rmx-step:last-child::before { display: none; }
.mh-rmx-node { position: relative; z-index: 1; display: grid; place-items: start center; }
.mh-rmx-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; font-weight: 900; font-size: 0.95rem;
  color: var(--rmx-ink); background: color-mix(in srgb, var(--rmx-a) 14%, var(--mh-bg, #0b1220));
  border: 2px solid color-mix(in srgb, var(--rmx-a) 60%, transparent); font-variant-numeric: tabular-nums;
}
.mh-rm-step__body {
  min-width: 0; padding: 16px 16px 14px; border: 1px solid var(--rm-line); border-radius: 20px; background: var(--rm-panel);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mh-rmx-step:target .mh-rm-step__body { border-color: var(--rmx-a); }
.mh-rmx-step[data-status="done"] .mh-rm-step__body { border-color: color-mix(in srgb, var(--rm-done) 38%, transparent); }
.mh-rmx-step[data-status="skipped"] { opacity: 0.72; }
.mh-rmx-step[data-status="done"] .mh-rm-step__title { color: var(--rmx-muted); }
.mh-rm-step__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-block-end: 6px; }
.mh-rmx-phase { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rmx-ink); }
.mh-rm-step__title { margin: 0; font-size: 1.04rem; font-weight: 800; line-height: 1.35; color: var(--rmx-text); overflow-wrap: anywhere; }
.mh-rm-step__summary { margin: 8px 0 0; font-size: 0.92rem; line-height: 1.65; color: color-mix(in srgb, var(--rmx-text) 82%, transparent); }
.mh-rmx-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.mh-rmx-factnote { margin: 8px 0 0; font-size: 0.84rem; line-height: 1.55; color: var(--rmx-muted); }
.mh-rmx-factnote b { color: var(--rmx-text); font-weight: 800; }
.mh-rm-step__checked { margin: 10px 0 0; font-size: 0.74rem; color: var(--rmx-muted); }
.mh-rmx-step[data-status="in_progress"] .mh-rm-chip--status { color: var(--rmx-ink); border-color: color-mix(in srgb, var(--rmx-a) 40%, transparent); }
.mh-rmx-step[data-status="done"] .mh-rm-chip--status { color: var(--rm-done); border-color: color-mix(in srgb, var(--rm-done) 40%, transparent); }

/* Tri-state tick (signed-in tracker): to do (empty ring), in progress (half), done (filled check); skipped shows a dash. */
.mh-rm-tick {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--rmx-text) 30%, transparent); background: var(--mh-bg, transparent); color: var(--rmx-ink);
  cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.mh-rm-tick::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; } /* 48px hit area */
.mh-rm-tick:hover:not([disabled]) { border-color: var(--rmx-a); }
.mh-rm-tick:active:not([disabled]) { transform: scale(0.94); }
.mh-rm-tick:focus-visible { outline: 3px solid color-mix(in srgb, var(--rmx-a) 55%, transparent); outline-offset: 2px; }
.mh-rm-tick[disabled] { cursor: not-allowed; opacity: 0.55; }
.mh-rm-tick__icon { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mh-rm-tick__icon--progress { fill: currentColor; stroke: none; }
[dir="rtl"] .mh-rm-tick__icon--progress { transform: scaleX(-1); }
[data-status="in_progress"] .mh-rm-tick { border-color: var(--rmx-a); }
[data-status="in_progress"] .mh-rm-tick .mh-rm-tick__icon--progress { display: block; }
[data-status="done"] .mh-rm-tick { background: var(--rm-done); border-color: var(--rm-done); color: var(--mh-ui-on-accent, #04131f); }
[data-status="done"] .mh-rm-tick .mh-rm-tick__icon--done { display: block; }
[data-status="skipped"] .mh-rm-tick { color: var(--rmx-muted); border-style: dashed; }
[data-status="skipped"] .mh-rm-tick .mh-rm-tick__icon--skipped { display: block; }
.mh-rmx-step[aria-busy="true"] .mh-rm-tick { animation: mh-rm-pulse 0.9s ease-in-out infinite; }
@keyframes mh-rm-pulse { 50% { opacity: 0.55; } }

.mh-rm-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-block-start: 12px; }
.mh-rm-links a, .mh-rm-skip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: 0.86rem; font-weight: 700;
  color: var(--pr-link, var(--rmx-ink)); text-decoration: none; background: none; border: 0; padding: 4px 0; cursor: pointer; font-family: inherit;
}
.mh-rm-links a:hover, .mh-rm-skip:hover { text-decoration: underline; text-underline-offset: 3px; }
.mh-rm-skip { color: var(--rmx-muted); }
.mh-rm-links__exam { padding: 4px 12px !important; border-radius: 999px; background: color-mix(in srgb, var(--rmx-a) 14%, transparent); }
.mh-rm-hint, .mh-rm-disclaimer { margin: 6px 0 0; font-size: 0.8rem; line-height: 1.6; color: var(--rmx-muted); }
.mh-rm-disclaimer { margin-block-start: 22px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--rm-line); background: var(--rm-raise); }

/* ---------- FAQ, sources, other destinations ---------- */
.mh-rmx-block { margin-block-start: 30px; }
.mh-rmx-block h2 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 900; color: var(--rmx-text); }
.mh-rmx-faq details { margin-block-end: 8px; padding: 12px 16px; border: 1px solid var(--rm-line); border-radius: 16px; background: var(--rm-panel); }
.mh-rmx-faq summary { cursor: pointer; font-weight: 800; font-size: 0.96rem; line-height: 1.45; color: var(--rmx-text); }
.mh-rmx-faq details[open] { border-color: color-mix(in srgb, var(--rmx-a) 40%, transparent); }
.mh-rmx-faq p { margin: 10px 0 0; font-size: 0.92rem; line-height: 1.65; color: var(--rmx-muted); }
.mh-rmx-sources { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; font-size: 0.9rem; }
.mh-rmx-sources a { color: var(--pr-link, var(--rmx-ink)); overflow-wrap: anywhere; }
.mh-rmx-more { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mh-rmx-more .mh-rmx-card { padding: 16px 16px 14px; }
.mh-rmx-links { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }

/* ---------- states ---------- */
.mh-rm-state {
  display: grid; justify-items: center; gap: 10px; margin-block-end: 22px; padding: 28px 22px; text-align: center;
  border: 1px dashed var(--rm-line); border-radius: 24px; background: var(--rm-panel);
}
.mh-rm-state__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: color-mix(in srgb, var(--rmx-a) 14%, transparent); color: var(--rmx-ink); }
.mh-rm-state__title { margin: 0; font-size: 1.1rem; font-weight: 900; color: var(--rmx-text); }
.mh-rm-state__body { margin: 0; max-width: 520px; font-size: 0.92rem; line-height: 1.6; color: var(--rmx-muted); }
.mh-rm-guides { display: grid; gap: 10px; width: 100%; max-width: 560px; margin-block-start: 14px; text-align: start; }
.mh-rm-guides__title { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rmx-muted); }
.mh-rm-guide { display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--rm-line); background: var(--rm-raise); color: var(--rmx-text); text-decoration: none; }
.mh-rm-guide:hover { border-color: var(--rmx-a); }
.mh-rm-guide span { font-size: 0.84rem; color: var(--rmx-muted); }

/* ---------- the guides' call-to-action and roadmap link ---------- */
.mh-rm-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 20px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--mh-accent, #00d9ff) 40%, transparent);
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--mh-accent, #00d9ff) 16%, transparent), transparent 50%), var(--mh-surface-soft, transparent);
}
.mh-rm-cta__icon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--mh-accent, #00d9ff) 16%, transparent); color: var(--mh-accent, #00d9ff); }
.mh-rm-cta__text { flex: 1 1 260px; display: grid; gap: 2px; min-width: 0; }
.mh-rm-cta__kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mh-accent, #00d9ff); }
.mh-rm-cta__title { font-size: 1.02rem; font-weight: 800; color: var(--mh-text, inherit); }
.mh-rm-cta__body { font-size: 0.88rem; line-height: 1.5; color: var(--mh-muted, inherit); }
.mh-legal-section .mh-rm-cta a.mh-rm-btn, .mh-rm-cta a.mh-rm-btn { text-decoration: none; color: var(--mh-ui-on-accent, #04131f); }
.mh-rm-cta .mh-rm-btn { background: var(--mh-ui-accent, var(--mh-accent, #00d9ff)); }

/* ---------- Home card (signed-in dashboard) ---------- */
.mh-rm-home {
  position: relative; display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 14px 48px 14px 16px;
  border-radius: 20px; border: 1px solid color-mix(in srgb, #2dd4bf 36%, transparent);
  background: radial-gradient(120% 140% at 100% 0%, rgba(45, 212, 191, 0.16), transparent 55%), color-mix(in srgb, var(--mh-surface, #1e293b) 92%, transparent);
  box-shadow: 0 10px 26px rgba(2, 8, 20, 0.14);
}
[data-theme="light"] .mh-rm-home { background: radial-gradient(120% 140% at 100% 0%, rgba(45, 212, 191, 0.12), transparent 55%), #ffffff; }
[dir="rtl"] .mh-rm-home { padding: 14px 16px 14px 48px; }
.mh-rm-home[hidden] { display: none; }
.mh-rm-home__icon { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, #2dd4bf 16%, transparent); color: #0f766e; }
[data-theme="dark"] .mh-rm-home__icon { color: #5eead4; }
.mh-rm-home__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.mh-rm-home__title { font-size: 0.98rem; font-weight: 900; color: var(--mh-text); line-height: 1.3; }
.mh-rm-home__body { font-size: 0.84rem; line-height: 1.45; color: var(--mh-muted); overflow-wrap: anywhere; }
.mh-rm-home__badge { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; border: 1px dashed color-mix(in srgb, var(--mh-text, #fff) 35%, transparent); color: var(--mh-muted); vertical-align: middle; }
.mh-rm-home__go { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 800; font-size: 0.86rem; text-decoration: none; background: var(--mh-ui-accent, var(--mh-accent, #00d9ff)); color: var(--mh-ui-on-accent, #04131f); }
.mh-rm-home__close { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 36px; height: 36px; border: 0; border-radius: 12px; background: transparent; color: var(--mh-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.mh-rm-home__close:hover { background: rgba(148, 163, 184, 0.14); color: var(--mh-text); }
.mh-rm-home__close:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
@media (max-width: 640px) {
  .mh-rm-home { flex-wrap: wrap; }
  .mh-rm-home__text { flex-basis: calc(100% - 70px); }
  .mh-rm-home__go { width: 100%; justify-content: center; }
}

/* ---------- wider screens ---------- */
@media (min-width: 720px) {
  .mh-rmx-wrap { padding-block: 32px 72px; }
  .mh-rmx-hero { padding: 32px 32px 28px; gap: 28px; }
  .mh-rmx-hero__mark { font-size: 11rem; inset-block-end: -30px; inset-inline-end: 16px; }
  .mh-rmx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .mh-rmx-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-rmx-step { grid-template-columns: 52px minmax(0, 1fr); gap: 18px; }
  .mh-rmx-step::before { inset-inline-start: 25px; inset-block-start: 52px; }
  .mh-rmx-num, .mh-rm-tick { width: 48px; height: 48px; }
  .mh-rm-step__body { padding: 18px 22px 16px; }
  .mh-rm-ring { width: 64px; height: 64px; }
  .mh-rm-ring--lg { width: 104px; height: 104px; }
}
@media (max-width: 420px) {
  .mh-rmx-hero { flex-wrap: wrap; }
  .mh-rmx-cta .mh-rm-btn, .mh-rm-enroll .mh-rm-btn { width: 100%; }
  .mh-rmx-cta__actions { width: 100%; }
  .mh-rmx-cta__actions .mh-rm-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-rm-ring__arc, .mh-rmx-card, .mh-rm-tick { transition: none; }
  .mh-rmx-step[aria-busy="true"] .mh-rm-tick { animation: none; }
  .mh-rmx-card:hover, .mh-rmx-card:focus-visible { transform: none; }
}

/* The public bundle has no .mh-sr-only: visually hidden text for chip labels (read by screen readers). */
.mh-rmx .mh-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }