/* Inline product mockups for the privacy cards and the story page (HTML and CSS, no rasters). Icons are Lucide (ISC license) via an SVG sprite.
   Every mockup sits inside a .mk-stage container; sizes are in cqi with a px floor. */

.ic { flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Stage */
.mk-stage { position: relative; container-type: inline-size; overflow: hidden; border: 1px solid #27345c14; border-radius: 18px; background: radial-gradient(120% 90% at 20% 0%, #fff 0%, rgba(255, 255, 255, 0) 60%), #e9ecfb; font-family: inherit; line-height: 1.2; }
.mk-stage * { box-sizing: border-box; }
.mk-stage p, .mk-stage span, .mk-stage b { margin: 0; }

.mk-bar { height: 1.3cqi; min-height: 4px; border-radius: 99px; background: #e3e7f3; }

/* Brake mark */
.mk-mark { width: 5.6cqi; height: 5.6cqi; min-width: 16px; min-height: 16px; border-radius: 28%; }

/* Viewfinder corners */
.mk-viewfinder { position: absolute; pointer-events: none; }
.mk-viewfinder i { position: absolute; width: 6cqi; height: 6cqi; border: 0 solid #2451c6; }
.mk-viewfinder i:nth-child(1) { top: 0; left: 0; border-top-width: .7cqi; border-left-width: .7cqi; border-top-left-radius: 1.4cqi; }
.mk-viewfinder i:nth-child(2) { top: 0; right: 0; border-top-width: .7cqi; border-right-width: .7cqi; border-top-right-radius: 1.4cqi; }
.mk-viewfinder i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: .7cqi; border-left-width: .7cqi; border-bottom-left-radius: 1.4cqi; }
.mk-viewfinder i:nth-child(4) { right: 0; bottom: 0; border-right-width: .7cqi; border-bottom-width: .7cqi; border-bottom-right-radius: 1.4cqi; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: .5em; padding: .45em .95em; border-radius: 999px; font-weight: 650; white-space: nowrap; }
.chip-lav { background: #f1f0ff; color: #2451c6; }
.chip-pro { background: #ffc765; color: #111a2e; }
.chip-x { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; padding: 0; border-radius: 50%; background: #fbe0e4; color: #d7263d; }

/* Light card */
.mk-card { position: absolute; border: 1px solid #e3e7f3; border-radius: 4cqi; background: #fff; box-shadow: 0 24px 48px -18px rgba(39, 52, 92, .4); }
.mk-row { display: flex; align-items: center; gap: 2cqi; padding: 3.2cqi 3.6cqi; color: #27345c; font-size: clamp(10.5px, 3.6cqi, 18px); font-weight: 620; }
.mk-row + .mk-row { border-top: 1px solid #e3e7f3; }
.mk-row > .ic { color: #2451c6; font-size: 1.25em; }
.mk-row .chip { margin-left: auto; font-size: clamp(10.5px, 3.1cqi, 15px); }

/* Privacy trust cards */
.trust-art.mk-stage { width: 100%; }
.tm-monitor { position: absolute; top: 9cqi; left: 6cqi; width: 46cqi; }
.tm-screen { position: relative; display: grid; align-content: center; height: 33cqi; padding: 4.6cqi 4.4cqi 7cqi; border: 1.1cqi solid #d4dbef; border-radius: 2.4cqi; background: #fff; box-shadow: 0 14px 28px -14px rgba(36, 81, 198, .35); }
.tm-lines { display: grid; gap: 2cqi; }
.tm-lines .mk-bar:nth-child(2) { width: 70%; }
.tm-lines .mk-bar:nth-child(3) { width: 45%; }
.tm-screen .mk-viewfinder { top: 1.6cqi; right: 1.6cqi; bottom: 9cqi; left: 1.6cqi; }
.tm-screen .mk-viewfinder i { width: 4cqi; height: 4cqi; }
.tm-neck { display: block; width: 6cqi; height: 3.6cqi; margin: 0 auto; background: #d4dbef; }
.tm-base { display: block; width: 16cqi; height: 1.6cqi; margin: 0 auto; border-radius: 99px; background: #d4dbef; }
.tm-chip { position: absolute; bottom: 5cqi; left: 4cqi; font-size: clamp(10.5px, 3.2cqi, 14px); box-shadow: 0 8px 18px -8px rgba(36, 81, 198, .45); }
.tm-link { position: absolute; top: 26.5cqi; left: 53cqi; width: 27cqi; border-top: 2px dashed #aab9e5; }
.tm-ban { position: absolute; top: 20.5cqi; left: 61cqi; display: grid; place-items: center; width: 9cqi; height: 9cqi; border-radius: 50%; background: #eceefb; color: #9faed3; font-size: 6.4cqi; }
.tm-cloud { position: absolute; top: 16cqi; right: 4cqi; display: grid; justify-items: center; gap: 1.6cqi; width: 18cqi; color: #c4cdec; font-size: 12cqi; }
.tm-cloud span { color: #6b7bb8; font-size: clamp(10.5px, 3.4cqi, 14px); font-weight: 600; white-space: nowrap; }

.tf-row { position: absolute; top: 50%; right: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 2.2cqi; transform: translateY(-50%); }
.tf-col { display: grid; justify-items: center; gap: 2.6cqi; width: 24cqi; color: #506080; font-size: clamp(10.5px, 3.6cqi, 15px); font-weight: 620; }
.tf-frame { position: relative; width: 100%; aspect-ratio: 3 / 2; padding: 1.2cqi; border: 1px solid #d4dbef; border-radius: 2.4cqi; background: #fff; box-shadow: 0 12px 24px -12px rgba(36, 81, 198, .3); }
.tf-shot { width: 100%; height: 100%; border-radius: 1.4cqi; }
.tf-frame .mk-viewfinder { top: -1.2cqi; right: -1.2cqi; bottom: -1.2cqi; left: -1.2cqi; }
.tf-frame .mk-viewfinder i { width: 4cqi; height: 4cqi; border-width: 0; }
.tf-frame .mk-viewfinder i:nth-child(1) { border-top-width: .6cqi; border-left-width: .6cqi; }
.tf-frame .mk-viewfinder i:nth-child(2) { border-top-width: .6cqi; border-right-width: .6cqi; }
.tf-frame .mk-viewfinder i:nth-child(3) { border-bottom-width: .6cqi; border-left-width: .6cqi; }
.tf-frame .mk-viewfinder i:nth-child(4) { border-right-width: .6cqi; border-bottom-width: .6cqi; }
.tf-check { position: absolute; right: -2.4cqi; bottom: -2.4cqi; display: grid; place-items: center; width: 7.6cqi; height: 7.6cqi; border: .7cqi solid #e9ecfb; border-radius: 50%; background: #2451c6; color: #fff; font-size: 4.2cqi; }
.tf-chev { color: #2451c6; font-size: 5cqi; margin-bottom: 6cqi; }
.tf-empty { border: 2px dashed #c4cdec; background: transparent; box-shadow: none; }
.tf-gone { opacity: .6; }

.ts-card { top: 50%; left: 50%; width: 82%; overflow: hidden; transform: translate(-50%, -50%); border-radius: 14px; box-shadow: 0 18px 36px -18px rgba(39, 52, 92, .35); }
.ts-head { display: flex; align-items: center; gap: 1.8cqi; padding: 2.6cqi 3.6cqi; border-bottom: 1px solid #e3e7f3; color: #111a2e; font-size: clamp(10.5px, 3.6cqi, 16px); font-weight: 700; }
.ts-card .mk-row { padding: 2.2cqi 3.6cqi; font-size: clamp(10.5px, 3.4cqi, 15px); }
.ts-card .mk-row .chip { padding: .3em .85em; font-size: clamp(10px, 3cqi, 13px); }