/* Default theme base styles. Brand-neutral; values from the ht-tokens palette.
   theme_config overrides arrive as --hm-* custom properties on :root. */
/* Fonts are self-hosted (SIL OFL 1.1, see fonts/OFL.txt); no third-party requests. */
@font-face { font-family: "Geist"; src: url("/theme/assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/theme/assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* shiro / sumi palette. Colour is scarce: shu (red) is only the mark and the primary CTA. */
  --hm-shu: #c23b22;
  --hm-shu-dark: #a02f1a;
  --hm-sumi: #141417;
  --hm-hai: #66666c;
  --hm-label: #8a8a8a;
  --hm-hair: #e6e6e6;
  --hm-shiro: #fafaf8;
  --hm-kinu: #e4e3de;
  --hm-kasumi: #f4f3ef;
  --hm-sumi-soft: #2a2a2f;

  --ht-fg: var(--hm-text);
  --ht-fg-muted: var(--hm-hai);
  --ht-line: var(--hm-hair);
  --ht-surface: var(--hm-bg);
  --ht-surface-2: var(--hm-shiro);

  /* theme_config overrides land on these. --hm-primary colours the primary CTA only. */
  --hm-primary: var(--hm-shu);
  --hm-bg: #ffffff;
  --hm-text: var(--hm-sumi);
  --hm-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --hm-font-heading: var(--hm-font);
  --hm-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hm-font-kanji: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", "Meiryo", sans-serif;
  --hm-radius-sm: 6px;
  --hm-radius-md: 10px;
  --hm-radius-lg: 16px;
  --hm-container: 75rem;
  --color-brand: var(--hm-primary);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--hm-bg);
  color: var(--hm-text);
  font-family: var(--hm-font);
  font-size: 1rem;
  line-height: 1.6;
  font-kerning: normal;
  font-feature-settings: "rlig" 1, "calt" 0, "ss11" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--hm-font-heading); font-weight: 450; line-height: 1.15; letter-spacing: -0.04em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -0.06em; }
h2 { font-size: clamp(1.875rem, 3vw, 2.5rem); line-height: 1.12; }
h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--hm-sumi); outline-offset: 3px; }
code, kbd, pre, samp { font-family: var(--hm-font-mono); }
img, svg, video { max-width: 100%; height: auto; }

.hm-container { width: 100%; max-width: var(--hm-container); margin: 0 auto; padding: 0 1.5rem; }

.hm-skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ht-fg); color: #fff; padding: 0.5rem 1rem;
}
.hm-skip:focus { left: 0.5rem; top: 0.5rem; }

/* Sections: hairline separated bands. */
.hm-section { padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid var(--hm-hair); }
.hm-section:first-child { border-top: 0; }

/* Buttons: pill, shu fill for the primary CTA, hairline outline for the rest. */
.hm-btn {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1.1rem; border-radius: 999px;
  background: var(--hm-primary); color: #fff; text-decoration: none; font-size: 0.875rem; font-weight: 500; line-height: 1.2;
  border: 1px solid var(--hm-primary); transition: background 0.15s, border-color 0.15s, filter 0.15s;
}
.hm-btn:hover { filter: brightness(0.88); }

/* Header + nav */
.hm-header {
  position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--hm-hair);
  background: color-mix(in srgb, var(--hm-bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.hm-header__inner { display: flex; align-items: center; gap: 1.5rem; height: 4rem; }
.hm-logo { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.65rem; color: var(--hm-text); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; text-decoration: none; }
.hm-logo__mark { font-family: var(--hm-font-kanji); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; text-transform: none; color: var(--hm-shu); }
.hm-logo img { display: block; }
.hm-nav { position: relative; margin-left: auto; font-size: 0.875rem; }
.hm-nav__toggle { cursor: pointer; list-style: none; padding: 0.4rem 0.2rem; font-weight: 500; color: var(--hm-hai); }
.hm-nav__toggle::-webkit-details-marker { display: none; }
.hm-nav__list, .hm-nav__sub { list-style: none; margin: 0; padding: 0; }
.hm-nav__list {
  position: absolute; right: 0; top: 100%; min-width: 14rem; z-index: 50;
  background: var(--hm-bg); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.5rem;
}
.hm-nav__list a { display: block; padding: 0.35rem 0.5rem; color: var(--hm-hai); text-decoration: none; }
.hm-nav__list a:hover { color: var(--hm-text); background: var(--ht-surface-2); border-radius: var(--hm-radius-sm); }
.hm-nav__sub { padding-left: 0.75rem; }

@media (min-width: 48rem) {
  .hm-nav > summary { display: none; }
  .hm-nav::details-content { content-visibility: visible; display: contents; } /* no-JS: list shows without [open] */
  .hm-nav > .hm-nav__list { display: flex; }
  .hm-nav > .hm-nav__list {
    position: static; border: 0; padding: 0; min-width: 0; background: transparent; gap: 1.75rem; align-items: center;
  }
  .hm-header__cta { min-height: 2.125rem; padding: 0 0.9rem; font-size: 0.8125rem; }
  .hm-nav__list > li { position: relative; }
  .hm-nav__sub {
    display: none; position: absolute; left: 0; top: 100%; min-width: 12rem; padding: 0.5rem;
    background: var(--hm-bg); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md);
  }
  .hm-nav__list > li:hover > .hm-nav__sub, .hm-nav__list > li:focus-within > .hm-nav__sub { display: block; }
}

/* Footer */
.hm-footer { border-top: 1px solid var(--hm-hair); background: var(--hm-bg); padding: 3rem 0 2.25rem; color: var(--hm-label); font-size: 0.8125rem; }
.hm-footer a { color: var(--hm-hai); text-decoration: none; }
.hm-footer a:hover { color: var(--hm-text); }
.hm-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.hm-footer__title { color: var(--hm-text); font-weight: 500; margin-bottom: 0.5rem; }
.hm-footer ul { list-style: none; margin: 0; padding: 0; }
.hm-footer li { margin: 0.25rem 0; }
.hm-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem !important; }
.hm-footer__legal { margin: 0; }

/* Gate + errors */
.hm-gate { border-top: 1px solid var(--hm-hair); background: var(--ht-surface-2); padding: 3rem 0; text-align: center; }
.hm-error { padding: 6rem 0; text-align: center; }
.hm-error__code { font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 0.5rem; }

/* Sanitised html / rich-text bodies */
.hm-html-body { line-height: 1.7; }
.hm-html-body > :first-child { margin-top: 0; }
.hm-html-body > :last-child { margin-bottom: 0; }
.hm-html-body h2 { margin-top: 2em; }
.hm-html-body h3 { margin-top: 1.5em; }
.hm-html-body ul, .hm-html-body ol { padding-left: 1.4em; margin: 0 0 1em; }
.hm-html-body li { margin: 0.25em 0; }
.hm-html-body blockquote { margin: 1.5em 0; padding: 0 1em; border-left: 3px solid var(--ht-line); color: var(--ht-fg-muted); }
.hm-html-body pre, .hm-html-body code { font-family: var(--hm-font-mono); font-size: 0.9em; }
.hm-html-body pre { background: var(--ht-surface-2); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 1rem; overflow-x: auto; }
.hm-html-body :not(pre) > code { background: var(--ht-surface-2); padding: 0.1em 0.35em; border-radius: var(--hm-radius-sm); }
.hm-html-body table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
.hm-html-body th, .hm-html-body td { border: 1px solid var(--ht-line); padding: 0.5rem 0.75rem; text-align: left; }
.hm-html-body details { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.75rem 1rem; margin: 0.75rem 0; }
.hm-html-body summary { cursor: pointer; font-weight: 600; }
.hm-html-body hr { border: 0; border-top: 1px solid var(--ht-line); margin: 2em 0; }
.hm-html-body img { border-radius: var(--hm-radius-md); }

.hm-prose, .hm-html-body { color: var(--hm-hai); }

@media (max-width: 47.99rem) {
  .hm-header__inner { gap: 0.75rem; }
  .hm-logo { letter-spacing: 0.18em; gap: 0.5rem; }
}

/* Shared section partials: section-head, code-panel. */
.hm-section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: 3rem; }
.hm-section-head__eyebrow { margin: 0 0 1rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-section-head__heading { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.hm-section-head__subheading { margin: 0; color: var(--hm-hai); font-size: 1.0625rem; line-height: 1.6; }
.hm-frame { border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); background: var(--hm-kasumi); overflow: hidden; }
.hm-frame__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--hm-hair); background: var(--hm-shiro); font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-hai); }
.hm-frame__dots { display: inline-flex; gap: 0.35rem; }
.hm-frame__dots i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--hm-kinu); }
.hm-frame__title { color: var(--hm-text); }
.hm-frame__meta { margin-left: auto; color: var(--hm-label); }
.hm-code { margin: 0; padding: 1.25rem; overflow-x: auto; font-size: 0.8125rem; line-height: 1.65; color: var(--hm-sumi-soft); tab-size: 2; }
.hm-code code { font-family: inherit; white-space: pre; }
.hm-tok--k { color: #5b4a8a; }
.hm-tok--s { color: #3f6e4a; }
.hm-tok--c { color: #9a9a9f; }
.hm-outs { display: flex; flex-wrap: wrap; gap: 1px; margin: 1rem 0 0; background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); overflow: hidden; }
.hm-outs > div { flex: 1 1 8rem; padding: 0.75rem 1rem; background: var(--hm-bg); }
.hm-outs dt { font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hm-label); }
.hm-outs dd { margin: 0.25rem 0 0; font-size: 0.9375rem; }
@media (max-width: 960px) { .hm-section-head { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } }

.hm-card-columns__grid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); overflow: hidden; }
@media (min-width: 64rem) {
  .hm-card-columns--cols-2 .hm-card-columns__grid { grid-template-columns: repeat(2, 1fr); }
  .hm-card-columns--cols-3 .hm-card-columns__grid { grid-template-columns: repeat(3, 1fr); }
  .hm-card-columns--cols-4 .hm-card-columns__grid { grid-template-columns: repeat(4, 1fr); }
}
.hm-card-columns__col { background: var(--hm-bg); padding: 2rem 1.75rem; }
.hm-card-columns__label { margin: 0 0 0.75rem; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-card-columns__title { margin: 0 0 0.5rem; font-size: 1.25rem; }
.hm-card-columns__description { margin: 0 0 1.25rem; color: var(--ht-fg-muted); }
.hm-card-columns__items { list-style: none; margin: 0; padding: 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; }
.hm-card-columns__items li { padding: 0.5rem 0; border-top: 1px dashed var(--hm-hair); color: var(--hm-text); }
.hm-card-columns__notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; margin-top: 1.5rem; padding: 1.5rem; background: var(--hm-shiro); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); }
.hm-card-columns__note-title { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; }
.hm-card-columns__note-text { margin: 0; font-size: 0.875rem; color: var(--ht-fg-muted); }

/* client_logos renders with the shared .hm-logo-strip styles (see logo_strip.css). */

.hm-comparison__sides { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); overflow: hidden; }
.hm-comparison__side { background: var(--hm-bg); padding: 2rem 1.75rem; }
.hm-comparison__side--positive { background: var(--hm-shiro); }
.hm-comparison__tag { margin: 0 0 0.75rem; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-comparison__side--positive .hm-comparison__tag { color: var(--hm-shu); }
.hm-comparison__title { margin: 0 0 1.25rem; font-size: 1.375rem; }
.hm-comparison__items { list-style: none; margin: 0; padding: 0; }
.hm-comparison__items li { position: relative; padding: 0.625rem 0 0.625rem 1.75rem; border-top: 1px solid var(--hm-hair); }
/* Glyphs are pseudo-elements so the canvas editor never edits them. */
.hm-comparison__items li::before { position: absolute; left: 0; top: 0.625rem; font-family: var(--hm-font-mono); }
.hm-comparison__side--negative .hm-comparison__items li { color: var(--hm-hai); text-decoration: line-through; }
.hm-comparison__side--negative .hm-comparison__items li::before { content: "\00d7"; color: var(--hm-label); }
.hm-comparison__side--positive .hm-comparison__items li::before { content: "\2713"; color: var(--hm-shu); }

.hm-contact-form { max-width: 40rem; }
.hm-contact-form--split { max-width: var(--hm-container); display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.hm-contact-form__subheading { color: var(--ht-fg-muted); }
.hm-form { display: grid; gap: 1rem; }
.hm-form__field { display: grid; gap: 0.35rem; }
.hm-form__label, .hm-form__group legend { font-weight: 600; }
.hm-form input[type="text"], .hm-form input[type="email"], .hm-form input[type="tel"], .hm-form textarea, .hm-form select {
  width: 100%; padding: 0.6rem 0.75rem; font: inherit; color: inherit; background: var(--hm-bg);
  border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md);
}
.hm-form__group { border: 0; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.hm-form__check { display: flex; gap: 0.5rem; align-items: baseline; }
.hm-form__help { color: var(--ht-fg-muted); }
.hm-form__submit { justify-self: start; cursor: pointer; font: inherit; font-size: 0.875rem; font-weight: 500; }
.hm-form__success { padding: 0.75rem 1rem; border-radius: var(--hm-radius-md); background: var(--ht-surface-2); border: 1px solid var(--ht-line); }
/* Honeypot: off-screen, not display:none, so naive bots still fill it. */
.hm-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 48rem) { .hm-contact-form--split { grid-template-columns: 1fr; } }

.hm-contact-info__heading { margin-bottom: 1.5rem; }
.hm-contact-info__body { display: grid; gap: 1.5rem; }
.hm-contact-info__address { font-style: normal; }
.hm-contact-info__line { display: block; }
.hm-contact-info__channels { list-style: none; margin: 0; padding: 0; }
.hm-contact-info__hours { margin: 0; }
.hm-contact-info__hours-row { display: flex; gap: 1rem; justify-content: space-between; max-width: 20rem; padding: 0.2rem 0; border-bottom: 1px solid var(--ht-line); }
.hm-contact-info__hours dt { font-weight: 600; }
.hm-contact-info__hours dd { margin: 0; color: var(--ht-fg-muted); }
.hm-contact-info__map { margin-top: 1.5rem; }
.hm-contact-info__map iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--hm-radius-md); }
@media (min-width: 48rem) {
  .hm-contact-info--inline .hm-contact-info__body { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}
.hm-contact-info--card .hm-contact-info__body { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.75rem; background: var(--ht-surface); }

/* .hm-prose is the shared rich-text flow styling (content, overview). */
.hm-prose > :last-child { margin-bottom: 0; }
.hm-prose img { border-radius: var(--hm-radius-md); }
.hm-prose ul, .hm-prose ol { padding-left: 1.4rem; margin: 0 0 1em; }
.hm-prose blockquote { margin: 0 0 1em; padding-left: 1rem; border-left: 3px solid var(--ht-line); color: var(--ht-fg-muted); }
.hm-content { max-width: 48rem; }
.hm-content__headline { margin-bottom: 0.75em; }

/* essay: sticky aside + long-form prose column. */
.hm-content--essay { max-width: var(--hm-container); display: grid; grid-template-columns: 16rem minmax(0, 44rem); gap: 3rem 5rem; align-items: start; }
.hm-content--essay .hm-content__aside { position: sticky; top: 6rem; }
.hm-content__glyph { display: block; font-family: var(--hm-font-kanji); font-size: 3.5rem; line-height: 1; color: var(--hm-shu); margin-bottom: 1rem; }
.hm-content__aside-text { margin: 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; line-height: 1.6; color: var(--hm-hai); }
.hm-content__eyebrow { margin: 0 0 1rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-content--essay .hm-prose { font-size: 1.0625rem; line-height: 1.7; }
.hm-content--essay .hm-prose h3 { margin: 2em 0 0.5em; font-size: 1.25rem; }
.hm-content--essay .hm-prose code { padding: 0.1em 0.35em; border-radius: var(--hm-radius-sm); background: var(--hm-kasumi); font-size: 0.9em; }
@media (max-width: 960px) {
  .hm-content--essay { grid-template-columns: minmax(0, 1fr); }
  .hm-content--essay .hm-content__aside { display: none; }
}

.hm-cta { text-align: center; padding-top: 1rem; padding-bottom: 1rem; }
.hm-cta__headline { max-width: 20ch; margin-inline: auto; }
.hm-cta__subheadline { max-width: 52ch; margin: 1rem auto 0; font-size: 1.0625rem; color: var(--hm-hai); }
.hm-cta__actions { margin: 1.25rem 0 0; }
.hm-cta--tinted { background: var(--ht-surface-2); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); padding: 3.5rem 1.5rem; }
.hm-cta--dark { background: var(--hm-sumi); color: #fff; border-radius: var(--hm-radius-lg); padding: 3.5rem 1.5rem; }
.hm-cta--dark h2 { color: #fff; }
.hm-cta--dark .hm-cta__subheadline { color: rgba(255, 255, 255, 0.8); }

.hm-faq { max-width: 48rem; }
.hm-faq__subheading { color: var(--ht-fg-muted); }
.hm-faq__item { border-bottom: 1px solid var(--ht-line); padding: 0.9rem 0; }
.hm-faq__question { cursor: pointer; font-weight: 500; }
.hm-faq__answer { margin-top: 0.6rem; color: var(--ht-fg-muted); }
.hm-faq--cards .hm-faq__list { display: grid; gap: 0.75rem; }
.hm-faq--cards .hm-faq__item { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.9rem 1.1rem; }

.hm-features__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-features__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-features__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.hm-features--cols-2 .hm-features__list { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
@media (min-width: 48rem) {
  .hm-features--cols-2 .hm-features__list { grid-template-columns: repeat(2, 1fr); }
  .hm-features--cols-3 .hm-features__list { grid-template-columns: repeat(3, 1fr); }
  .hm-features--cols-4 .hm-features__list { grid-template-columns: repeat(4, 1fr); }
}
.hm-features__item { background: var(--hm-bg); padding: 1.75rem 1.75rem 2rem; }
.hm-features__item:hover { background: var(--hm-shiro); }
.hm-features__icon { display: inline-block; font-size: 1.75rem; line-height: 1; margin-bottom: 0.75rem; }
.hm-features__title { margin-bottom: 0.35em; }
.hm-features__description { color: var(--ht-fg-muted); margin-bottom: 0.75em; }
.hm-features__link { font-weight: 600; }

.hm-features--centered .hm-features__header, .hm-features--centered .hm-features__item { text-align: center; }
.hm-features--centered .hm-features__header { margin-left: auto; margin-right: auto; }

/* bento: framed cells with number, category, description and a tag footer. */
.hm-features--bento .hm-features__list { border-radius: var(--hm-radius-lg); overflow: hidden; }
.hm-features--bento .hm-features__item { min-height: 236px; display: flex; flex-direction: column; gap: 0.5rem; position: relative; }
.hm-features--bento .hm-features__number { font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-label); }
.hm-features--bento .hm-features__category { font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-features--bento .hm-features__badge { position: absolute; top: 1.25rem; right: 1.25rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--hm-hair); background: var(--hm-kasumi); font-family: var(--hm-font-mono); font-size: 0.6875rem; color: var(--hm-hai); }
.hm-features__tags { margin-top: auto; padding-top: 1rem; font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-hai); }

/* hero — also defines .hm-btn--secondary, reused by other sections. */
.hm-btn--secondary { background: var(--hm-bg); color: var(--hm-text); border-color: var(--hm-hair); }
.hm-btn--secondary:hover { border-color: var(--hm-text); filter: none; }
.hm-hero { display: grid; gap: 3.5rem; align-items: center; }
.hm-section--hero { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 0; }
.hm-hero__headline { max-width: 16ch; margin: 0; }
.hm-hero--centered { text-align: center; justify-items: center; }
.hm-hero--centered .hm-hero__body { max-width: 48rem; }
.hm-hero--centered .hm-hero__headline { margin-inline: auto; }
.hm-hero--split { grid-template-columns: 1fr 1fr; }
.hm-hero__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-hero__subheadline { max-width: 68ch; margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.6; color: var(--hm-hai); }
.hm-hero--centered .hm-hero__subheadline { margin-inline: auto; }
.hm-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; align-items: center; }
.hm-hero--centered .hm-hero__actions { justify-content: center; }
.hm-hero__image { display: block; width: 100%; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); }
@media (max-width: 48rem) { .hm-hero--split { grid-template-columns: 1fr; } }

