/* Themed sites: shared skeleton. Loaded first; the layout file (docs.css, editorial.css, ...) follows in the same
   theme.css and carries each site's real look. Colours, fonts, radius and density arrive as CSS variables from the
   site's "theme" block (see themeVars in build.mjs). System fonts only, no JavaScript, no external requests.
   This file only resets what style.css does and gives every component a neutral default. */
:root { --maxw: 1080px; --d: var(--dens, 1); }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.65; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; }
a { color: var(--accent-ink); }
.wrap { max-width: var(--maxw); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.site-header :focus-visible { outline-color: var(--head-ink); }
.site-footer :focus-visible { outline-color: var(--foot-ink); }

/* header and wordmark */
.site-header { border: 0; border-bottom: 1px solid var(--line); background: var(--head-bg); color: var(--head-ink); }
.header-row { padding-top: 14px; padding-bottom: 14px; }
.brand { color: var(--head-ink); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-text { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.1; }
.logo-mark { height: 32px; width: 32px; flex: none; display: block; }
.site-header nav a { color: var(--head-ink); border-radius: var(--radius); }
.site-header nav a:hover { background: transparent; }
.site-header nav a[aria-current="page"] { background: transparent; color: var(--head-ink); }

/* hero (home) */
.t-hero { padding: calc(52px * var(--d)) 0 calc(40px * var(--d)); }
.t-hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.t-hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin: 0 0 14px; letter-spacing: -.015em; }
.t-hero .lede { color: var(--muted); font-size: 1.12rem; margin: 0; max-width: 38em; }
.eyebrow { margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.hero-panel { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 20px 22px; }
.hero-panel h2 { margin: 0 0 8px; font-size: 1rem; }
.hero-panel ul { margin: 0; padding-left: 1.1em; }
.hero-panel li { margin: .35em 0; }
.t-note { margin-bottom: 8px; }
.t-note .disclosure-note, .article .disclosure-note { margin: 18px 0; border-radius: var(--radius); }
.t-intro, .t-topics, .t-feature { padding-top: calc(24px * var(--d)); padding-bottom: calc(24px * var(--d)); }
.t-intro h2 { margin-top: 0; }
.t-topics > h2 { margin: 0 0 calc(18px * var(--d)); font-size: 1.5rem; }
.t-soon { color: var(--muted); font-size: .92rem; margin-top: 18px; }

/* entries (home lists) */
.entries { display: grid; gap: calc(20px * var(--d)); }
.entry { display: grid; gap: 10px; }
.entry-cover { display: block; overflow: hidden; background: var(--surface); }
.entry-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.entry-ph { display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.entry-body { min-width: 0; }
.entry-kicker { margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.entry-no { font-variant-numeric: tabular-nums; }
.entry h3, .entry h4 { margin: 0 0 6px; font-size: 1.2rem; }
.entry h3 a, .entry h4 a, .feature h2 a { color: var(--ink); text-decoration: none; }
.entry h3 a:hover, .entry h4 a:hover, .feature h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.entry-ex { margin: 0 0 8px; color: var(--muted); font-size: .97rem; }
.entry-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--muted); }
.group-head h3 { margin: 0 0 4px; font-size: 1.2rem; }
.group-blurb { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }
.group { margin: 0 0 calc(34px * var(--d)); }
.feature { display: grid; gap: 18px; }
.feature-cover { display: block; overflow: hidden; }
.feature-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature h2 { margin: 0 0 10px; }

/* simple pages and articles */
.page, .article { max-width: 800px; padding-top: calc(36px * var(--d)); padding-bottom: calc(56px * var(--d)); }
.page h1, .article h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); margin: 0 0 14px; letter-spacing: -.015em; }
.page .prose h2, .article .prose h2 { font-size: 1.45rem; margin: 2em 0 .5em; }
.prose { max-width: 44rem; }
.article .art-head .eyebrow { margin-bottom: 8px; }
.meta { color: var(--muted); }
.art-cover { margin: 0 0 28px; }
.art-cover img { display: block; width: 100%; height: auto; object-fit: cover; }
.facts { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .88rem; }
.facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); font-weight: 600; }
.toc ol { margin: 0; padding-left: 1.1em; }
.toc li { margin: .3em 0; font-size: .92rem; }
.toc-title { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.table-wrap { border-radius: var(--radius); }
table { font-size: .95rem; }
thead th { background: var(--surface); color: var(--ink); }
tbody th { background: transparent; }
th, td { border-bottom-color: var(--line); }
.table-wrap { border-color: var(--line); }
code { background: var(--surface); }
blockquote { border-left-color: var(--accent); color: var(--muted); }
.faq { border-top-color: var(--line); }
.sources { border-top-color: var(--line); }
.cta-box { background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius); }
.cta-box a { color: var(--ink); text-decoration-color: var(--accent); }
.crumbs, .crumbs a, .crumbs li + li::before { color: var(--muted); }
.crumbs [aria-current="page"] { color: var(--ink); }
.draft-banner { border-radius: var(--radius); }
.shot img { border-color: var(--line); }
.shot figcaption { color: var(--muted); }
.demo-band { padding-top: calc(24px * var(--d)); padding-bottom: calc(24px * var(--d)); }
.demo-band .demo-intro { color: var(--muted); }
.demo-band .demo-link a { font-weight: 700; }

