/* MechApe product surfaces share the desktop's locally bundled typography. */
@font-face { font-family: 'MechApe Inter'; src: url('fonts/Inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'MechApe Forum'; src: url('fonts/Forum-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
.cl-mechape.cl-mechape { --mk-pitch:#0a0908; --mk-teal:#ffd400; --mk-magenta:#ffd400; --mk-gold:#ffd400; --mk-ivory:#f6f1de; font-family:'MechApe Inter',sans-serif; font-size:16px; line-height:1.75; }
.cl-mechape::before,.cl-mechape::after,.cl-mechape .cl-mk-shot::before,.cl-mechape .cl-mk-shot::after { display:none; }
.cl-mechape .cl-mk-title,.cl-mechape .cl-mk-h2 { font-family:'MechApe Forum',serif; letter-spacing:0; text-transform:none; animation:none; text-shadow:none; }
.cl-mechape .cl-mk-title { color:#ffd400; }
.cl-mechape .cl-mk-tagline,.cl-mechape .cl-mk-row h3,.cl-mechape .cl-mk-card h3,.cl-mechape .cl-mk-honest h3 { font-family:'MechApe Inter',sans-serif; letter-spacing:0; text-transform:none; font-weight:600; color:#f6f1de; }
.cl-mechape .cl-mk-tagline { font-size:clamp(20px,3vw,28px); }
.cl-mechape .cl-mk-sub,.cl-mechape .cl-mk-lede,.cl-mechape .cl-mk-final p { font-style:normal; font-size:16px; color:#b3ad98; }
.cl-mechape .cl-mk-btn,.cl-mechape .cl-mk-kicker,.cl-mechape .cl-mk-strip p,.cl-mechape .cl-mk-row h3 .num,.cl-mechape .cl-mk-req,.cl-mechape .cl-mk-back,.cl-mechape .cl-mk-badge,.cl-mechape .cl-mk-prompt { font-family:'MechApe Inter',sans-serif; letter-spacing:0; text-transform:none; }
.cl-mechape .cl-mk-btn { border-radius:6px; font-size:14px; font-weight:600; box-shadow:none; }
.cl-mechape .cl-mk-btn:disabled { opacity:.6; cursor:not-allowed; }
.cl-mechape .cl-mk-btn:hover { box-shadow:none; }
.cl-mechape .cl-mk-icon { box-shadow:none; }
.cl-mechape .cl-mk-cursor { display:none; }
.cl-mechape .cl-mk-strip { background:#100e0b; border-color:#ffd4002e; }
.cl-mechape .cl-mk-strip .pulse { animation:none; }
.cl-mechape .cl-mk-shot img { border:1px solid #ffd4002e; border-radius:10px; box-shadow:0 12px 36px #0004; }
.cl-mechape .cl-mk-card { background:#100e0b; border-color:#ffd4002e; border-radius:10px; }
.cl-mechape .cl-mk-card:hover { transform:none; }
.cl-mechape .cl-mk-card p { font-size:14px; }
.cl-mechape .cl-mk-row { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:32px; }
.cl-mechape .cl-mk-row.flip { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); }
.cl-mechape a:focus-visible,.mechape-modal a:focus-visible,.mechape-modal button:focus-visible { outline:2px solid #ffd400; outline-offset:4px; }
.mechape-modal .mechape-frame { width:min(1200px,94vw); max-width:1200px; height:auto; max-height:90dvh; overflow-y:auto; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); background:#0a0908; border:1px solid #ffd4002e; border-radius:12px; box-shadow:0 20px 70px #0008; }
.mechape-modal .mechape-visual { background:#100e0b; min-height:0; display:flex; flex-direction:column; justify-content:center; padding:24px; }
.mechape-modal .mechape-visual::after,.mechape-modal .mechape-name::before,.mechape-modal .mechape-name::after { display:none; }
.mechape-modal .mechape-visual img { display:block; width:100%; height:auto; border:1px solid #ffd4002e; border-radius:8px; }
.mechape-modal .mechape-visual-caption { position:static; padding:16px 0 0; font:12px/1.6 'MechApe Inter',sans-serif; color:#b3ad98; letter-spacing:0; text-transform:none; }
.mechape-modal .mechape-meta { min-width:0; font-family:'MechApe Inter',sans-serif; color:#f6f1de; }
.mechape-modal .mechape-body-wrap { overflow:visible; }
.mechape-modal .mechape-name { font-family:'MechApe Forum',serif; color:#ffd400; letter-spacing:0; text-shadow:none; animation:none; text-transform:none; }
.mechape-modal .mechape-title,.mechape-modal .mechape-body,.mechape-modal .mechape-fine,.mechape-modal .mechape-eyebrow,.mechape-modal .service-btn { font-family:'MechApe Inter',sans-serif; letter-spacing:0; text-transform:none; }
.mechape-modal .mechape-title { font-size:16px; color:#b3ad98; }
.mechape-modal .mechape-body { font-size:14px; line-height:1.7; }
.mechape-modal .mechape-fine { font-size:12px; }
.mechape-modal .service-btn { border-radius:6px; font-size:13px; }
#lab-mechape .service-title { font-family:'MechApe Forum',serif; letter-spacing:0; }
#lab-mechape .service-desc,#lab-mechape .service-btn { font-family:'MechApe Inter',sans-serif; letter-spacing:0; text-transform:none; }
@media(max-width:781px) { .cl-mechape .cl-mk-row,.cl-mechape .cl-mk-row.flip { grid-template-columns:minmax(0,1fr); } .mechape-modal .mechape-frame { grid-template-columns:minmax(0,1fr); } .mechape-modal .mechape-visual { padding:20px; } }
.cl-mechape .cl-mk-title,.cl-mechape .cl-mk-h2,.mechape-modal .mechape-name { font-weight:400; }
.mechape-modal .mechape-frame { align-items:start; }
.mechape-modal .mechape-frame::before,.mechape-modal .mechape-frame::after { display:none; }
.mechape-modal .mechape-meta { height:auto; overflow:visible; }
.mechape-modal .mechape-body-wrap { display:block; }
.mechape-modal .mechape-body { overflow:visible; padding:0; margin:0; }
.mechape-modal .mechape-title,.mechape-modal .mechape-fine { font-style:normal; }
.mechape-modal .mechape-visual { align-self:stretch; }
.mechape-modal .mechape-eyebrow { color:#b3ad98; text-shadow:none; }
.mechape-modal .mechape-badge { box-shadow:none; }
/* Homepage popup: the same bento hierarchy as the MechApe page. */
.mechape-modal::before { display:none; }
.mechape-modal .mechape-bento-frame { display:block; grid-template-rows:none; width:min(1120px,94vw); max-height:92dvh; border-radius:24px; padding:0 18px 18px; font-family:'MechApe Inter',sans-serif; color:#f6f1de; scrollbar-gutter:stable; }
.mechape-modal .mp-toolbar { position:sticky; top:0; z-index:12; display:flex; justify-content:space-between; align-items:center; min-height:62px; gap:16px; background:#0a0908; color:#b3ad98; font-size:12px; }
.mechape-modal .mp-toolbar .mechape-close { position:static; flex:none; width:40px; height:40px; border-radius:10px; border-color:#ffd40050; background:#17140e; box-shadow:none; }
.mechape-modal .mp-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.mechape-modal .mp-panel { min-width:0; border:1px solid #ffd4002e; background:#100e0b; border-radius:16px; }
.mechape-modal .mp-brand { grid-column:1; grid-row:1; padding:26px; background:#17140e; }
.mechape-modal .mp-brand>img { display:block; width:50px; height:50px; object-fit:contain; }
.mechape-modal .mp-brand .mechape-name { font-size:60px; line-height:1.1; display:block; margin:14px 0; }
.mechape-modal .mp-headline { font-size:22px; line-height:1.4; font-weight:500; margin:0 0 12px; max-width:25ch; }
.mechape-modal .mp-brand>p:last-child { font-size:13px; line-height:1.8; color:#b3ad98; margin:0; max-width:48ch; }
.mechape-modal .mp-preview { grid-column:2; grid-row:1; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.mechape-modal .mp-preview-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:18px; color:#b3ad98; font-size:12px; }
.mechape-modal .mp-preview-heading>span { border:1px solid #ffd40040; border-radius:20px; color:#ffd400; padding:3px 8px; font-size:10px; }
.mechape-modal .mp-preview img { display:block; width:100%; height:auto; border-block:1px solid #ffd4002e; }
.mechape-modal .mp-preview>p { padding:14px 18px; margin:0; font-size:11px; color:#b3ad98; line-height:1.7; }
.mechape-modal .mp-edition { grid-row:2; min-width:0; border:1px solid #ffd40050; border-radius:16px; padding:20px 24px; display:grid; gap:10px; text-decoration:none; color:#f6f1de; background:#17140e; }
.mechape-modal .mp-edition-top { display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:11px; }
.mechape-modal .mp-price { border:1px solid currentColor; border-radius:20px; padding:2px 8px; font-weight:600; white-space:nowrap; }
.mechape-modal .mp-edition>strong { display:flex; justify-content:space-between; gap:12px; font-size:17px; font-weight:600; line-height:1.5; }
.mechape-modal .mp-edition>span:last-child { font-size:11px; line-height:1.7; }
.mechape-modal .mp-free { background:#ffd400; border-color:#ffd400; color:#0a0908; }
.mechape-modal .mp-free:hover { background:#ffe875; }
.mechape-modal .mp-desktop:hover { background:#241f12; border-color:#ffd400; }
.mechape-modal .mp-features { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.mechape-modal .mp-features>.mp-panel { padding:18px; }
.mechape-modal .mp-features strong { font-size:12px; font-weight:600; }
.mechape-modal .mp-features p { font-size:11px; color:#b3ad98; line-height:1.7; margin:6px 0 0; }
.mechape-modal .mp-tour { grid-column:1/-1; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mechape-modal .mp-tour p { font-size:12px; color:#b3ad98; line-height:1.7; margin:0; }
.mechape-modal .mp-tour a { border:1px solid #ffd40060; border-radius:12px; color:#ffd400; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:24px; white-space:nowrap; font-size:13px; font-weight:600; text-decoration:none; }
.mechape-modal .mp-tour a:hover { background:#241f12; border-color:#ffd400; }
@media(max-width:700px) { .mechape-modal { padding:12px; } .mechape-modal .mechape-bento-frame { width:100%; padding:0 12px 12px; border-radius:18px; max-height:94dvh; } .mechape-modal .mp-grid { grid-template-columns:minmax(0,1fr); } .mechape-modal .mp-brand,.mechape-modal .mp-preview,.mechape-modal .mp-edition { grid-column:auto; grid-row:auto; } .mechape-modal .mp-brand { padding:22px; } .mechape-modal .mp-brand .mechape-name { font-size:52px; } .mechape-modal .mp-features { grid-template-columns:minmax(0,1fr); } .mechape-modal .mp-tour { align-items:stretch; flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { .mechape-modal.active { animation:none; } }
/* Haunted Tech frame treatment shared by the product page and homepage dialog. */
.mechape-modal::before { display:block; animation:none; }
.mechape-modal .mechape-bento-frame { display:flex; flex-direction:column; padding:0; overflow:hidden; border-radius:0; border:1px solid var(--gold,#ffd400); background:var(--obsidian,#100e0b); box-shadow:0 0 0 4px var(--void,#0a0908),0 0 0 5px var(--gold,#ffd400),0 40px 80px rgba(229,9,20,.3); scrollbar-gutter:auto; }
.mechape-modal .mechape-bento-frame::before,.mechape-modal .mechape-bento-frame::after { display:block; content:''; position:absolute; width:50px; height:50px; border:2px solid var(--gold,#ffd400); box-shadow:0 0 16px rgba(255,212,0,.4); z-index:15; pointer-events:none; }
.mechape-modal .mechape-bento-frame::before { top:8px; left:8px; border-right:0; border-bottom:0; }
.mechape-modal .mechape-bento-frame::after { bottom:8px; right:8px; border-left:0; border-top:0; }
.mechape-modal .mp-toolbar { position:relative; flex:none; min-height:48px; padding-left:72px; background:var(--obsidian,#100e0b); border-bottom:1px solid #ffd4002e; }
.mechape-modal .mp-toolbar>span { font-family:'MechApe Forum',serif; color:var(--gold,#ffd400); letter-spacing:.12em; }
.mechape-modal .mp-toolbar .mechape-close { width:48px; height:48px; border-radius:0; border-color:var(--gold,#ffd400); background:var(--void,#0a0908); }
.mechape-modal .mp-grid { min-height:0; overflow-y:auto; padding:18px 22px 24px; scrollbar-color:#ffd400 #100e0b; scrollbar-width:thin; }
.mechape-modal .mp-grid::-webkit-scrollbar { width:6px; }
.mechape-modal .mp-grid::-webkit-scrollbar-track { background:#100e0b; }
.mechape-modal .mp-grid::-webkit-scrollbar-thumb { background:#ffd400; }
.mechape-modal .mp-panel,.mechape-modal .mp-edition,.mechape-modal .mp-tour a,.mechape-modal .mp-price,.mechape-modal .mp-preview-heading>span { border-radius:0; }
.mechape-modal .mp-panel { background:var(--obsidian,#100e0b); }
.mechape-modal .mp-brand .mechape-name { text-shadow:2px 0 #e50914,-2px 0 #33ffe6; }
.mechape-modal .mp-tour a,.mechape-modal .mp-edition { border-color:#ffd400; }
.mechape-modal .mp-toolbar .mechape-close:hover,.mechape-modal .mp-tour a:hover,.mechape-modal .mp-desktop:hover { background:#e50914; border-color:#e50914; color:#f6f1de; }
/* Additional scope keeps unrelated theme components on their existing styles. */
.cl-mechape.cl-mechape .mk-brand-panel,.cl-mechape.cl-mechape .mk-preview-panel,.cl-mechape.cl-mechape .mk-edition,.cl-mechape.cl-mechape .mk-feature-tile,.cl-mechape.cl-mechape .mk-price,.cl-mechape.cl-mechape .mk-preview-status,.cl-mechape.cl-mechape .cl-mk-btn,.cl-mechape.cl-mechape .cl-mk-card,.cl-mechape.cl-mechape .cl-mk-faq-item,.cl-mechape.cl-mechape .cl-mk-shot img { border-radius:0; }
.cl-mechape.cl-mechape .cl-mk-bento { margin:24px 0 40px; padding:24px; position:relative; border:1px solid #ffd400; box-shadow:0 0 0 4px #0a0908,0 0 0 5px #ffd400,0 30px 70px #e5091420; }
.cl-mechape.cl-mechape .cl-mk-bento::before,.cl-mechape.cl-mechape .cl-mk-bento::after { content:''; position:absolute; width:42px; height:42px; border:2px solid #ffd400; box-shadow:0 0 16px #ffd40066; pointer-events:none; z-index:3; }
.cl-mechape.cl-mechape .cl-mk-bento::before { top:8px; left:8px; border-right:0; border-bottom:0; }
.cl-mechape.cl-mechape .cl-mk-bento::after { bottom:8px; right:8px; border-left:0; border-top:0; }
.cl-mechape.cl-mechape .mk-edition,.cl-mechape.cl-mechape .cl-mk-btn { border-color:#ffd400; }
.cl-mechape.cl-mechape .mk-edition-desktop:hover,.cl-mechape.cl-mechape .cl-mk-btn:not(:disabled):hover { background:#e50914; border-color:#e50914; color:#f6f1de; }
.cl-mechape.cl-mechape .cl-mk-faq-item>summary:focus-visible { border-radius:0; }
@media(max-width:700px) { .mechape-modal .mp-grid { padding:16px 14px 24px; } .cl-mechape.cl-mechape .cl-mk-bento { padding:16px; } }
.mechape-modal .mechape-bento-frame { align-items:stretch; }