.hm-hero__chip { display: inline-block; margin-top: 1.25rem; padding: 0.4rem 0.75rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-sm); background: var(--hm-kasumi); font-size: 0.8125rem; color: var(--hm-sumi-soft); }
.hm-hero__media--panel { min-width: 0; text-align: left; }

.hm-html-body { overflow-wrap: anywhere; }
.hm-html-body > :last-child { margin-bottom: 0; }
.hm-html-body details { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.75rem 1rem; margin: 0 0 0.75rem; }
.hm-html-body summary { cursor: pointer; font-weight: 600; }
/* Bespoke html blocks that bring their own full-width section chrome: avoid doubling the band padding and rule. */
.hm-section--html:has(> .hm-container > .hm-html-body > section:only-child) { padding-block: 0; border-top: 0; }
.hm-section--html:has(> .hm-container > .hm-html-body > section:only-child) > .hm-container { max-width: none; padding: 0; }

.hm-link-directory__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-link-directory__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-link-directory__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-link-directory__columns { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.hm-link-directory__column-heading { font-size: 1rem; margin-bottom: 0.75rem; }
.hm-link-directory__links { list-style: none; margin: 0; padding: 0; }
.hm-link-directory__links li { margin: 0.35rem 0; }

.hm-logo-strip__heading { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); text-align: center; margin-bottom: 1.5rem; }
.hm-logo-strip__viewport { display: flex; overflow: hidden; }
.hm-logo-strip__track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; flex: 1 0 auto; }
.hm-logo-strip__item img { display: block; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: opacity 0.15s, filter 0.15s; }
.hm-logo-strip__item img:hover { filter: none; opacity: 1; }
.hm-logo-strip__item--sm img { height: 1.5rem; }
.hm-logo-strip__item--md img { height: 2.25rem; }
.hm-logo-strip__item--lg img { height: 3.25rem; }
/* Marquee: two identical tracks slide left by their own width, looping seamlessly. */
.hm-logo-strip--marquee .hm-logo-strip__track { flex-wrap: nowrap; justify-content: space-around; padding-right: 3rem; animation: hm-logo-marquee 40s linear infinite; }
.hm-logo-strip--marquee .hm-logo-strip__viewport:hover .hm-logo-strip__track { animation-play-state: paused; }
@keyframes hm-logo-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .hm-logo-strip--marquee .hm-logo-strip__track { animation: none; flex-wrap: wrap; padding-right: 0; }
  .hm-logo-strip__track--clone { display: none; }
}

.hm-overview { display: grid; gap: 2.5rem; align-items: center; }
.hm-overview--with-image { grid-template-columns: 1fr 1fr; }
.hm-overview__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-overview__subheading { font-size: 1.15rem; color: var(--ht-fg-muted); }
.hm-overview__items { margin: 1rem 0 0; padding-left: 1.2rem; }
.hm-overview__item + .hm-overview__item { margin-top: 0.35rem; }
.hm-overview__image { display: block; width: 100%; border-radius: var(--hm-radius-lg); }
@media (max-width: 48rem) { .hm-overview--with-image { grid-template-columns: 1fr; } }

.hm-pricing__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-pricing__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-pricing__tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: stretch; }
.hm-pricing__tier { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.75rem; background: var(--ht-surface); }
.hm-pricing__tier--popular { border-color: var(--hm-text); box-shadow: 0 0 0 1px var(--hm-text); }
.hm-pricing__badge { align-self: flex-start; background: var(--hm-text); color: var(--hm-bg); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.6rem; border-radius: 999px; margin-bottom: 0.75rem; }
.hm-pricing__description { color: var(--ht-fg-muted); }
.hm-pricing__price { margin: 0.5rem 0 1.25rem; }
.hm-pricing__amount { font-family: var(--hm-font-heading); font-size: 2.5rem; font-weight: 450; letter-spacing: -0.04em; }
.hm-pricing__currency { font-size: 1.25rem; font-weight: 600; margin-right: 0.1rem; vertical-align: 0.6em; }
.hm-pricing__period { color: var(--ht-fg-muted); margin-left: 0.15rem; }
.hm-pricing__features { list-style: none; margin: 0 0 1.5rem; padding: 0; flex: 1; }
.hm-pricing__feature { padding: 0.3rem 0 0.3rem 1.5rem; position: relative; }
.hm-pricing__feature::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; }
.hm-pricing__feature--excluded { color: var(--ht-fg-muted); text-decoration: line-through; }
.hm-pricing__feature--excluded::before { content: "\2715"; }
.hm-pricing__cta { text-align: center; }
.hm-pricing--table .hm-pricing__tiers { grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .hm-pricing--table .hm-pricing__tier { display: grid; grid-template-columns: 1.2fr 1fr 2fr auto; gap: 0 1.5rem; align-items: center; }
  .hm-pricing--table .hm-pricing__price, .hm-pricing--table .hm-pricing__features { margin: 0; }
  .hm-pricing--table .hm-pricing__badge { grid-column: 1 / -1; }
}

.hm-process { max-width: 52rem; }
.hm-process__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-process__subheading { color: var(--ht-fg-muted); }
.hm-process__steps { list-style: none; counter-reset: hm-step; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.hm-process__step { counter-increment: hm-step; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; }
.hm-process__marker {
  display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; min-width: 2.5rem; padding: 0 0.4rem;
  border-radius: 999px; border: 1px solid var(--hm-hair); background: var(--hm-bg); color: var(--hm-text); font-family: var(--hm-font-mono); font-size: 0.8125rem; font-weight: 500;
}
.hm-process__marker:empty::before { content: counter(hm-step); }
.hm-process__title { margin-bottom: 0.25rem; }
.hm-process__description { color: var(--ht-fg-muted); }

/* cards: lifts the reading-width cap and adds a command box per step. */
.hm-process--cards { max-width: none; }
.hm-process--cards .hm-process__steps { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); overflow: hidden; }
.hm-process--cards .hm-process__step { display: block; background: var(--hm-bg); padding: 1.75rem; }
.hm-process--cards .hm-process__marker { margin-bottom: 1rem; border-radius: var(--hm-radius-sm); }
.hm-process--cards .hm-code { margin-top: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); background: var(--hm-kasumi); }

.hm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 5rem; align-items: start; }
.hm-split--wide-code { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hm-split--text-right .hm-split__text { order: 2; }
.hm-split__heading { margin: 0 0 1rem; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.hm-split__lede { color: var(--ht-fg-muted); font-size: 1.0625rem; line-height: 1.65; margin-bottom: 1.5rem; }
.hm-split__defs { margin: 0 0 1.5rem; border-top: 1px solid var(--hm-hair); }
.hm-split__defs > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--hm-hair); }
.hm-split__defs dt { font-family: var(--hm-font-mono); font-size: 0.8125rem; color: var(--hm-text); }
.hm-split__defs dd { margin: 0; color: var(--ht-fg-muted); }
.hm-split__chips { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); overflow: hidden; }
.hm-split__chips li { background: var(--hm-bg); padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.hm-split__chip { font-size: 0.8125rem; color: var(--hm-text); }
.hm-split__caption { font-size: 0.8125rem; color: var(--hm-hai); }
.hm-split__footnote { font-size: 0.9375rem; color: var(--hm-hai); }
.hm-split__footnote code, .hm-split__lede code { padding: 0.1em 0.35em; border-radius: var(--hm-radius-sm); background: var(--hm-kasumi); font-size: 0.9em; }
@media (max-width: 960px) {
  .hm-split, .hm-split--wide-code { grid-template-columns: minmax(0, 1fr); }
  .hm-split--text-right .hm-split__text { order: 0; }
}

.hm-stats__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-stats__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-stats__list { display: grid; gap: 1.5rem; margin: 0; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
@media (min-width: 48rem) {
  .hm-stats--cols-2 .hm-stats__list { grid-template-columns: repeat(2, 1fr); }
  .hm-stats--cols-3 .hm-stats__list { grid-template-columns: repeat(3, 1fr); }
  .hm-stats--cols-4 .hm-stats__list { grid-template-columns: repeat(4, 1fr); }
}
.hm-stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.25rem; }
.hm-stats__value { margin: 0; display: flex; flex-direction: column; }
.hm-stats__number { font-family: var(--hm-font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 450; line-height: 1.1; letter-spacing: -0.05em; }
.hm-stats__label { color: var(--hm-label); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.hm-stats__description { color: var(--ht-fg-muted); font-size: 0.9rem; }
.hm-stats--cards .hm-stats__item { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.5rem; background: var(--ht-surface-2); }
.hm-stats--bordered .hm-stats__item { border-left: 1px solid var(--hm-text); padding-left: 1rem; }

.hm-sticky-sidebar { display: grid; gap: 2rem; }
.hm-sticky-sidebar__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-sticky-sidebar__aside { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.5rem; background: var(--ht-surface-2); align-self: start; }
.hm-sticky-sidebar__facts { margin: 0 0 1.25rem; }
.hm-sticky-sidebar__fact { padding: 0.5rem 0; border-bottom: 1px solid var(--ht-line); }
.hm-sticky-sidebar__fact dt { font-size: 0.85rem; color: var(--ht-fg-muted); }
.hm-sticky-sidebar__fact dd { margin: 0; font-weight: 600; }
.hm-sticky-sidebar__cta { display: block; text-align: center; }
@media (min-width: 60rem) {
  .hm-sticky-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; }
  .hm-sticky-sidebar__aside { position: sticky; top: 1.5rem; }
}

.hm-section--tag_strip { padding: 1.75rem 0; }
.hm-tag-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.hm-tag-strip__label { font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-tag-strip__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; }
.hm-tag-strip__items li { padding: 0 1.25rem; border-left: 1px solid var(--hm-hair); font-size: 0.9375rem; color: var(--hm-text); }
.hm-tag-strip__items li:first-child { padding-left: 0; border-left: 0; }

.hm-team__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-team__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-team__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
@media (min-width: 48rem) {
  .hm-team--cols-2 .hm-team__list { grid-template-columns: repeat(2, 1fr); }
  .hm-team--cols-3 .hm-team__list { grid-template-columns: repeat(3, 1fr); }
  .hm-team--cols-4 .hm-team__list { grid-template-columns: repeat(4, 1fr); }
}
.hm-team__photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--hm-radius-md); margin-bottom: 1rem; }
.hm-team__name { margin-bottom: 0.15em; }
.hm-team__title { color: var(--ht-fg-muted); margin-bottom: 0.5em; }
.hm-team__bio { font-size: 0.95rem; }
.hm-team__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.9rem; }
.hm-team--cards .hm-team__member { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.25rem; background: var(--ht-surface); }
.hm-team--centered .hm-team__member, .hm-team--centered .hm-team__header { text-align: center; }
.hm-team--centered .hm-team__header { margin-left: auto; margin-right: auto; }
.hm-team--centered .hm-team__photo { width: 8rem; height: 8rem; border-radius: 50%; margin-left: auto; margin-right: auto; }
.hm-team--centered .hm-team__social { justify-content: center; }
.hm-team--simple .hm-team__photo { display: none; }

.hm-testimonials__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-testimonials__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-testimonials__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.hm-testimonials__item { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.5rem; background: var(--ht-surface); }
.hm-testimonials__figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.hm-testimonials__rating { margin: 0 0 0.75rem; letter-spacing: 0.05em; }
.hm-testimonials__quote { margin: 0 0 1.25rem; flex: 1; font-size: 1.05rem; color: var(--hm-text); }
.hm-testimonials__author { display: flex; align-items: center; gap: 0.75rem; }
.hm-testimonials__avatar { border-radius: 50%; object-fit: cover; flex: none; }
.hm-testimonials__person { display: flex; flex-direction: column; line-height: 1.3; }
.hm-testimonials__role { color: var(--ht-fg-muted); font-size: 0.9rem; }
.hm-testimonials--featured .hm-testimonials__list { grid-template-columns: 1fr; max-width: 48rem; margin: 0 auto; }
.hm-testimonials--featured .hm-testimonials__item { border: 0; background: transparent; padding: 1rem 0; text-align: center; }
.hm-testimonials--featured .hm-testimonials__quote { font-size: 1.5rem; font-family: var(--hm-font-heading); line-height: 1.35; }
.hm-testimonials--featured .hm-testimonials__author { justify-content: center; text-align: left; }

.hm-value-proposition { max-width: 44rem; text-align: center; }
.hm-value-proposition__paragraph { font-size: 1.2rem; color: var(--ht-fg-muted); margin-bottom: 0; }

/* GENERATED by tools/theme-css.sh - do not edit. */
@layer theme, base, components, utilities;
/* ==== reset.css ==== */
/* Heading / p / a reset that Next ships in @layer base (so every unlayered source wins over it).
 * Here it is unlayered, because core base.css (unlayered, earlier) styles bare h1-h4, p and a and
 * would beat a layered reset. It must come BEFORE the copied Next sources: japan.css's
 * `:where(.mjdj-jp) h2 { margin-block-end }` has the same (0,0,1) specificity, so source order
 * is the only thing that lets it win, as the layer order does in Next. */
h1, h2, h3, h4, h5, h6 { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; margin: 0; text-wrap: initial; }
p { margin: 0; text-wrap: initial; }
a { color: inherit; text-decoration: inherit; text-decoration-thickness: initial; text-underline-offset: initial; }

/* ==== app/mojodojo/palette.css ==== */
/*
 * mojodojo palette (ported from siacms mjdj-palette.css).
 *
 * Emitted into /plugin.css as real :root variables (`@theme static`) because the
 * generated plugin entry imports Tailwind's theme as `reference` only.
 * Deliberately NO `--color-*: initial`: that would also wipe the reference theme
 * and silently drop utilities used by unmodified core components. Instead the
 * ramps below are overridden and the blues core components use are aliased onto
 * the mojo achromatic roles (core locale-switcher selected state: bg-blue-100
 * ring-blue-500 text-blue-700 -> surface-2 / fg).
 */
:root {
  --color-white: #fff;
  --color-black: #000;
  --color-brand: #d32222;
  --color-brand-dark: #b01b1b;

  --color-gray-50: oklch(0.985 0 0);
  --color-gray-100: oklch(0.97 0 0);
  --color-gray-200: oklch(0.922 0 0);
  --color-gray-300: oklch(0.87 0 0);
  --color-gray-400: oklch(0.708 0 0);
  --color-gray-500: oklch(0.556 0 0);
  --color-gray-600: oklch(0.439 0 0);
  --color-gray-700: oklch(0.371 0 0);
  --color-gray-800: oklch(0.269 0 0);
  --color-gray-900: oklch(0.205 0 0);
  --color-gray-950: oklch(0.145 0 0);

  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-red-900: oklch(39.6% 0.141 25.723);
  --color-green-50: oklch(98.2% 0.018 155.826);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-300: oklch(87.1% 0.15 154.449);
  --color-green-400: oklch(79.2% 0.209 151.711);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-amber-700: oklch(55.5% 0.163 48.998);

  /* Core components use blue; map onto the mojo roles (tokens.css). */
  --color-blue-50: var(--mjdj-surface-2);
  --color-blue-100: var(--mjdj-surface-2);
  --color-blue-500: var(--mjdj-fg);
  --color-blue-600: var(--mjdj-fg);
  --color-blue-700: var(--mjdj-fg);
}