/* footer */
.site-footer { margin-top: calc(48px * var(--d)); background: var(--foot-bg); color: var(--foot-ink); border: 0; padding: 36px 0 26px; }
.site-footer .brand { color: var(--foot-ink); }
.site-footer a { color: var(--foot-ink); }
.site-footer nav a { color: var(--foot-ink); font-weight: 600; }
.footer-tag { color: var(--foot-ink); opacity: .86; }
.footer-disclosure { border-top: 1px solid color-mix(in srgb, var(--foot-ink) 28%, transparent); }
.footer-disclosure p { color: var(--foot-ink); opacity: .9; }
.footer-note { margin-top: 6px !important; font-size: .82rem !important; opacity: .78 !important; }

/* docs sidebar markup exists only on the docs layout; hidden everywhere else just in case */
.docs-toggle, .docs-toggle-label { display: none; }

@media (max-width: 860px) {
  .t-hero .hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .page, .article { padding-top: 26px; padding-bottom: 40px; }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .header-row { gap: 6px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* COMPARE layout (bestwmssoftware.com): a comparison lab. Sticky header, tight two-column grids, hairline rules instead
   of cards, a right rail with cover, facts and a jump list on articles, strong table styling. Cobalt on white. */
.theme-compare { --maxw: 1240px; font-size: 15.5px; line-height: 1.58; }
.theme-compare h1, .theme-compare h2, .theme-compare h3, .theme-compare h4 { font-weight: 750; letter-spacing: -.018em; line-height: 1.18; }

/* header: sticky, compact */
.theme-compare .site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 var(--accent); }
.theme-compare .header-row { padding-top: 8px; padding-bottom: 8px; gap: 4px 20px; }
.theme-compare .logo-text { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.theme-compare .brand:not(:has(.logo-mark)) .logo-text::before { content: ""; display: inline-block; width: 16px; height: 14px; margin-right: 9px; vertical-align: -1px; background: linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 10px, var(--ink) 10px 16px); background-size: 16px 100%; clip-path: polygon(0 40%, 6px 40%, 6px 0, 0 0, 0 100%, 6px 100%, 6px 40%, 10px 40%, 10px 100%, 16px 100%, 16px 0, 10px 0, 10px 40%); }
.theme-compare .site-header nav { gap: 0 2px; }
.theme-compare .site-header nav a { padding: 6px 11px; font-size: .84rem; font-weight: 650; color: var(--ink); border-radius: 3px; }
.theme-compare .site-header nav a:hover { background: var(--x-blueSoft); }
.theme-compare .site-header nav a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }

