/*
 * DesignBat marketing site (generated by scripts/build-seo.mjs, behaviour in public/js/landing.js).
 * Dark stages for the big moments, paper sections for reading, real product media at large scale.
 * Solid colours, translucent scrims, shadows and blur only: no gradients (the family rule, and Buildan.app's marketing
 * does not use them either). Light and dark follow the system or the app's theme setting (data-theme on <html>).
 */
.mk {
  --mk-night: #0b0b10; --mk-night-2: #13131a; --mk-night-3: #1c1c25; --mk-on-night: #f5f5f7; --mk-on-night-2: #a9a9b8; --mk-night-line: rgb(255 255 255 / 0.11);
  --mk-paper: #ffffff; --mk-paper-2: #f4f4f7; --mk-paper-3: #ebebf0; --mk-on-paper: #0b0b10; --mk-on-paper-2: #565667; --mk-paper-line: rgb(11 11 16 / 0.11);
  --mk-brand: #4f46e5; --mk-brand-hover: #4338ca; --mk-brand-ink: #4338ca; --mk-accent: #a5b4fc; --mk-on-brand: #ffffff;
  --mk-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mk-wrap: 1320px; --mk-gut: 20px; --mk-ease: cubic-bezier(.2, .7, .2, 1);
  background: var(--mk-night); color: var(--mk-on-night); font-size: 16px; line-height: 1.5; overflow-x: clip;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk { --mk-paper: #101016; --mk-paper-2: #17171f; --mk-paper-3: #20202a; --mk-on-paper: #f4f4f7; --mk-on-paper-2: #a9a9b8; --mk-paper-line: rgb(255 255 255 / 0.11); --mk-brand-ink: #a5b4fc; }
}
:root[data-theme="dark"] .mk { --mk-paper: #101016; --mk-paper-2: #17171f; --mk-paper-3: #20202a; --mk-on-paper: #f4f4f7; --mk-on-paper-2: #a9a9b8; --mk-paper-line: rgb(255 255 255 / 0.11); --mk-brand-ink: #a5b4fc; }
@media (min-width: 768px) { .mk { --mk-gut: 32px; } }

body.mk { margin: 0; font-family: var(--font); }
.mk main { display: block; outline: none; }
/* Resets at class strength (beats app.css element rules); component rules below come later and win over them */
.mk :where(h1, h2, h3, h4) { color: inherit; margin: 0; letter-spacing: normal; line-height: inherit; }
.mk :where(p) { margin: 0; }
.mk :where(a) { color: inherit; }
.mk :where(a):hover { text-decoration: none; }
.mk :where(img, video) { display: block; max-width: 100%; }
.mk :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.mk-night { background: var(--mk-night); color: var(--mk-on-night); }
.mk-light { background: var(--mk-paper); color: var(--mk-on-paper); }
.mk-light-2 { background: var(--mk-paper-2); color: var(--mk-on-paper); }
.mk-wrap { max-width: var(--mk-wrap); margin: 0 auto; padding: 0 var(--mk-gut); }
.mk-sec { padding: 96px 0; }
@media (min-width: 768px) { .mk-sec { padding: 144px 0; } }
.mk-sec.tight { padding-top: 0; }

/* Type */
.mk-h, .mk-display { font-family: var(--mk-display); font-weight: 650; letter-spacing: -0.045em; line-height: 0.96; text-wrap: balance; }
.mk-h-md { font-family: var(--mk-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.mk-h-hero { font-size: clamp(3.1rem, 12.6vw, 9.2rem); }
.mk-h-xl { font-size: clamp(2.7rem, 7.4vw, 6.6rem); }
.mk-h-lg { font-size: clamp(2.4rem, 5.8vw, 5.2rem); }
.mk-h-page { font-size: clamp(2.8rem, 8vw, 6.4rem); }
.mk-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--mk-on-paper-2); }
.mk-night .mk-eyebrow { color: var(--mk-on-night-2); }
.mk-eyebrow .i { color: var(--mk-brand-ink); }
.mk-night .mk-eyebrow .i { color: var(--mk-accent); }
.mk-sub { color: var(--mk-on-paper-2); }
.mk-night .mk-sub { color: var(--mk-on-night-2); }
.mk-lead { font-size: 18px; line-height: 1.55; max-width: 640px; }
@media (min-width: 768px) { .mk-lead { font-size: 20px; } }
.mk-center { text-align: center; }
.mk-center .mk-lead { margin-left: auto; margin-right: auto; }
.mk-head { display: grid; gap: 22px; }
.mk-head.split { align-items: end; }
@media (min-width: 1024px) { .mk-head.split { grid-template-columns: 1.25fr 1fr; gap: 80px; } .mk-head.split > :last-child { padding-bottom: 10px; } }
.mk-head .mk-actions { margin-top: 6px; }
.mk-accent { color: var(--mk-brand-ink); }
.mk-night .mk-accent { color: var(--mk-accent); }

/* Buttons and links */
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 600; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .2s ease, background-color .2s ease, color .2s ease; font-family: inherit; }
.mk-btn:hover { transform: translateY(-1px); text-decoration: none; }
.mk-btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.mk-btn-brand { background: var(--mk-brand); color: var(--mk-on-brand); }
.mk-btn-brand:hover { background: var(--mk-brand-hover); color: var(--mk-on-brand); }
.mk-btn-light { background: #ffffff; color: #0b0b10; }
.mk-btn-dark { background: var(--mk-on-paper); color: var(--mk-paper); }
.mk-btn-ghost { background: rgb(255 255 255 / 0.08); color: var(--mk-on-night); box-shadow: inset 0 0 0 1px var(--mk-night-line); }
.mk-btn-ghost:hover { background: rgb(255 255 255 / 0.14); color: var(--mk-on-night); }
.mk-btn-soft { background: var(--mk-paper); color: var(--mk-on-paper); box-shadow: inset 0 0 0 1px var(--mk-paper-line); }
.mk-light-2 .mk-btn-soft { background: var(--mk-paper); }
.mk-light .mk-btn-soft { background: var(--mk-paper-2); box-shadow: none; }
.mk-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; border-bottom: 1px solid currentColor; padding-bottom: 2px; text-decoration: none; }
.mk-link .i, .mk-btn .i { transition: transform .2s ease; }
.mk-link:hover .i, .mk-btn:hover .i.arrow { transform: translateX(2px); }
.mk-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mk-center .mk-actions { justify-content: center; }
.mk-note { font-size: 13px; color: var(--mk-on-paper-2); }
.mk-night .mk-note { color: var(--mk-on-night-2); }

/* Focus: visible everywhere, brand coloured on paper and light indigo on night */
.mk a:focus-visible, .mk button:focus-visible, .mk summary:focus-visible, .mk [tabindex]:focus-visible, .mk input:focus-visible { outline: 2px solid var(--mk-brand-ink); outline-offset: 3px; border-radius: 8px; }
.mk-night a:focus-visible, .mk-night button:focus-visible, .mk-night summary:focus-visible, .mk-night [tabindex]:focus-visible, .mk-header a:focus-visible, .mk-header button:focus-visible { outline-color: var(--mk-accent); }
.mk .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: #0b0b10; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.mk .skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
.mk-header { position: fixed; inset: 0 0 auto 0; z-index: 60; color: var(--mk-on-night); padding-top: env(safe-area-inset-top, 0px); transition: background-color .3s ease, box-shadow .3s ease; }
.mk-header.solid, .mk-header.open { background: rgb(11 11 16 / 0.84); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); }
.mk-header-in { max-width: 1400px; margin: 0 auto; height: 64px; padding: 0 var(--mk-gut); display: flex; align-items: center; gap: 28px; }
.mk-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: #fff; text-decoration: none; flex: none; }
.mk-brand svg { width: 30px; height: 30px; display: block; }
.mk-brand b { font-weight: 900; color: var(--mk-accent); letter-spacing: -0.03em; }
.mk-nav { display: none; align-items: center; gap: 2px; }
.mk-nav a { padding: 8px 12px; border-radius: 999px; font-size: 15px; color: var(--mk-on-night-2); text-decoration: none; white-space: nowrap; transition: color .2s; }
.mk-nav a:hover, .mk-nav a[aria-current="page"] { color: #fff; }
.mk-header-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mk-signin { display: none; padding: 8px 14px; font-size: 15px; color: var(--mk-on-night-2); text-decoration: none; white-space: nowrap; }
.mk-signin:hover { color: #fff; }
.mk-menu-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 0; background: transparent; color: #fff; cursor: pointer; }
.mk-menu-btn:hover { background: rgb(255 255 255 / 0.1); }
.mk-menu { border-top: 1px solid rgb(255 255 255 / 0.1); padding: 10px var(--mk-gut) 24px; display: grid; gap: 2px; max-height: calc(100dvh - 64px); overflow: auto; }
.mk-menu[hidden] { display: none; }
.mk-menu a { display: flex; align-items: center; justify-content: space-between; padding: 13px 12px; border-radius: 12px; font-family: var(--mk-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #fff; text-decoration: none; }
.mk-menu a:hover { background: rgb(255 255 255 / 0.08); }
.mk-menu a .i { color: var(--mk-on-night-2); }
@media (min-width: 640px) { .mk-signin { display: inline-flex; } }
@media (min-width: 1080px) { .mk-nav { display: flex; } .mk-menu-btn, .mk-menu { display: none !important; } }

/* ---------- Page heads ---------- */
.mk-hero { position: relative; padding: 120px 0 56px; text-align: center; }
@media (min-width: 768px) { .mk-hero { padding: 168px 0 88px; } }
.mk-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500; color: #d6d6e0; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); text-decoration: none; }
.mk-pill .i { color: var(--mk-accent); }
.mk-pill:hover { background: rgb(255 255 255 / 0.11); color: #fff; }
.mk-hero h1 { margin: 28px auto 0; color: #fff; }
.mk-hero .mk-lead { margin: 28px auto 0; color: #babac6; }
.mk-hero .mk-actions { justify-content: center; margin-top: 36px; }
.mk-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 22px; font-size: 14px; color: #9d9dab; }
.mk-trust li { display: inline-flex; align-items: center; gap: 7px; }
.mk-trust .i { color: var(--mk-accent); }
.mk-pagehead { padding: 128px 0 72px; text-align: center; }
@media (min-width: 768px) { .mk-pagehead { padding: 176px 0 104px; } }
.mk-pagehead h1 { margin: 22px auto 0; max-width: 1080px; color: #fff; }
.mk-pagehead .mk-lead { margin: 26px auto 0; color: #babac6; }
.mk-pagehead .mk-actions { justify-content: center; margin-top: 34px; }
.mk-crumbs { font-size: 13px; color: var(--mk-on-night-2); display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.mk-crumbs a { color: var(--mk-on-night-2); text-decoration: none; }
.mk-crumbs a:hover { color: #fff; }
.mk-crumbs span[aria-hidden] { opacity: .5; }

/* ---------- Frames around real screens ---------- */
.mk-shot { position: relative; overflow: hidden; background: #fff; border-radius: 14px; box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 40px 90px -24px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.09); }
.mk-light .mk-shot, .mk-light-2 .mk-shot { box-shadow: 0 34px 80px -30px rgb(11 11 16 / 0.38), 0 0 0 1px var(--mk-paper-line); }
.mk-shot-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #1c1c22; }
.mk-shot-bar.light { background: #ececf0; }
.mk-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / 0.2); }
.mk-shot-bar.light i { background: rgb(0 0 0 / 0.14); }
.mk-shot-bar span { margin: 0 auto; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: #b4b4c0; background: rgb(255 255 255 / 0.07); border-radius: 6px; padding: 2px 12px; transform: translateX(-20px); }
.mk-shot-bar.light span { color: #55555f; background: rgb(0 0 0 / 0.05); }
.mk-shot img, .mk-shot video { width: 100%; height: auto; }
.mk-shot .ratio { position: relative; aspect-ratio: 1440 / 900; background: #f2f2ee; }
.mk-shot .ratio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mk-phone { position: relative; aspect-ratio: 390 / 844; border-radius: 15% / 7%; background: #0d0d10; box-shadow: 0 30px 70px -20px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.1); }
.mk-phone > .scr { position: absolute; inset: 1.8% 3.6%; overflow: hidden; border-radius: 12% / 5.6%; background: #fff; }
.mk-phone > .scr img, .mk-phone > .scr video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero stage: the live demo ---------- */
.hs { position: relative; margin: 64px auto 0; max-width: 1240px; text-align: left; }
@media (min-width: 768px) { .hs { margin-top: 88px; } }
.hs-win { border-radius: 18px; overflow: hidden; background: #15151c; box-shadow: 0 60px 140px -40px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.1); }
.hs-top { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-bottom: 1px solid rgb(255 255 255 / 0.08); color: #d4d4de; font-size: 13px; }
.hs-top .dots { display: flex; gap: 6px; }
.hs-top .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 0.18); }
.hs-top .doc { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; min-width: 0; }
.hs-top .doc svg { width: 20px; height: 20px; flex: none; }
.hs-top .doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-top .size { color: #8f8f9d; display: none; }
.hs-top .export { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--mk-brand); color: #fff; font-weight: 600; font-size: 12.5px; }
@media (min-width: 640px) { .hs-top .size { display: inline; } }
.hs-body { display: grid; grid-template-columns: 1fr; min-height: 0; }
@media (min-width: 900px) { .hs-body { grid-template-columns: 52px minmax(0, 1fr) 320px; height: 600px; } }
.hs-rail { display: none; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; border-right: 1px solid rgb(255 255 255 / 0.07); }
.hs-rail span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #8f8f9d; }
.hs-rail span.on { background: rgb(129 140 248 / 0.18); color: #c7d2fe; }
@media (min-width: 900px) { .hs-rail { display: flex; } }
.hs-canvas { position: relative; background: #0f0f14; display: grid; place-items: center; padding: 22px; min-height: 340px; overflow: hidden; }
@media (min-width: 900px) { .hs-canvas { padding: 28px; min-height: 0; } }
.hs-scene { position: absolute; inset: 22px; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
@media (min-width: 900px) { .hs-scene { inset: 28px; } }
.hs-scene.on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.hs-scene.motion { inset: 22px 22px 112px; }
@media (min-width: 900px) { .hs-scene.motion { inset: 24px 28px 132px; } }
.hs-art { position: relative; height: 100%; max-height: 100%; aspect-ratio: var(--ar, 4 / 5); max-width: 100%; border-radius: 4px; overflow: hidden; box-shadow: 0 24px 60px -18px rgb(0 0 0 / 0.7); background: #000; }
.hs-art video, .hs-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-sel { position: absolute; border: 1.5px solid #818cf8; pointer-events: none; opacity: 0; transition: opacity .3s, inset .5s var(--mk-ease); }
.hs-sel.on { opacity: 1; }
.hs-sel i { position: absolute; width: 8px; height: 8px; background: #fff; border: 1.5px solid #818cf8; border-radius: 2px; }
.hs-sel i:nth-child(1) { left: -5px; top: -5px; } .hs-sel i:nth-child(2) { right: -5px; top: -5px; } .hs-sel i:nth-child(3) { left: -5px; bottom: -5px; } .hs-sel i:nth-child(4) { right: -5px; bottom: -5px; }
.hs-photo { position: relative; width: 100%; max-height: 100%; aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; box-shadow: 0 24px 60px -18px rgb(0 0 0 / 0.7); }
.hs-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-photo img.next { clip-path: inset(0 100% 0 0); }
.hs-photo img.next.go { clip-path: inset(0 0 0 0); transition: clip-path 1.2s cubic-bezier(.65, 0, .35, 1); }
.hs-photo .scan { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgb(79 70 229 / 0.6), 0 0 18px rgb(255 255 255 / 0.8); left: 0; opacity: 0; }
.hs-photo .scan.go { opacity: 1; left: 100%; transition: left 1.2s cubic-bezier(.65, 0, .35, 1), opacity .2s; }
.hs-tag { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgb(11 11 16 / 0.72); color: #fff; font-size: 12px; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hs-tl { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; border-top: 1px solid rgb(255 255 255 / 0.08); background: #131319; font-size: 11px; color: #a9a9b8; }
@media (min-width: 900px) { .hs-tl { height: 116px; } }
.hs-tl-bar { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; border-bottom: 1px solid rgb(255 255 255 / 0.06); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #d4d4de; }
.hs-tl-bar .play { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: rgb(255 255 255 / 0.08); }
.hs-tl-bar .chip { margin-left: auto; font-family: var(--font); padding: 2px 8px; border-radius: 6px; background: rgb(129 140 248 / 0.16); color: #c7d2fe; font-weight: 600; }
.hs-tracks { position: relative; display: grid; gap: 5px; padding: 8px 12px 0 88px; }
.hs-track { position: relative; height: 14px; }
.hs-track b { position: absolute; left: -76px; top: 0; width: 70px; font-weight: 500; color: #a9a9b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 14px; }
.hs-track span { position: absolute; top: 2px; height: 10px; border-radius: 4px; background: rgb(129 140 248 / 0.35); box-shadow: inset 0 0 0 1px rgb(129 140 248 / 0.6); }
.hs-track span::before, .hs-track span::after { content: ""; position: absolute; top: 1px; width: 7px; height: 7px; background: #c7d2fe; transform: rotate(45deg); }
.hs-track span::before { left: -3px; } .hs-track span::after { right: -3px; }
.hs-head { position: absolute; top: 0; bottom: 0; width: 2px; background: #f43f5e; left: 88px; }
.hs-head::before { content: ""; position: absolute; top: -3px; left: -4px; width: 10px; height: 8px; border-radius: 2px; background: #f43f5e; }
.hs-side { border-top: 1px solid rgb(255 255 255 / 0.08); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 260px; background: #15151c; }
@media (min-width: 900px) { .hs-side { border-top: 0; border-left: 1px solid rgb(255 255 255 / 0.08); min-height: 0; } }
.hs-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgb(255 255 255 / 0.05); }
.hs-tabs button { flex: 1; height: 34px; border: 0; border-radius: 8px; background: transparent; color: #a9a9b8; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.hs-tabs button:hover { color: #fff; }
.hs-tabs button[aria-selected="true"] { background: rgb(255 255 255 / 0.1); color: #fff; }
.hs-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; }
.hs-title .i { color: var(--mk-accent); }
.hs-prompt { border-radius: 14px 14px 4px 14px; background: rgb(255 255 255 / 0.07); padding: 11px 13px; font-size: 13.5px; line-height: 1.5; color: #fff; min-height: 46px; }
.hs-prompt .ph { color: #7f7f8e; }
.hs-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: currentColor; animation: mk-blink 1s steps(2, start) infinite; }
.hs-steps { display: grid; gap: 9px; font-size: 13px; color: #d4d4de; }
.hs-steps li { display: flex; align-items: flex-start; gap: 9px; animation: hs-in .4s var(--mk-ease) both; }
.hs-steps li .ok { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px; background: var(--mk-accent); color: #0b0b10; }
.hs-steps li .ok .i { width: 11px; height: 11px; }
.hs-steps li .spin { flex: none; width: 16px; height: 16px; margin: 2px 1px 0; border-radius: 50%; border: 2px solid rgb(165 180 252 / 0.3); border-top-color: var(--mk-accent); animation: mk-spin .8s linear infinite; }
.hs-steps li small { display: block; color: #8f8f9d; font-size: 12px; }
.hs-done { margin-top: auto; border-radius: 14px; padding: 11px 14px; background: var(--mk-accent); color: #0b0b10; font-size: 13px; font-weight: 600; animation: hs-in .4s var(--mk-ease) both; }
.hs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 13px; color: #8f8f9d; }
.hs-pause { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 8px 14px; background: rgb(255 255 255 / 0.08); color: #c9c9d4; font: inherit; font-size: 13px; cursor: pointer; }
.hs-pause:hover { background: rgb(255 255 255 / 0.14); color: #fff; }
@keyframes hs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mk-blink { to { visibility: hidden; } }
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* ---------- Facts strip ---------- */
.mk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--mk-night-line); border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--mk-night-line); }
.mk-facts li { background: var(--mk-night); padding: 24px 20px; }
.mk-facts b { display: block; font-family: var(--mk-display); font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; color: #fff; }
.mk-facts span { display: block; margin-top: 10px; font-size: 14px; color: var(--mk-on-night-2); }
@media (max-width: 767px) { .mk-facts li:last-child:nth-child(odd) { grid-column: span 2; } }
@media (min-width: 768px) { .mk-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); } .mk-facts li { padding: 30px 26px; } }
.mk-formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.mk-formats li { padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #d6d6e0; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }

/* ---------- Tabs with a big screen (editor showcase) ---------- */
.mk-tabs-panels { position: relative; }
.mk-tabs-panels > [role="tabpanel"][hidden] { display: none; }
.mk-tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 26px; }
@media (min-width: 768px) { .mk-tablist { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 32px; margin-top: 40px; } }
.mk-tablist button { text-align: left; border: 0; border-top: 2px solid var(--mk-paper-line); background: none; padding: 16px 0 6px; cursor: pointer; font: inherit; color: var(--mk-on-paper-2); transition: border-color .2s, color .2s; }
.mk-tablist button b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.mk-tablist button span { display: none; margin-top: 6px; font-size: 15px; line-height: 1.5; }
@media (min-width: 768px) { .mk-tablist button span { display: block; } .mk-tablist button b { font-size: 19px; } }
.mk-tablist button:hover { color: var(--mk-on-paper); border-color: var(--mk-on-paper-2); }
.mk-tablist button[aria-selected="true"] { color: var(--mk-on-paper); border-color: var(--mk-on-paper); }
.mk-night .mk-tablist button { border-color: rgb(255 255 255 / 0.15); color: #b9b9c6; }
.mk-night .mk-tablist button span { color: var(--mk-on-night-2); }
.mk-night .mk-tablist button[aria-selected="true"] { border-color: #fff; color: #fff; }
.mk-tab-note { margin-top: 12px; font-size: 15px; color: var(--mk-on-paper-2); }
@media (min-width: 768px) { .mk-tab-note { display: none; } }
.mk-night .mk-tab-note { color: var(--mk-on-night-2); }

/* ---------- Before and after (AI photo) ---------- */
.ba { display: grid; gap: 28px; }
@media (min-width: 1024px) { .ba { grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: center; } }
.ba-list { display: grid; gap: 8px; }
.ba-list button { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; text-align: left; border: 0; border-radius: 16px; padding: 14px; background: transparent; color: var(--mk-on-night-2); font: inherit; cursor: pointer; transition: background-color .2s, color .2s; }
.ba-list button .ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgb(255 255 255 / 0.06); color: #c7d2fe; }
.ba-list button b { font-size: 17px; color: #e6e6ee; font-weight: 600; }
.ba-list button span { font-size: 14px; line-height: 1.45; }
.ba-list button:hover { background: rgb(255 255 255 / 0.04); }
.ba-list button[aria-selected="true"] { background: rgb(255 255 255 / 0.08); }
.ba-list button[aria-selected="true"] .ic { background: var(--mk-brand); color: #fff; }
.ba-list button[aria-selected="true"] b { color: #fff; }
@media (max-width: 1023px) { .ba-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ba-list button { grid-template-columns: 1fr; padding: 12px; } .ba-list button .ic { display: none; } .ba-list button span { display: none; } }
.ba-stage { position: relative; }
.ba-frame { position: relative; border-radius: 20px; overflow: hidden; background: #1c1c25; aspect-ratio: 3 / 2; box-shadow: 0 50px 110px -40px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.08); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba-frame.square { aspect-ratio: 3 / 2; }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-frame img.fit { object-fit: contain; background: #121218; }
.ba-after { clip-path: inset(0 0 0 var(--x, 50%)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 0; }
.ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 12px rgb(0 0 0 / 0.4); }
.ba-knob { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #0b0b10; display: grid; place-items: center; box-shadow: 0 6px 20px rgb(0 0 0 / 0.35); cursor: ew-resize; border: 0; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-lbl { position: absolute; top: 14px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgb(11 11 16 / 0.7); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
.ba-lbl.l { left: 14px; } .ba-lbl.r { right: 14px; }
.ba-prompt { margin-top: 16px; display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--mk-on-night-2); }
.ba-prompt .i { color: var(--mk-accent); margin-top: 3px; }
.ba-prompt b { color: #fff; font-weight: 600; }

/* ---------- Split rows (copy and a visual) ---------- */
.mk-split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .mk-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 72px; } .mk-split.flip > :first-child { order: 2; } }
.mk-split .mk-lead { margin-top: 22px; }
.mk-checks { display: grid; gap: 14px; margin-top: 30px; }
.mk-checks li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; font-weight: 500; }
.mk-checks .i { flex: none; margin-top: 3px; color: var(--mk-brand-ink); }
.mk-night .mk-checks .i { color: var(--mk-accent); }
.mk-points { display: grid; gap: 22px; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--mk-paper-line); }
.mk-night .mk-points { border-color: var(--mk-night-line); }
@media (min-width: 768px) { .mk-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.mk-points li { display: flex; gap: 12px; font-size: 17px; font-weight: 500; line-height: 1.4; }
.mk-points .i { flex: none; margin-top: 2px; color: var(--mk-brand-ink); }
.mk-night .mk-points .i { color: var(--mk-accent); }
.mk-stack { position: relative; padding-bottom: 56px; }
.mk-stack .mk-shot.over { position: absolute; right: -2%; bottom: 0; width: 42%; border-radius: 12px; }
@media (max-width: 640px) { .mk-stack { padding-bottom: 0; } .mk-stack .mk-shot.over { position: relative; width: 70%; margin: -40px 0 0 auto; right: 0; } }

/* ---------- Motion ---------- */
.mo-grid { display: grid; gap: 16px; margin-top: 56px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .mo-grid { margin-top: 80px; grid-template-columns: 1.15fr 0.65fr 0.82fr 0.82fr; gap: 20px; align-items: end; } }
.mo-card { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: #1c1c25; box-shadow: 0 30px 70px -28px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.08); }
.mo-card video, .mo-card img { width: 100%; height: auto; display: block; }
.mo-card figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgb(11 11 16 / 0.7); color: #fff; font-size: 12px; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mo-ctrl { display: flex; justify-content: flex-end; margin-top: 18px; }
.mk-pause-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 8px 14px; background: rgb(255 255 255 / 0.08); color: #c9c9d4; font: inherit; font-size: 13px; cursor: pointer; }
.mk-pause-btn:hover { background: rgb(255 255 255 / 0.14); color: #fff; }
.mk-light .mk-pause-btn, .mk-light-2 .mk-pause-btn { background: var(--mk-paper-3); color: var(--mk-on-paper); }

/* ---------- Template wall (marquee rows of real previews) ---------- */
.tw { position: relative; overflow: hidden; display: grid; gap: 16px; padding: 8px 0; }
.tw-row { display: flex; gap: 16px; width: max-content; animation: mk-marquee var(--dur, 80s) linear infinite; }
.tw-row.rev { animation-direction: reverse; }
.tw:hover .tw-row, .tw:focus-within .tw-row, .tw.paused .tw-row { animation-play-state: paused; }
@keyframes mk-marquee { to { transform: translateX(-50%); } }
.tw-row a { flex: none; display: block; height: 220px; border-radius: 12px; overflow: hidden; background: var(--mk-paper-3); box-shadow: 0 18px 40px -22px rgb(11 11 16 / 0.45), 0 0 0 1px var(--mk-paper-line); transition: transform .35s var(--mk-ease); }
.tw-row a:hover { transform: translateY(-4px); }
.tw-row img { height: 100%; width: auto; max-width: none; }
@media (min-width: 768px) { .tw-row a { height: 280px; } }
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-center .mk-chips { justify-content: center; }
.mk-chips a { padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; background: var(--mk-paper-2); color: var(--mk-on-paper); transition: background-color .2s; }
.mk-light-2 .mk-chips a { background: var(--mk-paper); }
.mk-chips a:hover { background: var(--mk-paper-3); }
.mk-chips a[aria-current="page"] { background: var(--mk-on-paper); color: var(--mk-paper); }
.mk-night .mk-chips a { background: rgb(255 255 255 / 0.07); color: #e6e6ee; }
.mk-night .mk-chips a:hover { background: rgb(255 255 255 / 0.13); }
.mk-night .mk-chips a[aria-current="page"] { background: #fff; color: #0b0b10; }

/* ---------- Bento ---------- */
.bento { display: grid; gap: 14px; margin-top: 56px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 80px; } }
@media (min-width: 1100px) { .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .bento .w2 { grid-column: span 2; } .bento .w3 { grid-column: span 3; } .bento .w4 { grid-column: span 4; } }
.bc { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 250px; padding: 26px; border-radius: 22px; background: var(--mk-paper); color: var(--mk-on-paper); text-decoration: none; overflow: hidden; box-shadow: 0 0 0 1px var(--mk-paper-line); transition: transform .3s var(--mk-ease), box-shadow .3s; }
.mk-light .bc { background: var(--mk-paper-2); box-shadow: none; }
a.bc:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -26px rgb(11 11 16 / 0.35), 0 0 0 1px var(--mk-paper-line); }
.bc .ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mk-paper-2); color: var(--mk-brand-ink); margin-bottom: 14px; }
.mk-light .bc .ic { background: var(--mk-paper); }
.bc h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.bc p { color: var(--mk-on-paper-2); font-size: 15px; line-height: 1.55; max-width: 460px; }
.bc .go { position: absolute; right: 22px; top: 24px; color: var(--mk-on-paper-2); }
.bc .vis { margin-top: auto; padding-top: 22px; }
.bc.dark { background: var(--mk-night-2); color: #fff; box-shadow: none; }
.bc.dark p { color: var(--mk-on-night-2); }
.bc.dark .ic { background: rgb(255 255 255 / 0.08); color: var(--mk-accent); }
.bc.indigo { background: var(--mk-brand); color: #fff; box-shadow: none; }
.bc.indigo p { color: #e0e7ff; }
.bc.indigo .ic { background: rgb(255 255 255 / 0.16); color: #fff; }
.bc.indigo .go, .bc.dark .go { color: rgb(255 255 255 / 0.7); }
.sw { display: flex; gap: 8px; flex-wrap: wrap; }
.sw i { width: 38px; height: 38px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.fmt { display: flex; flex-wrap: wrap; gap: 6px; }
.fmt li { padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; background: rgb(255 255 255 / 0.08); color: #e6e6ee; }
.av { display: flex; align-items: center; }
.av i { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 700; color: #fff; box-shadow: 0 0 0 3px var(--mk-paper); }
.mk-light .av i { box-shadow: 0 0 0 3px var(--mk-paper-2); }
.av i:first-child { margin-left: 0; }
.fontspec { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; font-size: 30px; line-height: 1; color: var(--mk-on-paper); }
.bc-img { margin: 22px -26px -26px; border-top: 1px solid var(--mk-paper-line); }
.bc-img img { width: 100%; height: auto; }

/* ---------- OfficeBats ---------- */
.ob { display: grid; gap: 56px; }
@media (min-width: 1024px) { .ob { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } }
.ob-cards { display: grid; gap: 12px; margin-top: 34px; }
.ob-card { display: flex; gap: 16px; padding: 20px; border-radius: 18px; background: var(--mk-night-2); box-shadow: inset 0 0 0 1px var(--mk-night-line); }
.ob-card .ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgb(129 140 248 / 0.14); color: var(--mk-accent); }
.ob-card h3 { font-size: 17px; font-weight: 600; color: #fff; }
.ob-card p { margin-top: 4px; color: var(--mk-on-night-2); font-size: 15px; line-height: 1.5; }
.ob-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ob-apps a { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; background: var(--mk-night-2); box-shadow: inset 0 0 0 1px var(--mk-night-line); text-decoration: none; transition: background-color .2s, transform .2s; min-height: 112px; }
.ob-apps a:hover { background: var(--mk-night-3); transform: translateY(-2px); }
.ob-apps a.here { box-shadow: inset 0 0 0 1.5px var(--mk-accent); }
.ob-apps b { display: flex; align-items: center; gap: 9px; font-size: 16px; color: #fff; }
.ob-apps b i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.ob-apps span { color: var(--mk-on-night-2); font-size: 14px; line-height: 1.45; }

/* ---------- Pricing ---------- */
.pc-grid { display: grid; gap: 16px; margin-top: 56px; }
@media (min-width: 900px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 80px; } .pc-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pc { display: flex; flex-direction: column; padding: 34px; border-radius: 24px; background: var(--mk-paper); color: var(--mk-on-paper); box-shadow: 0 0 0 1px var(--mk-paper-line); }
@media (min-width: 768px) { .pc { padding: 42px; } }
.mk-light .pc { background: var(--mk-paper-2); box-shadow: none; }
.pc.dark { background: #0b0b10; color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); }
.pc .tier { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 18px; font-weight: 600; }
.pc .tag { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--mk-brand); color: #fff; }
.pc .amount { margin-top: 26px; font-family: var(--mk-display); font-weight: 650; letter-spacing: -0.045em; line-height: 1; font-size: clamp(3.4rem, 6vw, 4.8rem); }
.pc .amount small { margin-left: 8px; font-family: var(--font); font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--mk-on-paper-2); }
.pc.dark .amount small, .pc.dark .pc-sub { color: #b9b9c6; }
.pc .pc-sub { margin-top: 14px; color: var(--mk-on-paper-2); font-size: 16px; }
.pc ul { display: grid; gap: 12px; margin: 28px 0 0; padding-top: 26px; border-top: 1px solid var(--mk-paper-line); }
.pc.dark ul { border-color: rgb(255 255 255 / 0.14); }
.pc li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; }
.pc li .i { flex: none; margin-top: 2px; color: var(--mk-brand-ink); }
.pc.dark li .i { color: var(--mk-accent); }
.pc .mk-btn { margin-top: 34px; width: 100%; }
.pc-table { margin-top: 56px; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px var(--mk-paper-line); overflow-x: auto; }
.pc-table table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 15px; }
.pc-table th, .pc-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--mk-paper-line); }
.pc-table thead th { font-size: 14px; color: var(--mk-on-paper-2); font-weight: 600; background: var(--mk-paper-2); }
.pc-table tbody tr:last-child td { border-bottom: 0; }
.pc-table td:not(:first-child), .pc-table th:not(:first-child) { width: 24%; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; gap: 48px; }
@media (min-width: 1024px) { .faq-wrap { grid-template-columns: 1fr 1.5fr; gap: 96px; } }
.faq { border-top: 1px solid var(--mk-on-paper); }
.faq details { border-bottom: 1px solid var(--mk-paper-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
@media (min-width: 768px) { .faq summary { font-size: 21px; padding: 28px 0; } }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { flex: none; width: 22px; height: 22px; transition: transform .2s ease; }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq details p { color: var(--mk-on-paper-2); font-size: 17px; line-height: 1.65; max-width: 720px; padding: 0 0 28px; margin-top: -4px; }
.faq details p a { color: var(--mk-brand-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Final call to action ---------- */
.cta { padding: 112px 0 0; text-align: center; overflow: hidden; }
@media (min-width: 768px) { .cta { padding-top: 160px; } }
.cta h2 { color: #fff; max-width: 1100px; margin: 0 auto; }
.cta .mk-lead { margin: 26px auto 0; color: #babac6; }
.cta .mk-actions { justify-content: center; margin-top: 36px; }
.cta-fan { position: relative; height: clamp(190px, 34vw, 420px); max-width: 1100px; margin: 72px auto 0; overflow: hidden; }
.cta-fan > * { position: absolute; top: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.1); background: #1c1c25; }
.cta-fan img, .cta-fan video { width: 100%; height: auto; display: block; }
.cta-fan .c1 { left: 6%; width: 27%; transform: rotate(-7deg); top: 12%; }
.cta-fan .c2 { left: 50%; width: 34%; transform: translateX(-50%); z-index: 2; top: 2px; }
.cta-fan .c3 { right: 6%; width: 27%; transform: rotate(7deg); top: 12%; }
.bc.dark .bc-img { border-color: rgb(255 255 255 / 0.1); }

/* ---------- Footer ---------- */
.mk-foot { background: var(--mk-night); color: var(--mk-on-night); border-top: 1px solid var(--mk-night-line); }
.mk-foot-in { max-width: var(--mk-wrap); margin: 0 auto; padding: 72px var(--mk-gut) 40px; display: grid; gap: 48px; }
@media (min-width: 900px) { .mk-foot-in { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 40px; padding-top: 96px; } }
.mk-foot-brand { display: grid; gap: 18px; align-content: start; }
.mk-foot-brand .mk-h-md { font-size: 28px; color: #fff; max-width: 340px; }
.mk-foot-brand p { color: var(--mk-on-night-2); font-size: 14px; max-width: 320px; }
.mk-foot-brand p a { text-decoration: underline; text-underline-offset: 3px; }
.mk-foot-brand p a:hover { color: #fff; }
.mk-foot nav { display: grid; gap: 11px; align-content: start; }
.mk-foot nav h2 { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 4px; font-family: var(--font); letter-spacing: 0; }
.mk-foot nav a { color: var(--mk-on-night-2); font-size: 15px; text-decoration: none; transition: color .2s; }
.mk-foot nav a:hover { color: #fff; }
.mk-foot-base { max-width: var(--mk-wrap); margin: 0 auto; padding: 22px var(--mk-gut) calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--mk-night-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--mk-on-night-2); }
.mk-theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / 0.06); }
.mk-theme button { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 999px; border: 0; background: none; color: var(--mk-on-night-2); cursor: pointer; }
.mk-theme button[aria-pressed="true"] { background: rgb(255 255 255 / 0.14); color: #fff; }

/* ---------- Feature pages ---------- */
.ft-shot { max-width: 1240px; margin: 0 auto; }
.ft-sec { display: grid; gap: 28px; }
@media (min-width: 1024px) { .ft-sec { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } }
.ft-sec .mk-checks { margin-top: 0; }
@media (min-width: 1024px) { .ft-sec .mk-checks { padding-top: 12px; } }
.ft-media { margin-top: 48px; }
.steps { display: grid; gap: 16px; margin-top: 56px; counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin-top: 72px; } }
.steps li { padding: 30px; border-radius: 22px; background: var(--mk-paper); box-shadow: 0 0 0 1px var(--mk-paper-line); }
.mk-light .steps li { background: var(--mk-paper-2); box-shadow: none; }
.steps .n { display: block; font-family: var(--mk-display); font-size: 48px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; color: var(--mk-brand-ink); }
.steps h3 { margin-top: 22px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.steps p { margin-top: 8px; color: var(--mk-on-paper-2); font-size: 15px; line-height: 1.55; }
.fx-grid { display: grid; gap: 1px; margin-top: 56px; border-radius: 22px; overflow: hidden; background: var(--mk-paper-line); box-shadow: 0 0 0 1px var(--mk-paper-line); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 80px; } .fx-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fx-grid > * { display: block; padding: 28px; background: var(--mk-paper); color: var(--mk-on-paper); text-decoration: none; position: relative; transition: background-color .2s; }
.mk-light-2 .fx-grid > * { background: var(--mk-paper); }
.mk-light .fx-grid > * { background: var(--mk-paper); }
a.fx:hover { background: var(--mk-paper-2); }
.fx .ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mk-paper-2); color: var(--mk-brand-ink); }
a.fx:hover .ic { background: var(--mk-paper); }
.fx h3 { margin-top: 22px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.fx p { margin-top: 8px; color: var(--mk-on-paper-2); font-size: 15px; line-height: 1.55; }
.fx .go { position: absolute; right: 22px; top: 28px; color: var(--mk-on-paper-2); transition: transform .2s; }
a.fx:hover .go { transform: translate(2px, -2px); color: var(--mk-on-paper); }

/* ---------- Templates gallery (static grid, then public/js/templates.js) ---------- */
.mk .tpl-section { padding: 56px 0 120px; }
.mk .tpl-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mk .tpl-search-box { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; background: var(--mk-paper); border: 0; box-shadow: 0 0 0 1px var(--mk-paper-line); border-radius: 999px; padding: 0 20px; min-height: 54px; }
.mk .tpl-search-box:focus-within { outline: 2px solid var(--mk-brand-ink); outline-offset: 2px; }
.mk .tpl-search-box .i { color: var(--mk-on-paper-2); }
.mk .tpl-search-box input.tpl-search { color: var(--mk-on-paper); font-size: 16px; }
.mk .tpl-search-box input.tpl-search::placeholder { color: var(--mk-on-paper-2); }
.mk .tpl-count { color: var(--mk-on-paper-2); font-size: 14px; }
.mk .tpl-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 18px; scrollbar-width: none; }
.mk .tpl-chips::-webkit-scrollbar { display: none; }
.mk .tpl-chip { flex: none; border: 0; background: var(--mk-paper); color: var(--mk-on-paper); box-shadow: 0 0 0 1px var(--mk-paper-line); font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; }
.mk .tpl-chip:hover { background: var(--mk-paper-3); }
.mk .tpl-chip[aria-pressed="true"] { background: var(--mk-on-paper); color: var(--mk-paper); box-shadow: none; }
.mk .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 22px; align-items: start; }
.mk .tpl-card { color: var(--mk-on-paper); gap: 10px; }
.mk .tpl-thumb { background: var(--mk-paper); border: 0; border-radius: 14px; box-shadow: 0 0 0 1px var(--mk-paper-line); max-height: 320px; transition: transform .35s var(--mk-ease), box-shadow .35s; }
.mk .tpl-card:hover .tpl-thumb, .mk .tpl-card:focus-visible .tpl-thumb { transform: translateY(-4px); box-shadow: 0 26px 50px -26px rgb(11 11 16 / 0.45), 0 0 0 1px var(--mk-paper-line); }
.mk .tpl-name { font-size: 15px; font-weight: 600; }
.mk .tpl-cat { font-size: 13px; color: var(--mk-on-paper-2); }
.mk .tpl-empty { color: var(--mk-on-paper-2); }
.mk .tpl-cats { margin: 0 0 22px; }
#tpl-gallery > .mk-chips { margin-bottom: 22px; }
@media (max-width: 600px) { .mk .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .mk .tpl-thumb { max-height: 240px; } .mk .tpl-section { padding: 36px 0 88px; } }
.tpl-feature { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; margin: 56px auto 0; align-items: end; }
.tpl-feature a { border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -36px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.1); background: #1c1c25; transition: transform .35s var(--mk-ease); }
.tpl-feature a:hover { transform: translateY(-4px); }
.tpl-feature img { width: 100%; height: auto; }
@media (min-width: 768px) { .tpl-feature { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 767px) { .tpl-feature a:nth-child(n+4) { display: none; } }

/* ---------- Legal ---------- */
.legal-body { max-width: 760px; margin: 0 auto; padding: 72px var(--mk-gut) 120px; font-size: 17px; line-height: 1.7; color: var(--mk-on-paper); }
.legal-body h2 { font-family: var(--mk-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin: 48px 0 14px; }
.legal-body h3 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.legal-body p, .legal-body ul { margin: 0 0 16px; color: var(--mk-on-paper-2); }
.legal-body ul { list-style: disc; padding-left: 22px; }
.legal-body li { margin: 6px 0; }
.legal-body a { color: var(--mk-brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-body code { font-size: .9em; background: var(--mk-paper-2); padding: 1px 6px; border-radius: 6px; }
.legal-draft { padding: 16px 20px; border-radius: 16px; background: var(--mk-paper-2); color: var(--mk-on-paper) !important; font-size: 15px; }

/* ---------- Sticky phone call to action ---------- */
.mk-sticky { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: none; transform: translateY(140%); transition: transform .35s var(--mk-ease); }
.mk-sticky .mk-btn { width: 100%; box-shadow: 0 16px 40px -10px rgb(0 0 0 / 0.5); }
.mk-sticky.show { transform: none; }
@media (max-width: 640px) { .mk-sticky { display: block; } }

/* ---------- Scroll reveal: visible without JS; landing.js adds mk-js to turn it on ---------- */
.mk-js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--mk-ease), transform .9s var(--mk-ease); transition-delay: var(--d, 0s); }
.mk-js [data-reveal].is-in { opacity: 1; transform: none; }
.hs-rise { animation: mk-rise 1.2s var(--mk-ease) .15s both; }
@keyframes mk-rise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .mk *, .mk *::before, .mk *::after { scroll-behavior: auto !important; }
  .mk-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .tw-row, .hs-rise, .hs-caret, .hs-steps li, .hs-done, .hs-steps li .spin { animation: none; }
  .mk-btn, .bc, .tw-row a, .mk .tpl-thumb, .hs-scene, .hs-photo img.next.go, .hs-photo .scan.go, .faq summary .i { transition: none; }
  .tw { overflow-x: auto; }
}
/* Phones: the template category links scroll sideways instead of filling the first screen */
@media (max-width: 640px) {
  .mk-chips[data-tpl-cats] { flex-wrap: nowrap; justify-content: flex-start !important; overflow-x: auto; margin-left: calc(-1 * var(--mk-gut)); margin-right: calc(-1 * var(--mk-gut)); padding: 2px var(--mk-gut) 6px; scrollbar-width: none; }
  .mk-chips[data-tpl-cats]::-webkit-scrollbar { display: none; }
  .mk-chips[data-tpl-cats] a { flex: none; }
}