/* ==== app/mojodojo/tokens.css ==== */
/*
 * mojodojo token layer (ported from siacms mjdj-tokens.css), imported by
 * ../mojodojo-theme.css only. T3 introduced these at the values the site
 * rendered then; T7 set the mjdj look (mojo-homepage-japan.html) here, as
 * values, without touching class names in components.
 *
 */

@layer theme {
  :root, :host {
    /* Colour roles: achromatic, from the mockup (vercel-brand.css ramp). */
    --mjdj-fg-strong: oklch(0.145 0 0);
    --mjdj-fg: oklch(0.205 0 0);
    --mjdj-fg-muted: oklch(0.42 0 0);
    /* #737373, not the mockup's #8a8a8a: 11-13px text needs 4.5:1 (WCAG AA). */
    --mjdj-fg-subtle: #737373;
    --mjdj-line: #e6e6e6;
    --mjdj-line-strong: oklch(0.87 0 0);
    --mjdj-surface: #ffffff;
    --mjdj-surface-2: oklch(0.984 0 0);
    --mjdj-brand: #d32222;
    --mjdj-brand-dark: #b01b1b;
    /* Tailwind's bg-brand / text-brand / … read these (theme-shared.css). */
    --color-brand: var(--mjdj-brand);
    --color-brand-dark: var(--mjdj-brand-dark);
    --mjdj-ok: oklch(0.527 0.154 150.069);        /* green-700 */
    --mjdj-warn: oklch(0.555 0.163 48.998);       /* amber-700 */
    --mjdj-error: var(--mjdj-brand);

    /* Tailwind's own scale, moved onto the mjdj look for public pages.
       The gray ramp now lives in mjdj-palette.css (T10). admin.css loads
       later on admin routes and re-declares every variable admin uses. */
    --font-weight-bold: 600;
    --font-weight-extrabold: 600;
    --container-7xl: 75rem;
    --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

    /* Type scale. Consumed from T8 on; nothing uses these in T3. */
    --mjdj-text-label: 11px;      --mjdj-leading-label: 16px;
    --mjdj-text-meta: 13px;       --mjdj-leading-meta: 20px;
    --mjdj-text-compact: 14px;    --mjdj-leading-compact: 22px;
    --mjdj-text-body: 16px;       --mjdj-leading-body: 26px;
    --mjdj-text-lede: 18px;       --mjdj-leading-lede: 28px;
    --mjdj-text-subsection: 20px; --mjdj-leading-subsection: 26px;
    --mjdj-text-section: 24px;    --mjdj-leading-section: 32px;
    --mjdj-text-title: 32px;      --mjdj-leading-title: 40px;
    --mjdj-text-page: 40px;       --mjdj-leading-page: 48px;
    --mjdj-text-display: 48px;    --mjdj-leading-display: 56px;
    --mjdj-weight-heading: 600;

    /* Layout. */
    --mjdj-content-width: 1200px;
    --mjdj-reading-width: 68ch;
    --mjdj-section-pad: clamp(56px, 7vw, 96px);
    --mjdj-radius-control: 6px;
    --mjdj-radius-card: 12px;
    --mjdj-radius-media: 12px;

    /* Eyebrow label: the mockup's .mj-label (11px / 600 / 0.12em), in fg-subtle for contrast. */
    --mjdj-eyebrow-color: var(--mjdj-fg-subtle);
    --mjdj-eyebrow-tracking: 0.12em;
  }
}

/* Roles as Tailwind utilities: text-mjdj-fg, border-mjdj-line, bg-mjdj-surface-2, … */
:root {
  --color-mjdj-fg-strong: var(--mjdj-fg-strong);
  --color-mjdj-fg: var(--mjdj-fg);
  --color-mjdj-fg-muted: var(--mjdj-fg-muted);
  --color-mjdj-fg-subtle: var(--mjdj-fg-subtle);
  --color-mjdj-line: var(--mjdj-line);
  --color-mjdj-line-strong: var(--mjdj-line-strong);
  --color-mjdj-surface: var(--mjdj-surface);
  --color-mjdj-surface-2: var(--mjdj-surface-2);
  --color-mjdj-ok: var(--mjdj-ok);
  --color-mjdj-warn: var(--mjdj-warn);
  --color-mjdj-error: var(--mjdj-error);

  --text-mjdj-label: var(--mjdj-text-label);
  --text-mjdj-label--line-height: var(--mjdj-leading-label);
  --text-mjdj-meta: var(--mjdj-text-meta);
  --text-mjdj-meta--line-height: var(--mjdj-leading-meta);
  --text-mjdj-compact: var(--mjdj-text-compact);
  --text-mjdj-compact--line-height: var(--mjdj-leading-compact);
  --text-mjdj-body: var(--mjdj-text-body);
  --text-mjdj-body--line-height: var(--mjdj-leading-body);
  --text-mjdj-lede: var(--mjdj-text-lede);
  --text-mjdj-lede--line-height: var(--mjdj-leading-lede);
  --text-mjdj-subsection: var(--mjdj-text-subsection);
  --text-mjdj-subsection--line-height: var(--mjdj-leading-subsection);
  --text-mjdj-section: var(--mjdj-text-section);
  --text-mjdj-section--line-height: var(--mjdj-leading-section);
  --text-mjdj-title: var(--mjdj-text-title);
  --text-mjdj-title--line-height: var(--mjdj-leading-title);
  --text-mjdj-page: var(--mjdj-text-page);
  --text-mjdj-page--line-height: var(--mjdj-leading-page);
  --text-mjdj-display: var(--mjdj-text-display);
  --text-mjdj-display--line-height: var(--mjdj-leading-display);
}

/* Primitives. Tailwind emits an @utility only where it is used. */
.mjdj-eyebrow {
  font-size: var(--mjdj-text-label);
  line-height: var(--mjdj-leading-label);
  font-weight: 600;
  letter-spacing: var(--mjdj-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--mjdj-eyebrow-color);
}

.mjdj-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--mjdj-brand);
}

.mjdj-container {
  width: min(100% - 48px, var(--mjdj-content-width));
  margin-inline: auto;
}

.mjdj-section {
  padding-block: var(--mjdj-section-pad);
  border-top: 1px solid var(--mjdj-line);
}

.mjdj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 16px;
  border: 1px solid var(--mjdj-line);
  border-radius: var(--mjdj-radius-control);
  background: var(--mjdj-surface);
  color: var(--mjdj-fg);
  font-size: var(--mjdj-text-compact);
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms, border-color 150ms, color 150ms;
  &:hover { border-color: var(--mjdj-line-strong); background: var(--mjdj-surface-2); }
  &:focus-visible { outline: 2px solid var(--mjdj-fg); outline-offset: 2px; }
}

.mjdj-btn-primary {
  background: var(--mjdj-brand);
  border-color: var(--mjdj-brand);
  color: #fff;
  &:hover { background: var(--mjdj-brand-dark); border-color: var(--mjdj-brand-dark); color: #fff; }
}

/* Form fields. A component class, not a utility: layout and state utilities
   on the element (w-full, flex-1, an error border-red-500) still win. The
   public build has no @tailwindcss/forms (T6), so this is the only field
   styling public pages get. */
@layer components {
  .mjdj-input {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--mjdj-line-strong);
    border-radius: var(--mjdj-radius-control);
    background-color: var(--mjdj-surface);
    color: var(--mjdj-fg);
    font: inherit;
    font-size: var(--mjdj-text-compact);
    line-height: 22px;
    appearance: none;
    transition: border-color 150ms, box-shadow 150ms;

    &::placeholder { color: var(--mjdj-fg-subtle); opacity: 1; }
    &:hover { border-color: var(--mjdj-fg-subtle); }
    &:focus { outline: none; border-color: var(--mjdj-fg); box-shadow: 0 0 0 1px var(--mjdj-fg); }
    &:disabled { background-color: var(--mjdj-surface-2); color: var(--mjdj-fg-subtle); cursor: not-allowed; }
    &[aria-invalid="true"] { border-color: var(--mjdj-error); }
    &[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--mjdj-error); }

    @media (pointer: coarse) { min-height: 44px; font-size: 16px; }
  }
  textarea.mjdj-input { min-height: 0; resize: vertical; } /* rows= decides the height */
  select.mjdj-input {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
  }
  /* Compact variant for inline filter controls (blog, case-study filters). */
  .mjdj-input.mjdj-input-compact {
    width: auto;
    min-height: 32px;
    padding: 5px 10px;
    font-size: var(--mjdj-text-meta);
    line-height: 20px;
  }
  select.mjdj-input.mjdj-input-compact { padding-right: 30px; background-position: right 8px center; background-size: 16px 16px; }
  /* Checkboxes and radios stay native (no forms plugin) and take the brand. */
  input[type="checkbox"], input[type="radio"] { accent-color: var(--mjdj-brand); }
}

/* Radii. Core's PublicSiteWrapper injects an UNLAYERED inline <style>
   (:root{--radius-sm:4px;--radius-md:8px;--radius-lg:16px}) from theme_config, which
   beats any layered rule, so this override is unlayered and more specific
   (#main-content is rendered by the wrapper, replacing legacy [data-mjdj-root]). */
:root:has(#main-content) {
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
}

/* Geist Mono: core's root layout only loads Geist Sans + Inter, and there is no
   root-layout font slot, so ship the variable font with the plugin. */
@font-face {
  font-family: "Geist Mono";
  src: url("/theme/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==== app/mojodojo/prose.css ==== */
/*
 * mojodojo prose — the public site's one article style (ported from siacms
 * mjdj-prose.css). Core public.css/plugin.css carry no typography plugin.
 *
 * Everything reads mjdj tokens, so T7's value flip restyles articles too.
 * Layered as components: above Tailwind's preflight (base), below utilities,
 * so a utility on the prose element or on stored-HTML children still wins,
 * and below the unlayered :is(.prose, .mjdj-prose) rules in site-rules.css
 * (lists, tables, inline code, WordPress blocks). :where() keeps the element
 * rules at the specificity of .mjdj-prose alone.
 */
@layer components {
/* `.prose` is aliased: core public components still emit the typography-plugin class. */
.mjdj-prose, .prose {
  color: var(--mjdj-fg-muted);
  font-size: var(--mjdj-text-body);
  line-height: 1.7;
  overflow-wrap: break-word;

  & > :first-child { margin-top: 0; }
  & > :last-child { margin-bottom: 0; }

  & :where(p, ul, ol, blockquote, pre, figure, table, dl) { margin-block: 0 1.25em; }
  & :where(li) { margin-block: 0.4em; }
  & :where(li > p) { margin-block: 0.4em; }
  & :where(li > ul, li > ol) { margin-block: 0.4em; }

  & :where(h1, h2, h3, h4, h5, h6) {
    color: var(--mjdj-fg);
    font-weight: var(--mjdj-weight-heading);
    letter-spacing: -0.02em;
  }
  & :where(h1) { font-size: var(--mjdj-text-title); line-height: var(--mjdj-leading-title); margin: 0 0 0.6em; }
  & :where(h2) { font-size: var(--mjdj-text-section); line-height: var(--mjdj-leading-section); margin: 2em 0 0.7em; }
  & :where(h3) { font-size: var(--mjdj-text-subsection); line-height: var(--mjdj-leading-subsection); margin: 1.7em 0 0.6em; }
  & :where(h4, h5, h6) { font-size: var(--mjdj-text-body); line-height: var(--mjdj-leading-body); margin: 1.5em 0 0.5em; }
  & :where(h2 + *, h3 + *, h4 + *) { margin-top: 0; }

  & :where(strong, b) { color: var(--mjdj-fg); font-weight: 600; }

  /* Links: monochrome with a quiet underline (decision D3). */
  & :where(a) {
    color: var(--mjdj-fg);
    text-decoration: underline;
    text-decoration-color: var(--mjdj-line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
  }
  & :where(a:hover) { text-decoration-color: var(--mjdj-fg); }

  & :where(blockquote) {
    border-left: 2px solid var(--mjdj-brand);
    padding-left: 1em;
    color: var(--mjdj-fg);
  }
  & :where(blockquote p:last-child) { margin-bottom: 0; }

  & :where(img, video) {
    max-width: 100%;
    height: auto;
    border-radius: var(--mjdj-radius-media);
  }
  & :where(figure) { margin-inline: 0; }
  & :where(figcaption) {
    margin-top: 0.6em;
    font-size: var(--mjdj-text-meta);
    line-height: var(--mjdj-leading-meta);
    color: var(--mjdj-fg-subtle);
  }

  & :where(hr) { border: 0; border-top: 1px solid var(--mjdj-line); margin-block: 2.5em; }

  & :where(pre) {
    overflow-x: auto;
    padding: 1em 1.25em;
    border: 1px solid var(--mjdj-line);
    border-radius: var(--mjdj-radius-control);
    background: var(--mjdj-surface-2);
    color: var(--mjdj-fg);
    font-size: var(--mjdj-text-compact);
    line-height: 1.6;
  }

  & :where(table) { width: 100%; border-collapse: collapse; font-size: var(--mjdj-text-compact); }
  & :where(th, td) {
    padding: 9px 12px;
    border-bottom: 1px solid var(--mjdj-line);
    text-align: left;
    vertical-align: top;
  }
  & :where(th) { color: var(--mjdj-fg); font-weight: 600; }
}

/* Internal links injected by the linking system outside article bodies
   (FAQ answers, callouts). Admin keeps its blue rule in admin-rules.css. */
:where(a.internal-link) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--mjdj-line-strong);
  text-underline-offset: 3px;
  &:hover { text-decoration-color: currentColor; }
}
}

/* ==== app/mojodojo/prose-rules.css ==== */
/*
 * Unlayered twins of core site-rules.css `.prose` rules for `.mjdj-prose`
 * (WordPress blocks, lists, tiptap tables, inline code). Generated from siacms
 * site-rules.css: every top-level rule mentioning .mjdj-prose, verbatim.
 * Same specificity as core's `.prose` rules and emitted later (plugin.css
 * follows public.css), so these win where both match.
 */

:is(.prose, .mjdj-prose) .wp-block-media-text {
  display: grid;
  align-items: center;
  gap: 2rem;
}

:is(.prose, .mjdj-prose) .wp-block-media-text.has-media-on-the-right {
  direction: ltr;
}

:is(.prose, .mjdj-prose) .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
  order: 1;
}

:is(.prose, .mjdj-prose) .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
  order: 2;
}

:is(.prose, .mjdj-prose) .wp-block-media-text__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem;
}

:is(.prose, .mjdj-prose) .wp-block-media-text__content {
  padding: 0;
}

@media (max-width: 768px) {
  :is(.prose, .mjdj-prose) .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 1fr !important;
  }
}

:is(.prose, .mjdj-prose) .wp-block-columns {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

:is(.prose, .mjdj-prose) .wp-block-column {
  flex: 1;
  min-width: 200px;
}

:is(.prose, .mjdj-prose) img.img-landscape {
  width: min(960px, calc(100vw - 3rem));
  max-width: none;
  height: auto;
  margin-left: 50%;
  transform: translateX(-50%);
}

:is(.prose, .mjdj-prose) img.img-portrait {
  max-width: 380px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

:is(.prose, .mjdj-prose) ul {
  padding-left: 1.25rem;
}

:is(.prose, .mjdj-prose) ul > li {
  list-style-type: '–  ';
  break-inside: avoid;
}

:is(.prose, .mjdj-prose) ul > li::marker {
  color: #DC2626;
  font-weight: 600;
}

:is(.prose, .mjdj-prose) ul ul > li::marker {
  color: #f87171;
}

:is(.prose, .mjdj-prose) ul:has(> li:nth-child(10)) {
  columns: 2;
  column-gap: 2.5rem;
}

@media (max-width: 768px) {
  :is(.prose, .mjdj-prose) ul:has(> li:nth-child(10)) {
    columns: 1;
  }
}

:is(.prose, .mjdj-prose) ol {
  padding-left: 2rem;
  counter-reset: item;
}

:is(.prose, .mjdj-prose) ol > li {
  counter-increment: item;
}

:is(.prose, .mjdj-prose) ol > li::marker {
  content: counter(item) '.  ';
  color: #DC2626;
  font-weight: 600;
}

:is(.prose, .mjdj-prose) .tiptap-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #E5E5E5;
  margin: 2rem 0;
  font-size: 13px;
  line-height: 1.5;
}

:is(.prose, .mjdj-prose) .tiptap-table th,
:is(.prose, .mjdj-prose) .tiptap-table td {
  border: 1px solid #E5E5E5;
  padding: 9px 12px;
  vertical-align: top;
  text-align: left;
}

:is(.prose, .mjdj-prose) .tiptap-table thead th,
:is(.prose, .mjdj-prose) .tiptap-table tbody tr:first-child th {
  background: #FAFAFA;
  color: #525252;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

:is(.prose, .mjdj-prose) .tiptap-table tbody tr:first-child th {
  border-bottom: 1px solid #D4D4D4;
}

:is(.prose, .mjdj-prose) .tiptap-table td[style*="right"],
:is(.prose, .mjdj-prose) .tiptap-table th[style*="right"] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

:is(.prose, .mjdj-prose) .tiptap-table tbody tr:hover td {
  background: #FAFAFA;
}

:is(.prose, .mjdj-prose) .tiptap-table tbody td:first-child strong {
  color: #0A0A0A;
}

:is(.prose, .mjdj-prose) .tiptap-table p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

:is(.prose, .mjdj-prose) .table-scroll {
  overflow-x: auto;
  margin: 2rem 0;
  -webkit-overflow-scrolling: touch;
}

:is(.prose, .mjdj-prose) .table-scroll > .tiptap-table {
  margin: 0;
  min-width: 34rem;
}

:is(.prose, .mjdj-prose) code {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.875em;
  font-weight: 500;
  color: #262626;
  white-space: nowrap;
}

:is(.prose, .mjdj-prose) .tiptap-table code {
  border: none;
  background: transparent;
  padding: 0;
  color: #262626;
  white-space: normal;
}

:is(.prose, .mjdj-prose) .tiptap-table th code {
  text-transform: none;
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 500;
}

:is(.prose, .mjdj-prose) pre code {
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
  white-space: pre;
}


/*
 * Links. Core site-rules.css ships blue `.prose a` / `a.internal-link` rules
 * (unlayered) into the public bundle; the mojo site is monochrome (decision D3).
 * `revert-layer` rolls the unlayered declaration back to the layered cascade, so
 * prose.css (components layer) and Tailwind utilities on the anchor win again.
 */
#main-content :is(.prose, .mjdj-prose) a {
  color: revert-layer;
  text-decoration: revert-layer;
  transition: revert-layer;
}
#main-content :is(.prose, .mjdj-prose) a:hover {
  text-decoration: revert-layer;
  text-decoration-color: revert-layer;
}
#main-content a.internal-link,
#main-content :is(.prose, .mjdj-prose) a.internal-link {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-color: var(--mjdj-line-strong) !important;
  text-underline-offset: 3px !important;
}
#main-content a.internal-link:hover,
#main-content :is(.prose, .mjdj-prose) a.internal-link:hover {
  text-decoration-color: currentColor !important;
}

