/* Original device and product mockups, with duotone SVGs from theSVG. */
.article-art{height:280px;border:1px solid #06234608;isolation:isolate}

.art-dark{background:#0a2a50;color:#24b1ff}.art-mint{background:#e7f4f0;color:#0a8c78}.art-ice{background:#e5f2fb;color:#1478ba}.art-sand{background:#faf1e6;color:#bb742d}.art-lilac{background:#efedfa;color:#7661b4}


.subject-scene{position:relative;width:350px;height:250px;flex-shrink:0;pointer-events:none;transform:translateY(7px)}
.subject-scene svg{display:block;width:22px;height:22px;flex-shrink:0}
.mock-device{position:absolute;width:142px;height:236px;border:3px solid #70869e;border-radius:25px;padding:4px;background:#15314e;box-shadow:5px 9px 0 #06234619,0 18px 28px #06234620;left:81px;top:0;transform:rotate(-9deg)}
.mock-screen{height:100%;border-radius:18px;background:#f3f7fa;overflow:hidden;position:relative;color:#062346}
.mock-device:before{content:'';position:absolute;left:-5px;top:49px;width:2px;height:24px;background:#a5b5c7;border-radius:3px}
.mock-side-button{position:absolute;right:-5px;top:62px;width:2px;height:33px;background:#a5b5c7;border-radius:3px}
.mock-status{height:25px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:7px;font-weight:700;position:relative}
.mock-island{position:absolute;width:37px;height:9px;background:#0e2239;border-radius:9px;top:4px;left:calc(50% - 18px)}
.mock-signal{display:flex;align-items:end;gap:1px;height:7px}.mock-signal i{width:2px;height:3px;background:currentColor}.mock-signal i:nth-child(2){height:5px}.mock-signal i:nth-child(3){height:7px}.mock-signal b{width:9px;height:5px;border:1px solid currentColor;border-radius:1px;margin:0 0 1px 3px}
.mock-home{position:absolute;bottom:5px;left:calc(50% - 20px);width:40px;height:3px;background:currentColor;border-radius:4px;opacity:.4}
.mock-chat-header{height:36px;background:white;display:flex;align-items:center;gap:4px;padding:0 6px;border-bottom:1px solid #e1e9f1}.mock-chat-header>svg{width:11px;height:11px}.mock-chat-header>svg:last-child{margin-left:auto}.mock-avatar{width:23px;height:23px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#d7ecfc;color:#3273a8}.mock-avatar svg{width:17px;height:17px}.mock-chat-header b{display:block;font-size:7px;line-height:1.4}.mock-chat-header small{display:block;font-size:4.5px;color:#6f859a}
.mock-chat-day{text-align:center;font-size:5px;letter-spacing:.12em;color:#7890a4;margin:10px 0}
.mock-chat-bubble{background:#fff;box-shadow:0 2px 5px #06234609;border-radius:7px 7px 7px 1px;font-size:8px;line-height:1.5;margin:7px 18px 0 9px;padding:8px 8px 4px}.mock-chat-bubble small{font-size:5px;display:block;text-align:right;color:#8395a8;margin-top:2px}.bubble-two{margin-right:26px}.mock-chat-reply{background:#cfe8fb;border-radius:7px 7px 1px 7px;font-size:7px;line-height:1.6;margin:8px 7px 0 22px;padding:7px}.mock-chat-reply small{font-size:5px;display:flex;align-items:center;justify-content:end;gap:3px;color:#5384aa}.mock-chat-reply svg{width:9px;height:9px}.mock-composer{position:absolute;bottom:15px;left:7px;right:7px;border:1px solid #e1e7ee;background:white;border-radius:12px;font-size:6px;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;color:#8b9aad}.mock-composer svg{width:10px;height:10px}
.mock-note{position:absolute;z-index:3;padding:11px 14px 11px 10px;border:1px solid #dce6f0;background:#fff;border-radius:11px;display:flex;align-items:center;gap:9px;color:#062346;box-shadow:0 9px 24px #06234618;max-width:260px;transform:rotate(3deg)}.mock-note-icon{width:30px;height:30px;border-radius:8px;background:#e4f2fb;color:#007dc3;display:grid;place-items:center;flex-shrink:0}.mock-note-icon svg{width:21px;height:21px}.mock-note strong{display:block;font-size:10px;letter-spacing:-.025em;line-height:1.4;font-weight:700}.mock-note small{display:block;font-size:7px;margin-top:3px;color:#657a90;line-height:1.6}.note-message{right:5px;top:125px}
.mock-payment-panel{position:absolute;left:40px;top:23px;width:227px;background:white;border:1px solid #c7e5dd;border-radius:16px;box-shadow:0 15px 25px #19534d14;transform:rotate(-7deg);padding:15px;color:#174e49}.mock-payment-head{display:flex;align-items:center;gap:7px}.mock-payment-head>span:first-child{display:grid;place-items:center;background:#e0f3ed;border-radius:7px;width:25px;height:25px;color:#0d8d79}.mock-payment-head svg{width:18px;height:18px}.mock-payment-head b{font-size:8px;font-weight:600}.mock-more{margin-left:auto;font-size:8px;letter-spacing:.05em}.mock-payment-label{display:block;font-size:6px;letter-spacing:.13em;margin-top:17px;color:#72968f;font-weight:600}.mock-amount{font-size:34px;line-height:1.4;font-weight:600;letter-spacing:-.05em;margin:2px 0 10px}.mock-amount small{font-size:16px;font-weight:400;letter-spacing:-.03em}.mock-amount>span{font-size:24px}.mock-payment-rule{border-top:1px dashed #d6e7e2;margin-bottom:12px}.mock-payment-row{display:flex;justify-content:space-between;font-size:6px;margin-bottom:8px;gap:10px;color:#76928c}.mock-payment-row b{font-weight:600;color:#365e56}.mock-return{display:flex;align-items:center;justify-content:center;gap:6px;background:#edf8f4;border:1px solid #d0eadf;padding:8px 4px;border-radius:6px;font-size:7px;font-weight:600;margin-top:12px}.mock-return svg{width:11px;height:11px}.mock-receipt{position:absolute;right:27px;top:57px;width:91px;height:124px;padding:12px 12px 8px;transform:rotate(11deg);box-shadow:0 8px 20px #0b4b3d19;background:#fff;border:1px solid #d4e8e2;color:#178c74;border-radius:9px 9px 3px 3px}.mock-receipt:after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:6px;background:linear-gradient(135deg,#fff 25%,transparent 25%) -3px 0/6px 6px,linear-gradient(225deg,#fff 25%,transparent 25%) -3px 0/6px 6px}.mock-receipt>span{width:27px;height:27px;border-radius:50%;background:#e9f8f1;display:grid;place-items:center;margin:auto}.mock-receipt>span svg{width:18px;height:18px}.mock-receipt>b{display:block;text-align:center;font-size:7px;margin:8px 0}.mock-receipt>i{height:3px;border-radius:4px;display:block;background:#e1eeea;margin:5px 0}.mock-receipt>i:nth-of-type(2){width:70%}.receipt-code{height:16px;margin-top:9px;background:repeating-linear-gradient(90deg,#52766c 0 1px,transparent 1px 3px,#52766c 3px 5px,transparent 5px 7px);opacity:.55}.note-payment{right:16px;bottom:13px}.note-payment .mock-note-icon{color:#087d66;background:#e3f4ec}
.mock-call-phone{left:84px;top:2px;transform:rotate(9deg);border-color:#7c9ab4;background:#294d6c}.mock-call-phone .mock-screen{background:#10324f;color:#d0e7f8}.mock-call-phone .mock-status{color:#cae1f1}.mock-call-tag{font-size:5px;letter-spacing:.12em;text-align:center;margin-top:14px;color:#8cb5d3}.mock-caller{width:49px;height:49px;margin:13px auto 10px;border:1px solid #4884ac;background:#214e70;border-radius:50%;display:grid;place-items:center;color:#80caef}.mock-caller svg{width:27px;height:27px}.mock-call-name{display:block;text-align:center;font-size:10px;letter-spacing:-.02em}.mock-call-number{display:block;text-align:center;font-size:6px;margin-top:5px;color:#91b5ce}.mock-call-waves{display:flex;align-items:center;justify-content:center;gap:3px;height:19px;margin-top:7px;color:#5791b8}.mock-call-waves i{width:2px;height:5px;background:currentColor;border-radius:2px}.mock-call-waves i:nth-child(2n){height:11px}.mock-call-waves i:nth-child(3){height:15px}.mock-call-actions{display:flex;justify-content:space-evenly;margin-top:8px}.mock-call-actions>div{width:28px;height:28px;border-radius:50%;display:grid;place-items:center}.mock-decline{background:#ef7a64;color:#fff;transform:rotate(135deg)}.mock-answer{background:#31bfa1;color:#073f3f}.mock-call-actions svg{width:16px;height:16px}.mock-call-labels{display:flex;justify-content:space-evenly;font-size:5px;color:#c0d6e7;margin:5px 0}.note-call{left:115px;top:132px;transform:rotate(-4deg)}.note-call .mock-note-icon{background:#fff0e6;color:#bd5b2b}
.mock-browser,.mock-shop{position:absolute;left:36px;top:39px;width:262px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid #e5d7c7;box-shadow:0 15px 25px #78552a19;transform:rotate(-6deg);color:#5e5042}.mock-window-bar{height:27px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee7df;padding:0 10px;background:#faf9f7}.mock-window-bar>span:nth-child(2){background:#f0eeea;min-width:145px;display:flex;justify-content:center;align-items:center;gap:4px;border-radius:4px;font-size:5px;color:#8e8982;height:15px}.mock-window-bar svg{width:8px;height:8px}.mock-traffic{display:flex;gap:3px}.mock-traffic i{width:4px;height:4px;border-radius:50%;background:#d0c9c0}.mock-traffic i:first-child{background:#e7a492}.mock-traffic i:nth-child(2){background:#e7cb8c}.mock-traffic i:nth-child(3){background:#a9c8b0}.mock-browser-page{text-align:center;padding:15px 24px 18px}.mock-warning-icon{display:grid;place-items:center;width:38px;height:38px;background:#fff2e4;color:#c57837;border-radius:12px;margin:0 auto 9px}.mock-warning-icon svg{width:27px;height:27px}.mock-browser-page>b{display:block;font-size:11px;letter-spacing:-.03em}.mock-browser-page>small{display:block;font-size:6px;color:#9e9386;margin-top:5px}.mock-fake-field{border:1px solid #e8e1d9;height:17px;border-radius:4px;margin-top:12px}.mock-fake-action{display:flex;align-items:center;justify-content:center;gap:8px;height:24px;border-radius:5px;margin-top:6px;background:#243a50;color:#fff;font-size:7px;font-weight:600}.mock-fake-action svg{width:10px;height:10px}.note-browser{right:8px;bottom:9px;transform:rotate(3deg)}.mock-cursor{position:absolute;z-index:2;left:230px;top:180px;transform:rotate(-14deg);filter:drop-shadow(2px 3px 1px #06234619)}.mock-cursor>svg{width:29px;height:33px}
.mock-shop{left:48px;top:18px;width:229px;transform:rotate(-6deg);border-color:#d9d3ed;box-shadow:0 15px 25px #55408218;color:#554779}.mock-shop .mock-window-bar{height:24px;background:#faf9fd;border-color:#eeeaf6}.mock-shop .mock-window-bar>span:nth-child(2){background:#f0edf7;min-width:120px}.mock-shop-top{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;font-size:6px;letter-spacing:.1em}.mock-shop-top svg{width:12px;height:12px}.mock-product{height:100px;margin:0 10px;position:relative;background:#efecf9;display:grid;place-items:center;overflow:hidden;border-radius:7px;color:#8b75bb}.mock-product>svg{width:70px;height:70px;z-index:1;transform:rotate(-10deg)}.mock-discount{position:absolute;top:10px;right:10px;background:#63508b;color:#fff;font-size:8px;font-weight:700;border-radius:5px;padding:5px 6px;transform:rotate(6deg)}.mock-shop-price{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 14px}.mock-shop-price s{display:block;font-size:6px;color:#a29ab3}.mock-shop-price b{display:block;font-size:15px;letter-spacing:-.035em}.mock-shop-buy{display:flex;align-items:center;gap:5px;font-size:7px;background:#e5def2;padding:8px;border-radius:5px;color:#625087}.mock-shop-buy svg{width:10px;height:10px}.note-shop{right:3px;bottom:3px;transform:rotate(3deg)}.note-shop .mock-note-icon{background:#f0eaf9;color:#7e5ba9}.mock-sale-tag{position:absolute;right:20px;top:40px;font-size:15px;line-height:1.1;letter-spacing:-.04em;background:#fff6dc;color:#8b6b2c;padding:15px 16px;border:1px solid #e9dbb2;transform:rotate(10deg);box-shadow:3px 5px 0 #bba46415;border-radius:12px}
.mock-voice-back{position:absolute;left:56px;top:11px;width:162px;height:180px;border-radius:16px;background:#12365f;border:1px solid #2a5381;transform:rotate(-9deg);padding:20px 16px;text-align:center;color:#8cb6db}.mock-voice-face{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#214a73;border:1px solid #36658f;margin:0 auto 12px}.mock-voice-face svg{width:43px;height:43px}.mock-voice-back>span{font-size:8px;letter-spacing:-.02em}.mock-audio-player{position:absolute;width:258px;padding:17px;background:#fff;box-shadow:0 14px 24px #0002;border:1px solid #cedbe8;border-radius:14px;color:#123b63;left:63px;top:79px;transform:rotate(5deg)}.mock-audio-top{display:flex;align-items:center;gap:9px}.mock-audio-avatar{width:28px;height:28px;display:grid;place-items:center;background:#e3f2fc;color:#2387b9;border-radius:9px}.mock-audio-avatar svg{width:19px;height:19px}.mock-audio-top b{display:block;font-size:9px;line-height:1.4}.mock-audio-top small{display:block;font-size:6px;color:#8295a8;margin-top:3px}.mock-ai-badge{margin-left:auto;font-size:6px;font-weight:700;border:1px solid #dbd1f2;color:#8d75b1;padding:4px;border-radius:4px}.mock-audio-track{display:flex;align-items:center;gap:12px;margin-top:12px}.mock-play{width:28px;height:28px;border-radius:50%;background:#dceefb;display:grid;place-items:center;color:#1c77b4;flex-shrink:0}.mock-play svg{width:16px;height:16px}.subject-scene .mock-waveform{height:38px;width:181px;color:#2188c1}.mock-audio-time{display:flex;justify-content:space-between;font-size:5px;color:#95a9ba;margin:2px 2px 0 40px}.note-voice{left:30px;bottom:2px;transform:rotate(-3deg)}
@media(max-width:1100px) and (min-width:761px){.subject-scene{transform:translateY(7px) scale(.82)}.article-art{height:260px}}
@media(max-width:760px){.article-art{height:282px}.subject-scene{transform:translateY(7px) scale(.96)}}
@media(max-width:365px){.subject-scene{transform:translateY(8px) scale(.85)}}
@media(prefers-reduced-motion:reduce){.subject-scene *{animation:none!important}}
/* Official marks retain the original SVG fills; every subject has a solid backdrop. */
.article-art:before,.article-art:after{content:none;display:none}
.mock-payment-head .official-pix-icon{background:none;border-radius:0;width:28px;height:28px}
.mock-payment-head .official-pix-icon svg,.mock-receipt .official-pix-icon svg{width:24px;height:24px;min-width:24px}
.mock-receipt .official-pix-icon{background:none}
.note-message .mock-note-icon{background:#edf9f0}
.note-message .mock-note-icon svg{width:24px;height:24px}
.mock-cursor svg{fill:white;color:#062346}