/*
 * Miniature thumbnails for the website and web data tools. Same em scale as the kit:
 * 1em is a 28th of the card's width, and the drawing area is 28em by 16.36em.
 */

/* Website Build & Host */
.xt-miniature .xtm-wb-desk { left: 1.6em; top: 1.7em; width: 21.4em; bottom: -1em; }
.xt-miniature .xtm-wb-desk .xtm-view { background: #1b1c1f; }
.xt-miniature .xtm-wb-desk .xtm-view-img { bottom: auto; height: auto; }
.xt-miniature .xtm-wb-phone { position: absolute; z-index: 2; right: 1.7em; top: 2.9em; width: 6.2em; height: 12.6em; padding: .28em; border-radius: 1.15em; background: #0f1013; box-shadow: 0 0 0 1px #2a2d33, 0 1.2em 2.2em -1.1em #1c1f2a8c; }
.xt-miniature .xtm-wb-screen { position: relative; height: 100%; overflow: hidden; padding: .9em .75em; border-radius: .9em; background: repeating-linear-gradient(90deg, #1f2024 0 .42em, #23252a .42em .46em); color: #f2efe8; }
.xt-miniature .xtm-wb-top { display: flex; align-items: center; justify-content: space-between; }
.xt-miniature .xtm-wb-mark { display: grid; place-items: center; width: 1.25em; height: 1.25em; border: 1px solid #c9a646; font-family: Georgia, 'Times New Roman', serif; font-size: .7em; color: #c9a646; }
.xt-miniature .xtm-wb-menu { display: grid; gap: .22em; width: .9em; }
.xt-miniature .xtm-wb-menu span { height: 1px; background: #d8d4cb; }
.xt-miniature .xtm-wb-h { margin-top: 2.1em; font-family: 'Iowan Old Style', Georgia, 'Times New Roman', serif; font-size: .98em; font-weight: 400; line-height: 1.08; letter-spacing: -.01em; }
.xt-miniature .xtm-wb-h em { display: block; font-style: italic; }
.xt-miniature .xtm-wb-body { margin-top: .75em; font-size: .46em; line-height: 1.45; color: #b9b5ad; }
.xt-miniature .xtm-wb-cta { position: absolute; left: .75em; right: .75em; bottom: .9em; padding: .55em 0; background: #c9a646; font-size: .44em; font-weight: 600; letter-spacing: .02em; text-align: center; color: #17181b; }
.xt-miniature .xtm-web-build .xtm-note-bl { left: 1.1em; bottom: 1.1em; }

/* Web Previews */
.xt-miniature .xtm-ws-page { left: 1.6em; top: 1.7em; width: 15.6em; bottom: -1em; }
.xt-miniature .xtm-ws-page .xtm-site-mini { padding: 1em 1.3em; }
.xt-miniature .xtm-ws-page .xtm-site-big { margin-top: 1.1em; font-size: 1.5em; }
.xt-miniature .xtm-ws-panel { z-index: 2; right: 1.5em; top: 3.1em; width: 12.6em; padding: .85em .9em .55em; border-radius: .8em; }
.xt-miniature .xtm-ws-head { display: flex; align-items: center; gap: .45em; font-size: .72em; font-weight: 600; color: #191b22; }
.xt-miniature .xtm-ws-head .xtm-i { color: #626777; }
.xt-miniature .xtm-ws-link { display: flex; align-items: center; gap: .4em; margin-top: .7em; padding: .28em .28em .28em .6em; border: 1px solid #dce1e7; border-radius: .55em; background: #f6f8f9; }
.xt-miniature .xtm-ws-url { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .6em; font-weight: 500; color: #191b22; }
.xt-miniature .xtm-ws-link .xtm-btn { padding: .4em .75em; font-size: .56em; }
.xt-miniature .xtm-ws-row { display: flex; align-items: center; gap: .5em; padding: .5em 0; border-bottom: 1px solid #eef1f4; color: #626777; }
.xt-miniature .xtm-ws-row:last-child { border-bottom: 0; }
.xt-miniature .xtm-ws-row .xtm-i { width: .85em; height: .85em; }
.xt-miniature .xtm-ws-t { flex: 1; font-size: .6em; color: #2d323c; }
.xt-miniature .xtm-ws-v { font-size: .6em; font-weight: 500; color: #191b22; }
.xt-miniature .xtm-ws-toggle { position: relative; width: 1.6em; height: .92em; border-radius: 1em; background: #286c4c; }
.xt-miniature .xtm-ws-toggle span { position: absolute; top: .13em; right: .13em; width: .66em; height: .66em; border-radius: 50%; background: #fff; }

/* Page Feedback */
.xt-miniature .xtm-wr-page { left: 1.6em; top: 1.7em; width: 16.4em; bottom: -1em; }
.xt-miniature .xtm-wr-site { padding: .95em 1.3em; }
.xt-miniature .xtm-wr-h { position: relative; margin-top: 1em; font-size: 1.12em; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; color: #142238; max-width: 9.5em; }
.xt-miniature .xtm-wr-site .xtm-m { margin-top: .5em; }
.xt-miniature .xtm-wr-ctarow { display: flex; align-items: flex-start; margin-top: 1em; }
.xt-miniature .xtm-wr-ring { padding: .3em; border: 1.5px dashed #191b22; border-radius: .7em; }
.xt-miniature .xtm-wr-ring .xtm-btn { display: flex; }
.xt-miniature .xtm-wr-pin { position: relative; z-index: 1; flex: none; width: 1.9em; height: 1.9em; margin: -1.1em 0 0 -.5em; padding: .13em; border-radius: 50% 50% 50% .25em; background: #fff; box-shadow: 0 .45em .9em -.3em #1c1f2a8c; }
.xt-miniature .xtm .xtm-wr-pin .xtm-av { width: 100%; height: 100%; box-shadow: none; }
.xt-miniature .xtm-wr-pin-h { position: absolute; right: -2.3em; top: -.7em; margin: 0; }
.xt-miniature .xtm-wr-thread { z-index: 2; right: 1.5em; top: 3.1em; width: 10.8em; padding: .8em .85em; display: grid; gap: .8em; border-radius: .8em; }
.xt-miniature .xtm-wr-c { display: flex; align-items: flex-start; gap: .55em; }
.xt-miniature .xtm-wr-cbody { display: grid; gap: .2em; min-width: 0; flex: 1; }
.xt-miniature .xtm-wr-thread .xtm-msg-t { font-size: .64em; }
.xt-miniature .xtm-wr-voice { display: flex; align-items: center; gap: .4em; margin-top: .1em; padding: .3em .45em .3em .3em; border-radius: 1em; background: #f3f5f7; }
.xt-miniature .xtm-wr-play { display: grid; place-items: center; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: #191b22; color: #fff; }
.xt-miniature .xtm-wr-play .xtm-i { width: .7em; height: .7em; margin-left: .08em; }
.xt-miniature .xtm-wr-wave { flex: 1; height: 1.2em; min-width: 0; }
.xt-miniature .xtm-wr-len { font-size: .54em; color: #626777; font-variant-numeric: tabular-nums; }

/* Page Watch */
.xt-miniature .xtm-ww-page { left: 1.6em; right: 1.6em; top: 1.7em; bottom: -1em; }
.xt-miniature .xtm-ww-doc { padding: 1em 1.6em; }
.xt-miniature .xtm-ww-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.xt-miniature .xtm-ww-title { font-size: 1.05em; font-weight: 600; letter-spacing: -.03em; color: #191b22; }
.xt-miniature .xtm-ww-checks { display: inline-flex; align-items: center; gap: .4em; font-size: .56em; color: #626777; white-space: nowrap; }
.xt-miniature .xtm-ww-checks .xtm-i { width: 1.1em; height: 1.1em; }
.xt-miniature .xtm-ww-lines { display: grid; gap: .5em; margin-top: .75em; }
.xt-miniature .xtm-ww-lines span { display: block; height: .38em; border-radius: .2em; background: #e9ecf0; }
.xt-miniature .xtm-ww-frame { position: relative; margin: .9em -.7em 0; padding: .6em .7em; border-radius: .4em; background: #f6f8f9; }
.xt-miniature .xtm-ww-corner { position: absolute; width: .7em; height: .7em; border: 0 solid #191b22; }
.xt-miniature .xtm-ww-corner.is-tl { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; border-top-left-radius: .35em; }
.xt-miniature .xtm-ww-corner.is-tr { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; border-top-right-radius: .35em; }
.xt-miniature .xtm-ww-corner.is-bl { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: .35em; }
.xt-miniature .xtm-ww-corner.is-br { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; border-bottom-right-radius: .35em; }
.xt-miniature .xtm-ww-diff { font-size: .74em; line-height: 1.5; color: #2d323c; }
.xt-miniature .xtm-ww-diff del { padding: .05em .25em; border-radius: .25em; background: #f6e3e0; color: #9a3b2e; text-decoration-thickness: 1px; }
.xt-miniature .xtm-ww-diff ins { padding: .05em .25em; border-radius: .25em; background: #dcefe4; color: #1f5a3e; font-weight: 600; text-decoration: none; }
.xt-miniature .xtm-web-watch .xtm-note { right: 1.1em; bottom: 1.1em; }

/* SEO & AEO Checker */
.xt-miniature .xtm-wse-search { left: 1.6em; top: 1.7em; width: 15.4em; bottom: -1em; padding: .85em .9em; }
.xt-miniature .xtm-wse-q { display: flex; align-items: center; gap: .5em; padding: .5em .8em; border: 1px solid #dce1e7; border-radius: 2em; color: #8a909c; }
.xt-miniature .xtm-wse-q span { font-size: .62em; color: #191b22; }
.xt-miniature .xtm-wse-r { margin-top: .55em; padding: .6em .7em; border-radius: .55em; }
.xt-miniature .xtm-wse-r.is-you { background: #f3f6f4; box-shadow: inset 0 0 0 1px #d3e3d9; }
.xt-miniature .xtm-wse-r:not(.is-you) { opacity: .55; }
.xt-miniature .xtm-wse-site { display: flex; align-items: center; gap: .4em; font-size: .52em; color: #626777; }
.xt-miniature .xtm .xtm-wse-site img { width: 1.6em; height: 1.6em; border-radius: .35em; }
.xt-miniature .xtm-wse-t { margin-top: .35em; font-size: .76em; font-weight: 600; letter-spacing: -.02em; color: #142238; }
.xt-miniature .xtm-wse-b { margin-top: .2em; font-size: .56em; line-height: 1.4; color: #626777; }
.xt-miniature .xtm-wse-ai { z-index: 2; right: 1.5em; top: 2.9em; width: 10.4em; padding: .8em .85em .5em; border-radius: .8em; }
.xt-miniature .xtm-wse-score { display: flex; align-items: center; gap: .6em; padding-bottom: .65em; border-bottom: 1px solid #eef1f4; }
.xt-miniature .xtm-wse-score svg { flex: none; width: 2.5em; height: 2.5em; }
.xt-miniature .xtm-wse-score > span { display: grid; }
.xt-miniature .xtm-wse-score strong { font-size: 1.15em; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: #191b22; }
.xt-miniature .xtm-wse-a { display: flex; align-items: center; gap: .5em; padding: .45em 0; border-bottom: 1px solid #eef1f4; }
.xt-miniature .xtm-wse-a:last-child { border-bottom: 0; }
.xt-miniature .xtm .xtm-wse-a img { width: 1.05em; height: 1.05em; object-fit: contain; }
.xt-miniature .xtm-wse-at { flex: 1; font-size: .62em; font-weight: 500; color: #191b22; }
.xt-miniature .xtm-wse-as { display: inline-flex; align-items: center; gap: .35em; font-size: .56em; font-weight: 500; color: #286c4c; white-space: nowrap; }
.xt-miniature .xtm-wse-as .xtm-tick { width: 1.4em; height: 1.4em; vertical-align: 0; }
.xt-miniature .xtm-wse-a.is-miss .xtm-wse-as { color: #8a909c; font-weight: 400; }

/* Website Chatbox AI */
.xt-miniature .xtm-wc-page { left: 1.6em; right: 1.6em; top: 1.7em; bottom: -1em; }
.xt-miniature .xtm-wc-nav { display: flex; align-items: center; justify-content: space-between; padding: .7em 1.2em; }
.xt-miniature .xtm .xtm-wc-nav img { height: .85em; width: auto; }
.xt-miniature .xtm-wc-nav span { font-size: .5em; color: #8a909c; word-spacing: .5em; }
.xt-miniature .xtm-wc-hero { display: grid; grid-template-columns: 9.6em 1fr; gap: 1em; align-items: start; padding: .5em 1.2em 0; }
.xt-miniature .xtm-wc-h { font-size: 1.12em; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; color: #142238; }
.xt-miniature .xtm-wc-copy .xtm-m { margin-top: .5em; }
.xt-miniature .xtm-wc-copy .xtm-btn { margin-top: .9em; }
.xt-miniature .xtm .xtm-wc-img { width: 100%; height: 9.6em; border-radius: .5em; object-fit: cover; object-position: 30% 50%; }
.xt-miniature .xtm-wc-widget { position: absolute; z-index: 2; right: .8em; bottom: 3.7em; width: 10em; overflow: hidden; background: #fff; border: 1px solid #dce1e7; border-radius: .8em; box-shadow: 0 .1em .2em #1c1f2a14, 0 1.2em 2.4em -1em #1c1f2a73; }
.xt-miniature .xtm-wc-head { display: flex; align-items: center; gap: .5em; padding: .55em .7em; background: #142238; color: #fff; }
.xt-miniature .xtm .xtm-wc-head img { width: 1.35em; height: 1.35em; border-radius: .35em; background: #fff; }
.xt-miniature .xtm-wc-head > span { display: grid; gap: .05em; }
.xt-miniature .xtm-wc-bot { font-size: .62em; font-weight: 600; }
.xt-miniature .xtm-wc-meta { font-size: .5em; color: #b9c2d0; }
.xt-miniature .xtm-wc-widget .xtm-bubbles { gap: .4em; padding: .6em .6em .5em; }
.xt-miniature .xtm-wc-widget .xtm-bubble { font-size: .56em; }
.xt-miniature .xtm-wc-input { margin: 0 .6em .6em; padding: .45em .6em; border: 1px solid #e2e6eb; border-radius: .5em; font-size: .5em; color: #a2a8b2; }
.xt-miniature .xtm-wc-launch { position: absolute; z-index: 2; right: .8em; bottom: 1.5em; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #142238; color: #fff; box-shadow: 0 .6em 1.2em -.5em #1c1f2a99; }
.xt-miniature .xtm-wc-launch svg { width: .9em; height: .9em; }

/* Form Builder */
.xt-miniature .xtm-wf-form { left: 1.6em; top: 1.7em; width: 13.6em; bottom: -1em; padding: 1.1em 1.1em; }
.xt-miniature .xtm-wf-form .xtm-m { margin-top: .2em; }
.xt-miniature .xtm-wf-l { margin-top: 1.25em; font-size: .56em; color: #626777; }
.xt-miniature .xtm-wf-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25em; margin-top: .3em; padding: .2em; border-radius: .5em; background: #f0f2f5; }
.xt-miniature .xtm-wf-seg span { padding: .45em 0; border-radius: .35em; font-size: .54em; text-align: center; color: #4a505c; white-space: nowrap; }
.xt-miniature .xtm-wf-seg .is-on { background: #fff; box-shadow: 0 .1em .25em #1c1f2a26; font-weight: 600; color: #191b22; }
.xt-miniature .xtm-wf-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; margin-top: .3em; }
.xt-miniature .xtm-wf-days > span { display: grid; justify-items: center; padding: .35em 0 .3em; border: 1px solid #dce1e7; border-radius: .45em; color: #4a505c; }
.xt-miniature .xtm-wf-days > span span { font-size: .48em; }
.xt-miniature .xtm-wf-days strong { font-size: .72em; font-weight: 600; color: #191b22; }
.xt-miniature .xtm-wf-days .is-on { border-color: #191b22; background: #191b22; color: #c9ced6; }
.xt-miniature .xtm-wf-days .is-on strong { color: #fff; }
.xt-miniature .xtm-wf-form .xtm-btn { margin-top: 1.1em; }
.xt-miniature .xtm-wf-ask { position: absolute; z-index: 2; right: 1.5em; top: 2em; width: 10.6em; display: grid; justify-items: end; gap: .45em; }
.xt-miniature .xtm-wf-bubble { padding: .6em .75em; border-radius: .8em .8em .25em .8em; background: #191b22; font-size: .6em; line-height: 1.4; color: #fff; box-shadow: 0 .9em 1.8em -1em #1c1f2a8c; }
.xt-miniature .xtm-wf-built { display: inline-flex; align-items: center; gap: .4em; padding: .4em .7em .4em .4em; border: 1px solid #dce1e7; border-radius: 1em; background: #fff; font-size: .56em; font-weight: 500; color: #191b22; box-shadow: 0 .6em 1.2em -.8em #1c1f2a5c; }
.xt-miniature .xtm-wf-built .xtm-tick { width: 1.45em; height: 1.45em; vertical-align: 0; }
.xt-miniature .xtm-wf-stats { z-index: 2; right: 1.5em; bottom: 1.2em; width: 10.6em; padding: .7em .85em .75em; border-radius: .8em; }
.xt-miniature .xtm-wf-n strong { font-size: 1.3em; font-weight: 600; letter-spacing: -.035em; color: #191b22; }
.xt-miniature .xtm-wf-n .xtm-m { display: inline; }
.xt-miniature .xtm-wf-bar { margin: .45em 0 .35em; height: .38em; border-radius: .2em; background: #e9ecf0; overflow: hidden; }
.xt-miniature .xtm-wf-bar span { display: block; height: 100%; border-radius: .2em; background: #286c4c; }

/* FinUK */
.xt-miniature .xtm-wd-profile { left: 1.6em; top: 1.7em; width: 14.4em; bottom: -1em; padding: .95em 1em; }
.xt-miniature .xtm-wd-co { display: flex; align-items: center; gap: .6em; }
.xt-miniature .xtm .xtm-wd-co img { width: 2em; height: 2em; border-radius: .45em; box-shadow: 0 0 0 1px #e2e6eb; }
.xt-miniature .xtm-wd-co > span { display: grid; gap: .1em; min-width: 0; }
.xt-miniature .xtm-wd-name { font-size: .8em; font-weight: 600; letter-spacing: -.02em; color: #191b22; white-space: nowrap; }
.xt-miniature .xtm-wd-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-top: .8em; padding-top: .7em; border-top: 1px solid #eef1f4; }
.xt-miniature .xtm-wd-figs > span { display: grid; gap: .15em; }
.xt-miniature .xtm-wd-figs strong { font-size: .92em; font-weight: 600; letter-spacing: -.03em; color: #191b22; font-variant-numeric: tabular-nums; }
.xt-miniature .xtm-wd-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55em; align-items: end; height: 4.2em; margin-top: .8em; }
.xt-miniature .xtm-wd-bar { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: .25em; }
.xt-miniature .xtm-wd-bar > span:first-child { align-self: end; border-radius: .25em .25em 0 0; background: #c9d0d8; }
.xt-miniature .xtm-wd-bar:last-child > span:first-child { background: #191b22; }
.xt-miniature .xtm-wd-yr { font-size: .48em; text-align: center; color: #8a909c; }
.xt-miniature .xtm-wd-dirs { display: flex; align-items: center; gap: .5em; margin-top: .75em; }
.xt-miniature .xtm-wd-api { position: absolute; z-index: 2; right: 1.4em; top: 2.6em; width: 11.2em; padding: .8em .9em .7em; border-radius: .8em; background: #17191f; box-shadow: 0 0 0 1px #2a2d35, 0 1.2em 2.4em -1.1em #1c1f2aa6; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0; color: #e8eaee; }
.xt-miniature .xtm-wd-req { font-size: .54em; line-height: 1.6; white-space: nowrap; color: #c9ced6; }
.xt-miniature .xtm-wd-verb { padding: .1em .35em; margin-right: .2em; border-radius: .25em; background: #2c3039; font-weight: 600; color: #fff; }
.xt-miniature .xtm-wd-json { display: grid; margin-top: .65em; font-size: .56em; line-height: 1.55; color: #8a909c; }
.xt-miniature .xtm-wd-kv { padding-left: 1.2em; }
.xt-miniature .xtm-wd-k { color: #c9ced6; }
.xt-miniature .xtm-wd-v { color: #fff; }
.xt-miniature .xtm-wd-status { display: flex; align-items: center; gap: .5em; margin-top: .6em; padding-top: .55em; border-top: 1px solid #2c3039; font-size: .52em; color: #c9ced6; }
.xt-miniature .xtm-wd-status span { width: .6em; height: .6em; border-radius: 50%; background: #4fae7f; }

/* Ask My Agent */
.xt-miniature .xtm-wa-link { position: absolute; inset: 0; width: 100%; height: auto; }
.xt-miniature .xtm-wa-ask { left: 1.6em; top: 1.7em; width: 13.2em; padding: .85em .9em .8em; border-radius: .8em; }
.xt-miniature .xtm-wa-reply { z-index: 2; right: 1.5em; bottom: 1.2em; width: 12.6em; padding: .85em .9em .8em; border-radius: .8em; }
.xt-miniature .xtm-wa-who { display: flex; align-items: center; gap: .55em; }
.xt-miniature .xtm-wa-who > span:last-child { display: grid; gap: .05em; }
.xt-miniature .xtm-wa-t { font-size: .66em; font-weight: 600; color: #191b22; }
.xt-miniature .xtm-wa-model { position: absolute; right: -.35em; bottom: -.3em; display: grid; place-items: center; width: 1.05em; height: 1.05em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #dce1e7; }
.xt-miniature .xtm .xtm-wa-model img { width: .7em; height: .7em; object-fit: contain; }
.xt-miniature .xtm-wa-q { margin-top: .7em; font-size: .82em; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; color: #191b22; text-wrap: balance; }
.xt-miniature .xtm-wa-intake { display: flex; align-items: center; gap: .4em; margin-top: .75em; font-size: .56em; font-weight: 500; color: #286c4c; }
.xt-miniature .xtm-wa-intake .xtm-tick { width: 1.4em; height: 1.4em; vertical-align: 0; }
.xt-miniature .xtm-wa-a { margin-top: .6em; padding: .55em .7em; border-radius: .55em; background: #f3f5f7; border: 1px dashed #c9d0d8; font-size: .62em; line-height: 1.4; color: #2d323c; }
.xt-miniature .xtm-wa-reply .xtm-btns { margin-top: .6em; }