/* Headcount v2, section 10: bonuses. Owner: BONUS. Mount: #bonus-app.
   Uses tokens.css only. Local helpers are prefixed --bx-. Mockups are drawn on a fixed
   600x480 canvas (.bx-canvas) and scaled to the card by bonuses.js, so every product shot
   looks identical at 390px and 1440px and in the PNG renders. */

/* ---------- section shell ---------- */
.bx{position:relative;max-width:var(--maxw);margin:0 auto;padding:var(--pad-section) 16px;color:var(--ink);font-family:var(--f-sans)}
@media (min-width:720px){.bx{padding-left:24px;padding-right:24px}}
.bx *,.bx *::before,.bx *::after,.bx-stage *,.bx-stage *::before,.bx-stage *::after{box-sizing:border-box}
.bx-head{max-width:780px;margin:0 auto 36px;text-align:center}
.bx-h2{font:800 clamp(34px,8.4vw,62px)/1.02 var(--f-sans);letter-spacing:-.04em;margin:16px 0 16px;text-wrap:balance}
.bx-h2 .bx-gold{color:var(--gold);white-space:nowrap;text-shadow:0 0 42px rgba(255,198,92,.28)}
.bx-h2 .serif{font-weight:400;letter-spacing:-.01em;color:var(--acc)}
.bx-sub{color:var(--ink-2);font-size:17px;line-height:1.55;max-width:610px;margin:0 auto;text-wrap:pretty}
.bx-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.bx-strip span{font:500 12px/1 var(--f-mono);color:var(--ink-2);border:1px solid var(--line-2);border-radius:99px;padding:8px 12px;background:rgba(255,255,255,.02)}
.bx-strip b{color:var(--acc);font-weight:600}