/* ==== components/public/mojodojo/japan/japan.css ==== */
/* Japan/Geist section styles. GENERATED by tmp/jp_css.py from assets/vercel-brand.css
 * and the <style> blocks shared by the preview pages. Page-specific blocks travel with the
 * page (mjdj_html css). Do not hand-edit; see RUNBOOK-japan-live.md. */
.mjdj-jp{color-scheme:light}
@layer base{:where(.mjdj-jp) section a:where(:any-link){text-decoration-line:underline}:where(.mjdj-jp) section ul{list-style-type:disc}:where(.mjdj-jp) section ol{list-style-type:decimal}:where(.mjdj-jp) section ul ul{list-style-type:circle}}
:where(.mjdj-jp){color-scheme: light;
  --jp-font-sans: var(--font-geist-sans, var(--font-sans, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));
  --jp-font-mono: var(--font-geist-mono, var(--font-mono, "Geist Mono", "SFMono-Regular", Consolas, monospace));
  --jp-background-100: oklch(1 0 0);
  --jp-background-200: oklch(0.984 0 0);
  --jp-gray-100: oklch(0.961 0 0);
  --jp-gray-200: oklch(0.94 0 0);
  --jp-gray-300: oklch(0.925 0 0);
  --jp-gray-400: oklch(0.937 0 0);
  --jp-gray-500: oklch(0.836 0 0);
  --jp-gray-600: oklch(0.732 0 0);
  --jp-gray-700: oklch(0.65 0 0);
  --jp-gray-800: oklch(0.59 0 0);
  --jp-gray-900: oklch(0.42 0 0);
  --jp-gray-1000: oklch(0.205 0 0);
  --jp-gray-alpha-100: oklch(0 0 0 / 0.05);
  --jp-gray-alpha-200: oklch(0 0 0 / 0.081);
  --jp-gray-alpha-300: oklch(0 0 0 / 0.1);
  --jp-gray-alpha-400: oklch(0 0 0 / 0.08);
  --jp-gray-alpha-500: oklch(0 0 0 / 0.21);
  --jp-gray-alpha-600: oklch(0 0 0 / 0.24);
  --jp-gray-alpha-700: oklch(0 0 0 / 0.44);
  --jp-gray-alpha-800: oklch(0 0 0 / 0.51);
  --jp-gray-alpha-900: oklch(0 0 0 / 0.7);
  --jp-gray-alpha-1000: oklch(0 0 0 / 0.91);
  --jp-blue-100: oklch(97.32% 0.0141 251.56);
  --jp-blue-400: oklch(91.58% 0.0473 245.116);
  --jp-blue-700: oklch(57.61% 0.2508 258.23);
  --jp-blue-900: oklch(53.18% 0.2399 256.99);
  --jp-blue-1000: oklch(26.67% 0.1099 254.34);
  --jp-green-100: oklch(97.59% 0.0289 145.42);
  --jp-green-400: oklch(91.49% 0.0976 146.24);
  --jp-green-700: oklch(64.58% 0.1746 147.27);
  --jp-green-900: oklch(51.75% 0.1453 147.65);
  --jp-green-1000: oklch(29.15% 0.1197 147.38);
  --jp-amber-100: oklch(97.48% 0.0331 85.79);
  --jp-amber-400: oklch(91.02% 0.1322 88.25);
  --jp-amber-700: oklch(81.87% 0.1969 76.46);
  --jp-amber-900: oklch(52.79% 0.1496 54.65);
  --jp-amber-1000: oklch(30.83% 0.099 45.48);
  --jp-red-100: oklch(96.5% 0.0223 13.09);
  --jp-red-400: oklch(91.51% 0.0471 19.8);
  --jp-red-700: oklch(62.56% 0.2524 23.03);
  --jp-red-900: oklch(54.99% 0.232 25.29);
  --jp-red-1000: oklch(24.8% 0.1041 18.86);
  
  --jp-chart-1: var(--jp-gray-1000);
  --jp-chart-2: var(--jp-gray-900);
  --jp-chart-3: var(--jp-gray-800);
  --jp-chart-4: var(--jp-gray-1000);
  --jp-chart-5: var(--jp-gray-900);
  --jp-chart-6: var(--jp-gray-800);
  --jp-surface-primary: var(--jp-background-100);
  --jp-surface-secondary: var(--jp-background-200);
  
  --jp-surface-contrast: oklch(0.205 0 0);
  --jp-text-primary: var(--jp-gray-1000);
  --jp-text-secondary: var(--jp-gray-900);
  --jp-text-on-contrast: oklch(0.946 0 0);
  --jp-text-on-contrast-secondary: oklch(0.72 0 0);
  --jp-border-subtle: var(--jp-gray-alpha-300);
  --jp-border-default: var(--jp-gray-alpha-400);
  --jp-border-strong: var(--jp-gray-alpha-700);
  --jp-border-on-contrast: oklch(1 0 0 / 0.24);
  --jp-color-info: var(--jp-blue-700);
  --jp-color-success: var(--jp-green-900);
  --jp-color-warning: var(--jp-amber-900);
  --jp-color-error: var(--jp-red-700);
  --jp-focus: var(--jp-blue-700);
  --jp-space-1: 4px;
  --jp-space-2: 8px;
  --jp-space-3: 12px;
  --jp-space-4: 16px;
  --jp-space-5: 20px;
  --jp-space-6: 24px;
  --jp-space-8: 32px;
  --jp-space-10: 40px;
  --jp-space-12: 48px;
  --jp-space-16: 64px;
  --jp-radius-small: 6px;
  --jp-radius: 8px;
  --jp-type-display: 3rem;
  --jp-type-page-title: 2.5rem;
  --jp-type-title: 2rem;
  --jp-type-section: 1.5rem;
  --jp-type-subsection: 1.25rem;
  --jp-type-lede: 1.125rem;
  --jp-type-body: 1rem;
  --jp-type-compact: 0.875rem;
  --jp-type-label: 0.8125rem;
  --jp-type-metadata: 0.8125rem;
  --jp-weight-regular: 400;
  --jp-weight-heading: 450;
  --jp-weight-medium: 500;
  --jp-weight-semibold: 600;
  --jp-leading-body: 24px;
  --jp-leading-compact: 20px;
  --jp-leading-caption: 18px;
  --jp-leading-display: 56px;
  --jp-leading-page-title: 48px;
  --jp-leading-title: 40px;
  --jp-leading-section: 32px;
  --jp-leading-subsection: 26px;
  --jp-leading-lede: 28px;
  --jp-flow-tight: var(--jp-space-2);
  --jp-flow-copy: var(--jp-space-4);
  --jp-flow-group: var(--jp-space-8);
  --jp-flow-section: var(--jp-space-16);
  --jp-reading-width: 68ch;
  --jp-display-measure: 20ch;
  --jp-title-measure: 24ch;
  --jp-compact-title-measure: 30ch;
  --jp-content-width: 1200px;
  --jp-chart-min-width: 640px;
  --jp-control-height: 36px;
  --jp-control-height-touch: 44px;
  box-sizing: border-box;
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--jp-background-100);
  color: var(--jp-gray-1000);
  font-family: var(--jp-font-sans);
  font-size: 16px;
  font-weight: var(--jp-weight-regular);
  line-height: var(--jp-leading-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-feature-settings: "rlig" 1, "calt" 0, "ss11" 1;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;}
:where(.mjdj-jp *, .mjdj-jp *::before, .mjdj-jp *::after){box-sizing: inherit;}
.mjdj-jp[hidden],:where(.mjdj-jp) [hidden]{display: none !important;}
:where(.light .mjdj-jp, .mjdj-jp.light){color-scheme: light;}
:where(.mjdj-jp) :where(h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote, pre){margin-block-start: 0;}
:where(.mjdj-jp) :where(h1, h2, h3, h4){color: var(--jp-gray-1000);
  font-weight: var(--jp-weight-heading);
  text-wrap: balance;}
:where(.mjdj-jp) .jp-display{color: var(--jp-gray-1000);
  font-weight: var(--jp-weight-heading);
  text-wrap: balance;}
:where(.mjdj-jp) :where([id]){scroll-margin-top: var(--jp-space-8);}
:where(.mjdj-jp) h1{max-width: var(--jp-title-measure);
  margin-block-end: var(--jp-space-4);
  font-size: var(--jp-type-page-title);
  line-height: var(--jp-leading-page-title);
  letter-spacing: -0.06em;}
:where(.mjdj-jp) .jp-display{max-width: var(--jp-display-measure);
  font-size: var(--jp-type-display);
  line-height: var(--jp-leading-display);
  letter-spacing: -0.06em;}
:where(.mjdj-jp) h2{margin-block-end: var(--jp-space-4);
  font-size: var(--jp-type-section);
  line-height: var(--jp-leading-section);
  letter-spacing: -0.04em;}
:where(.mjdj-jp) h3{margin-block-end: var(--jp-space-3);
  font-size: var(--jp-type-subsection);
  line-height: var(--jp-leading-subsection);
  letter-spacing: -0.02em;}
:where(.mjdj-jp) h4{margin-block-end: var(--jp-space-2);
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.02em;}
:where(.mjdj-jp) p{margin-block-end: var(--jp-space-4);
  line-height: var(--jp-leading-body);
  text-wrap: pretty;}
:where(.mjdj-jp) :where(ul, ol){margin-block-end: var(--jp-space-4);
  padding-inline-start: 1.25rem;}
:where(.mjdj-jp) li{line-height: var(--jp-leading-body);}
:where(.mjdj-jp) dt{font-weight: var(--jp-weight-medium);
  line-height: var(--jp-leading-body);}
:where(.mjdj-jp) dd{margin-inline-start: 0;
  color: var(--jp-text-secondary);
  line-height: var(--jp-leading-body);}
:where(.mjdj-jp) dt:not(:first-child){margin-block-start: var(--jp-flow-copy);}
:where(.mjdj-jp) dt + dd{margin-block-start: var(--jp-space-1);}
:where(.mjdj-jp) blockquote{margin-inline: 0;
  margin-block-end: var(--jp-flow-copy);
  padding-block: var(--jp-space-2);
  color: var(--jp-text-secondary);
  font-size: 1.125rem;
  line-height: 1.75rem;}
:where(.mjdj-jp) :where(td, th){overflow-wrap: break-word;}
:where(.mjdj-jp) :where(a){color: inherit;
  text-decoration-color: var(--jp-gray-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;}
:where(.mjdj-jp) a:hover{text-decoration-color: currentColor;}
:where(.mjdj-jp) :where(a, button, input, select, textarea, summary):focus-visible{outline: 2px solid var(--jp-focus);
  outline-offset: 3px;}
:where(.mjdj-jp) :where(code, kbd, samp, pre){font-family: var(--jp-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;}
:where(.mjdj-jp) :where(code, kbd){border: 1px solid var(--jp-border-subtle);
  border-radius: 4px;
  background: var(--jp-gray-100);
  padding: 0.1em 0.3em;
  font-size: 0.875em;}
:where(.mjdj-jp) pre{overflow: auto;
  border: 1px solid var(--jp-border-subtle);
  border-radius: var(--jp-radius);
  background: var(--jp-background-200);
  padding: var(--jp-space-4);
  font-size: 0.8125rem;
  line-height: 1.55;}
:where(.mjdj-jp) pre code{border: 0;
  background: transparent;
  padding: 0;
  font-size: inherit;}
:where(.mjdj-jp) :where(img, svg, video, canvas){display: block;
  max-width: 100%;
  height: auto;}
:where(.mjdj-jp) figure{margin-inline: 0;
  margin-block-end: var(--jp-space-8);}
:where(.mjdj-jp) figcaption{margin-block-start: var(--jp-space-3);
  color: var(--jp-text-secondary);
  font-size: var(--jp-type-compact);
  line-height: var(--jp-leading-compact);}
:where(.mjdj-jp) table{width: 100%;
  border-collapse: collapse;
  caption-side: top;
  font-size: 0.875rem;
  line-height: var(--jp-leading-compact);
  font-variant-numeric: tabular-nums;}
:where(.mjdj-jp) caption{padding: 0 0 var(--jp-space-3);
  color: var(--jp-text-secondary);
  font-size: var(--jp-type-compact);
  line-height: var(--jp-leading-compact);
  text-align: left;}
:where(.mjdj-jp) :where(th, td){border-bottom: 1px solid var(--jp-border-subtle);
  padding: 10px var(--jp-space-3);
  text-align: left;
  vertical-align: baseline;}
:where(.mjdj-jp) :where(th, td):first-child{padding-inline-start: 0;}
:where(.mjdj-jp) :where(th, td):last-child{padding-inline-end: 0;}
:where(.mjdj-jp) thead th{border-bottom-color: var(--jp-border-default);
  background: transparent;
  color: var(--jp-gray-900);
  font-weight: var(--jp-weight-medium);
  hyphens: none;
  overflow-wrap: normal;
  vertical-align: bottom;
  word-break: normal;}
:where(.mjdj-jp) tbody th{background: transparent;
  color: var(--jp-text-primary);
  font-weight: var(--jp-weight-medium);}
:where(.mjdj-jp) tbody tr:last-child > :where(th, td){border-bottom-color: var(--jp-border-default);}
:where(.mjdj-jp) :where(th, td)[data-align="numeric"]{white-space: nowrap;
  overflow-wrap: normal;
  text-align: right;}
:where(.mjdj-jp) :where(button, .jp-button){display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: var(--jp-control-height);
  align-items: center;
  justify-content: center;
  gap: var(--jp-space-2);
  border: 1px solid var(--jp-border-default);
  border-radius: var(--jp-radius-small);
  background: var(--jp-background-100);
  color: var(--jp-gray-1000);
  padding: 7px var(--jp-space-4);
  font: var(--jp-weight-medium) 0.875rem/var(--jp-leading-compact) var(--jp-font-sans);
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 150ms ease, border-color 150ms ease;}
:where(.mjdj-jp) :where(button, .jp-button) > :where(img, svg){flex: none;}
:where(.mjdj-jp) :where(button, .jp-button):hover{border-color: var(--jp-border-default);
  background: var(--jp-gray-alpha-200);}
:where(.mjdj-jp) :where(button, .jp-button)[data-variant="primary"]{border-color: var(--jp-gray-1000);
  background: var(--jp-gray-1000);
  color: var(--jp-background-100);}
:where(.mjdj-jp) :where(button, .jp-button)[data-variant="primary"]:hover{border-color: var(--jp-gray-900);
  background: var(--jp-gray-900);}
.mjdj-jp.jp-light :is(button, .jp-button):is(:not([data-variant]), [data-variant="secondary"]):not(.jp-band[data-tone="contrast"] *){border-color: oklch(0 0 0 / 0.08);
  background: #ffffff;
  color: #1f1f1f;
  transition-property: border-color;}
:where(.mjdj-jp) :where(button, .jp-button)[data-variant="tertiary"]{border-color: transparent;
  background: transparent;}
:where(.mjdj-jp) :where(button, .jp-button)[data-variant="tertiary"]:hover{border-color: var(--jp-gray-alpha-200);
  background: var(--jp-gray-alpha-200);}
:where(.mjdj-jp) :where(button, .jp-button):active{background: var(--jp-gray-alpha-300);}
:where(.mjdj-jp) :where(button, .jp-button)[data-variant="primary"]:active{border-color: var(--jp-gray-800);
  background: var(--jp-gray-800);}
:where(.mjdj-jp) :where(
  button[aria-pressed="true"],
  .jp-button[aria-pressed="true"],
  button[data-selected="true"],
  .jp-button[data-selected="true"],
  button[data-state="active"],
  .jp-button[data-state="active"]
){border-color: var(--jp-gray-1000);
  background: var(--jp-gray-1000);
  color: var(--jp-background-100);}
:where(.mjdj-jp) :where(
  button[aria-pressed="true"],
  .jp-button[aria-pressed="true"],
  button[data-selected="true"],
  .jp-button[data-selected="true"],
  button[data-state="active"],
  .jp-button[data-state="active"]
):hover{border-color: var(--jp-gray-900);
  background: var(--jp-gray-900);}
.mjdj-jp.jp-light :is(button, .jp-button)[data-variant="tertiary"]:is([aria-pressed="true"], [data-selected="true"], [data-state="active"]):not(:disabled):not([aria-disabled="true"]){border-color: #1f1f1f;
  background: #1f1f1f;
  color: #ffffff;}
:where(.mjdj-jp) :where(button, .jp-button):where(:disabled, [aria-disabled="true"]){border-color: var(--jp-gray-alpha-400);
  background: var(--jp-gray-100);
  color: var(--jp-gray-700);
  cursor: not-allowed;
  opacity: 1;}
:where(.mjdj-jp) :where(button, .jp-button)[data-variant="tertiary"]:where(:disabled, [aria-disabled="true"]){border-color: transparent;
  background: transparent;
  color: var(--jp-gray-700);
  opacity: 0.5;}
:where(.mjdj-jp) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea){width: 100%;
  min-height: var(--jp-control-height);
  border: 1px solid var(--jp-border-default);
  border-radius: var(--jp-radius-small);
  background: var(--jp-background-100);
  color: var(--jp-gray-1000);
  padding: var(--jp-space-2) var(--jp-space-3);
  font: var(--jp-weight-regular) 0.875rem/1.4 var(--jp-font-sans);}
:where(.mjdj-jp) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):hover{border-color: var(--jp-border-strong);}
:where(.mjdj-jp) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):disabled{cursor: not-allowed;
  background: var(--jp-background-200);
  color: var(--jp-text-secondary);
  opacity: 0.7;}
