/* 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; } }

/* FRIENDLY layout (best3plsoftwares.com): a starter guide. Sunny yellow surfaces, navy text, rounded type, very large
   radii, oversized cards, sticker numbers and a little playful tilt. Navy carries all text; yellow is surface and accent. */
.theme-friendly { --maxw: 1100px; font-size: 18.5px; line-height: 1.72; --shadow-y: 0 10px 0 var(--accent); }
.theme-friendly h1, .theme-friendly h2, .theme-friendly h3, .theme-friendly h4 { font-weight: 800; letter-spacing: -.025em; }

/* header: yellow band with a rounded bottom, pill nav */
.theme-friendly .site-header { background: var(--accent); border: 0; border-radius: 0 0 40px 40px; }
.theme-friendly .header-row { padding-top: 18px; padding-bottom: 20px; gap: 12px 24px; }
.theme-friendly .logo-text { font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; color: var(--accent2); }
.theme-friendly .brand:not(:has(.logo-mark)) .logo-text::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .45em; border-radius: 50%; background: var(--accent2); vertical-align: -.03em; }
.theme-friendly .site-header nav { gap: 8px; }
.theme-friendly .site-header nav a { padding: 7px 17px; border: 2.5px solid var(--accent2); border-radius: 99px; color: var(--accent2); font-weight: 800; font-size: .92rem; transition: background-color .15s ease, transform .1s ease; }
.theme-friendly .site-header nav a:hover { background: rgba(255, 255, 255, .5); }
.theme-friendly .site-header nav a:active { transform: scale(.97); }
.theme-friendly .site-header nav a[aria-current="page"] { background: var(--accent2); color: var(--accent); }

/* home */
.theme-friendly .t-hero { padding: calc(56px * var(--d)) 0 calc(36px * var(--d)); }
.theme-friendly .t-hero .hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 52px; align-items: center; }
.theme-friendly .eyebrow { display: inline-block; padding: 6px 16px; background: var(--accent); color: var(--accent2); border-radius: 99px; transform: rotate(-2deg); font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: none; }
.theme-friendly .t-hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.4rem); line-height: 1.03; margin: 20px 0 20px; color: var(--accent2); text-wrap: balance; }
.theme-friendly .t-hero .lede { font-size: 1.3rem; line-height: 1.55; color: var(--muted); }
.theme-friendly .hero-panel { background: var(--surface); border: 3px solid var(--accent2); border-radius: 36px; box-shadow: var(--shadow-y); padding: 28px 30px 26px; transform: rotate(1.2deg); }
.theme-friendly .hero-panel h2 { margin: 0 0 14px; font-size: 1.35rem; }
.theme-friendly .hero-panel ul { list-style: none; padding: 0; counter-reset: st; }
.theme-friendly .hero-panel li { counter-increment: st; position: relative; margin: 0 0 14px; padding: 4px 0 0 52px; min-height: 40px; font-weight: 600; line-height: 1.4; font-size: 1.02rem; }
.theme-friendly .hero-panel li::before { content: counter(st); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); border: 2.5px solid var(--accent2); color: var(--accent2); font-weight: 800; font-size: 1.05rem; }
.theme-friendly .t-note { padding-top: 14px; }
.theme-friendly .disclosure-note { margin: 0; padding: 16px 24px; background: var(--x-sun2); border: 2.5px dashed var(--accent2); border-radius: 28px; font-weight: 700; transform: rotate(-.5deg); }
.theme-friendly .t-intro { padding-top: calc(36px * var(--d)); }
.theme-friendly .t-intro .prose { font-size: 1.15rem; max-width: 44rem; }
.theme-friendly .t-intro h2 { font-size: 2rem; }
.theme-friendly .t-topics > h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 26px; }