/* ---------- grid + cards ---------- */
.bx-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:700px){.bx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1080px){.bx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.bx-card{position:relative;display:flex;flex-direction:column;min-width:0;background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .35s,box-shadow .35s}
.bx-card:hover{border-color:var(--line-2);box-shadow:0 30px 70px -40px rgba(198,255,61,.25)}

.bx-stage{--bx-tint:rgba(198,255,61,.16);position:relative;aspect-ratio:5/4;overflow:hidden;perspective:1100px;background:
  radial-gradient(70% 60% at 50% 55%,var(--bx-tint),transparent 70%),
  radial-gradient(120% 90% at 50% 120%,rgba(0,0,0,.55),transparent 60%),
  linear-gradient(180deg,#0c0e12,#08090b);border-bottom:1px solid var(--line)}
.bx-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(80% 70% at 50% 50%,#000 30%,transparent 80%)}
.bx-stage[data-tint="gold"]{--bx-tint:rgba(255,198,92,.18)}
.bx-stage[data-tint="blue"]{--bx-tint:rgba(110,168,255,.16)}
.bx-stage[data-tint="green"]{--bx-tint:rgba(37,211,102,.13)}
.bx-tilt{position:absolute;inset:0;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease);will-change:transform}
.bx-canvas{position:absolute;left:0;top:0;width:600px;height:480px;transform-origin:0 0;transform:scale(var(--k,.6))}
.bx-glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(360px circle at var(--gx,50%) var(--gy,20%),rgba(255,255,255,.09),transparent 50%);opacity:0;transition:opacity .4s}
.bx-card:hover .bx-glare{opacity:1}

.bx-body{position:relative;display:flex;flex-direction:column;gap:10px;flex:1;padding:18px 18px 20px}
@media (min-width:1080px){.bx-body{padding:20px 22px 22px}}
.bx-tags{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.bx-num{font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc-ink);background:var(--acc);padding:6px 8px;border-radius:6px}
.bx-fmt{font:500 11px/1 var(--f-mono);color:var(--ink-2);border:1px solid var(--line-2);padding:5px 9px;border-radius:99px}
.bx-name{font:700 21px/1.18 var(--f-sans);letter-spacing:-.02em;margin:4px 0 0;color:var(--ink)}
.bx-desc{font-size:15px;line-height:1.5;color:var(--ink-2);margin:0;text-wrap:pretty}
.bx-inside{list-style:none;padding:0;margin:2px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.bx-inside li{font:500 11.5px/1 var(--f-mono);color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);padding:7px 8px;border-radius:7px}
.bx-price{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.bx-worth{font:500 14px/1 var(--f-mono);color:var(--mut);white-space:nowrap}
.bx-worth s{color:var(--gold);font-weight:600;font-size:16px;text-decoration-thickness:2px;text-decoration-color:rgba(255,198,92,.85);margin-left:4px}
.bx-free{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;font:800 13px/1 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.bx-free::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}

/* ---------- fast-action ---------- */
.bx-fast{position:relative;margin-top:20px;border-radius:var(--r-xl);padding:1px;background:linear-gradient(135deg,rgba(255,198,92,.95),rgba(255,198,92,.18) 38%,rgba(255,198,92,.08) 62%,rgba(198,255,61,.4));box-shadow:0 40px 100px -50px rgba(255,198,92,.45)}
.bx-fast-in{position:relative;display:grid;grid-template-columns:1fr;border-radius:calc(var(--r-xl) - 1px);overflow:hidden;background:radial-gradient(90% 80% at 100% 0%,rgba(255,198,92,.09),transparent 60%),linear-gradient(180deg,#121109,#0a0b0c)}
@media (min-width:900px){.bx-fast-in{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}}
.bx-fast .bx-stage{border-bottom:1px solid rgba(255,198,92,.16)}
@media (min-width:900px){.bx-fast .bx-stage{border-bottom:0;border-right:1px solid rgba(255,198,92,.16);aspect-ratio:auto;min-height:100%}}
.bx-fast .bx-body{padding:22px 20px 24px;gap:12px;justify-content:center}
@media (min-width:900px){.bx-fast .bx-body{padding:36px 40px}}
.bx-fa{font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#1a1204;background:var(--gold);padding:6px 9px;border-radius:6px;display:inline-flex;align-items:center;gap:6px}
.bx-fa svg{width:12px;height:12px}
.bx-fast .bx-num{background:transparent;color:var(--gold);border:1px solid rgba(255,198,92,.45)}
.bx-fast .bx-name{font-size:clamp(24px,5.6vw,34px);line-height:1.08;letter-spacing:-.03em}
.bx-fast .bx-desc{font-size:16px}
.bx-cond{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--ink);background:rgba(255,198,92,.06);border:1px solid rgba(255,198,92,.22);border-radius:12px;padding:12px 14px;margin:2px 0 0}
.bx-cond svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--gold)}
.bx-cond b{color:var(--gold);font-weight:600}
.bx-cd-wrap{display:flex;flex-direction:column;gap:8px}
.bx-cd-k{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.bx-cd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:360px}
.bx-cd div{padding:12px 4px 9px;border-radius:12px;background:linear-gradient(180deg,rgba(255,198,92,.1),rgba(255,198,92,.03));border:1px solid rgba(255,198,92,.26);text-align:center}
.bx-cd b{display:block;font:600 clamp(22px,6vw,30px)/1 var(--f-mono);color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bx-cd span{display:block;margin-top:6px;font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.bx-fast .bx-price{border-top-color:rgba(255,198,92,.25)}
.bx-fast.bx-ended{filter:saturate(.35);opacity:.8}
.bx-fast.bx-ended .bx-worth s{text-decoration:none}
.bx-ended-note{font:500 14px/1.5 var(--f-sans);color:var(--ink-2);margin:0}

/* ---------- total value bar ---------- */
.bx-total{position:relative;margin-top:20px;padding:22px 18px;border-radius:var(--r-xl);border:1px solid var(--line);background:radial-gradient(60% 120% at 0% 0%,rgba(255,198,92,.07),transparent 60%),linear-gradient(180deg,var(--surface),var(--bg-2));overflow:hidden}
@media (min-width:900px){.bx-total{padding:30px 34px}}
.bx-total-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px}
.bx-total-k{margin:0 0 8px;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.bx-total-v{margin:0;font:800 clamp(44px,11vw,72px)/.95 var(--f-sans);letter-spacing:-.045em;color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:0 0 50px rgba(255,198,92,.25)}
.bx-total-pay{text-align:right}
@media (max-width:599px){.bx-total-pay{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;padding-top:12px;border-top:1px dashed var(--line-2)}.bx-total-pay p{margin:0}}
.bx-total-pay p{margin:0 0 6px;font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.bx-total-pay b{font:800 clamp(30px,7vw,44px)/1 var(--f-sans);color:var(--acc);letter-spacing:-.03em}
.bx-bar{display:flex;gap:3px;height:46px;margin:22px 0 16px;padding:3px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.bx-bar i{position:relative;flex:var(--v) 1 0;min-width:0;border-radius:10px;background:var(--c);transform-origin:left center;transform:scaleX(0);transition:transform .9s var(--ease);transition-delay:calc(var(--n) * 110ms);display:flex;align-items:center;justify-content:center;overflow:hidden;font:600 11px/1 var(--f-mono);color:#0b0d06;font-style:normal;white-space:nowrap}
.bx-bar i.fa{background:repeating-linear-gradient(135deg,#ffc65c 0 8px,#f2b647 8px 16px)}
.bx-bar i.off{opacity:.25}
.bx-bar i em{font-style:normal;opacity:0;transition:opacity .4s .9s}
.bx-total.in .bx-bar i{transform:none}
.bx-total.in .bx-bar i em{opacity:.85}
@media (max-width:699px){.bx-bar{height:30px}.bx-bar i em{display:none}}
.bx-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0 28px}
@media (min-width:700px){.bx-legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.bx-legend{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bx-legend li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2);min-width:0}
.bx-legend li i{flex:0 0 10px;width:10px;height:10px;border-radius:3px;background:var(--c)}
.bx-legend li span{flex:1;min-width:0;line-height:1.35}
.bx-legend li b{font:600 13px/1 var(--f-mono);color:var(--gold)}
.bx-legend li.off{opacity:.45}
.bx-legend li.off b{text-decoration:line-through}
.bx-fine{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--mut)}
.bx-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px;text-align:center}
.bx-cta .btn-primary{width:100%;max-width:440px;min-height:56px;font-size:17px}
.bx-cta-s{display:none}
@media (max-width:479px){.bx-cta .btn-primary{font-size:16px;padding:16px 18px}.bx-cta-l{display:none}.bx-cta-s{display:inline}}
.bx-cta p{margin:0;font-size:13.5px;color:var(--mut);line-height:1.5;max-width:460px}

/* ---------- motion ---------- */
@keyframes bx-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes bx-float-s{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes bx-shadow{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(.9);opacity:.55}}
@keyframes bx-blink{0%,100%{opacity:1}50%{opacity:.2}}
.bx-float{animation:bx-float 6.5s ease-in-out infinite;animation-delay:var(--d,0s)}
.bx-float-s{animation:bx-float-s 7.5s ease-in-out infinite;animation-delay:var(--d,0s)}
.bx-card:not(.bx-on) .bx-float,.bx-card:not(.bx-on) .bx-float-s,.bx-card:not(.bx-on) .bk-shadow,.bx-card:not(.bx-on) .ph-dots i{animation-play-state:paused}
.bx-shot .bx-float,.bx-shot .bx-float-s,.bx-shot .bk-shadow,.bx-shot .ph-dots i{animation:none}
@media (prefers-reduced-motion:reduce){.bx-float,.bx-float-s,.bk-shadow{animation:none}.bx-tilt{transform:none!important}}

/* ---------- PNG shot harness (bonuses-test.html?shot=slug) ---------- */
.bx-shotwrap{position:fixed;inset:0;display:grid;place-items:center;background:#050607}
.bx-shotwrap[hidden]{display:none}
#shot{position:relative;width:600px;height:600px;overflow:hidden}
#shot .bx-stage{position:absolute;inset:0;aspect-ratio:auto;border:0;--bx-tint:rgba(198,255,61,.2)}
#shot .bx-stage[data-tint="gold"]{--bx-tint:rgba(255,198,92,.22)}
#shot .bx-stage[data-tint="blue"]{--bx-tint:rgba(110,168,255,.2)}
#shot .bx-stage[data-tint="green"]{--bx-tint:rgba(37,211,102,.16)}
#shot .bx-canvas{top:60px;transform:none}

/* =====================================================================
   MOCKUP 1: spreadsheet swipe file (light app window)
   ===================================================================== */
.m-sheet .sh-win{position:absolute;left:18px;top:36px;width:480px;height:404px;background:#fff;border-radius:12px;overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:#1f1f1f;box-shadow:0 50px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14),0 0 60px -10px rgba(198,255,61,.14)}
.sh-top{display:flex;align-items:center;gap:9px;padding:9px 12px 5px;background:#f9fbfd}
.sh-ico{width:20px;height:26px;flex:0 0 20px}
.sh-name{display:flex;align-items:center;gap:6px;font-size:13.5px;color:#1f1f1f}
.sh-name svg{width:12px;height:12px;color:#5f6368}
.sh-menu{display:flex;gap:9px;font-size:10px;color:#444746;margin-top:3px}
.sh-share{margin-left:auto;display:flex;align-items:center;gap:5px;background:#c2e7ff;color:#001d35;font:700 10.5px/1 Arial,sans-serif;padding:8px 13px;border-radius:99px}
.sh-share svg{width:10px;height:10px}
.sh-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#7fbf2a,#c6ff3d);color:#0a0c06;font:700 10px/24px Arial;text-align:center}
.sh-tool{height:26px;margin:3px 8px 6px;border-radius:99px;background:#edf2fa;display:flex;align-items:center;gap:8px;padding:0 12px}
.sh-tool i{width:11px;height:11px;border-radius:2px;background:#b9bdc1}
.sh-tool i.w{width:30px;border-radius:3px}
.sh-tool i.s{width:1px;height:14px;background:#c7c7c7;border-radius:0}
.sh-tool i.b{background:#5f6368;width:9px}
.sh-fx{display:flex;align-items:center;height:24px;border-top:1px solid #e1e3e1;border-bottom:1px solid #c7c7c7;font-size:10.5px}
.sh-ref{width:58px;padding-left:10px;border-right:1px solid #e1e3e1;color:#444746;height:100%;display:flex;align-items:center}
.sh-fxi{padding:0 8px;color:#80868b;font-style:italic;font-family:Georgia,serif}
.sh-fxv{color:#1f1f1f}
.sh-row{display:grid;grid-template-columns:28px 34px 150px 78px 48px 1fr;height:22px;border-bottom:1px solid #e2e2e2;font-size:10px}
.sh-row>*{position:relative;display:flex;align-items:center;gap:3px;padding:0 6px;border-right:1px solid #e2e2e2;white-space:nowrap;overflow:hidden;min-width:0}
.sh-row>:first-child{justify-content:center;background:#f8f9fa;color:#5f6368;font-size:9.5px;padding:0}
.sh-colh{height:18px;background:#f8f9fa;color:#5f6368}
.sh-colh>*{justify-content:center;font-size:9.5px}
.sh-colh>.on{background:#d3e3fd;color:#0b57d0;font-weight:700}
.sh-hdr{background:#fff;font-weight:700;color:#1f1f1f;border-bottom:2px solid #c7c7c7}
.sh-hdr>*{background:#f1f8e4}
.sh-row.sel>:first-child{background:#d3e3fd;color:#0b57d0;font-weight:700}
.sh-row.sel>:nth-child(3){background:#eef4fe;box-shadow:inset 0 0 0 2px #1a73e8}
.sh-row.sel>:nth-child(3)::after{content:"";position:absolute;right:-3px;bottom:-3px;width:6px;height:6px;background:#1a73e8;border:1px solid #fff;z-index:2}
.sh-row .mono{font-family:"Roboto Mono",Menlo,monospace;color:#3c4043;font-size:9.5px}
.m-sheet .ly{font-size:8.5px;padding:2px 6px;border-radius:99px;font-weight:700}
.m-sheet .ly.hero{background:#e6f4ea;color:#137333}.m-sheet .ly.statement{background:#f3e8fd;color:#8430ce}.m-sheet .ly.testimonial{background:#fef7e0;color:#b06000}.m-sheet .ly.review{background:#e8f0fe;color:#1967d2}.m-sheet .ly.compare{background:#fce8e6;color:#c5221f}
.m-sheet .ag{display:inline-block;width:14px;height:14px;border-radius:4px;font:700 8px/14px Arial,sans-serif;text-align:center;color:#fff}
.m-sheet .ag.p{background:#d93025}.m-sheet .ag.d{background:#188038}.m-sheet .ag.o{background:#1a73e8}.m-sheet .ag.m{background:#e37400}
.sh-row .rule{color:#3c4043}
.sh-tabs{position:absolute;left:0;right:0;bottom:0;height:30px;display:flex;align-items:center;gap:4px;padding:0 8px;background:#f9fbfd;border-top:1px solid #e1e3e1;font-size:10px;color:#444746}
.sh-tabs .pl{width:22px;height:22px;display:grid;place-items:center;font-size:15px;color:#5f6368}
.sh-tabs span{padding:6px 10px;border-radius:7px}
.sh-tabs .on{background:#e1e9f7;color:#0b57d0;font-weight:700}
.sh-ad{position:absolute;left:404px;top:150px;width:172px;height:215px;rotate:5deg;border-radius:12px;overflow:hidden;background:radial-gradient(120% 90% at 80% 100%,#2b5c41,transparent 60%),linear-gradient(160deg,#173a2a,#0f2a1d);color:#f6efe0;box-shadow:0 40px 60px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.12);padding:14px}
.sh-ad .k{font:600 7.5px/1 var(--f-mono);letter-spacing:.16em;color:#e8c26a;opacity:.9}
.sh-ad .h{margin-top:12px;font:800 21px/1.02 var(--f-sans);letter-spacing:-.03em}
.sh-ad .h em{font-style:normal;color:#e8c26a}
.sh-ad .tin{position:absolute;right:16px;bottom:44px;width:50px;height:62px;border-radius:7px 7px 6px 6px;background:linear-gradient(90deg,#9c7a2b,#e9cf86 35%,#fff1c4 45%,#c9a24a 70%,#8a6a22);box-shadow:0 14px 20px -8px rgba(0,0,0,.7)}
.sh-ad .tin::before{content:"";position:absolute;left:-2px;right:-2px;top:-6px;height:12px;border-radius:6px;background:linear-gradient(90deg,#6f5419,#c9a24a 40%,#f5dc95 50%,#a07e2c 80%,#5c4514)}
.sh-ad .tin::after{content:"MORNING FERN";position:absolute;left:4px;right:4px;top:22px;padding:5px 0;background:#173a2a;color:#e8c26a;font:700 5.5px/1 var(--f-sans);letter-spacing:.12em;text-align:center}
.sh-ad .leaf{position:absolute;left:12px;bottom:52px;width:56px;height:56px;border-radius:0 60% 0 60%;background:linear-gradient(135deg,#5f9c4a,#2b5c41);opacity:.55;rotate:-20deg}
.sh-ad .cta{position:absolute;left:14px;right:14px;bottom:12px;height:24px;border-radius:7px;background:#f6efe0;color:#173a2a;font:700 9px/24px var(--f-sans);text-align:center}
.sh-pin{position:absolute;left:390px;top:118px;font:600 10px/1 var(--f-mono);color:var(--acc-ink);background:var(--acc);padding:6px 9px;border-radius:7px;box-shadow:0 10px 24px -8px rgba(198,255,61,.6);rotate:-3deg;z-index:3}
.sh-curve{position:absolute;left:0;top:0;width:600px;height:480px;pointer-events:none;overflow:visible}

/* =====================================================================
   MOCKUP 2: 3D hardcover playbook + rule card
   ===================================================================== */
.m-book{position:absolute;inset:0;perspective:1500px;perspective-origin:38% 30%}
.bk-wrap{position:absolute;left:96px;top:62px;width:232px;height:322px}
.m-book .bk{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-9deg) rotateY(30deg) rotateZ(-1deg)}
.bk-face{position:absolute;top:0;left:0;backface-visibility:hidden}
.bk-front{width:232px;height:322px;transform:translateZ(17px);border-radius:2px 6px 6px 2px;overflow:hidden;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),
  radial-gradient(120% 80% at 80% 0%,#20242c,#0d0f13 70%);color:var(--ink);padding:22px 20px 18px 26px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.bk-back{width:232px;height:322px;transform:rotateY(180deg) translateZ(17px);background:#0b0c0f}
.bk-spine{width:34px;height:322px;transform:translateX(-17px) rotateY(-90deg);background:linear-gradient(90deg,#07080a,#16191f 40%,#0e1014);display:flex;align-items:center;justify-content:center}
.bk-spine span{writing-mode:vertical-rl;font:700 8.5px/1 var(--f-mono);letter-spacing:.22em;color:#c9c7c0;white-space:nowrap}
.bk-spine i{position:absolute;top:16px;width:10px;height:10px;border-radius:2px;background:var(--acc)}
.bk-spine b{position:absolute;bottom:16px;width:12px;height:2px;background:var(--gold)}
.bk-top{width:232px;height:34px;transform:translateY(-17px) rotateX(90deg);background:repeating-linear-gradient(180deg,#e6e0d2 0 1px,#f7f3ea 1px 2.6px);box-shadow:inset 0 0 0 1px #2a2c31;border-radius:2px}
.bk-right{width:34px;height:322px;left:198px;transform:translateX(17px) rotateY(90deg);background:repeating-linear-gradient(90deg,#e6e0d2 0 1px,#f7f3ea 1px 2.6px)}
.bk-front::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(255,255,255,.08))}
.bk-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.1) 30%,transparent 46%),linear-gradient(90deg,rgba(0,0,0,.35),transparent 18%)}
.bk-k{font:600 7.5px/1 var(--f-mono);letter-spacing:.2em;color:var(--acc);display:flex;justify-content:space-between}
.bk-k span{color:#7d828c}
.bk-t{margin-top:20px;font:800 31px/.95 var(--f-sans);letter-spacing:-.045em}
.bk-t em{display:block;margin-top:2px;font:400 italic 42px/1 var(--f-serif);letter-spacing:-.01em;background:linear-gradient(100deg,#b07a1c,#ffd98a 35%,#fff1c9 48%,#e0a73e 62%,#a46d14);-webkit-background-clip:text;background-clip:text;color:transparent}
.bk-s{margin-top:9px;font:500 8.5px/1.45 var(--f-sans);color:#a9adb5;max-width:176px}
.bk-rules{position:absolute;left:26px;right:20px;bottom:40px;border-top:1px solid rgba(255,255,255,.12)}
.bk-rules div{display:grid;grid-template-columns:22px 42px 1fr;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);font:500 7.5px/1.2 var(--f-mono);color:#9ea3ab}
.bk-rules b{font-weight:700;color:var(--ink)}
.bk-rules i{font-style:normal;font-weight:700;padding:2px 0;border-radius:3px;text-align:center;font-size:7px}
.bk-rules .r{background:rgba(255,93,93,.18);color:#ff8a8a}.bk-rules .h{background:rgba(255,255,255,.08);color:#c9c7c0}.bk-rules .g{background:rgba(198,255,61,.18);color:var(--acc)}
.bk-foot{position:absolute;left:26px;right:20px;bottom:16px;display:flex;justify-content:space-between;align-items:center;font:500 7px/1 var(--f-mono);letter-spacing:.12em;color:#7d828c}
.bk-foot svg{width:16px;height:16px}
.bk-shadow{position:absolute;left:80px;top:384px;width:330px;height:56px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent);filter:blur(6px);animation:bx-shadow 6.5s ease-in-out infinite}
.bk-card{position:absolute;left:340px;top:80px;width:214px;height:296px;rotate:6deg;border-radius:10px;background:linear-gradient(180deg,#fbf8f0,#f1ece0);color:#1b1c1f;padding:16px 16px 14px 30px;box-shadow:0 40px 60px -24px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.06)}
.bk-card .k{display:flex;justify-content:space-between;font:700 8px/1 var(--f-mono);letter-spacing:.18em;color:#6a6d73}
.bk-card .k b{color:#3d7a00}
.bk-card h5{margin:10px 0 10px;font:800 17px/1.05 var(--f-sans);letter-spacing:-.03em}
.bk-card .row{display:grid;grid-template-columns:24px 1fr;gap:8px;padding:7px 0;border-top:1px solid #e2dccd;font:500 8.5px/1.35 var(--f-sans);color:#40434a}
.bk-card .row b{font:700 8px/1.3 var(--f-mono);color:#1b1c1f}
.bk-card .row.kill b{color:#c43c3c}.bk-card .row.scale b{color:#3d7a00}
.bk-card .tab{position:absolute;right:14px;bottom:12px;font:700 8px/1 var(--f-mono);color:#8c8f95}

/* =====================================================================
   MOCKUP 3: Notion-style vault in a browser (dark)
   ===================================================================== */
.m-notion .nt-win{position:absolute;left:18px;top:30px;width:520px;height:398px;border-radius:12px;overflow:hidden;background:#191919;color:#e3e2e0;font-family:var(--f-sans);box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.13)}
.nt-chrome{height:34px;display:flex;align-items:center;gap:10px;padding:0 12px;background:#242424;border-bottom:1px solid #2f2f2f}
.nt-dots{display:flex;gap:6px}.nt-dots i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.nt-dots i:nth-child(2){background:#febc2e}.nt-dots i:nth-child(3){background:#28c840}
.nt-url{flex:1;max-width:260px;margin:0 auto;height:20px;border-radius:6px;background:#1a1a1a;color:#9b9a97;font:500 9px/20px var(--f-sans);text-align:center;display:flex;align-items:center;justify-content:center;gap:5px}
.nt-url svg{width:8px;height:8px}
.nt-body{display:flex;height:calc(100% - 34px)}
.nt-side{width:128px;flex:0 0 128px;background:#202020;padding:10px 8px;font-size:9.5px;color:#9b9a97;border-right:1px solid #2a2a2a}
.nt-ws{display:flex;align-items:center;gap:6px;padding:4px 6px;color:#e3e2e0;font-weight:600;font-size:10px;margin-bottom:10px}
.nt-ws i{width:16px;height:16px;border-radius:4px;background:var(--acc);color:var(--acc-ink);font:800 9px/16px var(--f-sans);text-align:center;font-style:normal}
.nt-sec{font-size:8px;font-weight:600;letter-spacing:.04em;color:#7f7f7c;margin:10px 6px 4px}
.nt-item{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:5px;white-space:nowrap;overflow:hidden}
.nt-item svg{width:11px;height:11px;flex:0 0 11px;color:#8a8986}
.nt-item.on{background:#2c2c2c;color:#e3e2e0}
.nt-item.on svg{color:var(--acc)}
.nt-main{flex:1;min-width:0;position:relative;overflow:hidden}
.nt-cover{height:58px;background:radial-gradient(60% 140% at 20% 0%,rgba(198,255,61,.45),transparent 60%),radial-gradient(60% 160% at 90% 100%,rgba(110,168,255,.35),transparent 60%),linear-gradient(90deg,#1f2a12,#13202e)}
.nt-icon{position:absolute;left:26px;top:36px;width:44px;height:44px;border-radius:10px;background:#252525;border:1px solid #333;display:grid;place-items:center;color:var(--acc)}
.nt-icon svg{width:24px;height:24px}
.nt-page{padding:30px 26px 0}
.nt-title{font:700 23px/1.1 var(--f-sans);letter-spacing:-.02em;color:#f1f0ee}
.nt-desc{margin-top:5px;font-size:9.5px;color:#9b9a97}
.nt-views{display:flex;align-items:center;gap:12px;margin-top:12px;border-bottom:1px solid #2f2f2f;font-size:9.5px;color:#9b9a97}
.nt-views span{padding:6px 0;display:flex;align-items:center;gap:4px}
.nt-views span.on{color:#e3e2e0;box-shadow:inset 0 -2px 0 #e3e2e0}
.nt-views .new{margin-left:auto;background:#2383e2;color:#fff;font-weight:600;padding:4px 9px;border-radius:5px}
.nt-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.nt-c{border-radius:7px;background:#202020;border:1px solid #2c2c2c;overflow:hidden}
.nt-c .pv{height:34px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 8px 5px;font:800 15px/1 var(--f-mono);color:#191919}
.nt-c .bd{padding:6px 8px 8px}
.nt-c .t{font-size:9.5px;font-weight:600;color:#ececea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-c .q{margin-top:3px;font-size:8.5px;color:#9b9a97;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-c .tg{display:inline-block;margin-top:6px;font-size:7.5px;font-weight:600;padding:2px 5px;border-radius:3px}
.m-notion .tg.lo{background:rgba(70,160,90,.25);color:#7fd18f}.m-notion .tg.pr{background:rgba(220,150,40,.22);color:#f0b45a}.m-notion .tg.md{background:rgba(155,110,230,.25);color:#c5a6ff}
.nt-float{position:absolute;left:372px;top:300px;width:212px;border-radius:12px;background:rgba(32,32,32,.96);border:1px solid #3a3a3a;box-shadow:0 40px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(198,255,61,.12);padding:12px 12px 10px;color:#e3e2e0;backdrop-filter:blur(8px)}
.nt-float .h{display:flex;align-items:center;justify-content:space-between;font:600 10px/1 var(--f-sans)}
.nt-float .h span{font:600 7.5px/1 var(--f-mono);letter-spacing:.14em;color:var(--acc)}
.nt-float dl{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:5px 10px;font-size:8.5px}
.nt-float dt{font-family:var(--f-mono);color:#8a8986}
.nt-float dd{margin:0;color:#ececea;text-align:right;font-family:var(--f-mono)}
.nt-float dd b{background:rgba(198,255,61,.16);color:var(--acc);padding:1px 4px;border-radius:3px;font-weight:600}

/* =====================================================================
   MOCKUP 4: fanned template pack (paper cards)
   ===================================================================== */
.m-fan .fn-hand{position:absolute;inset:0}
.fn-card{position:absolute;left:200px;top:104px;width:200px;height:264px;border-radius:12px;padding:14px 14px 12px;background:linear-gradient(180deg,#fdfcf8,#f3f0e7);color:#1c1d20;transform-origin:50% 142%;rotate:calc(var(--a) * 1deg);box-shadow:0 30px 50px -20px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.08);transition:rotate .7s var(--ease),translate .7s var(--ease)}
.bx-card:hover .fn-card{rotate:calc(var(--a) * 1.18deg)}
.bx-card:hover .fn-card.c2{translate:0 -10px}
.fn-card .tp{display:flex;align-items:center;justify-content:space-between}
.fn-card .tag{font:700 7px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:4px 6px;border-radius:4px}
.fn-card .no{font:600 8px/1 var(--f-mono);color:#9a9a96}
.fn-card h6{margin:10px 0 8px;font:800 14px/1.1 var(--f-sans);letter-spacing:-.02em}
.fn-card .sub{font:600 8.5px/1.35 var(--f-sans);color:#1c1d20;padding:6px 0;border-top:1px solid #e4e0d4;border-bottom:1px solid #e4e0d4}
.fn-card .sub span{color:#8a8a86;font-weight:500}
.fn-card p{margin:8px 0 0;font:400 8.6px/1.6 var(--f-sans);color:#3a3c41}
.fn-card .f{display:inline;font:600 7.6px/1 var(--f-mono);background:#e6f7c2;color:#2c4a00;padding:1px 3px;border-radius:3px;white-space:nowrap}
.fn-card .ln{height:6px;border-radius:3px;background:#e3dfd3;margin-top:7px}
.fn-card .chk{position:absolute;left:14px;right:14px;bottom:30px;display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:7px;background:#eef6dc;font:600 8px/1.3 var(--f-sans);color:#2c4a00}
.fn-card .chk svg{width:10px;height:10px;flex:0 0 10px}
.fn-card .ft{position:absolute;left:14px;right:14px;bottom:12px;display:flex;justify-content:space-between;font:600 7px/1 var(--f-mono);letter-spacing:.1em;color:#8f8f8a;text-transform:uppercase}
.fn-card .ft b{color:#3d7a00}
.m-fan .tag.t1{background:#e7f0ff;color:#1d5bd6}.m-fan .tag.t2{background:#fff1d6;color:#9a5b00}.m-fan .tag.t3{background:#e6f7c2;color:#3d6a00}.m-fan .tag.t4{background:#f6e6ff;color:#8a2fc4}.m-fan .tag.t5{background:#ffe4e4;color:#b23a3a}
.fn-sticker{position:absolute;left:456px;top:34px;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 35% 30%,#e5ff9a,#c6ff3d 55%,#9fdc2f);color:var(--acc-ink);font:800 10px/1.1 var(--f-sans);rotate:12deg;box-shadow:0 20px 40px -14px rgba(198,255,61,.6);z-index:9}
.fn-sticker b{display:block;font:800 32px/.9 var(--f-sans);letter-spacing:-.05em}
.fn-chip{position:absolute;font:600 9px/1 var(--f-mono);color:var(--ink-2);background:rgba(22,25,32,.9);border:1px solid var(--line-2);padding:7px 9px;border-radius:8px;box-shadow:0 14px 30px -12px rgba(0,0,0,.8);z-index:9}
.fn-chip b{color:var(--acc);font-weight:600}

/* =====================================================================
   MOCKUP 5: phone with WhatsApp chat (dark)
   ===================================================================== */
.m-phone .ph{position:absolute;left:58px;top:12px;width:218px;height:456px;border-radius:40px;padding:8px;background:linear-gradient(145deg,#3a3d44,#141518 30%,#26282d 70%,#0d0e10);box-shadow:0 50px 80px -30px rgba(0,0,0,.95),inset 0 0 0 1.5px rgba(255,255,255,.14),0 0 0 1px #000}
.ph::before{content:"";position:absolute;right:-3px;top:110px;width:3px;height:52px;border-radius:0 2px 2px 0;background:#2a2c31}
.ph::after{content:"";position:absolute;left:-3px;top:92px;width:3px;height:30px;border-radius:2px 0 0 2px;background:#2a2c31;box-shadow:0 44px 0 #2a2c31}
.ph-scr{position:relative;width:100%;height:100%;border-radius:33px;overflow:hidden;background:#0b141a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#e9edef}
.ph-island{position:absolute;left:50%;top:7px;width:62px;height:18px;margin-left:-31px;border-radius:12px;background:#000;z-index:4}
.ph-status{height:30px;display:flex;align-items:center;justify-content:space-between;padding:4px 20px 0 22px;font-size:10px;font-weight:600;background:#1f2c34}
.ph-status svg{height:8px}
.ph-head{display:flex;align-items:center;gap:7px;height:42px;padding:0 10px 0 6px;background:#1f2c34}
.ph-head .bkc{width:12px;height:12px;color:#aebac1}
.ph-head .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#7fbf2a,#2b5c41);display:grid;place-items:center;font:700 10px/1 var(--f-sans);color:#fff}
.ph-head .nm{flex:1;min-width:0}
.ph-head .nm b{display:block;font-size:11px;font-weight:600;white-space:nowrap}
.ph-head .nm span{display:block;font-size:8.5px;color:#8696a0;margin-top:1px}
.ph-head svg.ic{width:13px;height:13px;color:#aebac1;margin-left:9px}
.ph-chat{position:absolute;top:72px;bottom:44px;left:0;right:0;padding:8px 8px 0;background-color:#0b141a;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.4px),radial-gradient(rgba(255,255,255,.025) 1px,transparent 1.4px);background-size:14px 14px,22px 22px;background-position:0 0,7px 9px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.ph-day{align-self:center;font-size:8px;color:#8696a0;background:#182229;padding:3px 8px;border-radius:6px;margin-bottom:2px}
.ph-enc{align-self:center;max-width:170px;text-align:center;font-size:7px;line-height:1.35;color:#ffd279;background:#182229;padding:4px 8px;border-radius:6px;margin-bottom:3px}
.ph-b{position:relative;max-width:78%;padding:5px 7px 4px;border-radius:8px;font-size:9.6px;line-height:1.38}
.ph-b.in{align-self:flex-start;background:#202c33;border-top-left-radius:2px}
.ph-b.out{align-self:flex-end;background:#005c4b;border-top-right-radius:2px}
.ph-b .tm{display:inline-flex;align-items:center;gap:2px;float:right;margin:4px 0 -2px 8px;font-size:6.8px;color:rgba(233,237,239,.6)}
.ph-b .tm svg{width:11px;height:7px;color:#53bdeb}
.ph-b .lk{color:#53bdeb;text-decoration:underline}
.ph-qr{align-self:flex-end;display:flex;gap:4px;margin-top:-2px;width:78%}
.ph-qr span{flex:1;text-align:center;font-size:8.6px;font-weight:600;color:#53bdeb;background:#005c4b;border-radius:7px;padding:5px 0}
.ph-hl{box-shadow:0 0 0 1.5px var(--acc),0 0 18px rgba(198,255,61,.35)}
.ph-in{position:absolute;left:6px;right:6px;bottom:8px;height:30px;display:flex;align-items:center;gap:6px}
.ph-in .f{flex:1;height:30px;border-radius:16px;background:#2a3942;display:flex;align-items:center;padding:0 10px;font-size:9.5px;color:#8696a0;gap:6px}
.ph-in .f svg{width:12px;height:12px}
.ph-in .mic{width:30px;height:30px;border-radius:50%;background:#00a884;display:grid;place-items:center;color:#0b141a}
.ph-in .mic svg{width:13px;height:13px}
.ph-dots{display:inline-flex;gap:2px;margin-left:3px}
.ph-dots i{width:3px;height:3px;border-radius:50%;background:#8696a0;animation:bx-blink 1.2s infinite}
.ph-dots i:nth-child(2){animation-delay:.2s}.ph-dots i:nth-child(3){animation-delay:.4s}
.ph-note{position:absolute;width:250px;border-radius:12px;padding:11px 12px;background:linear-gradient(180deg,rgba(29,33,42,.96),rgba(16,18,22,.96));border:1px solid var(--line-2);box-shadow:0 24px 50px -20px rgba(0,0,0,.9);font-family:var(--f-sans)}
.ph-note .k{display:flex;align-items:center;gap:6px;font:600 8px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.ph-note .k i{width:16px;height:16px;border-radius:4px;background:var(--acc-soft);border:1px solid rgba(198,255,61,.4);display:grid;place-items:center;font:700 8px/1 var(--f-mono);font-style:normal;color:var(--acc)}
.ph-note p{margin:7px 0 0;font-size:11.5px;line-height:1.4;color:var(--ink)}
.ph-note code{font:500 10px/1.5 var(--f-mono);color:var(--gold)}
.ph-lines{position:absolute;inset:0;width:600px;height:480px;pointer-events:none}

/* =====================================================================
   MOCKUP 6: video player with chapter list
   ===================================================================== */
.m-player .pl-win{position:absolute;left:16px;top:24px;width:568px;height:338px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#14161b,#0d0f12);border:1px solid rgba(255,255,255,.12);box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(110,168,255,.18);font-family:var(--f-sans);color:var(--ink)}
.pl-bar{height:30px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.07);font:500 9px/1 var(--f-mono);color:var(--mut)}
.pl-bar .nt-dots i{width:8px;height:8px}
.pl-bar b{color:var(--ink-2);font-weight:500;margin-left:6px}
.pl-vid{position:absolute;left:12px;top:42px;width:386px;height:217px;border-radius:9px;overflow:hidden;background:#05070a}
.pl-blur{position:absolute;inset:-20px;background:radial-gradient(40% 60% at 50% 50%,rgba(198,255,61,.22),transparent 70%),linear-gradient(90deg,#0a0d10,#141a14 50%,#0a0d10);filter:blur(10px)}
.pl-frame{position:absolute;left:50%;top:0;width:217px;height:217px;margin-left:-108px;background:#0f1418;padding:24px 20px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 40px rgba(0,0,0,.6)}
.pl-frame .l{font:900 25px/.94 var(--f-sans);white-space:nowrap;letter-spacing:-.04em;text-transform:uppercase;color:#fff}
.pl-frame .l.a{color:var(--acc)}
.pl-frame .kick{margin-top:9px;font:700 10px/1.3 var(--f-sans);color:#b8c2cc}
.pl-frame .bar{position:absolute;left:20px;width:56px;top:16px;height:3px;border-radius:2px;background:var(--gold)}
.pl-ctrl{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 7px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75))}
.pl-prog{position:relative;display:flex;gap:2px;height:4px}
.pl-prog i{flex:var(--v) 1 0;background:rgba(255,255,255,.28);border-radius:2px;position:relative;overflow:hidden}
.pl-prog i.done::after{content:"";position:absolute;inset:0;background:var(--acc);width:var(--p,100%)}
.pl-head{position:absolute;left:var(--x);top:-4px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(198,255,61,.25)}
.pl-tip{position:absolute;left:var(--x);bottom:12px;transform:translateX(-30%);white-space:nowrap;font:600 8px/1 var(--f-mono);color:#0a0c06;background:var(--acc);padding:4px 6px;border-radius:4px}
.pl-row{display:flex;align-items:center;gap:10px;margin-top:7px;color:#fff;font:500 9px/1 var(--f-mono)}
.pl-row svg{width:12px;height:12px}
.pl-row .sp{flex:1}
.pl-meta{position:absolute;left:14px;top:270px;width:384px}
.pl-meta h6{margin:0;font:700 14px/1.2 var(--f-sans);letter-spacing:-.015em}
.pl-meta div{display:flex;gap:6px;margin-top:8px}
.pl-meta span{font:500 8.5px/1 var(--f-mono);color:var(--ink-2);border:1px solid var(--line-2);border-radius:99px;padding:5px 8px}
.pl-list{position:absolute;left:408px;top:40px;width:150px;bottom:10px;display:flex;flex-direction:column;gap:3px}
.pl-list .hd{font:600 8px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:3px}
.pl-ch{display:grid;grid-template-columns:36px 1fr;gap:8px;align-items:center;padding:4px 5px;border-radius:8px;border:1px solid transparent}
.pl-ch.on{background:rgba(198,255,61,.07);border-color:rgba(198,255,61,.3)}
.pl-ch .th{position:relative;width:36px;height:36px;border-radius:6px;overflow:hidden;background:#151a1f;display:grid;place-items:center;font:900 8px/1 var(--f-sans);color:#fff}
.pl-ch .t{font:600 9.5px/1.2 var(--f-sans);color:var(--ink)}
.pl-ch .d{margin-top:3px;font:500 8px/1 var(--f-mono);color:var(--mut)}
.pl-ch.on .d{color:var(--acc)}
.m-player .th.k1 b{font-size:9px;line-height:.9;text-align:left;width:28px}.m-player .th.k1 b i{font-style:normal;color:var(--acc)}
.m-player .th.k2{font:800 13px/1 var(--f-sans);color:var(--acc)}
.m-player .th.k3 i{position:absolute;left:7px;right:7px;height:4px;border-radius:2px;background:#2b333b}.m-player .th.k3 i:nth-child(1){top:10px;background:#3b4652}.m-player .th.k3 i:nth-child(2){top:18px}.m-player .th.k3 i:nth-child(3){top:26px}.m-player .th.k3 em{position:absolute;right:6px;bottom:5px;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.m-player .th.k4 b{color:var(--gold);font-size:6px;letter-spacing:0}
.m-player .th.k5 i{position:absolute;width:20px;height:24px;border-radius:3px;background:#2b333b;border:1px solid #3d4752}.m-player .th.k5 i:nth-child(1){left:6px;top:8px;rotate:-8deg}.m-player .th.k5 i:nth-child(2){left:14px;top:8px;background:#36404a;rotate:6deg}
.pl-json{position:absolute;left:26px;top:352px;width:352px;border-radius:12px;padding:11px 14px;background:linear-gradient(180deg,#171a21,#0f1115);border:1px solid var(--line-2);box-shadow:0 30px 60px -20px rgba(0,0,0,.95);font:500 10px/1.6 var(--f-mono);color:var(--ink-2)}
.pl-json .hd{display:flex;justify-content:space-between;font:600 8px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.pl-json .hd b{color:var(--acc);font-weight:600}
.pl-json .s{color:var(--acc)}.pl-json .k{color:var(--blue)}
.pl-fmts{position:absolute;left:394px;top:376px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:190px}
.pl-fmts span{font:600 9.5px/1 var(--f-mono);color:var(--ink);background:rgba(22,25,32,.92);border:1px solid var(--line-2);padding:8px 10px;border-radius:8px}
.pl-fmts span b{color:var(--acc);font-weight:600}

/* =====================================================================
   MOCKUP 7: COMPANY.md written for you (paper + gold seal)
   ===================================================================== */
.m-doc .dc-back{position:absolute;left:52px;top:30px;width:300px;height:424px;border-radius:8px;background:linear-gradient(180deg,#ece7da,#e2dccc);rotate:4deg;box-shadow:0 30px 50px -20px rgba(0,0,0,.8)}
.m-doc .dc{position:absolute;left:34px;top:22px;width:306px;height:430px;border-radius:8px;background:linear-gradient(180deg,#fdfbf6,#f6f2e8);rotate:-2.5deg;color:#1d1e22;padding:22px 24px;font-family:var(--f-mono);box-shadow:0 40px 70px -24px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.05);overflow:hidden}
.dc .top{display:flex;justify-content:space-between;align-items:center;font:600 7.5px/1 var(--f-mono);letter-spacing:.14em;color:#8b8a84;text-transform:uppercase}
.dc .top b{color:#9a6a00}
.dc h4{margin:12px 0 2px;font:800 21px/1 var(--f-sans);letter-spacing:-.03em;color:#111}
.dc .by{font:500 8.5px/1.4 var(--f-sans);color:#6b6a65}
.dc h5{margin:11px 0 4px;font:700 10px/1 var(--f-sans);color:#111;display:flex;align-items:center;gap:6px}
.dc h5 i{font:600 8px/1 var(--f-mono);font-style:normal;color:#9a6a00}
.dc .kv{font:400 8.3px/1.55 var(--f-mono);color:#3a3b40}
.dc .kv b{font-weight:600;color:#6b6a65}
.dc mark{background:linear-gradient(180deg,transparent 45%,rgba(198,255,61,.65) 45%,rgba(198,255,61,.65) 92%,transparent 92%);color:inherit;padding:0 1px}
.dc .no{color:#b23a3a}
.dc .foot{position:absolute;left:24px;right:24px;bottom:14px;display:flex;justify-content:space-between;font:600 7px/1 var(--f-mono);letter-spacing:.1em;color:#a09e96;text-transform:uppercase;border-top:1px dashed #d8d2c2;padding-top:9px}
.dc-seal{position:absolute;left:330px;top:30px;width:136px;height:136px;rotate:-12deg;z-index:5;filter:drop-shadow(0 18px 24px rgba(0,0,0,.6))}
.dc-seal svg{width:100%;height:100%}
.dc-check{position:absolute;left:318px;top:250px;width:250px;border-radius:14px;padding:13px 14px;background:linear-gradient(180deg,rgba(33,30,20,.96),rgba(16,15,12,.96));border:1px solid rgba(255,198,92,.3);box-shadow:0 30px 60px -20px rgba(0,0,0,.95);font-family:var(--f-sans);z-index:4}
.dc-check .k{font:600 8px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.dc-check div{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:var(--ink)}
.dc-check svg{width:14px;height:14px;flex:0 0 14px;color:var(--acc)}
.dc-check div.wait svg{color:var(--gold)}
.dc-check span{margin-left:auto;font:500 9px/1 var(--f-mono);color:var(--mut)}