/* Locksure site tokens for blog and help pages, v3 (15 Oct 2026; v2 added page containers and device cards, v3 keeps the key-points band light-on-ink).
   Served as /wp-content/uploads/ls-site/ls-site-blog-v3.css by mu-plugin ls-blog-style.php.
   Any change ships as a NEW filename (v2, v3 ...) so no CDN purge is ever needed.
   Tokens are taken from the live home page (.ls-matter block) and /is-their-door-locked/.
   Scoped to body.ls-site-blog so nothing outside /blog/ and /help/ is touched. The older
   per-post inline styles use !important, so these rules use the body class plus !important. */

body.ls-site-blog {
  --ls-ink: #0e2e3a;
  --ls-blue: #009ee2;
  --ls-blue-dark: #007fb5;
  --ls-link: #00638d;
  --ls-muted: #47616b;
  --ls-line: #cadce3;
  --ls-tint: #f7fbfe;
  --ls-tint-line: #e1edf3;
  --ls-cyan: #12b5c9;   /* locked */
  --ls-amber: #f0a630;  /* unlocked */
  --ls-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ls-measure: 720px;  /* about 70 characters at 17px */
  --ls-radius: 6px;
  background-color: #fff;
}

/* ---------- article column, type ---------- */
body.ls-site-blog .ls-blog,
body.ls-site-blog .ls-mb,
body.ls-site-blog .ls-help {
  font-family: var(--ls-font) !important;
  color: var(--ls-ink) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  background-color: #fff !important;
}
body.ls-site-blog .ls-blog,
body.ls-site-blog .ls-help { max-width: var(--ls-measure) !important; margin: 0 auto !important; padding: 8px 20px 40px !important; box-sizing: content-box !important; }
body.ls-site-blog .ls-blog *,
body.ls-site-blog .ls-mb *,
body.ls-site-blog .ls-help * { font-family: var(--ls-font) !important; }

body.ls-site-blog .ls-blog h1, body.ls-site-blog .ls-blog .ls-blog-h1,
body.ls-site-blog .ls-help h1, body.ls-site-blog .ls-mb .ls-mb-h1 {
  color: var(--ls-ink) !important; font-weight: 700 !important; letter-spacing: -.03em !important;
  line-height: 1.12 !important; font-size: clamp(2rem, 4vw, 2.8rem) !important; margin-top: .4em !important; margin-bottom: .5em !important;
}
body.ls-site-blog .ls-blog h2, body.ls-site-blog .ls-help h2, body.ls-site-blog .ls-mb .ls-mb-h2 {
  color: var(--ls-ink) !important; font-weight: 700 !important; letter-spacing: -.025em !important;
  line-height: 1.2 !important; font-size: clamp(1.5rem, 2.6vw, 1.9rem) !important; margin-top: 2.2rem !important; margin-bottom: .8rem !important;
}
body.ls-site-blog .ls-blog h3, body.ls-site-blog .ls-help h3, body.ls-site-blog .ls-mb .ls-mb-h3 {
  color: var(--ls-ink) !important; font-weight: 700 !important; letter-spacing: -.015em !important;
  line-height: 1.3 !important; font-size: 1.2rem !important; margin-top: 1.6rem !important; margin-bottom: .5rem !important;
}
body.ls-site-blog .ls-blog h4, body.ls-site-blog .ls-help h4 { color: var(--ls-ink) !important; font-weight: 700 !important; font-size: 1.05rem !important; }
body.ls-site-blog .ls-blog h1 span, body.ls-site-blog .ls-mb .ls-mb-h1 span,
body.ls-site-blog .ls-mb .ls-mb-h2 span { color: inherit !important; }

