/* Scoped editorial styles. Uses the public site's inherited font and navigation. */
.mj-page { --mj-text: #334155; --mj-heading: #111827; --mj-muted: #64748b; --mj-line: #dce3ed; --mj-bg: #fff; --mj-soft: #f8fafc; --mj-blue: #1d4ed8; --mj-tint: #eff6ff; color: var(--mj-text); background: var(--mj-bg); font-size: 1rem; line-height: 1.75; }
.dark .mj-page { --mj-text: #cbd5e1; --mj-heading: #f8fafc; --mj-muted: #aebed1; --mj-line: #374151; --mj-bg: #111827; --mj-soft: #172033; --mj-blue: #93c5fd; --mj-tint: #172742; }
.mj-container { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.mj-page h1, .mj-page h2, .mj-page h3 { color: var(--mj-heading); font-weight: 600; letter-spacing: -.02em; }
.mj-page h1 { font-size: clamp(2rem, 3.2vw, 2.65rem); font-weight: 800; line-height: 1.18; margin: .75rem 0 1.25rem; }
.mj-page h1 span { color: var(--mj-blue); }
.mj-page h2 { font-size: clamp(1.5rem, 2.1vw, 1.875rem); line-height: 1.3; margin: 0 0 1.125rem; }
.mj-page h3 { font-size: 1.125rem; line-height: 1.45; margin: 1.5rem 0 .625rem; }
.mj-page p { margin: 0 0 1rem; }
.mj-page a:not(.mj-button) { color: var(--mj-blue); text-decoration: none; }
.mj-page a:not(.mj-button):hover { text-decoration: underline; }
.mj-page :is(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--mj-blue); outline-offset: 4px; }
.mj-page strong { font-weight: 600; }
.mj-page ul, .mj-page ol { margin: 1rem 0 1.5rem; padding-left: 1.5rem; }
.mj-page ol { list-style: decimal; }
.mj-page li { padding-left: .25rem; margin: .5rem 0; }
.mj-eyebrow, .mj-label { color: var(--mj-blue); font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.mj-page .mj-eyebrow { margin-bottom: .625rem; }
.mj-small, .mj-page figcaption { color: var(--mj-muted); font-size: .8125rem; line-height: 1.65; }
.mj-hero { padding: 1.25rem 0 2.5rem; background: linear-gradient(180deg, var(--mj-bg), var(--mj-soft)); border-bottom: 1px solid var(--mj-line); }
.mj-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--mj-muted); margin-bottom: 2rem; }
.mj-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 2.5rem; align-items: center; }
.mj-lead { font-size: 1.0625rem; line-height: 1.8; }
.mj-hero-image { margin: 0; min-width: 0; }
.mj-hero-image img { border-radius: .625rem; box-shadow: 0 12px 32px #0f172a12; }
.mj-hero-image figcaption { margin-top: .625rem; }
.mj-page img { display: block; max-width: 100%; height: auto; }
.mj-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.5rem 0 1rem; }
.mj-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .625rem 1.125rem; border: 1px solid transparent; border-radius: .5rem; font-size: .875rem; line-height: 1.5; font-weight: 500; text-decoration: none !important; }
.mj-button-primary { background: #1d4ed8; color: #fff; }
.mj-button-primary:hover { background: #1e40af; }
.mj-button-secondary { background: var(--mj-bg); color: var(--mj-heading); border-color: var(--mj-line); }
.mj-button-secondary:hover { background: var(--mj-soft); }
.mj-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--mj-line); }
.mj-summary-grid strong { color: var(--mj-heading); }
.mj-summary-grid p { font-size: .875rem; margin: .25rem 0 0; }
.mj-guide-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 3rem; align-items: start; padding-top: 2.5rem; padding-bottom: 2rem; }
.mj-toc { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow-y: auto; }
.mj-toc nav { border-left: 1px solid var(--mj-line); padding-left: 1rem; }
.mj-toc p { color: var(--mj-heading); font-weight: 600; font-size: .875rem; }
.mj-page .mj-toc a { display: block; color: var(--mj-muted); font-size: .8125rem; line-height: 1.5; padding: .375rem 0; }
.mj-page .mj-toc a:hover { color: var(--mj-blue); }
.mj-article { min-width: 0; }
.mj-section { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--mj-line); scroll-margin-top: 90px; }
.mj-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.mj-two-col > * { min-width: 0; }
.mj-card { background: var(--mj-soft); border: 1px solid var(--mj-line); border-radius: .625rem; padding: 1.25rem; }
.mj-card h3 { margin: .375rem 0 .625rem; }
.mj-card p { font-size: .9375rem; }
.mj-card p:last-child { margin-bottom: 0; }
.mj-card a { font-size: .875rem; font-weight: 500; }
.mj-callout { background: var(--mj-tint); border-left: 3px solid #2563eb; border-radius: 0 .5rem .5rem 0; padding: 1.125rem 1.25rem; margin: 1.5rem 0; }
.mj-callout > strong { color: var(--mj-heading); }
.mj-callout p { margin: .375rem 0 0; }
.mj-page .mj-steps { padding-left: 1.5rem; }
.mj-steps li { padding-left: .375rem; margin-bottom: 1rem; }
.mj-steps li::marker { color: var(--mj-blue); font-weight: 600; }
.mj-screen { margin: 1.75rem 0; }
.mj-screen a { display: block; }
.mj-screen img { width: 100%; border: 1px solid var(--mj-line); border-radius: .5rem; background: #fff; }
.mj-screen figcaption { margin-top: .625rem; }
.mj-reading-pair { align-items: start; gap: 1.5rem; }
.mj-reading-pair h3 { margin-top: 0; }
.mj-reading-pair .mj-screen { margin: 0; }
.mj-prompt { border: 1px solid var(--mj-line); border-radius: .625rem; margin: 1.5rem 0; background: var(--mj-soft); }
.mj-prompt-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--mj-line); color: var(--mj-heading); font-size: .875rem; }
.mj-copy { flex-shrink: 0; min-height: 36px; padding: .375rem .75rem; border: 1px solid var(--mj-line); border-radius: .375rem; color: var(--mj-blue); background: var(--mj-bg); font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer; }
.mj-copy:hover { background: var(--mj-tint); }
.mj-prompt > p { margin: 0; padding: 1rem 1.125rem; font-size: .9375rem; }
.mj-copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mj-page .mj-flow { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 1.5rem 0; }
.mj-flow li { border-top: 2px solid #2563eb; padding: 1rem; margin: 0; background: var(--mj-soft); }
.mj-flow span { display: block; color: var(--mj-blue); font-size: .75rem; margin-bottom: .375rem; }
.mj-flow strong { color: var(--mj-heading); }
.mj-flow p { font-size: .875rem; line-height: 1.65; margin: .375rem 0 0; }
.mj-mobile-example { display: flex; flex-direction: column; justify-content: center; align-self: start; border: 1px solid var(--mj-line); border-radius: 1rem; padding: 1.5rem; margin-top: 1.5rem; background: var(--mj-soft); }
.mj-mobile-example .mj-label { margin-bottom: 1rem; font-size: .6875rem; }
.mj-mobile-question, .mj-mobile-followup { padding: 1rem; border-radius: .75rem .75rem .125rem .75rem; border: 1px solid #bfdbfe; background: var(--mj-tint); font-size: .9375rem; }
.dark .mj-mobile-question, .dark .mj-mobile-followup { border-color: #1e40af; }
.mj-execution-flow { display: grid; grid-template-columns: 1fr 30px 1fr; gap: .75rem; margin: 1.75rem 0; align-items: stretch; }
.mj-execution-side { padding: 1.25rem; border: 1px solid var(--mj-line); border-radius: .5rem; background: var(--mj-soft); }
.mj-execution-side h3 { margin-top: .375rem; }
.mj-execution-side p { font-size: .9375rem; }
.mj-execution-side > strong { font-size: .875rem; color: var(--mj-heading); }
.mj-execution-journal { background: var(--mj-tint); border-color: #93c5fd; }
.dark .mj-execution-journal { border-color: #1e40af; }
.mj-flow-arrow { align-self: center; justify-self: center; color: var(--mj-blue); font-size: 1.5rem; }
.mj-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--mj-line); border-radius: .5rem; margin: 1.5rem 0; }
.mj-page table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .875rem; line-height: 1.65; }
.mj-page th, .mj-page td { text-align: left; vertical-align: top; padding: 1rem; border-bottom: 1px solid var(--mj-line); overflow-wrap: anywhere; }
.mj-page thead { background: var(--mj-soft); color: var(--mj-heading); }
.mj-page th { font-weight: 600; }
.mj-page th:first-child { width: 25%; }
.mj-page tbody tr:last-child > * { border-bottom: 0; }
.mj-final-cta { background: var(--mj-tint); border: 1px solid var(--mj-line); padding: 1.5rem; border-radius: .625rem; margin-top: 1.5rem; }
.mj-final-cta h3 { margin-top: 0; }
.mj-final-cta p:last-child { margin-bottom: 0; }
.mj-faq details { border-bottom: 1px solid var(--mj-line); padding: 1rem 0; }
.mj-faq details:last-child { border-bottom: 0; }
.mj-faq summary { color: var(--mj-heading); font-weight: 500; cursor: pointer; padding-right: 1rem; }
.mj-faq-answer { padding-top: .875rem; font-size: .9375rem; }
.mj-faq-answer p { margin-bottom: .25rem; }
.mj-related-links { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; font-size: .9375rem; }
@media (max-width: 1050px) {
  .mj-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .mj-hero-image { max-width: 820px; }
  .mj-guide-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 1.5rem; }
  .mj-page .mj-flow { grid-template-columns: 1fr; gap: .75rem; }
}
@media (max-width: 800px) {
  .mj-guide-layout { display: block; }
  .mj-toc { position: static; max-height: none; margin-bottom: 2rem; }
  .mj-toc nav { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.25rem; }
  .mj-toc p { grid-column: 1 / -1; margin-bottom: .25rem; }
  .mj-summary-grid { gap: 1.25rem; }
}
@media (max-width: 600px) {
  .mj-container { width: calc(100% - 32px); }
  .mj-page h1 { font-size: 2rem; }
  .mj-hero { padding-bottom: 1.75rem; }
  .mj-breadcrumb { margin-bottom: 1.5rem; }
  .mj-summary-grid, .mj-two-col, .mj-related-links { grid-template-columns: 1fr; }
  .mj-summary-grid { gap: 1rem; margin-top: 1.5rem; }
  .mj-guide-layout { padding-top: 1.75rem; }
  .mj-section { margin-bottom: 2rem; padding-bottom: 2rem; }
  .mj-execution-flow { grid-template-columns: 1fr; }
  .mj-flow-arrow { transform: rotate(90deg); line-height: 1; }
  .mj-prompt-top { align-items: flex-start; }
  .mj-page table { min-width: 580px; }
  .mj-mobile-example { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mj-page *, .mj-page *::before, .mj-page *::after { scroll-behavior: auto !important; }
}