/* The product films, brand marks, scam fragments and icons, moved from the Replit kit unchanged: they draw other apps
   (Chrome, WhatsApp, a store) in those apps' own colours. The page around them is src/styles/site.css. */
:root {
  --pad: clamp(16px, 4vw, 32px);
  --grid: 1200px;            /* 12 columns of 78px, 24px gutters */
  --gutter: 24px;
  --span6: 588px; --span8: 792px; --span10: 996px;
  --section: clamp(5rem, 9vw, 9rem);    /* Bingsu's value. Between unrelated sections. Don't tune. */
  --section-in: 3rem; /* heading to its content */
  --step: 4rem;       /* related blocks */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);     /* UI: enters, presses, toggles */
  --e-move: cubic-bezier(0.65, 0, 0.35, 1);    /* the films' camera and cursor */
  --t1: 150ms; --t2: 300ms; --t3: 600ms;
  --radius: 20px;
  --shadow: 0 1px 2px rgb(28 20 32 / 0.06), 0 24px 48px -24px rgb(28 20 32 / 0.18);
}
/* The extension's glass materials (shared/tokens.css --field, --panel, --rim, --lift from PR #104), copied for the films. */
:root {
  --x-field: radial-gradient(100% 60% at 50% 0%, #E4D2EE, transparent 72%), radial-gradient(60% 40% at 6% 78%, #F7E5CF, transparent 72%), radial-gradient(60% 40% at 96% 92%, #DBCDF0, transparent 72%), #F7F1F8;
  --x-panel: rgb(255 255 255 / 0.62);
  --x-rim: rgb(255 255 255 / 0.9);
  --x-hairline: rgb(28 20 32 / 0.08);
  --x-well: rgb(28 20 32 / 0.05);
  --x-lift: 0 1px 2px rgb(28 20 32 / 0.05), 0 16px 32px -16px rgb(74 31 92 / 0.3);
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 24px 56px -24px rgb(0 0 0 / 0.6);
    --x-field: radial-gradient(100% 60% at 50% 0%, #3D2454, transparent 72%), radial-gradient(60% 40% at 6% 78%, #3B2036, transparent 72%), radial-gradient(60% 40% at 96% 92%, #261E48, transparent 72%), #120D14;
    --x-panel: rgb(52 42 60 / 0.58);
    --x-rim: rgb(255 255 255 / 0.12);
    --x-hairline: rgb(255 255 255 / 0.08);
    --x-well: rgb(255 255 255 / 0.06);
    --x-lift: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 32px -16px rgb(0 0 0 / 0.7);
  }
}

/* ---- The product films: a fixed 1200×750 stage scaled to its box; kit.js moves the camera and cursor ---- */
.film-wrap { position: relative; max-width: var(--grid); margin-inline: auto; perspective: 1800px; }
.film { position: relative; margin: 0; border-radius: var(--radius); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--t3) var(--e-out); box-shadow: 0 2px 4px rgb(0 0 0 / 0.12), 0 40px 100px -40px color-mix(in srgb, var(--acai) 40%, rgb(0 0 0 / 0.6)); }
.film-view { position: relative; aspect-ratio: 1200 / 750; overflow: hidden; border-radius: var(--radius); outline: 1px solid rgb(255 255 255 / 0.1); outline-offset: -1px; container-type: inline-size; background: #202124; }
/* tan(atan2()) turns 100cqw / 1200px into a plain number: the stage scales with no script. */
.film-stage { position: absolute; left: 0; top: 0; width: 1200px; height: 750px; transform-origin: 0 0; transform: scale(tan(atan2(100cqw, 1200px))); }
.film-cam { position: absolute; inset: 0; transform-origin: 0 0; }
.film-cursor { position: absolute; left: 0; top: 0; z-index: 9; width: 26px; height: 26px; transform: translate(1220px, 760px); transform-origin: 6px 4px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35)); }
.film-ripple { position: absolute; left: -22px; top: -22px; z-index: 8; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / 0.25); border: 2px solid rgb(255 255 255 / 0.75); opacity: 0; }
.cast { position: relative; aspect-ratio: 220 / 264; }
.cast img, .cast canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.cast canvas { opacity: 0; transition: opacity var(--t2) var(--e-out); }
.cast.live canvas { opacity: 1; }
.cast.live img { opacity: 0; }
/* Below the fold it waits low and rises with its block (site.js); reduced motion never adds .down. */
.cast { transition: translate 1s var(--e-out), opacity var(--t2) var(--e-out); }
.cast.down { translate: 0 24px; opacity: 0; }
.cast-sm { width: 96px; }
.cast-md { width: 132px; }