body.ls-site-blog .ls-blog p, body.ls-site-blog .ls-blog li,
body.ls-site-blog .ls-help p, body.ls-site-blog .ls-help li,
body.ls-site-blog .ls-mb .ls-mb-p, body.ls-site-blog .ls-mb .ls-mb-list,
body.ls-site-blog .ls-mb .ls-mb-hero-sub, body.ls-site-blog .ls-mb li {
  color: var(--ls-ink) !important; font-size: 17px !important; line-height: 1.65 !important;
}
body.ls-site-blog .ls-blog p, body.ls-site-blog .ls-help p, body.ls-site-blog .ls-mb .ls-mb-p { margin-top: 0 !important; margin-bottom: 1.1em !important; }
body.ls-site-blog .ls-mb .ls-mb-hero-sub { color: var(--ls-muted) !important; font-size: 1.15rem !important; }
body.ls-site-blog .ls-blog strong, body.ls-site-blog .ls-mb strong, body.ls-site-blog .ls-help strong { color: var(--ls-ink) !important; }
body.ls-site-blog .ls-mb em { color: inherit !important; }

/* links: same as the home page */
body.ls-site-blog .ls-blog a, body.ls-site-blog .ls-help a,
body.ls-site-blog .ls-mb .ls-mb-p a, body.ls-site-blog .ls-mb li a, body.ls-site-blog .ls-mb .ls-mb-related a {
  color: var(--ls-link) !important; text-decoration: underline !important; text-underline-offset: 4px !important;
}
body.ls-site-blog .ls-blog a:hover, body.ls-site-blog .ls-mb .ls-mb-p a:hover { color: var(--ls-ink) !important; }

/* lists, quotes, code */
body.ls-site-blog .ls-blog ul, body.ls-site-blog .ls-blog ol, body.ls-site-blog .ls-help ul, body.ls-site-blog .ls-help ol { padding-left: 1.4em !important; margin-top: 0 !important; margin-bottom: 1.2em !important; }
body.ls-site-blog .ls-blog li, body.ls-site-blog .ls-help li { margin-top: 0 !important; margin-bottom: .45em !important; }
body.ls-site-blog .ls-mb .ls-mb-list li::before { filter: grayscale(1) brightness(.35); }
body.ls-site-blog blockquote { border-left: 3px solid var(--ls-blue) !important; background-color: var(--ls-tint) !important; margin-top: 1.4em !important; margin-bottom: 1.4em !important; padding: .9em 1.2em !important; color: var(--ls-ink) !important; font-style: normal !important; }
body.ls-site-blog .ls-mb code, body.ls-site-blog .ls-blog code {
  color: var(--ls-ink) !important; background-color: var(--ls-tint) !important; border: 1px solid var(--ls-tint-line) !important; border-radius: 4px !important;
}
body.ls-site-blog .ls-mb pre { background-color: var(--ls-tint) !important; color: var(--ls-ink) !important; border: 1px solid var(--ls-line) !important; border-radius: var(--ls-radius) !important; }
body.ls-site-blog .ls-mb pre * { color: var(--ls-ink) !important; }

/* tables */
body.ls-site-blog .ls-blog table, body.ls-site-blog .ls-mb table, body.ls-site-blog .ls-help table {
  width: 100% !important; border-collapse: collapse !important; font-size: .95rem !important; margin-top: 1.2em !important; margin-bottom: 1.6em !important; background-color: #fff !important; color: var(--ls-ink) !important;
}
body.ls-site-blog .ls-blog th, body.ls-site-blog .ls-blog td, body.ls-site-blog .ls-mb th, body.ls-site-blog .ls-mb td,
body.ls-site-blog .ls-help th, body.ls-site-blog .ls-help td {
  padding: .75rem .9rem !important; border: 0 !important; border-bottom: 1px solid var(--ls-line) !important; text-align: left !important; vertical-align: top !important; color: var(--ls-ink) !important; background-color: transparent !important;
}
body.ls-site-blog .ls-blog th, body.ls-site-blog .ls-mb th, body.ls-site-blog .ls-help th,
body.ls-site-blog .ls-blog thead td, body.ls-site-blog .ls-mb thead td { background-color: var(--ls-tint) !important; font-weight: 700 !important; }
body.ls-site-blog .ls-mb .win, body.ls-site-blog .ls-blog .win { color: var(--ls-ink) !important; font-weight: 700 !important; }