:where(.mjdj-jp) input[type="range"]{-webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 28px;
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
  accent-color: var(--jp-text-primary);
  cursor: pointer;}
:where(.mjdj-jp) input[type="range"]::-webkit-slider-runnable-track{height: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--jp-border-default);}
:where(.mjdj-jp) input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 2px solid var(--jp-surface-primary);
  border-radius: 50%;
  background: var(--jp-text-primary);
  box-shadow: 0 0 0 1px var(--jp-border-strong);}
:where(.mjdj-jp) input[type="range"]::-moz-range-track{height: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--jp-border-default);}
:where(.mjdj-jp) input[type="range"]::-moz-range-progress{height: 4px;
  border-radius: 999px;
  background: var(--jp-text-primary);}
:where(.mjdj-jp) input[type="range"]::-moz-range-thumb{width: 16px;
  height: 16px;
  border: 2px solid var(--jp-surface-primary);
  border-radius: 50%;
  background: var(--jp-text-primary);
  box-shadow: 0 0 0 1px var(--jp-border-strong);}
:where(.mjdj-jp) input[type="range"]:disabled{cursor: not-allowed;
  opacity: 0.5;}
:where(.mjdj-jp) :where(input[type="checkbox"], input[type="radio"]){width: auto;
  min-height: auto;
  accent-color: var(--jp-text-primary);}
:where(.mjdj-jp) select{background-color: var(--jp-background-100);}
:where(.mjdj-jp) textarea{min-height: 96px; resize: vertical;}
:where(.mjdj-jp) details{border-top: 1px solid var(--jp-border-subtle);
  padding-block: var(--jp-space-4);}
:where(.mjdj-jp) summary{font-weight: var(--jp-weight-medium);
  cursor: pointer;}
@media (max-width: 800px){:where(.mjdj-jp) h1{font-size: var(--jp-type-title);
    line-height: var(--jp-leading-title);}
:where(.mjdj-jp) .jp-display{font-size: var(--jp-type-title);
    line-height: var(--jp-leading-title);}
:where(.mjdj-jp) :where(button, .jp-button){min-height: var(--jp-control-height-touch);}
:where(.mjdj-jp) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea){min-height: var(--jp-control-height-touch);
    font-size: 16px;}}
@media (prefers-reduced-motion: reduce){:where(.mjdj-jp *, .mjdj-jp *::before, .mjdj-jp *::after){scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;}}
@media (forced-colors: active){:where(.mjdj-jp) :where(a, button, input, select, textarea):focus-visible{outline-color: Highlight;}
:where(.mjdj-jp) :where(
    button[aria-pressed="true"],
    .jp-button[aria-pressed="true"],
    button[data-selected="true"],
    .jp-button[data-selected="true"],
    button[data-state="active"],
    .jp-button[data-state="active"]
  ){border-color: Highlight;
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;}
:where(.mjdj-jp) input[type="range"]::-webkit-slider-runnable-track{background: CanvasText;}
:where(.mjdj-jp) input[type="range"]::-webkit-slider-thumb{border-color: Canvas;
    background: Highlight;}
:where(.mjdj-jp) input[type="range"]::-moz-range-track{background: CanvasText;}
:where(.mjdj-jp) input[type="range"]::-moz-range-thumb{border-color: Canvas;
    background: Highlight;}}
.mjdj-jp{--mj-red:#D32222; --mj-red-dark:#B01B1B;
  --mj-salmon:#F08C86; --mj-ink:#111111;
  --mj-grey:#F3F3F3; --mj-hair:#E6E6E6; --mj-label:#8A8A8A;}
.mjdj-jp .mojo-wrap{width:min(calc(100% - 48px),var(--jp-content-width));margin-inline:auto}
.mjdj-jp .mojo-section{padding-block:clamp(56px,7vw,96px);border-top:1px solid var(--mj-hair)}
.mjdj-jp .mojo-section h2{font-size:clamp(1.875rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.04em}
.mjdj-jp .mj-label{display:block;color:var(--mj-label);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;margin-block-end:var(--jp-space-4)}
.mjdj-jp .mojo-lede{max-width:var(--jp-reading-width);color:var(--jp-gray-900);
  font-size:var(--jp-type-lede);line-height:var(--jp-leading-lede)}
.mjdj-jp .mj-vmark{writing-mode:vertical-rl;font-family:'Noto Serif JP',serif;font-weight:500;
  letter-spacing:.3em;line-height:1;color:currentColor}
.mjdj-jp .mj-vmark b{color:var(--mj-red);font-weight:700}
.mjdj-jp .mojo-cta{background:var(--mj-red)!important;border-color:var(--mj-red)!important;color:#fff!important}
.mjdj-jp .mojo-cta:hover{background:var(--mj-red-dark)!important;border-color:var(--mj-red-dark)!important}
.mjdj-jp .mojo-arrow-link{display:inline-flex;align-items:center;gap:6px;color:var(--jp-gray-1000);
  font-size:var(--jp-type-compact);font-weight:500;text-decoration:none}
.mjdj-jp .mojo-arrow-link:hover{text-decoration:underline;text-decoration-color:var(--jp-gray-600);text-underline-offset:3px}
.mjdj-jp .mojo-identity{display:flex;align-items:center;gap:9px;font-weight:500;font-size:.9375rem;
  letter-spacing:-.02em;color:var(--jp-gray-1000);text-decoration:none}
.mjdj-jp .mojo-mark{width:22px;height:22px;border-radius:6px;background:var(--mj-red);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.mjdj-jp .mojo-logo-img{height:50px;width:auto;display:block}
.mjdj-jp .mj-quote-block{max-width:900px;margin-inline:auto;text-align:center}
.mjdj-jp .mj-quote-block .mj-label{margin-inline:auto}
.mjdj-jp .mj-bigquote{font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.28;letter-spacing:-.03em;color:var(--jp-gray-1000);font-weight:450;margin:var(--jp-space-6) auto var(--jp-space-8);max-width:24ch;border:0;padding:0}
.mjdj-jp .mj-quote-by{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;color:var(--jp-text-secondary);font-size:var(--jp-type-compact)}
.mjdj-jp .mj-quote-by strong{color:var(--jp-gray-1000);font-weight:500}
.mjdj-jp .mj-faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,64px);align-items:start}
.mjdj-jp .mj-posts{display:flex;flex-direction:column}
.mjdj-jp .mj-posts-img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 30%;border:1px solid var(--mj-hair);border-radius:10px;filter:grayscale(1);transition:filter .35s;display:block;margin-block-end:var(--jp-space-2)}
.mjdj-jp .mj-featured{text-decoration:none}
.mjdj-jp .mj-featured:hover .mj-posts-img{filter:none}
.mjdj-jp .mj-post-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--jp-space-6);padding-block:var(--jp-space-5);border-top:1px solid var(--mj-hair);text-decoration:none}
.mjdj-jp .mj-post-row .t{color:var(--jp-gray-1000);font-weight:500;letter-spacing:-.01em;line-height:1.4;max-width:60ch}
.mjdj-jp .mj-post-featured .t{font-size:var(--jp-type-subsection);line-height:var(--jp-leading-subsection)}
.mjdj-jp .mj-post-row:hover .t{text-decoration:underline;text-decoration-color:var(--jp-gray-600);text-underline-offset:3px}
.mjdj-jp .mj-post-row .m{flex:none;color:var(--jp-text-secondary);font-size:var(--jp-type-metadata);font-family:var(--jp-font-mono);white-space:nowrap}
@media(max-width:820px){.mjdj-jp .mj-faq-grid{grid-template-columns:1fr;gap:var(--jp-space-8)}
.mjdj-jp .mj-post-row{flex-direction:column;align-items:flex-start;gap:4px}}
.mjdj-jp .mojo-nav-actions{display:flex;align-items:center;gap:10px}
.mjdj-jp .mj-hero{position:relative;background:var(--mj-ink);color:#fff;isolation:isolate;overflow:hidden}
.mjdj-jp .mj-hero .bg{position:absolute;inset:0;z-index:-2;background:url('/images/jp/mj-hero.png') center top/cover no-repeat}
.mjdj-jp .mj-hero .fade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(17,17,17,.15) 0%,rgba(17,17,17,.35) 45%,rgba(17,17,17,.86) 78%,var(--mj-ink) 100%)}
.mjdj-jp .mj-hero-top{display:flex;align-items:center;justify-content:space-between;height:72px}
.mjdj-jp .mj-hero-top .wm{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.mjdj-jp .mj-hero-top .mj-vmark{font-size:13px;color:#fff}
.mjdj-jp .mj-hero-actions{display:flex;gap:10px;align-items:center}
.mjdj-jp .mj-hero .jp-button{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.mjdj-jp .mj-hero .jp-button:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.mjdj-jp .mj-hero .mojo-cta{background:var(--mj-red);border-color:var(--mj-red)}
.mjdj-jp .mj-hero .mojo-cta:hover{background:var(--mj-red-dark);border-color:var(--mj-red-dark)}
.mjdj-jp .mj-hero-body{padding-block:clamp(220px,42vh,420px) clamp(48px,7vw,88px);max-width:34ch}
.mjdj-jp .mj-hero .mj-label{color:var(--mj-salmon)}
.mjdj-jp .mj-hero h1{color:#fff;margin-block-end:var(--jp-space-5)}
.mjdj-jp .mj-hero p{color:rgba(255,255,255,.82);font-size:var(--jp-type-lede);line-height:var(--jp-leading-lede);
  max-width:52ch;margin-block-end:var(--jp-space-8)}
.mjdj-jp .mj-hero .mojo-actions{display:flex;flex-wrap:wrap;gap:var(--jp-space-3)}
.mjdj-jp .mj-herostats{display:flex;justify-content:center;gap:clamp(36px,6vw,72px);max-width:460px;margin:var(--jp-space-8) auto 0;padding-block-start:var(--jp-space-8);border-top:1px solid var(--mj-hair)}
.mjdj-jp .mj-herostats .s{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}
.mjdj-jp .mj-herostats .v{font-size:1.75rem;font-weight:450;letter-spacing:-.03em;line-height:1;color:var(--jp-gray-1000);font-variant-numeric:tabular-nums}
.mjdj-jp .mj-herostats .l{font-size:var(--jp-type-compact);color:var(--jp-text-secondary);line-height:1.35}
.mjdj-jp .mj-grey{background:var(--mj-grey);border-top:1px solid var(--mj-hair);border-bottom:1px solid var(--mj-hair)}
.mjdj-jp .mj-trusted-band{border-top:1px solid var(--mj-hair);border-bottom:1px solid var(--mj-hair);padding-block:clamp(40px,4.5vw,60px)}
.mjdj-jp .mj-trusted-label{text-align:center;color:var(--mj-label);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-block-end:var(--jp-space-8)}
.mjdj-jp .mj-logos{display:flex;align-items:center;justify-content:center;gap:clamp(28px,5vw,60px);flex-wrap:wrap}
.mjdj-jp .mj-logos img{height:48px;width:auto;max-width:170px;object-fit:contain;filter:grayscale(1) opacity(.6);transition:filter .2s,opacity .2s}
.mjdj-jp .mj-logos img:hover{filter:grayscale(1) opacity(1)}
.mjdj-jp .mj-pill-group{display:inline-flex;align-items:center;gap:10px}
.mjdj-jp .mj-pill-logo{height:20px;width:auto}
.mjdj-jp .mj-compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--jp-space-6);margin-block-start:var(--jp-space-12)}
.mjdj-jp .mj-compare-col{border:1px solid var(--mj-hair);border-radius:14px;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:var(--jp-space-5)}
.mjdj-jp .mj-compare-col--dark{background:var(--mj-ink);border-color:var(--mj-ink);color:#fff}
.mjdj-jp .mj-compare-tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mj-label)}
.mjdj-jp .mj-compare-col--dark .mj-compare-tag{color:var(--mj-salmon)}
.mjdj-jp .mj-compare-head h3{margin:var(--jp-space-2) 0;color:inherit}
.mjdj-jp .mj-compare-head p{color:var(--jp-gray-900);margin:0}
.mjdj-jp .mj-compare-col--dark .mj-compare-head p{color:rgba(255,255,255,.72)}
.mjdj-jp .mj-compare-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--jp-space-4);flex:1}
.mjdj-jp .mj-compare-list li{font-size:var(--jp-type-compact);line-height:1.55;color:var(--jp-gray-900);padding-left:18px;position:relative}
.mjdj-jp .mj-compare-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--mj-label)}
.mjdj-jp .mj-compare-col--dark .mj-compare-list li{color:rgba(255,255,255,.82)}
.mjdj-jp .mj-compare-col--dark .mj-compare-list li::before{background:var(--mj-salmon)}
.mjdj-jp .mj-compare-list b{color:var(--jp-gray-1000);font-weight:600}
.mjdj-jp .mj-compare-col--dark .mj-compare-list b{color:#fff}
.mjdj-jp .mj-compare-stat{font-size:var(--jp-type-compact);font-weight:500;color:var(--jp-gray-1000);border-top:1px solid var(--mj-hair);padding-top:var(--jp-space-4);margin:0}
.mjdj-jp .mj-compare-col--dark .mj-compare-stat{color:#fff;border-top-color:rgba(255,255,255,.2)}
.mjdj-jp .mj-vs-table{width:100%;border-collapse:collapse;margin-block-start:var(--jp-space-10)}
.mjdj-jp .mj-vs-table th,.mjdj-jp .mj-vs-table td{text-align:left;padding:var(--jp-space-4);border-top:1px solid var(--mj-hair);font-size:var(--jp-type-compact)}
.mjdj-jp .mj-vs-table thead th{color:var(--mj-label);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-top:0}
.mjdj-jp .mj-vs-table tbody th{color:var(--jp-gray-1000);font-weight:600;width:24%}
.mjdj-jp .mj-vs-table td{color:var(--jp-gray-900)}
.mjdj-jp .mj-vs-table td:last-child{color:var(--jp-gray-1000);font-weight:500}
.mjdj-jp .mj-uk-cta{margin-block-start:var(--jp-space-12);padding-block-start:var(--jp-space-10);border-top:1px solid var(--mj-hair)}
.mjdj-jp .mj-uk-cta h3{margin:var(--jp-space-2) 0 var(--jp-space-3)}
.mjdj-jp .mj-uk-cta p{color:var(--jp-gray-900);max-width:var(--jp-reading-width)}
.mjdj-jp .mj-uk-cta .mojo-actions{margin-block-start:var(--jp-space-6);display:flex;gap:var(--jp-space-3);flex-wrap:wrap}
@media(max-width:820px){.mjdj-jp .mj-compare{grid-template-columns:1fr}}
.mjdj-jp .mj-arrowbtn.mj-arrowbtn--cta{background:var(--mj-red);border-color:var(--mj-red);color:#fff}
.mjdj-jp .mj-arrowbtn.mj-arrowbtn--cta svg{stroke:#fff}
.mjdj-jp .mj-cell:hover .mj-arrowbtn.mj-arrowbtn--cta{background:var(--mj-red-dark);border-color:var(--mj-red-dark);color:#fff}
.mjdj-jp .mj-posts a.mj-post-row:first-child{border-top:0;padding-top:0}
.mjdj-jp .mj-compare2{border:1px solid var(--mj-hair);border-radius:16px;background:var(--jp-background-200);display:grid;grid-template-columns:1fr 1fr;margin-block-start:var(--jp-space-12);overflow:hidden}
.mjdj-jp .mj-cc{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:var(--jp-space-5)}
.mjdj-jp .mj-cc + .mj-cc{border-left:1px solid var(--mj-hair)}
.mjdj-jp .mj-cc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mjdj-jp .mj-cc-eyebrow{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mj-label)}
.mjdj-jp .mj-cc--int .mj-cc-eyebrow{color:var(--mj-label)}
.mjdj-jp .mj-pill{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:100px;border:1px solid var(--mj-hair);color:var(--mj-label)}
.mjdj-jp .mj-pill--red{background:var(--mj-red);border-color:var(--mj-red);color:#fff}
.mjdj-jp .mj-cc h3{margin:0}
.mjdj-jp .mj-cc-sub{color:var(--jp-gray-900);margin:0;font-size:var(--jp-type-compact)}
.mjdj-jp .mj-diag{border:1px solid var(--mj-hair);border-radius:12px;padding:clamp(16px,2vw,22px);background:var(--jp-background-100);display:flex;flex-direction:column;align-items:center;gap:12px}
.mjdj-jp .mj-node{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--mj-hair);border-radius:8px;padding:6px 13px;font-size:12.5px;font-weight:500;color:var(--jp-gray-1000);background:#fff;white-space:nowrap}
.mjdj-jp .mj-cc--int .mj-node--brand{border-color:var(--mj-hair);color:var(--jp-gray-1000)}
.mjdj-jp .mj-node .dot{width:6px;height:6px;border-radius:50%;background:var(--mj-label)}
.mjdj-jp .mj-cc--int .mj-node .dot{background:var(--mj-label)}
.mjdj-jp .mj-connector{width:1px;height:16px;background:var(--mj-hair)}
.mjdj-jp .mj-cc--int .mj-connector{background:var(--mj-hair)}
.mjdj-jp .mj-nodes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mjdj-jp .mj-pod{border:1px solid var(--mj-label);border-radius:10px;padding:14px;width:100%;display:flex;flex-direction:column;gap:10px;align-items:center}
.mjdj-jp .mj-pod-label{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mj-label)}
.mjdj-jp .mj-diag-divider{width:100%;border-top:1px dashed var(--mj-hair);margin-block:2px}
.mjdj-jp .mj-diag-foot{width:100%}
.mjdj-jp .mj-diag-foot .lbl{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mj-label);display:block;margin-bottom:6px}
.mjdj-jp .mj-flow{font-size:12.5px;color:var(--jp-gray-1000)}
.mjdj-jp .mj-flow .sep{color:var(--mj-label);margin:0 5px}
.mjdj-jp .mj-cc--int .mj-flow .sep{color:var(--mj-label)}
.mjdj-jp .mj-diag-note{font-size:11.5px;font-style:italic;color:var(--jp-text-secondary);margin-top:6px}
.mjdj-jp .mj-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--jp-space-4);flex:1}
.mjdj-jp .mj-checks li{position:relative;padding-left:26px;font-size:var(--jp-type-compact);line-height:1.5;color:var(--jp-gray-900)}
.mjdj-jp .mj-checks li::before{position:absolute;left:0;top:0;font-weight:700;font-size:13px}
.mjdj-jp .mj-checks--x li::before{content:"\00d7";color:var(--mj-label)}
.mjdj-jp .mj-checks--tick li::before{content:"\2713";color:var(--jp-gray-1000)}
.mjdj-jp .mj-checks b{color:var(--jp-gray-1000);font-weight:600}
.mjdj-jp .mj-bigstat{border-top:1px solid var(--mj-hair);padding-top:var(--jp-space-4);font-size:var(--jp-type-compact);color:var(--jp-gray-900)}
.mjdj-jp .mj-bigstat .n{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;letter-spacing:-.03em;color:var(--jp-gray-1000);margin-right:8px}
.mjdj-jp .mj-cc--int .mj-bigstat .n{color:var(--jp-gray-1000)}
.mjdj-jp .mj-vs-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--mj-hair);border-radius:16px;overflow:hidden;margin-block-start:var(--jp-space-6)}
.mjdj-jp .mj-vs-cell{padding:clamp(20px,2.4vw,28px)}
.mjdj-jp .mj-vs-cell + .mj-vs-cell{border-left:1px solid var(--mj-hair)}
.mjdj-jp .mj-vs-cell .lbl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mj-label);display:block;margin-bottom:14px}
.mjdj-jp .mj-vs-cell .old{color:var(--jp-text-secondary);text-decoration:line-through;font-size:var(--jp-type-compact);display:block;margin-bottom:4px}
.mjdj-jp .mj-vs-cell .new{color:var(--jp-gray-1000);font-weight:600;font-size:var(--jp-type-compact);display:block}
.mjdj-jp .mj-uk-cta2{border:1px solid var(--mj-hair);border-radius:16px;padding:clamp(24px,3vw,40px);margin-block-start:var(--jp-space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--jp-space-8);flex-wrap:wrap}
.mjdj-jp .mj-uk-cta2 .l{max-width:560px}
.mjdj-jp .mj-uk-cta2 .eyebrow{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mj-label);display:block;margin-bottom:10px}
.mjdj-jp .mj-uk-cta2 h3{margin:0 0 8px}
.mjdj-jp .mj-uk-cta2 p{color:var(--jp-gray-900);margin:0}
.mjdj-jp .mj-uk-cta2 .r{display:flex;align-items:center;gap:16px}
.mjdj-jp .mj-uk-cta2 .r a.link{color:var(--jp-gray-1000);text-decoration:underline;text-decoration-color:var(--jp-gray-600);text-underline-offset:3px;font-size:var(--jp-type-compact);font-weight:500}
@media(max-width:820px){.mjdj-jp .mj-compare2{grid-template-columns:1fr}
.mjdj-jp .mj-cc + .mj-cc{border-left:0;border-top:1px solid var(--mj-hair)}
.mjdj-jp .mj-vs-strip{grid-template-columns:1fr 1fr}
.mjdj-jp .mj-vs-cell:nth-child(3){border-left:0}
.mjdj-jp .mj-uk-cta2{flex-direction:column;align-items:flex-start}}
.mjdj-jp .mojo-ps-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);
  gap:var(--jp-space-8) var(--jp-space-10);padding-block:var(--jp-space-10);border-top:1px solid var(--mj-hair)}
