/* Mr. Radiant, styles for pages rendered without the Radiant runtime */
.mr-img{display:block;width:100%;height:auto;border-radius:20px;margin:28px 0}
.mr-h{margin-top:36px!important;margin-bottom:6px!important}
.mr-table{overflow-x:auto;margin:24px 0}
.mr-table table{width:100%;border-collapse:collapse;font-family:"Satoshi","Satoshi Placeholder",sans-serif;font-size:15px;color:rgba(255,255,255,.85)}
.mr-table th,.mr-table td{border:1px solid rgba(255,255,255,.15);padding:10px 14px;text-align:left;vertical-align:top;word-break:normal;overflow-wrap:normal}
.mr-table th{background:rgba(255,255,255,.06);color:#fff;font-weight:700}
.mr-menu{position:fixed;top:0;left:0;right:0;z-index:20;background:rgb(10,10,10);display:flex;flex-direction:column;align-items:stretch;gap:0;padding:96px 20px 40px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s cubic-bezier(.44,0,.56,1),transform .35s cubic-bezier(.44,0,.56,1),visibility .35s}
.mr-menu.open{opacity:1;visibility:visible;transform:none}
.mr-menu a{display:flex;align-items:center;justify-content:center;height:64px;border-radius:40px;color:#fff;text-decoration:none;font-family:"Unbounded","Unbounded Placeholder",sans-serif;font-size:14px;letter-spacing:-.1px;text-transform:uppercase}
.mr-menu a.active{background:rgb(31,29,29);color:rgb(0,168,157)}
.mr-menu-close{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:10px;border:0;background:rgb(31,29,29);color:rgb(0,168,157);font-size:26px;line-height:44px;cursor:pointer}
[data-radiant-name="Hamburger"]{cursor:pointer}
.mr-form-msg{font-family:"Satoshi","Satoshi Placeholder",sans-serif;font-size:14px;color:rgba(255,255,255,.8);margin-top:8px}
img[data-mr-logo]{object-fit:contain!important;padding:10%;box-sizing:border-box;background:rgb(13,13,13)}
/* Article eyebrow pill sits on a lighter card here: a lighter teal keeps it at 4.5:1 (was 3.89:1). */
.radiant-body-bcUIOegNe-radiant-BdrbS .radiant-10ml71p p[style*="4fdd7769"]{color:#26c6b9!important}
/* Article and case study body: text at about 80 characters a line (was about 115); images keep the full column. */
.radiant-body-bcUIOegNe-radiant-BdrbS .radiant-p6xs6g>:is(p,h2,h3,h4,ul,ol){max-width:640px;margin-inline:auto}

/* QA 2026-10-23. Phones: article and case study covers are 16:9 images; the square box cropped the words printed on them. */
@media (max-width: 809px) { .radiant-5m7vem { aspect-ratio: 16 / 9 !important; } }

/* "More From Our Blog": three related posts, filled in by tools/related.py */
.mr-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; }
.mr-related-card { display: flex; flex-direction: column; gap: 14px; color: #fff; text-decoration: none; font-size: 18px; line-height: 1.35; }
.mr-related-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; transition: transform .3s ease; }
.mr-related-card:hover span, .mr-related-card:focus-visible span { color: rgb(0, 168, 157); }
.mr-related-card:hover img { transform: translateY(-2px); }
@media (max-width: 809px) { .mr-related { grid-template-columns: 1fr; gap: 28px; } }
@media (prefers-reduced-motion: reduce) { .mr-related-card img { transition: none; } .mr-related-card:hover img { transform: none; } }

/* Form status message (see mrSay in fullnav.js and static.js) */
#mr-form-status { position: fixed; left: 50%; bottom: 24px; z-index: 10000; max-width: min(92vw, 520px); margin: 0; padding: 14px 18px; border-radius: 14px; background: #121212; color: #fff; border: 1px solid rgb(0, 168, 157); font: 500 15px/1.4 system-ui, sans-serif; text-align: center; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
#mr-form-status.is-on { opacity: 1; transform: translate(-50%, 0); }
#mr-form-status.is-bad { border-color: #e5484d; }
@media (prefers-reduced-motion: reduce) { #mr-form-status { transition: none; } }

/* Touch screens (QA 2026-10-23): the LinkedIn icon on posts (23px) and the "Connect on LinkedIn" link (20px)
   get a 44px tap area through an invisible extension, so nothing on the page moves. */
@media (pointer: coarse) {
  a.radiant-ClZI0[href*="linkedin.com"], a.mr-link { position: relative; }
  a.radiant-ClZI0[href*="linkedin.com"]::after { content: ""; position: absolute; inset: -11px; }
  a.mr-link::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
}

/* Articles index: one line on what the blog covers, under the heading */
.mr-intro { max-width: 640px; margin: 12px auto 28px !important; color: rgba(255, 255, 255, .9); font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-size: 18px; line-height: 1.5; text-align: center; }

/* Articles and case studies (2026-10-24, docs/qol-and-signature.md) */
.mr-progress { position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; height: 3px; background: rgb(0, 168, 157); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.mr-readtime { margin: 10px 0 0 !important; font: 500 15px/1.4 "Satoshi", "Satoshi Placeholder", sans-serif; color: rgba(255, 255, 255, .8); }
.mr-hlink { margin-left: .35em; color: rgb(0, 168, 157); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity .15s ease; }
:is(h2, h3):hover > .mr-hlink, .mr-hlink:focus-visible { opacity: 1; }
@media (hover: none) { .mr-hlink { opacity: .6; } }
.mr-share { margin-top: 32px !important; }
.mr-share button { padding: 12px 18px; border-radius: 40px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; font: 500 15px/1 "Satoshi", "Satoshi Placeholder", sans-serif; cursor: pointer; }
.mr-share button:hover { border-color: rgb(0, 168, 157); color: rgb(0, 168, 157); }
@media (prefers-color-scheme: light) {
  .mr-readtime { color: rgba(0, 0, 0, .7); }
  .mr-share button { color: #111; border-color: rgba(0, 0, 0, .2); }
}
@media print {
  nav, footer, .mr-top, .mr-skip, .mr-progress, .mr-share, .mr-hlink, [data-radiant-name="Hamburger"], [class*="-w2s6bw"] { display: none !important; }
  body, body * { background: #fff !important; color: #000 !important; box-shadow: none !important; }
}