/* callout boxes: all become the home page's tint card */
body.ls-site-blog .ls-blog .ls-blog-tldr, body.ls-site-blog .ls-blog .ls-blog-highlight,
body.ls-site-blog .ls-blog .ls-blog-sources, body.ls-site-blog .ls-blog .ls-blog-scenarios__card,
body.ls-site-blog .ls-mb .ls-mb-tldr, body.ls-site-blog .ls-mb .ls-mb-related, body.ls-site-blog .ls-mb .ls-mb-recipe {
  background-color: var(--ls-tint) !important; border: 1px solid var(--ls-tint-line) !important; border-left: 3px solid var(--ls-blue) !important;
  border-radius: var(--ls-radius) !important; color: var(--ls-ink) !important; padding: 18px 22px !important; margin-top: 1.6em !important; margin-bottom: 1.6em !important;
}
body.ls-site-blog .ls-blog .ls-blog-scenarios__card, body.ls-site-blog .ls-mb .ls-mb-recipe { border-left-width: 1px !important; margin: 0 !important; }
body.ls-site-blog .ls-blog .ls-blog-tldr p, body.ls-site-blog .ls-blog .ls-blog-highlight p,
body.ls-site-blog .ls-blog .ls-blog-scenarios__card p, body.ls-site-blog .ls-mb .ls-mb-tldr p,
body.ls-site-blog .ls-mb .ls-mb-recipe p, body.ls-site-blog .ls-mb .ls-mb-recipe h4,
body.ls-site-blog .ls-blog .ls-blog-sources li { color: var(--ls-ink) !important; font-size: 16px !important; }
body.ls-site-blog .ls-blog .ls-blog-tldr span, body.ls-site-blog .ls-mb .ls-mb-tldr-label,
body.ls-site-blog .ls-mb .ls-mb-related-label, body.ls-site-blog .ls-mb .ls-mb-recipe-label,
body.ls-site-blog .ls-mb .ls-mb-eyebrow, body.ls-site-blog .ls-mb .ls-mb-tag {
  color: var(--ls-muted) !important; background-color: transparent !important; border: 0 !important; padding: 0 !important;
  font-size: .72rem !important; font-weight: 750 !important; letter-spacing: .14em !important; text-transform: uppercase !important;
}
body.ls-site-blog .ls-mb .ls-mb-tag-dot, body.ls-site-blog .ls-mb .ls-mb-eyebrow-dot { background-color: var(--ls-blue) !important; animation: none !important; }

/* stat panel and in-article CTA: tint card with an ink button, as on the home page */
body.ls-site-blog .ls-blog .ls-blog-stat, body.ls-site-blog .ls-blog .ls-blog-cta, body.ls-site-blog .ls-mb .ls-mb-cta {
  background-color: var(--ls-tint) !important; color: var(--ls-ink) !important; border: 1px solid var(--ls-line) !important; border-radius: var(--ls-radius) !important; padding: 26px 24px !important; margin-top: 2em !important; margin-bottom: 2em !important; text-align: left !important;
}
body.ls-site-blog .ls-blog .ls-blog-stat__number { color: var(--ls-ink) !important; }
body.ls-site-blog .ls-blog .ls-blog-stat__text, body.ls-site-blog .ls-blog .ls-blog-cta p, body.ls-site-blog .ls-blog .ls-blog-cta h4,
body.ls-site-blog .ls-mb .ls-mb-cta h3, body.ls-site-blog .ls-mb .ls-mb-cta p { color: var(--ls-ink) !important; }
body.ls-site-blog .ls-mb .ls-mb-cta::before, body.ls-site-blog .ls-mb .ls-mb-cta::after,
body.ls-site-blog .ls-mb .ls-mb-hero::before, body.ls-site-blog .ls-mb .ls-mb-hero::after { display: none !important; }