/* home */
.theme-compare .t-note { max-width: none; padding: 0; margin: 0; background: var(--x-blueSoft); border-bottom: 1px solid #c9d6f7; }
.theme-compare .t-note .disclosure-note { max-width: var(--maxw); margin: 0 auto; padding: 8px 20px; background: transparent; border: 0; border-radius: 0; font-size: .84rem; font-weight: 600; }
.theme-compare .t-hero { padding: calc(30px * var(--d)) 0 calc(22px * var(--d)); }
.theme-compare .t-hero .hero-grid { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 40px; align-items: start; }
.theme-compare .eyebrow { font-size: .72rem; letter-spacing: .1em; color: var(--accent); }
.theme-compare .t-hero h1 { font-size: clamp(1.8rem, 3.3vw, 2.45rem); font-weight: 800; line-height: 1.1; margin-bottom: 10px; }
.theme-compare .t-hero .lede { font-size: 1.02rem; line-height: 1.55; }
.theme-compare .hero-panel { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 0; padding: 10px 14px 6px; }
.theme-compare .hero-panel h2 { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 750; color: var(--muted); margin-bottom: 4px; }
.theme-compare .hero-panel ul { list-style: none; padding: 0; counter-reset: r; }
.theme-compare .hero-panel li { counter-increment: r; display: grid; grid-template-columns: 2.2rem 1fr; margin: 0; padding: 7px 0; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.4; }
.theme-compare .hero-panel li:first-child { border-top: 0; }
.theme-compare .hero-panel li::before { content: "R" counter(r); font-family: var(--font-mono); font-size: .74rem; color: var(--accent); font-weight: 700; padding-top: 1px; }
.theme-compare .t-intro { padding-top: 6px; padding-bottom: 8px; }
.theme-compare .t-intro .prose { max-width: none; column-count: 2; column-gap: 40px; font-size: .95rem; line-height: 1.58; }
.theme-compare .t-intro .prose h2 { column-span: all; font-size: 1.05rem; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
.theme-compare .t-intro .prose p { margin: 0 0 .7em; break-inside: avoid-column; }
.theme-compare .t-topics { padding-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start; }
.theme-compare .t-topics > h2, .theme-compare .t-topics > .t-soon { grid-column: 1 / -1; }
.theme-compare .t-topics > h2 { font-size: 1.05rem; padding-bottom: 6px; border-bottom: 2px solid var(--ink); margin-bottom: 16px; }
.theme-compare .group { margin-bottom: 22px; }
.theme-compare .group-head { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 12px; margin-bottom: 0; }
.theme-compare .group-head h3 { margin: 0; padding: 5px 12px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; }
.theme-compare .group-blurb { margin: 0; padding: 5px 0; font-size: .86rem; align-self: center; }
.theme-compare .entries { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.theme-compare .entry { grid-template-columns: minmax(0, 1fr); gap: 0 14px; padding: 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; align-content: start; }
.theme-compare .entry.has-cover { grid-template-columns: 116px minmax(0, 1fr); }
.theme-compare .entry:hover { background: var(--x-blueSoft); }
.theme-compare .entry-cover { aspect-ratio: 16 / 10; border: 1px solid var(--line); }
.theme-compare .entry-kicker { margin-bottom: 3px; font-size: .68rem; gap: 8px; }
.theme-compare .entry-no { font-family: var(--font-mono); color: var(--accent); }
.theme-compare .entry-cat { color: var(--muted); }
.theme-compare .entry h4 { font-size: 1rem; margin-bottom: 3px; }
.theme-compare .entry h4 a { color: var(--ink); }
.theme-compare .entry h4 a::after { content: ""; position: absolute; inset: 0; }
.theme-compare .entry-ex { font-size: .84rem; line-height: 1.45; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.theme-compare .entry-meta { font-family: var(--font-mono); font-size: .68rem; gap: 2px 12px; }

/* articles: prose left, sticky rail right */
.theme-compare .article { max-width: var(--maxw); padding-top: 22px; padding-bottom: 48px; }
.theme-compare .page { max-width: 760px; padding-top: 26px; }
.theme-compare .crumbs { font-size: .78rem; margin-bottom: 10px; }
.theme-compare .art-head { max-width: 52rem; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.theme-compare .article h1, .theme-compare .page h1 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 800; line-height: 1.1; margin-bottom: 6px; }
.theme-compare .meta { font-size: .85rem; margin: 0; }
.theme-compare .art-grid { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 0 48px; align-items: start; }
.theme-compare .art-main { min-width: 0; max-width: 50rem; }
.theme-compare .rail { position: sticky; top: 64px; order: 2; display: grid; gap: 14px; }
.theme-compare .rail .art-cover { margin: 0; border: 1px solid var(--line); }
.theme-compare .rail .art-cover img { aspect-ratio: 16 / 10; }
.theme-compare .rail .facts { display: block; border-top: 2px solid var(--ink); font-size: .84rem; }
.theme-compare .rail .facts > div { display: grid; grid-template-columns: 6.6rem 1fr; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.theme-compare .rail .facts dt { font-size: .68rem; padding-top: 2px; }
.theme-compare .rail .facts dd { font-weight: 650; }
.theme-compare .toc { padding: 10px 12px; border: 1px solid var(--line); border-top: 3px solid var(--accent); background: #fff; }
.theme-compare .toc ol { list-style: none; padding: 0; counter-reset: j; }
.theme-compare .toc li { counter-increment: j; margin: 0; padding: 4px 0; border-top: 1px solid var(--line); font-size: .84rem; line-height: 1.35; display: grid; grid-template-columns: 1.7rem 1fr; }
.theme-compare .toc li:first-child { border-top: 0; }
.theme-compare .toc li::before { content: counter(j, decimal-leading-zero); font-family: var(--font-mono); font-size: .7rem; color: var(--accent); padding-top: 2px; }
.theme-compare .toc a { color: var(--ink); text-decoration: none; }
.theme-compare .toc a:hover { color: var(--accent); text-decoration: underline; }
.theme-compare .prose { font-size: 1rem; line-height: 1.62; max-width: none; }
.theme-compare .prose p, .theme-compare .prose li { margin: .55em 0; }
.theme-compare .prose h2 { font-size: 1.3rem; margin: 1.8em 0 .45em; padding-top: .7em; border-top: 1px solid var(--ink); }
.theme-compare .prose > h2:first-child { border-top: 0; padding-top: 0; }
.theme-compare .prose h3 { font-size: 1.05rem; margin: 1.4em 0 .3em; }
.theme-compare .prose li::marker { color: var(--accent); }
.theme-compare blockquote { background: var(--x-blueSoft); border-left: 3px solid var(--accent); padding: .6em 1em; color: var(--ink); margin: 1em 0; }
.theme-compare .table-wrap { border: 1px solid var(--ink); border-radius: 0; margin: 1.1em 0; max-height: none; }
.theme-compare table { font-size: .84rem; line-height: 1.4; min-width: 520px; }
.theme-compare th, .theme-compare td { padding: 6px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.theme-compare th:last-child, .theme-compare td:last-child { border-right: 0; }
.theme-compare thead th { background: var(--accent); color: #fff; font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; border-right-color: rgba(255, 255, 255, .25); }
.theme-compare tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); font-weight: 700; box-shadow: 1px 0 0 var(--line); }
.theme-compare tbody tr:nth-child(even) td { background: #f8f9fc; }
.theme-compare tbody tr:hover td { background: var(--x-blueSoft); }
.theme-compare .cta-box { border: 1px solid var(--ink); border-left: 4px solid var(--accent); border-radius: 0; background: #fff; padding: 12px 16px; margin-top: 2em; }
.theme-compare .cta-box a { font-size: .95rem; }
.theme-compare .faq { border-top: 1px solid var(--ink); }
.theme-compare .faq h3 { font-size: .98rem; margin: 1.1em 0 .1em; }
.theme-compare .sources { border-top: 1px solid var(--ink); font-size: .88rem; }
.theme-compare .sources h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.theme-compare .disclosure-note { margin: 10px 0 0; padding: 7px 12px; background: var(--x-blueSoft); border: 1px solid #c9d6f7; border-radius: 0; font-size: .86rem; font-weight: 600; }
.theme-compare .shot img { border-radius: 0; }
.theme-compare .demo-band { padding-top: 14px; }
.theme-compare .demo-band h2 { font-size: 1.2rem; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
.theme-compare .demo-band .shot-grid { gap: 14px; }
.theme-compare .site-footer { margin-top: 40px; padding: 26px 0 20px; border-top: 3px solid var(--accent); }
.theme-compare .site-footer .logo-text { color: #fff; }

@media (max-width: 960px) {
  .theme-compare .art-grid { grid-template-columns: minmax(0, 1fr); }
  .theme-compare .rail .facts > div { grid-template-columns: 5.4rem minmax(0, 1fr); }
  .theme-compare .rail { position: static; order: -1; grid-template-columns: 130px minmax(0, 1fr); align-items: start; margin-bottom: 16px; }
  .theme-compare .rail .toc { display: none; }
  .theme-compare .rail:not(:has(.art-cover)) { grid-template-columns: 1fr; }
  .theme-compare .t-hero .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .theme-compare .t-intro .prose { column-count: 1; }
}
@media (max-width: 720px) {
  .theme-compare .t-topics { grid-template-columns: 1fr; }
  .theme-compare .entry.has-cover { grid-template-columns: 96px minmax(0, 1fr); }
  .theme-compare .site-header { position: static; }
}