/* solarerp.in — /modules/{slug} pages and the "Learn more" links on /modules.
   Loaded after site.css on every page, so every class here starts with .mdx- and reuses the site's tokens
   (--ink, --line, --green-700 …). Mobile first; nothing here may widen the page past 375px. */

/* ---------------- Hero ---------------- */
.mdx-id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.mdx-id .tile { width: 44px; height: 44px; border-radius: 13px; }
.mdx-id .tile .ico { width: 22px; height: 22px; }
.mdx-tagline { margin-top: 16px; max-width: 780px; font: 650 clamp(20px, 2.6vw, 28px)/1.25 var(--ff-display); letter-spacing: -0.025em; color: var(--slate); text-wrap: balance; }
.mdx-summary { margin-top: 16px; max-width: 720px; }
.mdx-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------------- Sections ---------------- */
.mdx-sec { padding-block: 44px; }
@media (min-width: 900px) { .mdx-sec { padding-block: 64px; } }
.mdx-h { margin-bottom: 22px; font: 700 clamp(22px, 2.3vw, 28px)/1.2 var(--ff-display); letter-spacing: -0.028em; color: var(--onyx); }

/* Real product screens */
.mdx-shots { display: grid; gap: 18px; }
@media (min-width: 900px) {
    .mdx-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mdx-shots.is-single { grid-template-columns: minmax(0, 1fr); }
    .mdx-shots:not(.is-single) .mdx-shot:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.mdx-shot { margin: 0; }
.mdx-shot img { width: 100%; border: 1px solid var(--line); border-radius: var(--r-img); box-shadow: var(--shadow-soft); background: var(--mist); }
.mdx-shot figcaption { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--ash); }

/* What's included */
.mdx-features { display: grid; gap: 10px; }
@media (min-width: 640px) { .mdx-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mdx-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mdx-features li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14.5px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.mdx-features .ico { color: var(--green-600); }

/* What it does for you */
.mdx-benefits { display: grid; gap: 12px; max-width: 880px; }
.mdx-benefits li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.mdx-n { padding-top: 3px; font: 500 12px/1 var(--ff-mono); letter-spacing: .06em; color: var(--green-700); }
.mdx-benefits p { font-size: 16px; line-height: 1.6; color: #3a3d3a; overflow-wrap: anywhere; }

/* Who uses it */
.mdx-who { display: grid; gap: 10px; max-width: 720px; }
.mdx-who li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.6; color: #3a3d3a; }
.mdx-who li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* Works with */
.mdx-with + .mdx-with { margin-top: 22px; }
.mdx-with > p { margin-bottom: 12px; color: var(--slate); }
.mdx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mdx-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; font: 600 14px/1.2 var(--ff-body); color: var(--ink); transition: border-color .15s, background-color .15s; }
.mdx-chip .ico { color: var(--ash); transition: transform .25s var(--ease); }
.mdx-chip:hover { border-color: var(--ink); background: var(--mist); }
.mdx-chip:hover .ico { transform: translateX(3px); }

/* Related features (cards that point at another module page) */
.mdx-related { display: grid; gap: 12px; }
@media (min-width: 700px) { .mdx-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mdx-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--mist); transition: border-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease); }
.mdx-card:hover { border-color: #d3dbd3; transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.mdx-card b { font: 700 17px/1.3 var(--ff-display); letter-spacing: -0.02em; color: var(--onyx); }
.mdx-card > span:not(.mdx-card-go) { font-size: 14.5px; line-height: 1.55; color: var(--slate); }
.mdx-card-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font: 600 14px/1.2 var(--ff-body); color: var(--green-700); }
.mdx-card-go .ico { transition: transform .25s var(--ease); }
.mdx-card:hover .mdx-card-go .ico { transform: translateX(3px); }

/* Closing call to action */
.mdx-next { margin-top: 0; }

/* Index of every module page (detail pages and /modules) */
.mdx-index-wrap { margin-top: 72px; }
.mdx-index-grid { display: grid; gap: 10px; }
@media (min-width: 560px) { .mdx-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .mdx-index-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mdx-index-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mdx-index-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .2s, transform .25s var(--ease); }
.mdx-index-item:hover { border-color: var(--ink); transform: translateY(-1px); }
.mdx-index-name { flex: 1; min-width: 0; font: 600 14.5px/1.3 var(--ff-body); color: var(--ink); overflow-wrap: anywhere; }
.mdx-index-item > .ico { color: var(--ash); transition: transform .25s var(--ease); }
.mdx-index-item:hover > .ico { transform: translateX(3px); }

/* "Learn more" under an area on /modules */
.mdx-learn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; }
.mdx-learn-link { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.2 var(--ff-body); color: var(--green-700); text-decoration: underline; text-decoration-color: rgba(47, 138, 58, .35); text-underline-offset: 3px; }
.mdx-learn-link .ico { transition: transform .25s var(--ease); }
.mdx-learn-link:hover { color: var(--ink); text-decoration-color: var(--ink); }
.mdx-learn-link:hover .ico { transform: translateX(3px); }