/* buttons: primary = ink (home "Add kit to basket"), secondary = outline */
body.ls-site-blog .ls-blog .ls-blog-cta a, body.ls-site-blog .ls-mb .ls-mb-btn.primary, body.ls-site-blog .ls-blog a.cta,
body.ls-site-blog .ls-bpb a.ls-bpb-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 46px !important;
  background-color: var(--ls-ink) !important; color: #fff !important; border: 1px solid var(--ls-ink) !important; border-radius: var(--ls-radius) !important;
  padding: .8rem 1.3rem !important; font-weight: 650 !important; font-size: .98rem !important; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; transform: none !important;
}
body.ls-site-blog .ls-blog .ls-blog-cta a:hover, body.ls-site-blog .ls-mb .ls-mb-btn.primary:hover, body.ls-site-blog .ls-bpb a.ls-bpb-btn:hover,
body.ls-site-blog .ls-bpb a.ls-bpb-btn:focus { background-color: #163f4f !important; color: #fff !important; }
body.ls-site-blog .ls-mb .ls-mb-btn.ghost {
  background-color: #fff !important; color: var(--ls-ink) !important; border: 1px solid var(--ls-ink) !important; border-radius: var(--ls-radius) !important;
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 650 !important;
}

/* ---------- dark Matter blog layout becomes the light main-site layout ---------- */
body.ls-site-blog .ls-mb .ls-mb-hero { background-color: var(--ls-tint) !important; border-bottom: 1px solid var(--ls-tint-line) !important; padding: 44px 20px 36px !important; }
body.ls-site-blog .ls-mb .ls-mb-section, body.ls-site-blog .ls-mb .ls-mb-section.alt { background-color: #fff !important; border-top: 0 !important; padding: 26px 20px !important; }
body.ls-site-blog .ls-mb .ls-mb-hero-inner, body.ls-site-blog .ls-mb .ls-mb-section > * { max-width: var(--ls-measure) !important; }
body.ls-site-blog .ls-mb .ls-mb-hero-sub { max-width: var(--ls-measure) !important; }
body.ls-site-blog .ls-mb .ls-mb-meta { color: var(--ls-muted) !important; }
body.ls-site-blog .ls-mb .ls-mb-figure-frame { background-color: var(--ls-tint) !important; border-color: var(--ls-tint-line) !important; }
body.ls-site-blog .ls-mb .ls-mb-related ul li a { color: var(--ls-link) !important; }

/* ---------- page background: white like the main site (blog pages used grey or navy containers) ---------- */
body.ls-site-blog, body.ls-site-blog #page, body.ls-site-blog .site-content { background-color: #fff !important; }
body.ls-site-blog [data-elementor-type="wp-page"] .e-con,
body.ls-site-blog [data-elementor-type="wp-page"] .elementor-section,
body.ls-site-blog [data-elementor-type="wp-page"] .elementor-column > .elementor-widget-wrap { background-color: #fff !important; }

/* device card inside light posts: tint card, ink text */
body.ls-site-blog .ls-devcard { background-color: var(--ls-tint) !important; border: 1px solid var(--ls-line) !important; border-radius: var(--ls-radius) !important; }
body.ls-site-blog .ls-devcard .ls-devcard-h { color: var(--ls-ink) !important; font-weight: 700 !important; }
body.ls-site-blog .ls-devcard .ls-devcard-p { color: var(--ls-ink) !important; }
body.ls-site-blog .ls-devcard a.ls-devcard-cta { color: var(--ls-link) !important; }

/* ---------- product block and demo block in site colours ---------- */
body.ls-site-blog .ls-bpb { background-color: var(--ls-tint) !important; border: 1px solid var(--ls-line) !important; border-radius: 8px !important; max-width: var(--ls-measure) !important; }
body.ls-site-blog .ls-mb .ls-bpb { background-color: var(--ls-tint) !important; border-color: var(--ls-line) !important; width: auto !important; }
body.ls-site-blog .ls-bpb .ls-bpb-head, body.ls-site-blog .ls-bpb .ls-bpb-price, body.ls-site-blog .ls-bpb .ls-bpb-q,
body.ls-site-blog .ls-mb .ls-bpb .ls-bpb-head, body.ls-site-blog .ls-mb .ls-bpb .ls-bpb-price, body.ls-site-blog .ls-mb .ls-bpb-demo .ls-bpb-q { color: var(--ls-ink) !important; }
body.ls-site-blog .ls-bpb .ls-bpb-text, body.ls-site-blog .ls-mb .ls-bpb .ls-bpb-text, body.ls-site-blog .ls-mb .ls-bpb.ls-bpb-end { color: var(--ls-muted) !important; }
body.ls-site-blog .ls-bpb .ls-bpb-small, body.ls-site-blog .ls-mb .ls-bpb .ls-bpb-small { color: var(--ls-muted) !important; }
body.ls-site-blog .ls-bpb.ls-bpb-end a, body.ls-site-blog .ls-bpb.ls-bpb-note a, body.ls-site-blog .ls-bpb .ls-bpb-key a,
body.ls-site-blog .ls-bpb .ls-bpb-small a, body.ls-site-blog .ls-mb .ls-bpb.ls-bpb-end a, body.ls-site-blog .ls-mb .ls-bpb-demo .ls-bpb-small a { color: var(--ls-link) !important; }
body.ls-site-blog .ls-bpb.ls-bpb-note { background-color: transparent !important; border-style: dashed !important; }
body.ls-site-blog .ls-demo { border-radius: var(--ls-radius) !important; }

/* ---------- blog index cards ---------- */
body.ls-site-blog .ls-blog-index { max-width: 960px; margin: 0 auto; padding: 8px 20px 48px; font-family: var(--ls-font); color: var(--ls-ink); }
body.ls-site-blog .ls-blog-index h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; margin: .4em 0 .3em; color: var(--ls-ink); }
body.ls-site-blog .ls-blog-index .ls-lead { font-size: 1.15rem; color: var(--ls-muted); margin: 0 0 1.6em; max-width: var(--ls-measure); }
body.ls-site-blog .ls-blog-index h2 { font-size: .72rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--ls-muted); margin: 2.2em 0 .9em; }
body.ls-site-blog .ls-blog-index .ls-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
body.ls-site-blog .ls-blog-index .ls-card { display: block; padding: 18px 20px; background-color: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-radius); text-decoration: none; color: var(--ls-ink); }
body.ls-site-blog .ls-blog-index .ls-card:hover, body.ls-site-blog .ls-blog-index .ls-card:focus { border-color: var(--ls-ink); }
body.ls-site-blog .ls-blog-index .ls-card strong { display: block; font-size: 1.08rem; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 .35em; color: var(--ls-ink); }
body.ls-site-blog .ls-blog-index .ls-card span { display: block; font-size: .95rem; line-height: 1.5; color: var(--ls-muted); }

@media (max-width: 600px) {
  body.ls-site-blog .ls-blog, body.ls-site-blog .ls-help { padding: 4px 16px 32px !important; }
  body.ls-site-blog .ls-mb .ls-mb-hero { padding: 30px 16px 26px !important; }
  body.ls-site-blog .ls-mb .ls-mb-section, body.ls-site-blog .ls-mb .ls-mb-section.alt { padding: 20px 16px !important; }
  body.ls-site-blog .ls-blog p, body.ls-site-blog .ls-blog li, body.ls-site-blog .ls-mb .ls-mb-p, body.ls-site-blog .ls-mb li { font-size: 16.5px !important; }
  body.ls-site-blog .ls-blog table, body.ls-site-blog .ls-mb table { display: block !important; overflow-x: auto !important; }
}

/* eyebrows are inline-flex in the Matter layout; make them block so they sit on the text column */
body.ls-site-blog .ls-mb .ls-mb-section > .ls-mb-eyebrow { display: flex !important; width: 100% !important; }

/* the key-points band from ls-message-strip.php is ink with light text, as on the main site */
body.ls-site-blog .ls-ms.ls-ms-band li { color: #eef6f9 !important; }