/* the featured guide: one oversized card */
.theme-friendly .t-feature { padding-top: 20px; padding-bottom: calc(40px * var(--d)); }
.theme-friendly .feature { position: relative; gap: 0; background: var(--surface); border: 3px solid var(--accent2); border-radius: 44px; box-shadow: 0 14px 0 var(--accent); overflow: hidden; margin-bottom: 14px; }
.theme-friendly .feature-cover { aspect-ratio: 16 / 8; border-bottom: 3px solid var(--accent2); }
.theme-friendly .feature-body { padding: 36px clamp(24px, 5vw, 56px) 44px; }
.theme-friendly .feature .entry-kicker, .theme-friendly .entry-kicker { gap: 8px; }
.theme-friendly .entry-cat { padding: 3px 12px; background: var(--accent); color: var(--accent2); border-radius: 99px; font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: none; }
.theme-friendly .feature .entry-no { position: absolute; left: 22px; top: 22px; z-index: 2; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--accent); border: 3px solid var(--accent2); color: var(--accent2); font-size: 1.4rem; font-weight: 800; transform: rotate(-8deg); }
.theme-friendly .feature h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.06; margin: 8px 0 14px; color: var(--accent2); text-wrap: balance; }
.theme-friendly .feature h2 a::after { content: ""; position: absolute; inset: 0; }
.theme-friendly .feature .entry-ex { font-size: 1.2rem; line-height: 1.55; color: var(--muted); max-width: 36em; }
.theme-friendly .feature.no-cover { background: var(--accent); }
.theme-friendly .feature.no-cover .feature-body { padding-top: 96px; }
.theme-friendly .feature.no-cover .entry-ex, .theme-friendly .feature.no-cover .entry-meta { color: var(--accent2); }
.theme-friendly .feature.no-cover .entry-cat { background: var(--surface); }
.theme-friendly .feature.no-cover .entry-no { background: var(--surface); }

