/* live-mirror.css — the exact-live hubs + service pages (site/live_mirror.py, mirror-integrate 17 Oct 2026).
   The live text, in live order, wrapped in the v27 design. Tokens only (clay.css), so both themes
   (bronze default, html[data-theme="blue"]) reach every colour. Headings are styled by class
   (lm-h1 … lm-h6, lm-title), never by tag: includes/a11y-html.php may renumber a skipped level
   (it keeps the class), and the look stays the same. No motion of its own. */

.lm-sec { position: relative; overflow: hidden;
  padding: calc(var(--head-h) + clamp(52px, 6vw, 88px)) 0 clamp(64px, 8vw, 112px); }   /* clears the fixed header + crumbs, as .phero */
.lm-sec::after { /* the inner-page bloom of .phero, so the top is not a flat rectangle */
  content: ""; position: absolute; z-index: 0; width: 780px; height: 780px; right: -220px; top: -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--bloom-rgb), .16) 0%, rgba(var(--bloom-rgb), .05) 46%, rgba(var(--bloom-rgb), 0) 70%);
  pointer-events: none; }
.lm-sec > .shell { position: relative; z-index: 1; }
.lm-body { max-width: 76ch; font: 400 16px/1.76 Inter, sans-serif; color: var(--ink-muted); overflow-wrap: break-word; }
/* the reading column sits in the middle of the page (owner 17 Oct: left-aligned looked unfinished);
   the breadcrumb above it lines up with the column: 76ch of 16px Inter = 76*16/13 ch of the crumbs' 13px */
.lm-body { margin-inline: auto; }
main:has(.lm-sec) > .crumbs .crumbs__list { max-width: calc(76ch * 16 / 13); margin-inline: auto; }
.lm-body > * + * { margin-top: 18px; }

/* headings */
.lm-h { font-family: Newsreader, Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.016em;
  color: var(--ink); text-wrap: balance; }
.lm-body > .lm-h { margin-top: clamp(40px, 4.6vw, 60px); }
.lm-body > .lm-h + * { margin-top: 14px; }
.lm-h1, .lm-h2 { font-size: clamp(1.625rem, 2.5vw, 2.25rem); line-height: 1.16; font-weight: 300; }
.lm-h3 { font-size: clamp(1.3125rem, 1.8vw, 1.625rem); line-height: 1.22; }
.lm-h4 { font-size: 1.25rem; line-height: 1.3; }
.lm-h5, .lm-h6 { font-size: 1.125rem; line-height: 1.38; }
/* the page's first heading = its title (h1 where the live page has one, else its first heading) */
.lm-body > .lm-title { margin-top: 0; font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.06;
  font-weight: 300; letter-spacing: -.026em; max-width: 22ch; }
.lm-body > .sr-only:first-child + .lm-title { margin-top: 0; }
.lm-body > .lm-title + * { margin-top: clamp(20px, 2.4vw, 30px); }

/* text + links */
.lm-p:empty { display: none; }
.lm-body strong, .lm-body b { color: var(--ink); font-weight: 600; }
.lm-p a, .lm-list a, .lm-table a, .lm-acc__a a, .lm-quote a {
  color: var(--bronze-deep); text-decoration: underline; text-decoration-color: rgba(var(--bronze-rgb), .45);
  text-underline-offset: 3px; padding-block: .3em; }
.lm-p a:hover, .lm-list a:hover, .lm-table a:hover, .lm-acc__a a:hover, .lm-quote a:hover { text-decoration-color: currentColor; }

/* lists (nested as live) */
.lm-list { margin: 0; padding-left: 1.35em; display: grid; gap: 8px; }
.lm-list li { padding-left: .2em; }
.lm-list li::marker { color: var(--bronze-deep); }
.lm-list .lm-list { margin-top: 8px; }
.lm-list--indent { padding-left: 2.7em; }
ul.lm-list--indent { list-style-type: circle; }
.lm-body > .lm-list + .lm-list { margin-top: 8px; }

/* tables: scroll sideways on a phone, never the page */
.lm-table { overflow-x: auto; border-radius: var(--r); box-shadow: var(--clay-sm);
  background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-943) 100%); }
.lm-table:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 3px; }
.lm-table table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 14.5px; line-height: 1.6; }
.lm-table th, .lm-table td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.lm-table th { color: var(--ink); font-weight: 600; background: rgba(var(--bronze-rgb), .1); }
.lm-table tr:last-child td { border-bottom: 0; }

/* quotes (live blockquotes: a line or a client's words + attribution) */
.lm-quote { margin: 0; padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 38px);
  border-left: 3px solid var(--bronze); border-radius: 0 var(--r) var(--r) 0;
  background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-943) 100%); box-shadow: var(--clay-sm); }
.lm-body > .lm-quote { margin-top: clamp(28px, 3vw, 40px); }
.lm-quote > .lm-h { margin: 0; font-style: italic; font-weight: 300; font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); line-height: 1.45; }
.lm-quote > * + * { margin-top: 12px; }
.lm-quote > .lm-h + .lm-h { font: 500 13.5px/1.5 Inter, sans-serif; font-style: normal; letter-spacing: .01em; color: var(--ink-soft); }

/* live buttons */
.lm-cta { margin-top: clamp(24px, 2.6vw, 32px); }
.lm-cta .btn { max-width: 100%; white-space: normal; }

/* hub service links: the live two-column button list (live order: down the first column, then the second) */
.lm-links { list-style: none; margin: 14px 0 0; padding: 0; columns: 2; column-gap: clamp(28px, 4vw, 56px); }
.lm-links li { break-inside: avoid; }
.lm-links__a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 2px;
  border-bottom: 1px solid var(--line-soft); font: 500 15.5px/1.35 Inter, sans-serif; color: var(--ink);
  text-decoration: none; transition: color .25s var(--ease); }
.lm-links__chev { flex: 0 0 auto; color: var(--bronze-deep); transition: transform .25s var(--ease); }
.lm-links__a:hover { color: var(--bronze-deep); }
.lm-links__a:hover .lm-links__chev { transform: translateX(3px); }
.lm-links__a:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 2px; border-radius: 4px; }
.lm-body > .lm-links + .lm-cta { margin-top: clamp(30px, 3.4vw, 44px); }

/* hub "Tools we use" images (copied from the live site) */
.lm-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
.lm-img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--clay-sm); }

/* live FAQs → the site accordion (question keeps its live heading level) */
.lm-acc { margin-top: 18px; }
.lm-acc__q { margin: 0; font: inherit; letter-spacing: normal; }
.lm-acc__a { padding: 0 30px; display: grid; gap: 12px; }   /* no vertical padding: a closed (0fr) panel must show nothing */
.lm-acc__a > :last-child { margin-bottom: 26px; }
.lm-acc__a .lm-p { font-size: 14.5px; line-height: 1.75; color: var(--ink-muted); }
.lm-acc .acc__panel .lm-acc__a p { padding: 0; }

/* the closing band = the live sidebar box ("Schedule a call") */
.lm-band { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 26px 48px; }
.lm-band__copy { max-width: 600px; }
.lm-band__h { color: var(--cream); }
.lm-band__p { margin-top: 8px; color: rgba(var(--cream-rgb), .7); }
.lm-band__acts { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .lm-body { font-size: 15.5px; }
  .lm-links { columns: 1; }
  .lm-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lm-acc__a { padding: 0 20px; }
  .lm-band__acts, .lm-band__acts .btn { width: 100%; }
}