.mjdj-jp .mojo-ps-row:first-of-type{border-top:0}
.mjdj-jp .mj-num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--mj-red);font-size:var(--jp-type-compact);
  letter-spacing:.02em;padding-top:4px}
.mjdj-jp .mojo-ps-cat{grid-column:2 / -1;color:var(--mj-label);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;margin-block-end:calc(-1 * var(--jp-space-4))}
.mjdj-jp .mojo-ps-col .role{color:var(--jp-text-secondary);font-size:var(--jp-type-metadata);font-weight:500;margin-block-end:var(--jp-space-2)}
.mjdj-jp .mojo-ps-col h3{margin-block-end:var(--jp-space-2)}
.mjdj-jp .mojo-ps-col p{color:var(--jp-gray-900);margin-block-end:0}
.mjdj-jp .mojo-ps-solmeta{display:flex;align-items:center;gap:var(--jp-space-4);flex-wrap:wrap;margin-block-start:var(--jp-space-4)}
.mjdj-jp .mojo-metric{font-weight:500;color:var(--jp-gray-1000);font-variant-numeric:tabular-nums}
@media(max-width:820px){.mjdj-jp .mojo-ps-row{grid-template-columns:auto 1fr}
.mjdj-jp .mojo-ps-cat{grid-column:2}}
.mjdj-jp .mj-callout{background:var(--mj-ink);border-radius:12px;color:#fff;
  padding:clamp(28px,4vw,52px)}
.mjdj-jp .mj-callout .q1{display:block;font-size:clamp(1.375rem,2.8vw,1.875rem);line-height:1.3;letter-spacing:-.02em;color:#fff}
.mjdj-jp .mj-callout .q2{display:block;font-size:clamp(1.375rem,2.8vw,1.875rem);line-height:1.3;letter-spacing:-.02em;color:var(--mj-salmon)}
.mjdj-jp .mj-callout .who{margin-block-start:var(--jp-space-6);color:rgba(255,255,255,.6);font-size:var(--jp-type-compact)}
.mjdj-jp .mj-callout .who strong{color:#fff;font-weight:500}
.mjdj-jp .mojo-ins-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-block-end:var(--jp-space-10)}
.mjdj-jp .mojo-ins-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--jp-space-12)}
.mjdj-jp .mojo-feature .tag{color:var(--jp-text-secondary);font-size:var(--jp-type-metadata);font-weight:500;margin-block-end:var(--jp-space-3)}
.mjdj-jp .mojo-feature h3{margin-block-end:var(--jp-space-3)}
.mjdj-jp .mojo-feature p{color:var(--jp-gray-900)}
.mjdj-jp .mojo-more h4{color:var(--mj-label);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-block-end:var(--jp-space-4)}
.mjdj-jp .mojo-more a{display:grid;grid-template-columns:auto 1fr;gap:4px var(--jp-space-4);padding-block:var(--jp-space-4);
  border-top:1px solid var(--mj-hair);text-decoration:none}
.mjdj-jp .mojo-more a:first-of-type{border-top:0;padding-top:0}
.mjdj-jp .mojo-more .n{color:var(--mj-label);font-weight:600;font-size:var(--jp-type-metadata);font-variant-numeric:tabular-nums;grid-row:1 / span 2}
.mjdj-jp .mojo-more .t{color:var(--jp-gray-1000);font-weight:500;line-height:1.4;letter-spacing:-.01em}
.mjdj-jp .mojo-more a:hover .t{text-decoration:underline;text-decoration-color:var(--jp-gray-600);text-underline-offset:3px}
.mjdj-jp .mojo-more .m{color:var(--jp-text-secondary);font-size:var(--jp-type-metadata);font-family:var(--jp-font-mono)}
.mjdj-jp .mojo-news{margin-block-start:var(--jp-space-16);padding-block-start:var(--jp-space-12);border-top:1px solid var(--mj-hair)}
.mjdj-jp .mojo-news form{display:flex;flex-wrap:wrap;gap:var(--jp-space-3);margin-block-start:var(--jp-space-5)}
.mjdj-jp .mojo-news input{max-width:320px}
.mjdj-jp .mj-research{display:grid;grid-template-columns:96px 1fr;gap:0;border:1px solid var(--mj-hair);border-radius:12px;overflow:hidden;background:var(--mj-grey)}
.mjdj-jp .mj-rail{position:relative;background:#ddd}
.mjdj-jp .mj-rail .ph{position:absolute;inset:0 0 auto 0;height:62%;background:url('/images/jp/mj-rail.png') center top/cover no-repeat}
.mjdj-jp .mj-rail .mk{position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:center;color:var(--mj-ink)}
.mjdj-jp .mj-rail .mk .mj-vmark{font-size:12px}
.mjdj-jp .mj-research .body{padding:clamp(28px,4vw,44px)}
.mjdj-jp .mj-research .meta{color:var(--jp-text-secondary);font-size:var(--jp-type-metadata);font-family:var(--jp-font-mono);margin-block-end:var(--jp-space-3)}
.mjdj-jp .mj-research .body p{color:var(--jp-gray-900);max-width:var(--jp-reading-width)}
.mjdj-jp .mojo-rstats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--jp-space-8);margin-block-start:var(--jp-space-8)}
.mjdj-jp .mojo-rstats .v{font-size:clamp(1.5rem,3vw,2rem);font-weight:450;letter-spacing:-.04em;line-height:1.1;color:var(--jp-gray-1000);font-variant-numeric:tabular-nums}
.mjdj-jp .mojo-rstats .l{margin-block-start:var(--jp-space-2);color:var(--jp-text-secondary);font-size:var(--jp-type-compact)}
.mjdj-jp .mojo-footer{border-top:1px solid var(--mj-hair);background:var(--jp-background-200);padding-block:clamp(48px,6vw,72px)}
.mjdj-jp .mojo-fcols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--jp-space-10) var(--jp-space-6)}
.mjdj-jp .mojo-fcol{display:grid;gap:var(--jp-space-2);align-content:start}
.mjdj-jp .mojo-fcol h4{margin:0;color:var(--mj-label);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.mjdj-jp .mojo-fcol a{color:var(--jp-gray-1000);font-size:var(--jp-type-compact);text-decoration:none}
.mjdj-jp .mojo-fcol a:hover{text-decoration:underline;text-decoration-color:var(--jp-gray-600);text-underline-offset:3px}
.mjdj-jp .mojo-fcontact{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--jp-space-8);margin-block-start:var(--jp-space-12);
  padding-block-start:var(--jp-space-10);border-top:1px solid var(--mj-hair)}
.mjdj-jp .mojo-fcontact h5{margin:0 0 var(--jp-space-2);font-size:var(--jp-type-compact);font-weight:500;color:var(--jp-gray-1000)}
.mjdj-jp .mojo-fcontact a{color:var(--jp-gray-1000);font-weight:500;font-size:var(--jp-type-compact);text-decoration:none}
.mjdj-jp .mojo-fcontact p{color:var(--jp-text-secondary);font-size:var(--jp-type-metadata);margin:var(--jp-space-1) 0 0;line-height:1.5}
.mjdj-jp .mojo-fbot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-block-start:var(--jp-space-12);
  color:var(--jp-text-secondary);font-size:var(--jp-type-metadata)}
.mjdj-jp .mojo-fbot .mj-vmark{font-size:12px;color:var(--jp-gray-1000)}
.mjdj-jp .mojo-flags{display:flex;gap:12px;font-size:16px}
.mjdj-jp .mojo-flags a{text-decoration:none}
.mjdj-jp .mj-topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,#fff 82%,transparent);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--mj-hair)}
.mjdj-jp .mj-topbar-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.mjdj-jp .mj-hero2{padding-block:clamp(44px,6vw,80px)}
.mjdj-jp .mj-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,56px);align-items:center}
.mjdj-jp .mj-hero-copy .jp-display{margin-block:var(--jp-space-2) var(--jp-space-5)}
.mjdj-jp .mj-hero-copy .mojo-actions{display:flex;flex-wrap:wrap;gap:var(--jp-space-3);margin-block-start:var(--jp-space-8)}
.mjdj-jp .mj-hero-media .mj-video{margin-block-start:0}
.mjdj-jp .mj-hero-media .mj-video-cap{margin-block-start:var(--jp-space-4)}
@media(max-width:900px){.mjdj-jp .mj-hero-grid{grid-template-columns:1fr}}
.mjdj-jp .mj-video{position:relative;margin-block-start:var(--jp-space-8);border:1px solid var(--mj-hair);border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#111}
.mjdj-jp .mj-video img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.03);transition:filter .35s ease}
.mjdj-jp .mj-video:hover img{filter:none}
.mjdj-jp .mj-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--mj-hair);border-right:0;border-bottom:0;border-radius:16px;overflow:hidden;margin-block-start:var(--jp-space-12)}
.mjdj-jp .mj-cell{display:flex;flex-direction:column;gap:var(--jp-space-3);padding:clamp(24px,2.6vw,38px);min-height:236px;text-decoration:none;border-right:1px solid var(--mj-hair);border-bottom:1px solid var(--mj-hair);transition:background .15s}
.mjdj-jp .mj-cell:hover{background:var(--mj-grey)}
.mjdj-jp .mj-cell-top{display:flex;align-items:center;gap:var(--jp-space-3)}
.mjdj-jp .mj-cell-num{color:var(--mj-label);font-weight:600;font-size:var(--jp-type-compact);font-variant-numeric:tabular-nums}
.mjdj-jp .mj-cell-cat{color:var(--mj-label);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.mjdj-jp .mj-cell h3{margin:0}
.mjdj-jp .mj-cell p{color:var(--jp-gray-900);margin:0;max-width:40ch}
.mjdj-jp .mj-cell-foot{margin-block-start:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--jp-space-4);padding-block-start:var(--jp-space-4)}
.mjdj-jp .mj-cell-foot .mojo-metric{font-size:var(--jp-type-compact)}
.mjdj-jp .mj-arrowbtn{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--mj-hair);display:grid;place-items:center;color:var(--jp-gray-1000);transition:.15s}
.mjdj-jp .mj-arrowbtn svg{width:16px;height:16px}
.mjdj-jp .mj-cell:hover .mj-arrowbtn{background:var(--jp-gray-1000);color:#fff;border-color:var(--jp-gray-1000)}
.mjdj-jp .mj-cell-impact{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--jp-space-10);min-height:0}
.mjdj-jp .mj-cell-impact > div:first-child{display:flex;flex-direction:column;gap:var(--jp-space-2)}
.mjdj-jp .mj-cell-impact .mj-cell-foot{margin:0;padding:0;flex:none}
@media(max-width:820px){.mjdj-jp .mj-bento{grid-template-columns:1fr}
.mjdj-jp .mj-cell-impact{flex-direction:column;align-items:flex-start}}
.mjdj-jp .mj-feature-img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 30%;border:1px solid var(--mj-hair);border-radius:10px;margin-block-end:var(--jp-space-5);display:block;filter:grayscale(1);transition:filter .35s}
.mjdj-jp .mojo-feature:hover .mj-feature-img{filter:none}
.mjdj-jp .mj-csimg{margin:calc(-1 * clamp(24px,2.6vw,38px)) calc(-1 * clamp(24px,2.6vw,38px)) var(--jp-space-5);border-bottom:1px solid var(--mj-hair);overflow:hidden;background:var(--mj-grey)}
.mjdj-jp .mj-csimg img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;filter:grayscale(1) contrast(1.02);transition:filter .4s ease,transform .4s ease}
.mjdj-jp .mj-cell:hover .mj-csimg img{filter:none;transform:scale(1.03)}
.mjdj-jp .mj-play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;
  background:var(--mj-red);color:#fff;display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,.35);transition:.15s}