/* list: oversized cards, staggered */
.theme-friendly .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; align-items: start; padding-bottom: 14px; }
.theme-friendly .entry { position: relative; gap: 0; background: var(--surface); border: 3px solid var(--accent2); border-radius: 36px; box-shadow: 0 10px 0 var(--accent); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.theme-friendly .entry:nth-child(even) { margin-top: 38px; background: var(--x-sun2); }
.theme-friendly .entry:hover { transform: translateY(4px); box-shadow: 0 6px 0 var(--accent); }
.theme-friendly .entry-cover { aspect-ratio: 4 / 3; border-bottom: 3px solid var(--accent2); }
.theme-friendly .entry-ph { background: var(--accent); justify-content: space-between; align-items: flex-start; padding: 22px 26px; }
.theme-friendly .ph-no { font-size: 6.5rem; line-height: .86; font-weight: 800; color: var(--accent2); letter-spacing: -.05em; }
.theme-friendly .ph-cat { font-size: .85rem; font-weight: 800; color: var(--accent2); }
.theme-friendly .entry-body { padding: 24px 28px 30px; }
.theme-friendly .entry-no { display: none; }
.theme-friendly .entry h3 { font-size: 1.55rem; line-height: 1.12; margin: 8px 0 8px; }
.theme-friendly .entry h3 a::after { content: ""; position: absolute; inset: 0; }
.theme-friendly .entry-ex { font-size: 1.02rem; }
.theme-friendly .entry-meta span { padding: 2px 11px; border: 2px solid var(--accent2); border-radius: 99px; color: var(--accent2); font-weight: 700; }

/* articles */
.theme-friendly .article, .theme-friendly .page { max-width: 900px; }
.theme-friendly .crumbs { font-weight: 600; font-size: .9rem; }
.theme-friendly .article h1, .theme-friendly .page h1 { font-size: clamp(2.3rem, 5.6vw, 3.6rem); line-height: 1.05; color: var(--accent2); text-wrap: balance; }
.theme-friendly .meta { display: inline-block; padding: 4px 16px; background: var(--x-sun2); border: 2px solid var(--accent2); border-radius: 99px; font-weight: 700; font-size: .85rem; color: var(--accent2); }
.theme-friendly .art-cover { margin: 24px 0 56px; border: 3px solid var(--accent2); border-radius: 40px; box-shadow: var(--shadow-y); overflow: hidden; }
.theme-friendly .art-cover img { aspect-ratio: 16 / 9; }
.theme-friendly .prose { font-size: 1.1rem; line-height: 1.82; max-width: 42rem; }
.theme-friendly .prose h2 { font-size: clamp(1.7rem, 3.6vw, 2.25rem); line-height: 1.1; margin: 2.2em 0 .6em; }
.theme-friendly .prose > h2::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .4em; background: var(--accent); border: .09em solid var(--accent2); border-radius: 50%; vertical-align: .05em; }
.theme-friendly .prose h3 { font-size: 1.35rem; margin: 1.7em 0 .4em; }
.theme-friendly .prose ul { list-style: none; padding-left: 0; }
.theme-friendly .prose ul > li { position: relative; padding-left: 34px; margin: .7em 0; }
.theme-friendly .prose ul > li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 15px; height: 15px; background: var(--accent); border: 2.5px solid var(--accent2); border-radius: 50%; }
.theme-friendly .prose ol > li::marker { color: var(--accent2); font-weight: 800; }
.theme-friendly .prose a { font-weight: 700; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
.theme-friendly blockquote { margin: 1.8em 0; padding: 22px 28px; background: var(--accent); border-radius: 32px; color: var(--accent2); font-weight: 700; font-size: 1.15rem; }
.theme-friendly .table-wrap { border: 3px solid var(--accent2); border-radius: 28px; background: var(--surface); box-shadow: 0 8px 0 var(--accent); margin: 1.8em 0 2.2em; }
.theme-friendly thead th { background: var(--accent); color: var(--accent2); font-weight: 800; border-bottom: 3px solid var(--accent2); }
.theme-friendly tbody th { font-weight: 800; background: var(--x-sun2); }
.theme-friendly th, .theme-friendly td { padding: 12px 16px; }
.theme-friendly .cta-box { margin: 3em 0 10px; padding: 28px 32px; background: var(--x-sun2); border: 3px solid var(--accent2); border-radius: 36px; box-shadow: 0 10px 0 var(--accent); }
.theme-friendly .cta-box a { font-size: 1.15rem; font-weight: 800; line-height: 1.45; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
.theme-friendly .faq { border-top: 0; margin-top: 2.6em; padding: 6px 28px 18px; background: var(--surface); border: 3px solid var(--accent2); border-radius: 36px; }
.theme-friendly .faq h2 { margin-top: .9em; }
.theme-friendly .faq h3 { font-size: 1.2rem; margin: 1.3em 0 .2em; }
.theme-friendly .sources { border-top: 3px dotted var(--accent2); }
.theme-friendly .shot img { border: 3px solid var(--accent2); border-radius: 24px; }
.theme-friendly .demo-band h2 { font-size: clamp(1.8rem, 3.8vw, 2.4rem); }
.theme-friendly .site-footer { margin-top: 70px; border-radius: 44px 44px 0 0; border-top: 8px solid var(--accent); }
.theme-friendly .site-footer .logo-text { color: #fff; }
.theme-friendly .site-footer .brand:not(:has(.logo-mark)) .logo-text::before { background: var(--accent); }

@media (max-width: 860px) {
  .theme-friendly .entries { grid-template-columns: 1fr; gap: 34px; }
  .theme-friendly .entry:nth-child(even) { margin-top: 0; }
  .theme-friendly .t-hero .hero-grid { grid-template-columns: 1fr; }
  .theme-friendly .hero-panel { transform: none; }
}
@media (max-width: 520px) {
  .theme-friendly { font-size: 17.5px; }
  .theme-friendly .site-header { border-radius: 0 0 28px 28px; }
  .theme-friendly .site-header nav a { padding: 6px 13px; font-size: .86rem; }
  .theme-friendly .feature { border-radius: 32px; }
  .theme-friendly .entry { border-radius: 28px; }
  .theme-friendly .art-cover { border-radius: 28px; }
  .theme-friendly .feature .entry-no { width: 52px; height: 52px; }
}