/* Chrome, dark theme, as on a Mac */
.cw { position: absolute; inset: 0; display: grid; grid-template-rows: 40px 44px minmax(0, 1fr); background: #202124; color: #e8eaed; font: 400 13px / 1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.cw-tabs { display: flex; align-items: flex-end; padding: 0 8px 0 16px; }
.cw-lights { display: flex; gap: 8px; align-self: center; margin-right: 20px; }
.cw-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.cw-lights i:nth-child(2) { background: #febc2e; }
.cw-lights i:nth-child(3) { background: #28c840; }
.cw-tab { display: flex; align-items: center; gap: 8px; width: 250px; height: 34px; padding: 0 12px; border-radius: 10px 10px 0 0; white-space: nowrap; overflow: hidden; font-size: 12.5px; }
.cw-tab.is-on { background: #35363a; }
.cw-tab .i-x { margin-left: auto; width: 14px; height: 14px; }
.cw-fav { width: 16px; height: 16px; flex: none; border-radius: 3px; }
.cw-new { display: grid; place-items: center; width: 30px; height: 30px; align-self: center; margin-left: 6px; }
.cw-bar { display: flex; align-items: center; gap: 16px; padding: 0 14px; background: #35363a; }
.cw-omni { flex: 1; display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 14px; border-radius: 16px; background: #202124; font-size: 14.5px; }
.cw-url { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; color: #e8eaed; }
.cw-url .rn { position: relative; border-radius: 3px; box-shadow: 0 0 0 0 transparent; }
.cw-ext { width: 20px; height: 20px; border-radius: 5px; }
.cw-me { width: 24px; height: 24px; border-radius: 50%; background: #8e6bb8; }
.cw-page { position: relative; overflow: hidden; background: #fff; }
.i { display: inline-block; flex: none; width: 18px; height: 18px; background: #c4c7c5; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.i-x { --m: url('/icons/line/x.svg'); } .i-plus { --m: url('/icons/line/plus.svg'); } .i-back { --m: url('/icons/line/arrow-left.svg'); }
.i-fwd { --m: url('/icons/line/arrow-right.svg'); opacity: 0.45; } .i-reload { --m: url('/icons/line/arrow-clockwise.svg'); } .i-tune { --m: url('/icons/line/sliders-horizontal.svg'); width: 16px; }
.i-star { --m: url('/icons/line/star.svg'); width: 16px; } .i-puzzle { --m: url('/icons/line/puzzle-piece.svg'); } .i-kebab { --m: url('/icons/line/dots-three-vertical.svg'); }
.i-search { --m: url('/icons/line/magnifying-glass.svg'); } .i-cart { --m: url('/icons/line/shopping-cart.svg'); } .i-starf { --m: url('/icons/line/star-fill.svg'); }
.i-chat { --m: url('/icons/line/chats-circle.svg'); } .i-menu { --m: url('/icons/line/list.svg'); } .i-checks { --m: url('/icons/line/checks.svg'); } .i-mic { --m: url('/icons/line/microphone.svg'); }

/* The made-up store (img/store-*, generated) copying a big retailer's address; .hot marks its buy button for the camera */
.shot img { display: block; width: 100%; height: auto; }
.hot { position: absolute; }
.hot-buy { left: 802px; top: 399px; width: 375px; height: 56px; }

/* Acai's own screens: the tinted field, the AcaiSafe wordmark and one translucent sheet (extension PR #104) */
.xw { font: 400 26px / 1 var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.xsheet { display: grid; gap: 14px; padding: 18px; border-radius: 24px; background: var(--x-panel); box-shadow: inset 0 1px 0 var(--x-rim), 0 0 0 1px var(--x-hairline), var(--x-lift); }

/* The warning page (extension/src/pages/warning.html), in the tab */
.aw { position: absolute; inset: 0; background: var(--x-field); color: var(--ink); font-family: var(--font-text); }
.aw-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; }
.aw-size { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--x-well); font-weight: 700; color: var(--ink-2); }
.aw-size b, .aw-size i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; font-style: normal; font-size: 15px; }
.aw-size i + i { font-size: 20px; }
.aw-size b { background: var(--surface); color: var(--ink); font-size: 13px; }
.aw-body { width: 640px; margin: 0 auto; padding: 4px 0; display: grid; gap: 18px; }
.aw-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.aw-title { font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.aw-kind { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--stop); }
.aw-char { width: 120px; height: auto; flex: none; }
.aw-card { display: grid; gap: 4px; padding: 20px 24px; border-radius: 24px; background: var(--x-panel); box-shadow: inset 0 1px 0 var(--x-rim), 0 0 0 1px var(--x-hairline), var(--x-lift); }
.aw-k { font-size: 14px; color: var(--ink-2); }
.aw-url { margin-bottom: 8px; font-size: 24px; }
.aw-hint { margin: -6px 0 10px; font-size: 15px; color: var(--ink-2); }
.aw-real { color: var(--ink-2); }
.aw-why { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--x-hairline); font-size: 16px; }
.aw-acts { display: grid; gap: 16px; justify-items: center; }
.aw-exit { width: 100%; min-height: 60px; font-size: 19px; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--acai); }
.aw-links { display: flex; gap: 40px; font-size: 16px; font-weight: 700; color: var(--acai); }
.aw-links u { text-underline-offset: 4px; }
.aw-full .aw-body { gap: 16px; }

.ntp { position: absolute; inset: 0; display: grid; place-items: center; background: #202124; }
.ntp-box { display: flex; align-items: center; gap: 12px; width: 580px; height: 48px; padding: 0 20px; border-radius: 24px; background: #303134; color: #9aa0a6; font-size: 15px; }

/* Popup film: an encyclopedia article (a normal site), then Acai's toolbar popup */
.wiki { position: absolute; inset: 0; background: #fff; color: #202122; font: 15px / 1.6 -apple-system, 'Helvetica Neue', Arial, sans-serif; }
.wk-top { display: flex; align-items: center; gap: 20px; height: 56px; padding: 0 32px; border-bottom: 1px solid #eaecf0; }
.wiki .i { background: #54595d; }
.wk-search { display: flex; align-items: center; gap: 10px; width: 420px; height: 34px; padding: 0 10px; border: 1px solid #a2a9b1; border-radius: 2px; color: #72777d; font-size: 14px; }
.wk-links { margin-left: auto; font-size: 13px; color: #36c; }
.wk-main { padding: 18px 64px 0 96px; }
.wk-h1 { padding-bottom: 4px; border-bottom: 1px solid #a2a9b1; font: 400 30px / 1.3 'Linux Libertine', Georgia, Times, serif; }
.wk-tabs { display: flex; gap: 18px; margin: 6px 0 14px; font-size: 13px; color: #36c; }
.wk-tabs .on { color: #202122; border-bottom: 2px solid #202122; }
.wk-tabs .wk-r { margin-left: auto; }
.wk-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.wk-text p + p { margin-top: 10px; }
.wk-from { font-size: 13px; color: #54595d; }
.wk-h2 { margin-top: 18px !important; padding-bottom: 2px; border-bottom: 1px solid #a2a9b1; font: 400 22px / 1.3 'Linux Libertine', Georgia, Times, serif; }
.wk-box { border: 1px solid #a2a9b1; background: #f8f9fa; font-size: 13px; border-collapse: collapse; }
.wk-box caption { padding: 6px; background: #f8f9fa; border: 1px solid #a2a9b1; border-bottom: 0; font-weight: 700; }
.wk-box th, .wk-box td { padding: 5px 8px; text-align: left; vertical-align: top; }
.ap { position: absolute; top: 6px; right: 60px; width: 340px; display: grid; justify-items: center; gap: 10px; padding: 16px 16px 14px; border-radius: 14px; background: var(--x-field); color: var(--ink); font-family: var(--font-text); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2), 0 16px 48px rgb(0 0 0 / 0.35); }
.ap > .xw { justify-self: start; font-size: 22px; }
.ap-char { width: 104px; height: auto; }
.ap-state { font-size: 16px; font-weight: 700; }
.ap-sheet { width: 100%; gap: 12px; padding: 12px; }
.ap .btn { min-height: 46px; }
.ap-ok { display: grid; gap: 2px; padding: 0 4px; font-size: 15px; font-weight: 700; }
.ap-ok small { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.ap-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--x-well); font-size: 14px; font-weight: 700; white-space: nowrap; }
.ap-caret { width: 8px; height: 8px; border: solid var(--ink); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -3px; }
.ap-week { padding: 0 4px; font-size: 13px; color: var(--ink-2); }
.ap-week p { display: flex; justify-content: space-between; }
.ap-week u { font-weight: 700; color: var(--acai); }
.ap-week div { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6px; }
.ap-week b { display: block; font: 700 22px / 1.2 var(--font-text); color: var(--ink); }
.ap-quota { padding: 0 4px; font-size: 13px; color: var(--ink-2); }
.ap-code { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px 0; border-top: 1px solid var(--x-hairline); font-size: 14px; }
.ap-foot { display: flex; justify-content: space-between; width: 100%; padding: 4px 6px 0; font-size: 13px; color: var(--ink-2); }

/* WhatsApp Web, dark theme */
.cw-split { display: flex; }
.wa { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: 400px minmax(0, 1fr); background: #111b21; color: #e9edef; font: 400 14.2px / 19px 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.wa .i { background: #aebac1; width: 22px; height: 22px; }
.wa-side { display: grid; grid-template-rows: auto auto auto 1fr; border-right: 1px solid #222d34; min-width: 0; }
.wa-top { display: flex; align-items: center; gap: 22px; padding: 16px 20px 10px; }
.wa-top b { margin-right: auto; font-size: 22px; font-weight: 700; }
.wa-search { display: flex; align-items: center; gap: 16px; height: 40px; margin: 2px 14px 10px; padding: 0 16px; border-radius: 20px; background: #202c33; color: #8696a0; font-size: 14px; }
.wa-search .i { width: 18px; height: 18px; background: #8696a0; }
.wa-chips { display: flex; gap: 8px; padding: 0 14px 10px; }
.wa-chips span { padding: 5px 12px; border-radius: 16px; background: #202c33; color: #8696a0; font-size: 14px; }
.wa-chips .on { background: #103529; color: #25d366; }
.wa-list { list-style: none; margin: 0; padding: 0; }
.wa-list li { display: grid; grid-template-columns: 49px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 16px; }
.wa-list li.on { background: #2a3942; }
.wa-list li.on span { color: #a3b1ba; }
.wa-list b { display: block; font-size: 16px; font-weight: 400; }
.wa-list span { display: flex; align-items: center; gap: 3px; color: #8696a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-list span .i { width: 16px; height: 16px; background: #53bdeb; }
.wa-meta { display: grid; justify-items: end; gap: 4px; align-self: start; padding-top: 2px; font-size: 12px; color: #8696a0; }
.wa-meta .new { color: #25d366; }
.wa-badge { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: #25d366; color: #111b21; font-size: 12px; font-weight: 700; }
.wa-av { width: 49px; height: 49px; border-radius: 50%; background: url('/film/wa-avatar.svg') center / cover; flex: none; }
.wa-group { background-image: url('/film/wa-group.svg'); }
.wa-chat { display: grid; grid-template-rows: 60px minmax(0, 1fr) 62px; min-width: 0; background: #0b141a url('/film/wa-doodle.svg') 0 0 / 360px; }
.wa-head { display: flex; align-items: center; gap: 14px; padding: 0 16px; background: #202c33; }
.wa-head .wa-av { width: 40px; height: 40px; }
.wa-head div { margin-right: auto; }
.wa-head b { display: block; font-size: 16px; font-weight: 400; }
.wa-head span { font-size: 13px; color: #8696a0; }
.wa-msgs { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 16px 64px 12px; overflow: hidden; }
.wa-day { align-self: center; margin-bottom: 10px; padding: 5px 12px; border-radius: 8px; background: #182229; color: #8696a0; font-size: 12.5px; }
.wa-in, .wa-out { position: relative; isolation: isolate; max-width: 62%; padding: 6px 9px 8px; border-radius: 7.5px; box-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13); }
.wa-in { align-self: flex-start; background: #202c33; }
.wa-out { align-self: flex-end; background: #005c4b; }
.wa-in.tail, .wa-out.tail { margin-top: 8px; }
.wa-in.tail { border-top-left-radius: 0; }
.wa-out.tail { border-top-right-radius: 0; }
.wa-in.tail::before, .wa-out.tail::before { content: ''; position: absolute; top: 0; width: 8px; height: 13px; background: inherit; }
.wa-in.tail::before { left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa-out.tail::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-in time, .wa-out time { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 7px 0 -5px 12px; font-size: 11px; color: rgb(233 237 239 / 0.6); }
.wa-out time .i { width: 16px; height: 16px; background: #53bdeb; }
.wa-sel { position: relative; }
.wa-hl { position: absolute; inset: -1px -2px; z-index: -1; border-radius: 2px; background: #2f6fd1; transform-origin: 0 50%; }
.wa-type { display: flex; align-items: center; gap: 18px; padding: 0 16px; background: #202c33; }
.wa-type span { flex: 1; display: flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 21px; background: #2a3942; color: #a3b1ba; font-size: 15px; }
.ctx { position: absolute; left: 610px; top: 360px; z-index: 4; width: 300px; padding: 5px 0; border: 1px solid #45474a; border-radius: 10px; background: #2b2d30; color: #e3e3e3; font: 13px / 1.3 system-ui, -apple-system, sans-serif; box-shadow: 0 14px 36px rgb(0 0 0 / 0.5); transform-origin: 0 0; }
.ctx span { position: relative; isolation: isolate; display: flex; align-items: center; gap: 8px; margin: 0 5px; padding: 5px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx hr { margin: 5px 0; border: 0; border-top: 1px solid #45474a; }
.ctx-acai { font-weight: 600; }
.ctx-acai img { width: 16px; height: 16px; border-radius: 3px; }
.ctx-hover { position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: #3b6fd9; }
.sp { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: 380px; display: grid; align-content: start; gap: 14px; padding: 16px 18px; border-left: 1px solid #3c4043; background: var(--x-field); color: var(--ink); font-family: var(--font-text); box-shadow: -16px 0 40px rgb(0 0 0 / 0.3); }
.sp-top { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); }
.sp-top .xw { font-size: 22px; }
.sp-top .i { margin-left: auto; background: var(--ink-2); }
.sp-sheet { gap: 16px; }
.sp-verdict { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 14px; align-items: center; }
.sp-verdict img { width: 64px; height: auto; grid-row: span 2; }
.sp-verdict .label { justify-self: start; }
.sp-verdict p { font-size: 22px; font-weight: 700; line-height: 1.2; }
.sp .reasons { font-size: 15px; }
.sp-next { padding: 12px 14px; border-radius: 12px; background: var(--stop-surface); font-size: 15px; }

/* ---- 04 / 05b Marquees: a duplicated track, CSS only; still and wrapped for reduced motion ---- */

.marquee { --gap: 96px; --speed: 48s; display: flex; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { flex: none; display: flex; align-items: center; gap: var(--gap); margin: 0; padding: 0 var(--gap) 0 0; list-style: none; animation: marquee var(--speed) linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.brand-mark { display: block; height: calc(var(--h, 26px) * var(--k, 1.5)); width: calc(var(--h, 26px) * var(--k, 1.5) * var(--r)); background: var(--ink-2); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.bm-magalu { --logo: url('/brands/magalu.png'); --r: 3.5; }
.bm-mercadolivre { --logo: url('/brands/mercadolivre.svg'); --r: 2.538; --h: 34px; }
.bm-mercadolibre { --logo: url('/brands/mercadolibre.svg'); --r: 2.404; --h: 34px; }
.bm-shopee { --logo: url('/brands/shopee.svg'); --r: 1; --h: 32px; }
.bm-amazon { --logo: url('/brands/amazon.svg'); --r: 3.313; --h: 30px; }
.bm-olx { --logo: url('/brands/olx.svg'); --r: 1.74; --h: 30px; }
.bm-govbr { --logo: url('/brands/govbr.svg'); --r: 2.781; --h: 30px; }
.bm-caixa { --logo: url('/brands/caixa.svg'); --r: 4.424; --h: 24px; }
.bm-bb { --logo: url('/brands/bancodobrasil.png'); --r: 5.885; --h: 24px; }
.bm-itau { --logo: url('/brands/itau.png'); --r: 1; --h: 36px; }
.bm-bradesco { --logo: url('/brands/bradesco.svg'); --r: 5.325; --h: 24px; }
.bm-santander { --logo: url('/brands/santander.svg'); --r: 4.444; --h: 26px; }
/* ---- 05b Scam gallery: real fragments in each app's own colours, the sign marked as evidence ---- */
.scams { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--gutter); }
.scam { margin: 0; display: grid; gap: var(--s3); }
.scam figcaption { color: var(--ink-2); }
.scam figcaption a, .scam figcaption b { display: block; width: fit-content; color: var(--ink); font-weight: 600; }
.scams + .fine { margin-top: var(--s4); text-align: center; }
.frag { min-height: 264px; padding: var(--s4); border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgb(127 127 127 / 0.2); display: grid; align-content: center; gap: var(--s2); overflow: hidden; line-height: 1.4; }
.frag p, .doc .frag p { margin: 0; }
.frag mark { padding: 0 3px; border-radius: 3px; background: #F4E6B8; box-shadow: inset 0 -2px 0 #6B4000; color: #1C1420; }
.frag-wa { align-content: end; background: #0b141a url('/film/wa-doodle.svg') center / 320px; color: #e9edef; }
.wa-from { font-size: 0.875rem; color: #8696a0; }
.wa-msg { position: relative; justify-self: start; max-width: 92%; padding: 8px 10px; border-radius: 0 8px 8px 8px; background: #202c33; }
.wa-msg time { display: block; text-align: right; font-size: 0.75rem; color: #8696a0; }
.frag-bol { background: #fff; color: #1c1c1c; font-size: 0.9375rem; }
.bol-t { font-weight: 700; }
.frag-bol dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.frag-bol dl div:first-child { grid-column: 1 / -1; }
.frag-bol dt { font-size: 0.75rem; color: #555; }
.frag-bol dd { margin: 0; font-weight: 600; }
.bol-line { font: 0.75rem / 1.4 var(--font-mono); overflow-wrap: anywhere; }
.bol-bars { height: 32px; background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 3px, #111 3px 4px, #fff 4px 7px, #111 7px 10px, #fff 10px 12px); }
.frag-sms { background: #f2f2f7; color: #000; }
.sms-from { text-align: center; font-size: 0.875rem; font-weight: 600; color: #3c3c43; }
.sms-msg { justify-self: start; padding: 10px 12px; border-radius: 16px; background: #e5e5ea; }
.sms-msg .mono { color: #0a5bd3; text-decoration: underline; overflow-wrap: anywhere; font-size: 0.9375rem; }
.frag-car { background: #fff; color: #1a1a1a; }
.car-price { font-size: 1.75rem; font-weight: 700; }
.car-t { font-weight: 600; }
.car-meta { color: #5c5c5c; font-size: 0.9375rem; }
.car-note { padding-top: var(--s2); border-top: 1px solid #e6e6e6; }
.frag-job { background: #f0f2f5; color: #050505; }
.job-tag { font-size: 0.875rem; color: #5c6066; }
.job-t { font-size: 1.25rem; font-weight: 700; }
.job-btn { justify-self: start; margin-top: var(--s1); padding: 6px 14px; border-radius: 6px; background: #1b6ee8; color: #fff; font-weight: 600; }
.frag-call { background: #16161a; color: #fff; }
.call-card { display: grid; gap: var(--s1); padding: 12px 14px; border-radius: 18px; background: #2c2c30; }
.call-app { font-size: 0.8125rem; color: #aeaeb2; }
.call-from { font-weight: 600; }

.frag-store { background: #fff; color: #1a1a1a; }
.store-off { font-size: 1.75rem; font-weight: 700; color: #c4122f; }
.doc .scam { margin-bottom: var(--s5); max-width: var(--span6); }

/* Phosphor duotone icons (/icons/, MIT), drawn in the text colour; always next to a word, aria-hidden. */
.ico { display: inline-block; flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.ico-list { --icon: url('/icons/list.svg'); } .ico-menu { --icon: url('/icons/list.svg'); } .ico-x { --icon: url('/icons/x.svg'); } .ico-play { --icon: url('/icons/play.svg'); }
.ico-check { --icon: url('/icons/check.svg'); } .ico-check-circle { --icon: url('/icons/check-circle.svg'); } .ico-minus-circle { --icon: url('/icons/minus-circle.svg'); }
.ico-mail { --icon: url('/icons/envelope-simple.svg'); } .ico-gift { --icon: url('/icons/gift.svg'); } .ico-globe { --icon: url('/icons/globe.svg'); }
.ico-shield-check { --icon: url('/icons/shield-check.svg'); } .ico-eye-slash { --icon: url('/icons/eye-slash.svg'); } .ico-buildings { --icon: url('/icons/buildings.svg'); }
.ico-users { --icon: url('/icons/users.svg'); } .ico-prohibit { --icon: url('/icons/prohibit.svg'); } .ico-caret-down { --icon: url('/icons/caret-down.svg'); }
.ico-seal-check { --icon: url('/icons/seal-check.svg'); } .ico-bell { --icon: url('/icons/bell.svg'); } .ico-arrow-left { --icon: url('/icons/arrow-left.svg'); }
.ico-lock { --icon: url('/icons/lock.svg'); } .ico-download { --icon: url('/icons/download-simple.svg'); } .ico-arrow-counter { --icon: url('/icons/arrow-counter-clockwise.svg'); }

@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask: none; mask: none; justify-content: center; }
  .marquee-track { animation: none; flex: 0 1 auto; flex-wrap: wrap; justify-content: center; row-gap: var(--s5); padding: 0 var(--pad); }
  .marquee-track[aria-hidden] { display: none; }