.mjdj-jp .mj-play:hover{background:var(--mj-red-dark);transform:scale(1.06)}
.mjdj-jp .mj-play svg{width:26px;height:26px;margin-left:3px}
.mjdj-jp .mj-video-cap{margin-block-start:var(--jp-space-4);color:var(--jp-text-secondary);font-size:var(--jp-type-compact)}
.mjdj-jp .mj-video-cap strong{color:var(--jp-gray-1000);font-weight:500}
.mjdj-jp .mojo-overlay{position:fixed;inset:0;z-index:60;display:none;overflow-y:auto;background:var(--jp-background-100)}
.mjdj-jp .mojo-overlay.open{display:block}
.mjdj-jp .mojo-ov-in{width:min(calc(100% - 48px),var(--jp-content-width));margin-inline:auto;padding-block:clamp(24px,4vw,40px) 80px}
.mjdj-jp .mojo-ov-top{display:flex;align-items:center;justify-content:space-between;padding-block-end:clamp(32px,5vw,56px)}
.mjdj-jp .mojo-ov-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--jp-space-12) var(--jp-space-8)}
@media(max-width:820px){.mjdj-jp .mojo-stats,.mjdj-jp .mojo-rstats{grid-template-columns:repeat(2,1fr)}
.mjdj-jp .mojo-ins-grid{grid-template-columns:1fr;gap:var(--jp-space-10)}
.mjdj-jp .mojo-fcols{grid-template-columns:repeat(2,1fr)}
.mjdj-jp .mojo-fcontact{grid-template-columns:1fr}
.mjdj-jp .mojo-ov-grid{grid-template-columns:1fr}
.mjdj-jp .mj-research{grid-template-columns:1fr}
.mjdj-jp .mj-rail{display:none}}
.mjdj-jp .jp-display,.mjdj-jp .mojo-section h2{text-wrap:balance}
.mjdj-jp .mj-facts{display:flex;flex-wrap:wrap;margin-block-start:var(--jp-space-10);border-top:1px solid var(--mj-hair);padding-block-start:var(--jp-space-6)}
.mjdj-jp .mj-facts > div{padding:0 clamp(20px,3vw,44px);border-left:1px solid var(--mj-hair)}
.mjdj-jp .mj-facts > div:first-child{padding-left:0;border-left:0}
.mjdj-jp .mj-facts .k{display:block;color:var(--mj-label);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.mjdj-jp .mj-facts .v{color:var(--jp-gray-1000);font-weight:500;font-size:var(--jp-type-compact)}
.mjdj-jp .mj-stacklist{display:grid;grid-template-columns:1fr 1fr;gap:var(--jp-space-5) var(--jp-space-10);margin-block-start:var(--jp-space-8)}
.mjdj-jp .mj-stacklist .it{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.mjdj-jp .mj-tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--jp-gray-1000);color:#fff;display:grid;place-items:center;margin-top:1px}
.mjdj-jp .mj-tick svg{width:12px;height:12px}
.mjdj-jp .mj-stacklist .it p{margin:0;color:var(--jp-gray-900);font-size:var(--jp-type-compact);line-height:1.5}
.mjdj-jp .mj-stacklist .it b{color:var(--jp-gray-1000);font-weight:600}
.mjdj-jp .mj-strat{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,4vw,56px);margin-block-start:var(--jp-space-10)}
.mjdj-jp .mj-prose{margin-block-start:var(--jp-space-10);padding-block-start:var(--jp-space-8);border-top:1px solid var(--mj-hair)}
.mjdj-jp .mj-prose .rule{width:32px;height:2px;background:var(--mj-red);margin-block-end:var(--jp-space-4)}
.mjdj-jp .mj-prose h3{margin:0 0 var(--jp-space-5)}
.mjdj-jp .mj-prose p{color:var(--jp-gray-900);line-height:1.7;margin:0 0 var(--jp-space-4);max-width:72ch;font-size:var(--jp-type-copy)}
.mjdj-jp .mj-prose ul{margin:0 0 var(--jp-space-4) 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--jp-space-3)}
.mjdj-jp .mj-prose li{position:relative;padding-left:22px;color:var(--jp-gray-900);line-height:1.6;max-width:72ch}
.mjdj-jp .mj-prose li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--mj-label)}
.mjdj-jp .mj-prose a{color:var(--jp-gray-1000);text-decoration:underline;text-decoration-color:var(--jp-gray-500);text-underline-offset:3px}
.mjdj-jp .mj-pbcard{position:sticky;top:88px;border:1px solid var(--mj-hair);border-radius:16px;overflow:hidden;background:#fff}
.mjdj-jp .mj-pbcard .cover{padding:0;border-bottom:1px solid var(--mj-hair)}
.mjdj-jp .mj-pbcard .cover img{width:100%;height:auto;display:block}
.mjdj-jp .mj-pbcard .body{padding:20px}
.mjdj-jp .mj-pbcard .eyebrow{color:var(--mj-red);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px}
.mjdj-jp .mj-pbcard h3{margin:0 0 8px;font-size:1.05rem}
.mjdj-jp .mj-pbcard .desc{margin:0 0 16px;color:var(--jp-gray-900);font-size:var(--jp-type-compact)}
.mjdj-jp .mj-pbcard .note{margin:12px 0 0;text-align:center;color:var(--jp-text-secondary);font-size:11px}
.mjdj-jp .mj-pbcard .mojo-cta{width:100%;justify-content:center;display:flex}
.mjdj-jp .mj-disc{margin-block-start:var(--jp-space-10)}
.mjdj-jp .mj-disc .row{display:grid;grid-template-columns:auto minmax(0,4fr) minmax(0,8fr);gap:var(--jp-space-6) var(--jp-space-8);padding-block:var(--jp-space-8);border-top:1px solid var(--mj-hair);align-items:start}
.mjdj-jp .mj-disc .row:first-child{border-top:0}
.mjdj-jp .mj-disc .n{color:var(--mj-label);font-weight:600;font-variant-numeric:tabular-nums;font-size:var(--jp-type-compact)}
.mjdj-jp .mj-disc h3{margin:0;font-size:var(--jp-type-subsection)}
.mjdj-jp .mj-disc .levers{display:flex;flex-wrap:wrap;gap:8px}
.mjdj-jp .mj-disc .levers span{border:1px solid var(--mj-hair);border-radius:100px;padding:5px 12px;font-size:12.5px;color:var(--jp-gray-900);background:var(--jp-background-100)}
.mjdj-jp .mj-wrong{border:1px solid var(--mj-hair);border-radius:16px;overflow:hidden;margin-block-start:var(--jp-space-10)}
.mjdj-jp .mj-wrong .row{display:grid;grid-template-columns:130px minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr);gap:clamp(18px,2.2vw,36px);padding:clamp(24px,2.8vw,38px);align-items:start}
.mjdj-jp .mj-wrong .row + .row{border-top:1px solid var(--mj-hair)}
.mjdj-jp .mj-wrong .cat{color:var(--mj-label);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.mjdj-jp .mj-wrong .role{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-block-end:8px}
.mjdj-jp .mj-wrong .p .role{color:var(--mj-label)}
.mjdj-jp .mj-wrong .s .role{color:var(--mj-red)}
.mjdj-jp .mj-wrong h4{margin:0 0 6px;font-size:var(--jp-type-subsection);letter-spacing:-.01em}
.mjdj-jp .mj-wrong p{margin:0;color:var(--jp-gray-900);font-size:var(--jp-type-compact);line-height:1.55}
.mjdj-jp .mj-wrong .impact{border-left:1px solid var(--mj-hair);padding-left:clamp(16px,1.8vw,26px)}
.mjdj-jp .mj-wrong .impact .big{font-weight:600;color:var(--jp-gray-1000);font-size:var(--jp-type-compact);display:block;margin-block-end:8px}
.mjdj-jp .mj-wrong .impact a{color:var(--jp-gray-1000);text-decoration:underline;text-decoration-color:var(--jp-gray-600);text-underline-offset:3px;font-size:var(--jp-type-compact)}
.mjdj-jp .mj-resultgrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--mj-hair);border-radius:16px;overflow:hidden;margin-block-start:var(--jp-space-10)}
.mjdj-jp .mj-resultgrid .c{padding:clamp(22px,2.6vw,34px)}
.mjdj-jp .mj-resultgrid .c + .c{border-left:1px solid var(--mj-hair)}
.mjdj-jp .mj-resultgrid .v{font-size:clamp(2rem,3.6vw,2.75rem);font-weight:450;letter-spacing:-.04em;line-height:1;color:var(--jp-gray-1000);font-variant-numeric:tabular-nums}
.mjdj-jp .mj-resultgrid .o{margin-block-start:var(--jp-space-3);color:var(--jp-gray-1000);font-weight:500;font-size:var(--jp-type-compact)}
.mjdj-jp .mj-resultgrid .src{margin-block-start:6px;color:var(--jp-text-secondary);font-size:var(--jp-type-metadata);line-height:1.4}
.mjdj-jp .mj-tgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--mj-hair);border:1px solid var(--mj-hair);border-radius:16px;overflow:hidden;margin-block-start:var(--jp-space-10)}
.mjdj-jp .mj-tgrid .t{background:#fff;padding:clamp(24px,2.6vw,36px)}
.mjdj-jp .mj-tgrid blockquote{margin:0 0 var(--jp-space-6);font-size:1.1875rem;line-height:1.45;letter-spacing:-.01em;color:var(--jp-gray-1000);font-weight:450}
.mjdj-jp .mj-tgrid .who{color:var(--jp-text-secondary);font-size:var(--jp-type-compact)}
.mjdj-jp .mj-tgrid .who strong{display:block;color:var(--jp-gray-1000);font-weight:500}
.mjdj-jp .mj-herostats.mj-three{max-width:640px;border-top:0;padding-top:0;margin-top:var(--jp-space-10)}
.mjdj-jp .mj-faq{border-top:1px solid var(--mj-hair)}
.mjdj-jp .mj-faq details{border-bottom:1px solid var(--mj-hair)}
.mjdj-jp .mj-faq summary{list-style:none;cursor:pointer;padding-block:var(--jp-space-5);display:flex;justify-content:space-between;gap:var(--jp-space-6);align-items:center;color:var(--jp-gray-1000);font-weight:500;font-size:var(--jp-type-subsection);letter-spacing:-.01em}
.mjdj-jp .mj-faq summary::-webkit-details-marker{display:none}
.mjdj-jp .mj-faq summary::after{content:"+";color:var(--mj-label);font-weight:400;font-size:1.4rem;flex:none}
.mjdj-jp .mj-faq details[open] summary::after{content:"\2013"}
.mjdj-jp .mj-faq p{margin:0 0 var(--jp-space-6);color:var(--jp-gray-900);max-width:78ch;line-height:1.6}
@media(max-width:900px){.mjdj-jp .mj-wrong .row{grid-template-columns:1fr}
.mjdj-jp .mj-wrong .impact{border-left:0;padding-left:0;border-top:1px solid var(--mj-hair);padding-top:16px}
.mjdj-jp .mj-strat{grid-template-columns:1fr}
.mjdj-jp .mj-pbcard{position:static;max-width:420px}}
@media(max-width:820px){.mjdj-jp .mj-facts > div{border-left:0;padding-left:0;flex:1 1 42%;margin-bottom:14px}
.mjdj-jp .mj-stacklist,.mjdj-jp .mj-tgrid,.mjdj-jp .mj-resultgrid{grid-template-columns:1fr}
.mjdj-jp .mj-tgrid .t+.t,.mjdj-jp .mj-resultgrid .c+.c{border-left:0;border-top:1px solid var(--mj-hair)}
.mjdj-jp .mj-disc .row{grid-template-columns:1fr}}
.mjdj-jp .mj-ed{max-width:var(--jp-reading-width);margin-inline:auto}
.mjdj-jp .mj-ed .mj-label{margin-inline:0}
.mjdj-jp .mj-ed p{color:var(--jp-gray-900);line-height:1.75;margin:0 0 var(--jp-space-5);font-size:var(--jp-type-copy)}
.mjdj-jp .mj-ed h3{margin:var(--jp-space-10) 0 var(--jp-space-4);font-size:var(--jp-type-subsection);letter-spacing:-.01em}
.mjdj-jp .mj-ed .who{list-style:none;margin:var(--jp-space-2) 0 var(--jp-space-6);padding:0;display:flex;flex-direction:column;gap:var(--jp-space-3)}
.mjdj-jp .mj-ed .who li{position:relative;padding-left:22px;color:var(--jp-gray-900);line-height:1.6}
.mjdj-jp .mj-ed .who li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--mj-label)}
.mjdj-jp .mj-ed .who b{color:var(--jp-gray-1000);font-weight:600}
.mjdj-jp .mj-pull{margin:var(--jp-space-8) 0;padding:var(--jp-space-6) 0;border-top:1px solid var(--mj-hair);border-bottom:1px solid var(--mj-hair)}
.mjdj-jp .mj-pull .q{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.42;letter-spacing:-.01em;color:var(--jp-gray-1000);font-weight:450;margin:0}
.mjdj-jp .mj-pull .q b{color:var(--jp-gray-1000);font-weight:700}
.mjdj-jp .mj-pull .c{margin-top:12px;color:var(--jp-text-secondary);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.mjdj-jp .mj-ed-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--jp-space-6) var(--jp-space-10);margin-top:var(--jp-space-8);border-top:1px solid var(--mj-hair);padding-top:var(--jp-space-8)}
.mjdj-jp .mj-ed-grid h4{margin:0 0 6px;font-size:var(--jp-type-compact);color:var(--jp-gray-1000);font-weight:600}
.mjdj-jp .mj-ed-grid p{margin:0;font-size:var(--jp-type-compact);color:var(--jp-gray-900);line-height:1.55}
@media(max-width:820px){.mjdj-jp .mj-ed-grid{grid-template-columns:1fr}}
.mjdj-jp .mj-pbento{--pbpad:clamp(28px,3.4vw,48px);position:relative;border:1px solid var(--mj-hair);border-radius:16px;overflow:hidden;background:var(--jp-background-100);margin-block-start:var(--jp-space-10)}
.mjdj-jp .mj-pbento::after{content:"+";position:absolute;top:-11px;right:14px;z-index:3;color:var(--mj-label);font-weight:300;font-size:20px;line-height:1}
.mjdj-jp .mj-pbrow{position:relative;display:grid;grid-template-columns:repeat(3,1fr)}
.mjdj-jp .mj-pbrow--bot{border-top:1px solid var(--mj-hair)}
.mjdj-jp .mj-pbcell{grid-column:1 / 3;padding:var(--pbpad);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--jp-space-2);border-right:1px solid var(--mj-hair)}
.mjdj-jp .mj-pbrow--top{min-height:300px}
.mjdj-jp .mj-pbrow .lead{margin:0 0 var(--jp-space-6);font-size:var(--jp-type-lede);line-height:var(--jp-leading-lede);color:var(--jp-gray-1000);max-width:46ch}
.mjdj-jp .mj-pbrow .lead b,.mjdj-jp .mj-pbrow p b{color:var(--jp-gray-1000);font-weight:600}
.mjdj-jp .mj-pbrow--bot .mj-pbcell p{margin:0;color:var(--jp-gray-900);font-size:var(--jp-type-compact);line-height:1.6;max-width:52ch}
.mjdj-jp .mj-pbcover{grid-column:3 / 4;position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:320px}
.mjdj-jp .mj-pbcover img{width:100%;display:block}
.mjdj-jp .mj-pbrow--bot .act{grid-column:3 / 4;display:flex;align-items:center;justify-content:center;padding:var(--pbpad)}
.mjdj-jp .pbtn{display:inline-flex;align-items:center;gap:7px;border-radius:100px;padding:11px 20px;font-size:var(--jp-type-compact);font-weight:600;text-decoration:none;border:1px solid var(--mj-hair);color:var(--jp-gray-1000);background:#fff;transition:.15s;white-space:nowrap}
.mjdj-jp .pbtn--ghost:hover{background:var(--mj-grey);border-color:var(--jp-gray-500)}
.mjdj-jp .pbtn--cta{background:var(--mj-red)!important;border-color:var(--mj-red)!important;color:#fff!important}
.mjdj-jp .pbtn--cta:hover{background:var(--mj-red-dark)!important;border-color:var(--mj-red-dark)!important}
@media(max-width:820px){.mjdj-jp .mj-pbrow{grid-template-columns:1fr}
.mjdj-jp .mj-pbcell{grid-column:1;border-right:0}
.mjdj-jp .mj-pbcover{grid-column:1;order:-1;min-height:0}
.mjdj-jp .mj-pbcover img{position:static;width:min(260px,100%)}
.mjdj-jp .mj-pbrow--bot .act{grid-column:1;justify-content:flex-start}}
.mjdj-jp .mj-bento{border:1px solid var(--mj-hair)}
.mjdj-jp .mj-bento>.mj-cell{margin:0 -1px -1px 0}
@media(min-width:821px){.mjdj-jp .mj-bento>.mj-span2{grid-column:span 2}
.mjdj-jp .mj-bento>.mj-span3{grid-column:1 / -1}
.mjdj-jp .mj-stacklist.mj-stack3{grid-template-columns:repeat(3,1fr)}}
.mjdj-jp .mj-qf{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 var(--jp-space-8);margin-block-start:var(--jp-space-8)}
.mjdj-jp .mj-qf>div{border-top:1px solid var(--mj-hair);padding-block:14px}
.mjdj-jp .mj-qf .k{display:block;color:var(--mj-label);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.mjdj-jp .mj-qf .v{color:var(--jp-gray-1000);font-weight:500;font-size:var(--jp-type-compact)}

/* ==== components/public/mojodojo/footer-mark.css ==== */
/* Footer emblem: vertical モジョ in brush type + a red hanko seal with 道場 (owner pick, 2026-10-01).
   The font file is a 5-glyph subset of Yuji Boku (SIL OFL), self-hosted. */
@font-face {
  font-family: 'MD Yuji Boku';
  src: url('/theme/assets/fonts/yuji-boku-mojodojo.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+3099, U+30B7-30B8, U+30E2, U+30E7, U+5834, U+9053;
}
.mjdj-footer-mark {
  position: absolute;
  right: 56px;
  bottom: 120px; /* clear of the bottom bar (locale switcher, socials) */
  display: flex;
  align-items: center;
  gap: 18px;
  writing-mode: vertical-rl;
  font-family: 'MD Yuji Boku', serif;
  font-size: 100px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.mjdj-footer-mark .kana { color: #111; opacity: 0.06; }
.mjdj-footer-mark .seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 98px;
  height: 152px;
  border-radius: 6px;
  background: #b91c1c;
  color: #fff;
  font-size: 60px;
  opacity: 0.12;
}
@media (max-width: 1024px) {
  .mjdj-footer-mark { transform: scale(0.7); transform-origin: bottom right; }
}
@media (max-width: 640px) {
  .mjdj-footer-mark { display: none; }
}

/* ==== components/public/mojodojo/menu-panel.css ==== */
/* Site menu overlay — Japan/Geist layout (ports .mojo-overlay / .mojo-ov-* from
 * mojo-homepage-japan.html). Self-contained: japan.css is only loaded on converted
 * pages, so the tokens the menu needs are declared here. Red is reserved for the
 * logo and the "Get Free Audit" CTAs. */

.mjdj-jp.jp-menu {
  --jpm-ink: oklch(0.205 0 0);
  --jpm-ink-2: oklch(0.42 0 0);
  --jpm-muted: #6b6b6b;
  --jpm-label: #8a8a8a;
  --jpm-hair: #e6e6e6;
  --jpm-hair-strong: oklch(0 0 0 / 0.21);
  --jpm-wash: oklch(0 0 0 / 0.05);
  --jpm-bg: #fff;
  --jpm-red: #d32222;
  --jpm-red-dark: #b01b1b;
  --jpm-width: 1200px;
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--jpm-bg);
  color: var(--jpm-ink);
  color-scheme: light;
  font-family: var(--font-geist-sans, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
}

.mjdj-jp.jp-menu .jp-menu-wrap {
  width: min(calc(100% - 48px), var(--jpm-width));
  margin-inline: auto;
}

/* ── top row: logo · Close · Get Free Audit ─────────────────────────── */
.mjdj-jp.jp-menu .jp-menu-top {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.8) blur(8px);
  backdrop-filter: saturate(1.8) blur(8px);
  border-bottom: 1px solid var(--jpm-hair);
}
.mjdj-jp.jp-menu .jp-menu-top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
}
.mjdj-jp.jp-menu .jp-menu-identity {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
  text-decoration: none;
}
.mjdj-jp.jp-menu .jp-menu-logo {
  display: block;
  height: 50px;
  width: auto;
}
.mjdj-jp.jp-menu .jp-menu-wordmark {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--jpm-red);
}
.mjdj-jp.jp-menu .jp-menu-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Geist button (vbg-button) */
.mjdj-jp.jp-menu .jp-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 16px;
  border: 1px solid oklch(0 0 0 / 0.08);
  border-radius: 6px;
  background: #fff;
  color: #1f1f1f;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.mjdj-jp.jp-menu .jp-menu-btn:hover {
  border-color: var(--jpm-hair-strong);
  background: var(--jpm-wash);
}
.mjdj-jp.jp-menu .jp-menu-btn:focus-visible,
.mjdj-jp.jp-menu a:focus-visible {
  outline: 2px solid var(--jpm-ink);
  outline-offset: 2px;
}
.mjdj-jp.jp-menu .jp-menu-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.mjdj-jp.jp-menu .jp-menu-btn.jp-menu-cta {
  background: var(--jpm-red);
  border-color: var(--jpm-red);
  color: #fff;
}
.mjdj-jp.jp-menu .jp-menu-btn.jp-menu-cta:hover {
  background: var(--jpm-red-dark);
  border-color: var(--jpm-red-dark);
}

/* ── body ────────────────────────────────────────────────────────────── */
.mjdj-jp.jp-menu .jp-menu-body {
  padding-block: clamp(32px, 5vw, 56px) 80px;
}
.mjdj-jp.jp-menu .jp-menu-title {
  margin: 0 0 var(--jpm-gap-title, 48px);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: 450;
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-wrap: balance;
  color: var(--jpm-ink);
}

.mjdj-jp.jp-menu .jp-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 32px;
}
.mjdj-jp.jp-menu .jp-menu-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 20px;
  border-top: 1px solid var(--jpm-hair);
}
.mjdj-jp.jp-menu .jp-menu-num {
  margin: 0 0 12px;
  font-family: var(--font-geist-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--jpm-label);
}
.mjdj-jp.jp-menu .jp-menu-col h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--jpm-ink);
}
.mjdj-jp.jp-menu .jp-menu-lede {
  margin: 0 0 24px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--jpm-muted);
}

.mjdj-jp.jp-menu .jp-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.mjdj-jp.jp-menu .jp-menu-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jpm-label);
}

/* service chips: hairline pills, monochrome */
.mjdj-jp.jp-menu .jp-menu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mjdj-jp.jp-menu .jp-menu-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--jpm-hair);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--jpm-ink);
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.mjdj-jp.jp-menu .jp-menu-chip:hover {
  border-color: var(--jpm-ink);
}

/* link rows */
.mjdj-jp.jp-menu .jp-menu-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--jpm-ink);
  text-decoration: none;
}
.mjdj-jp.jp-menu .jp-menu-link:hover {
  text-decoration: underline;
  text-decoration-color: oklch(0.732 0 0);
  text-underline-offset: 3px;
}
.mjdj-jp.jp-menu .jp-menu-arrow {
  display: inline-block;
  color: var(--jpm-label);
  transition: transform 150ms ease, color 150ms ease;
}
.mjdj-jp.jp-menu .jp-menu-row:hover .jp-menu-arrow {
  transform: translateX(3px);
  color: var(--jpm-ink);
}
.mjdj-jp.jp-menu .jp-menu-desc {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--jpm-muted);
}

/* locales: flag + code, desaturated until hover */
/* one hairline segmented row; gap:1px + hair background = dividers for any count */
.mjdj-jp.jp-menu .jp-menu-locales {
  display: flex;
  gap: 1px;
  max-width: 340px;
  border: 1px solid var(--jpm-hair);
  border-radius: 8px;
  overflow: hidden;
  background: var(--jpm-hair);
}
.mjdj-jp.jp-menu .jp-menu-locale {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 36px;
  padding: 4px 2px;
  background: #fff;
  font-family: var(--font-geist-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jpm-ink-2);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.mjdj-jp.jp-menu .jp-menu-locale:hover {
  background: oklch(0.984 0 0);
  color: var(--jpm-ink);
}
.mjdj-jp.jp-menu .jp-menu-flag {
  font-size: 15px;
  line-height: 1;
  filter: grayscale(1) opacity(0.75);
  transition: filter 200ms ease;
}
.mjdj-jp.jp-menu .jp-menu-locale:hover .jp-menu-flag {
  filter: none;
}

.mjdj-jp.jp-menu .jp-menu-col .jp-menu-cta {
  align-self: flex-start;
}

/* entrance */
.mjdj-jp.jp-menu .jp-menu-enter {
  animation: jpMenuIn 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes jpMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mjdj-jp.jp-menu .jp-menu-enter { animation: none; }
}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .mjdj-jp.jp-menu .jp-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .mjdj-jp.jp-menu .jp-menu-grid { grid-template-columns: 1fr; gap: 36px; }
  .mjdj-jp.jp-menu { --jpm-gap-title: 32px; }
}
@media (max-width: 480px) {
  .mjdj-jp.jp-menu .jp-menu-wrap { width: calc(100% - 32px); }
  .mjdj-jp.jp-menu .jp-menu-logo { height: 40px; }
  .mjdj-jp.jp-menu .jp-menu-actions { gap: 8px; }
  .mjdj-jp.jp-menu .jp-menu-btn { padding: 7px 12px; }
  .mjdj-jp.jp-menu .jp-menu-col h3 { font-size: 1.1875rem; }
}

/* ==== preflight.css ==== */
@layer base {
/* Tailwind CSS v4.2.0 preflight, copied from core frontend/node_modules/tailwindcss/preflight.css
 * (CORE_REF ecf6633e). Only change: the build-time theme-function calls are
 * rewritten to `var(--x, fallback)` (what Tailwind itself emits; the variables are
 * defined in chrome.css). theme-css.sh wraps this file in `@layer base`. */
/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
  font-family: var(
    --default-font-family,
    ui-sans-serif,
    system-ui,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ); /* 4 */
  font-feature-settings: var(--default-font-feature-settings, normal); /* 5 */
  font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(
    --default-mono-font-family,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace
  ); /* 1 */
  font-feature-settings: var(--default-mono-font-feature-settings, normal); /* 2 */
  font-variation-settings: var(--default-mono-font-variation-settings, normal); /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

}
/* ==== chrome.css ==== */
/* Hand-written page base + chrome (header, menu, footer) for the Go mojo theme.
 * Unlayered and last in the bundle, so it beats core base.css (unlayered, earlier)
 * where both set the same property. Values mirror the live Next page
 * (public.css body rules, `html.antialiased`, `body.bg-white.text-gray-900`). */

/* ---- Tailwind theme variables the preflight / sources read --------------- */
:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-geist-sans: "Geist";
  --default-font-family: var(--font-sans);
}

/* ---- Page base ----------------------------------------------------------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background-color: #fff;
  color: var(--color-gray-900);
  font-family: var(--default-font-family);
  font-size: var(--mjdj-text-body);
  /* live body line-height is the preflight html value (1.5 = 24px); core base.css sets 1.6 */
  line-height: 1.5;
  text-rendering: optimizelegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  /* Next wraps the page in div.min-h-screen.flex.flex-col.bg-white with main.flex-1 (live CSS:
   * .min-h-screen{min-height:100vh} .flex-col{flex-direction:column} .flex-1{flex:1}), so the
   * footer sits at the bottom of short pages. <body> is the wrapper here. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#main-content { flex: 1; }

/* ---- Skip link (the site base.html emits it before the header) ----------- */
.mj-skip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0;
}
.mj-skip:focus {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 60; width: auto; height: auto;
  margin: 0; padding: 0.5rem 1rem; overflow: visible; clip-path: none; white-space: normal;
  background: #fff; color: var(--mjdj-brand); font-weight: 600; border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  outline: 2px solid var(--mjdj-brand);
}

/* ---- Header (header.tsx): fixed bar, transparent until scrolled ----------- */
.mj-header {
  position: fixed; top: 0; inset-inline: 0; z-index: 50;
  background-color: transparent;
  transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
/* mojo.js adds `header-scrolled` (core public.css rule + bg-white/95, backdrop-blur, shadow-sm). */
.mj-header.header-scrolled {
  background-color: #fffffff2;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}
.mj-header__row { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.mj-logo { display: flex; align-items: center; flex-shrink: 0; }
.mj-logo__img { height: 3.5rem; width: auto; }
.mj-logo__name { font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 600; letter-spacing: -.025em; color: var(--mjdj-brand); }
.mj-header__actions { display: flex; align-items: center; gap: .625rem; }
.mj-nowrap { white-space: nowrap; }
.site-header-spacer { height: 4rem; }

/* Menu trigger (the Next <button>; here an anchor to #main-menu-panel, upgraded by mojo.js). */
.mj-menu-btn {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .5rem .75rem;
  font-size: var(--mjdj-text-compact); line-height: var(--mjdj-leading-compact); font-weight: 500;
  color: var(--mjdj-fg-muted);
  border: 1px solid var(--mjdj-line); border-radius: 6px; background-color: #fff;
  cursor: pointer; text-decoration: none;
  transition-property: color, background-color, border-color; transition-duration: .15s; transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.mj-menu-btn:hover { background-color: var(--mjdj-surface-2); border-color: var(--mjdj-line-strong); }
.mj-menu-btn:focus { outline: none; box-shadow: 0 0 0 2px var(--color-gray-300); }
.mj-menu-btn__icon { width: 1rem; height: 1rem; }
@media (min-width: 40rem) { .mj-menu-btn { padding-inline: 1rem; } }

/* ---- Footer (footer.tsx) -------------------------------------------------- */
.mj-footer { position: relative; overflow: hidden; background-color: #fff; border-top: 1px solid var(--mjdj-line); }
.mj-footer__main { position: relative; padding-top: 4rem; padding-bottom: 3.5rem; }
.mj-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; row-gap: 2.5rem; }
@media (min-width: 48rem) { .mj-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .mj-footer__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.mj-f-h { margin-bottom: 1rem; }
.mj-f-list { list-style: none; }
.mj-f-list > :not(:first-child) { margin-top: .625rem; }
.mj-f-link {
  font-size: var(--mjdj-text-compact); line-height: var(--mjdj-leading-compact); color: var(--mjdj-fg-muted);
  transition-property: color; transition-duration: .15s; transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.mj-f-link:hover { color: var(--mjdj-fg); }
.mj-f-contacts > :not(:first-child) { margin-top: 1.25rem; }
.mj-f-contact__c { margin-bottom: .375rem; color: var(--color-gray-300); }
.mj-f-contact__tel { display: block; font-size: var(--mjdj-text-compact); line-height: var(--mjdj-leading-compact); font-weight: 500; color: var(--mjdj-fg); }
.mj-f-contact__addr { margin-top: .25rem; font-size: var(--mjdj-text-meta); line-height: 1.625; color: var(--mjdj-fg-subtle); }
.mj-footer__band { position: relative; border-top: 1px solid var(--mjdj-line); }
.mj-footer__global { padding-block: 1.25rem; }
.mj-footer__locales { list-style: none; display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: .5rem; }
.mj-f-locale {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--mjdj-text-compact); line-height: var(--mjdj-leading-compact); color: var(--color-gray-500);
  transition-property: color; transition-duration: .15s; transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.mj-f-locale:hover { color: var(--color-gray-900); }
.mj-f-locale.is-current { color: var(--color-gray-900); font-weight: 500; }
.mj-footer__bar { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }
@media (min-width: 40rem) { .mj-footer__bar { flex-direction: row; } }
.mj-footer__brand { display: flex; align-items: center; gap: 1rem; }
.mj-footer__logo { flex-shrink: 0; }
.mj-footer__logo-img { height: 2.5rem; width: auto; }
.mj-footer__legal { font-size: var(--mjdj-text-meta); line-height: var(--mjdj-leading-meta); color: var(--mjdj-fg-subtle); }
.mj-footer__right { display: flex; align-items: center; gap: 1rem; }
/* Locale dropdown (LocaleSwitcher): Tailwind utilities of the Next component written against the structure. */
.mj-f-lang { position: relative; border: 1px solid var(--mjdj-line); border-radius: .375rem; }
.mj-f-lang__btn { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; font-size: .875rem; line-height: 1.25rem; color: var(--color-gray-700); border-radius: .375rem; cursor: pointer; transition-property: color, background-color; transition-duration: .15s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
.mj-f-lang__btn:hover { background-color: var(--color-gray-100); }
.mj-f-lang__flag { font-size: 1rem; line-height: 1.5rem; }
.mj-f-lang__code { display: none; }
@media (min-width: 40rem) { .mj-f-lang__code { display: inline; } }
.mj-f-lang__chev { width: 1rem; height: 1rem; color: var(--color-gray-400); transition-property: transform; transition-duration: .15s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
.mj-f-lang.is-open .mj-f-lang__chev { transform: rotate(180deg); }
.mj-f-lang__panel { position: absolute; right: 0; top: 100%; margin-top: .25rem; z-index: 50; width: 12rem; padding-block: .25rem; background: #fff; border: 1px solid var(--color-gray-200); border-radius: .5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); }
.mj-f-lang__panel[hidden] { display: none; }
.mj-f-lang.is-up .mj-f-lang__panel { top: auto; bottom: 100%; margin-top: 0; margin-bottom: .25rem; }
.mj-f-lang__opt { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem 1rem; text-align: left; font-size: .875rem; line-height: 1.25rem; color: var(--color-gray-700); transition-property: color, background-color; transition-duration: .15s; }
.mj-f-lang__opt:hover { background-color: var(--color-gray-50); }
.mj-f-lang__opt.is-current { background-color: var(--color-blue-50); color: var(--color-blue-700); }
.mj-f-lang__name { flex: 1 1 0%; }
.mj-f-lang__tick { width: 1rem; height: 1rem; color: var(--color-blue-600); }
.mj-footer__social { display: flex; align-items: center; gap: .875rem; }
.mj-f-social { color: var(--mjdj-fg-subtle); transition-property: color; transition-duration: .15s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
.mj-f-social:hover { color: var(--mjdj-fg); }
.mj-f-social__icon--18 { height: 18px; width: 18px; }
.mj-f-social__icon--16 { height: 1rem; width: 1rem; }

/* ---- Breadcrumb (page.html) ------------------------------------------------
 * The nav keeps Next's Tailwind classes (DOM parity) but the bundle ships no Tailwind, so the
 * computed styles the live page ends up with are written against the structure. Sources, from the
 * live CSS: the utilities `max-w-7xl mx-auto px-6 pt-4 pb-2` / `flex items-center gap-1.5 text-xs
 * text-gray-400` / `hover:text-gray-600 transition-colors` as overridden by mojodojo-theme.css
 * (`#main-content > nav[aria-label="Breadcrumb"]`: width min(100% - 48px, 1200px), no inline
 * padding, ol colour fg-subtle, last crumb fg-muted). Measured live at 1280: nav margin 0 40px,
 * padding 16px 0 8px, 40px tall; ol flex, gap 6px, 12px/16px, #737373. */
#main-content > nav[aria-label="Breadcrumb"] {
  width: min(100% - 48px, var(--mjdj-content-width));
  max-width: none;
  margin-inline: auto;
  padding: 1rem 0 .5rem;
}
#main-content > nav[aria-label="Breadcrumb"] > ol {
  display: flex; align-items: center; gap: .375rem;
  list-style: none; margin: 0; padding: 0;
  font-size: .75rem; line-height: 1rem; color: var(--mjdj-fg-subtle);
}
#main-content > nav[aria-label="Breadcrumb"] > ol > li { display: flex; align-items: center; gap: .375rem; }
#main-content > nav[aria-label="Breadcrumb"] a {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-duration: .15s; transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) { #main-content > nav[aria-label="Breadcrumb"] a:hover { color: var(--color-gray-600); } }
#main-content > nav[aria-label="Breadcrumb"] > ol > li:last-child > span:last-child { color: var(--mjdj-fg-muted); }
/* mojodojo-theme.css: the listing pages (blog, glossary, playbooks, team) show no breadcrumb. */
#main-content:has([data-mojo-listing]) > nav[aria-label="Breadcrumb"] { display: none; }