/* Maker Fabrication — material themes: wood / metal / plastic
   Everything keys off html[data-mkf-material]. */

:root,
html[data-mkf-material="metal"] {
  --mkf-bg: #16181b;
  --mkf-bg2: #1d2024;
  --mkf-card: #23272c;
  --mkf-line: #343a41;
  --mkf-ink: #eef1f4;
  --mkf-mute: #a3acb6;
  --mkf-acc: #ff7a1a;
  --mkf-acc2: #ffa45c;
  --mkf-on-acc: #16181b;
  --mkf-hf: 'Archivo Black', Impact, sans-serif;
  --mkf-hw: 400;
  --mkf-ht: uppercase;
  --mkf-r: 6px;
  --mkf-rl: 10px;
  --mkf-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px rgba(0,0,0,.35);
  --mkf-tex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.002 .85' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --mkf-card-bg: linear-gradient(160deg, #2b3036 0%, #22262b 45%, #1e2226 100%);
  --mkf-hero-glow: rgba(255,122,26,.18);
}

html[data-mkf-material="wood"] {
  --mkf-bg: #1b130d;
  --mkf-bg2: #231910;
  --mkf-card: #2d2015;
  --mkf-line: #46331f;
  --mkf-ink: #f6ead9;
  --mkf-mute: #c9b49a;
  --mkf-acc: #e9a14b;
  --mkf-acc2: #f5c27e;
  --mkf-on-acc: #1b130d;
  --mkf-hf: 'Zilla Slab', Georgia, serif;
  --mkf-hw: 700;
  --mkf-ht: none;
  --mkf-r: 4px;
  --mkf-rl: 8px;
  --mkf-shadow: 0 1px 0 rgba(255,230,190,.08) inset, 0 16px 36px rgba(0,0,0,.45);
  --mkf-tex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1800' height='600'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.0022 .07' numOctaves='4' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .31  0 0 0 0 .15  0 0 0 .55 -.2'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --mkf-card-bg: linear-gradient(180deg, #3a2919 0%, #2d2015 100%);
  --mkf-hero-glow: rgba(233,161,75,.16);
}

html[data-mkf-material="plastic"] {
  --mkf-bg: #f1f2f7;
  --mkf-bg2: #e7e9f2;
  --mkf-card: #ffffff;
  --mkf-line: #d8dbe8;
  --mkf-ink: #15172b;
  --mkf-mute: #5b6079;
  --mkf-acc: #ff2f6d;
  --mkf-acc2: #00b5c9;
  --mkf-on-acc: #ffffff;
  --mkf-hf: 'Rubik', 'Arial Rounded MT Bold', sans-serif;
  --mkf-hw: 800;
  --mkf-ht: none;
  --mkf-r: 999px;
  --mkf-rl: 26px;
  --mkf-shadow: 0 2px 0 rgba(255,255,255,.9) inset, 0 -2px 0 rgba(21,23,43,.04) inset, 0 20px 40px rgba(40,46,90,.12);
  --mkf-tex: radial-gradient(40% 50% at 10% 0%, rgba(0,181,201,.16), transparent 70%), radial-gradient(35% 45% at 95% 20%, rgba(255,47,109,.13), transparent 70%), radial-gradient(40% 40% at 60% 100%, rgba(255,200,40,.14), transparent 70%);
  --mkf-card-bg: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78));
  --mkf-hero-glow: rgba(0,181,201,.18);
}

/* ---------- Themify takeover ---------- */
body.mkf-site #headerwrap,
body.mkf-site #footerwrap,
body.mkf-site .page-title,
body.mkf-site #sidebar,
body.mkf-site .post-nav,
body.mkf-site #comments { display: none !important; }
body.mkf-site,
body.mkf-site #pagewrap,
body.mkf-site #body,
body.mkf-site #layout,
body.mkf-site .page-content { background: transparent !important; }
body.mkf-site #layout, body.mkf-site #content { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; float: none !important; }
body.mkf-site #body { padding: 0 !important; }
html body.mkf-site {
  background-color: var(--mkf-bg) !important;
  background-image: var(--mkf-tex) !important;
  background-attachment: fixed !important;
  color: var(--mkf-ink);
  font-family: Inter, system-ui, sans-serif;
}
html.mkf-swapping body.mkf-site,
html.mkf-swapping .mkf-card,
html.mkf-swapping .mkf-top { transition: background-color .4s, color .4s, border-color .4s; }

.mkf { color: var(--mkf-ink); font-family: Inter, system-ui, sans-serif; font-size: 17px; line-height: 1.6;
  width: 100vw; position: relative; left: 50%; margin-left: -50vw; overflow: hidden; }
.mkf *, .mkf-top *, .mkf-foot * { box-sizing: border-box; }
.mkf a { color: inherit; text-decoration: none; }
.mkf p { margin: 0; }
.mkf h1, .mkf h2, .mkf h3, .mkf-done h3, .mkf-fhead h3 {
  font-family: var(--mkf-hf); font-weight: var(--mkf-hw); text-transform: var(--mkf-ht);
  line-height: 1.03; margin: 0; color: var(--mkf-ink); letter-spacing: -.01em; }
.mkf-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mkf-sec { padding: 96px 0; }
.mkf-sec + .mkf-sec { border-top: 1px solid var(--mkf-line); }
.mkf-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mkf-acc); margin-bottom: 14px; }
.mkf-h2 { font-size: clamp(34px, 5vw, 62px); }
.mkf-lede { color: var(--mkf-mute); max-width: 660px; margin-top: 16px; font-size: 18px; }
.mkf-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }


/* neutralize theme button/input styling inside our components */
.mkf button, .mkf-top button, .mkf-foot button { box-shadow: none; text-transform: none; letter-spacing: normal; min-height: 0; min-width: 0; line-height: 1.2; font-family: Inter, system-ui, sans-serif; text-shadow: none; }
.mkf button:hover, .mkf button:focus, .mkf-top button:hover, .mkf-top button:focus, .mkf-foot button:hover, .mkf-foot button:focus { box-shadow: none; }
.mkf .mkf-btn-p, .mkf .mkf-btn-p:hover { box-shadow: 0 10px 24px -10px var(--mkf-acc); }
.mkf .mkf-switch button[aria-checked="true"], .mkf-top .mkf-switch button[aria-checked="true"], .mkf-foot .mkf-switch button[aria-checked="true"] { box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.mkf .mkf-mat[aria-checked="true"] { box-shadow: 0 0 0 2px var(--mkf-acc), var(--mkf-shadow); }
.mkf .mkf-mat { box-shadow: var(--mkf-shadow); }
.mkf .mkf-form .mkf-field input, .mkf .mkf-form .mkf-field textarea, .mkf .mkf-form .mkf-field select { background-color: color-mix(in srgb, var(--mkf-bg) 70%, transparent); color: var(--mkf-ink); border: 1px solid var(--mkf-line); box-shadow: none; height: auto; }
html[data-mkf-material="plastic"] .mkf .mkf-form .mkf-field input, html[data-mkf-material="plastic"] .mkf .mkf-form .mkf-field textarea, html[data-mkf-material="plastic"] .mkf .mkf-form .mkf-field select { background-color: #f6f7fb; }
.mkf .mkf-form .mkf-field input:focus, .mkf .mkf-form .mkf-field textarea:focus, .mkf .mkf-form .mkf-field select:focus { border-color: var(--mkf-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mkf-acc) 25%, transparent); }
.mkf .mkf-form .mkf-field.is-bad input, .mkf .mkf-form .mkf-field.is-bad textarea { border-color: #ff4d4d; box-shadow: 0 0 0 3px rgba(255,77,77,.2); }
.mkf-404 { text-align: center; padding: 120px 0 140px; }
.mkf-404 .mkf-big { font-family: var(--mkf-hf); font-weight: var(--mkf-hw); font-size: clamp(110px, 22vw, 240px); line-height: .9; color: var(--mkf-acc); }
.mkf-404 .mkf-lede { margin: 18px auto 0; }
.mkf-404 .mkf-ctas { justify-content: center; }
.mkf-size input[type=range] { -webkit-appearance: auto; appearance: auto; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; height: 24px; }

/* buttons */
.mkf-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: var(--mkf-r); font-weight: 700; font-size: 15px; letter-spacing: .02em; border: 0; cursor: pointer; font-family: Inter, sans-serif; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; text-decoration: none; }
.mkf-btn:hover { transform: translateY(-2px); }
.mkf-btn-p { background: var(--mkf-acc); color: var(--mkf-on-acc) !important; box-shadow: 0 10px 24px -10px var(--mkf-acc); }
.mkf-btn-p:hover { background: var(--mkf-acc2); }
.mkf-btn-g { border: 1px solid var(--mkf-line); color: var(--mkf-ink) !important; background: transparent; }
.mkf-btn-g:hover { border-color: var(--mkf-ink); }
.mkf-btn-lg { padding: 18px 34px; font-size: 17px; }
.mkf-btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.mkf-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
html[data-mkf-material="plastic"] .mkf-btn-p { box-shadow: 0 2px 0 rgba(255,255,255,.45) inset, 0 12px 26px -8px rgba(255,47,109,.55); }

/* ---------- header ---------- */
.mkf-top { position: sticky; top: 0; z-index: 999; background: color-mix(in srgb, var(--mkf-bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--mkf-line); font-family: Inter, system-ui, sans-serif; }
body.admin-bar .mkf-top { top: 32px; }
.mkf-top-in { max-width: 1280px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 22px; }
.mkf-brand { display: flex; align-items: center; gap: 12px; color: var(--mkf-ink) !important; text-decoration: none !important; margin-right: auto; }
.mkf-brand .mkf-mark { width: 42px; height: 42px; color: var(--mkf-ink); flex: none; }
.mkf-brand span { display: flex; flex-direction: column; line-height: 1; }
.mkf-brand b { font-family: 'Archivo Black', Impact, sans-serif; font-weight: 400; font-size: 21px; letter-spacing: .02em; text-transform: uppercase; }
.mkf-brand em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .34em; color: var(--mkf-acc); margin-top: 5px; text-transform: uppercase; }
.mkf-nav { display: flex; align-items: center; gap: 4px; }
.mkf-nav a { color: var(--mkf-ink) !important; text-decoration: none !important; font-weight: 600; font-size: 15px; padding: 9px 14px; border-radius: var(--mkf-r); opacity: .82; transition: opacity .15s, background .15s; }
.mkf-nav a:hover, .mkf-nav a[aria-current] { opacity: 1; background: color-mix(in srgb, var(--mkf-ink) 7%, transparent); }
.mkf-nav a.mkf-nav-cta { background: var(--mkf-acc); color: var(--mkf-on-acc) !important; opacity: 1; margin-left: 6px; }
.mkf-nav a.mkf-nav-cta:hover { background: var(--mkf-acc2); }
.mkf-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--mkf-line); background: transparent; border-radius: 10px; padding: 12px 11px; cursor: pointer; flex-direction: column; justify-content: space-between; }
.mkf-burger i { display: block; height: 2px; background: var(--mkf-ink); border-radius: 2px; }

/* switcher */
.mkf-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--mkf-ink) 6%, transparent); border: 1px solid var(--mkf-line); }
.mkf-switch button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--mkf-mute); font: 600 13px/1 Inter, sans-serif; padding: 7px 11px 7px 7px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.mkf-switch button:hover { color: var(--mkf-ink); }
.mkf-switch button[aria-checked="true"] { background: var(--mkf-card); color: var(--mkf-ink); box-shadow: 0 2px 8px rgba(0,0,0,.18) !important; }
.mkf-sw { width: 20px; height: 20px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 1px 2px rgba(0,0,0,.3); }
.mkf-sw-wood { background: repeating-linear-gradient(100deg, #8a5a2f 0 3px, #a8733f 3px 5px, #7a4c25 5px 8px); }
.mkf-sw-metal { background: linear-gradient(135deg, #f2f4f6 0%, #9aa3ad 45%, #e3e7ea 60%, #7c858f 100%); }
.mkf-sw-plastic { background: radial-gradient(circle at 32% 30%, #fff 0 14%, transparent 15%), linear-gradient(135deg, #ff2f6d, #ff8a3d 50%, #00b5c9); }

/* big switcher (hero) */
.mkf-switch-big { padding: 6px; gap: 6px; }
.mkf-switch-big button { padding: 10px 18px 10px 10px; font-size: 15px; }
.mkf-switch-big .mkf-sw { width: 30px; height: 30px; }

/* ---------- hero ---------- */
.mkf-hero { position: relative; padding: 96px 0 84px; }
.mkf-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 60% at 78% 40%, var(--mkf-hero-glow), transparent 70%); }
html[data-mkf-material="metal"] .mkf-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 48px); }
.mkf-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.mkf-hero h1 { font-size: clamp(44px, 6.4vw, 90px); }
.mkf-hero h1 em { font-style: normal; color: var(--mkf-acc); }
.mkf-hero .mkf-lede { font-size: 20px; max-width: 580px; margin-top: 24px; color: color-mix(in srgb, var(--mkf-ink) 78%, var(--mkf-bg)); }
.mkf-pick { margin-top: 34px; }
.mkf-pick small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mkf-mute); margin-bottom: 10px; }
.mkf-badge-wrap { position: relative; justify-self: center; width: 100%; max-width: 440px; aspect-ratio: 1/1; }
.mkf-badge { width: 100%; height: 100%; color: var(--mkf-ink); filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); animation: mkf-spin 90s linear infinite; }
.mkf-badge .mkf-badge-core { animation: mkf-spin 90s linear infinite reverse; transform-origin: 120px 120px; }
@keyframes mkf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mkf-badge, .mkf-badge .mkf-badge-core { animation: none; } }
html[data-mkf-material="plastic"] .mkf-badge { filter: drop-shadow(0 18px 30px rgba(40,46,90,.18)); }

/* stats strip */
.mkf-strip { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--mkf-line); border-bottom: 1px solid var(--mkf-line); background: color-mix(in srgb, var(--mkf-bg2) 70%, transparent); }
.mkf-strip div { padding: 24px; border-right: 1px solid var(--mkf-line); }
.mkf-strip div:last-child { border-right: 0; }
.mkf-strip b { display: block; font-family: var(--mkf-hf); font-weight: var(--mkf-hw); font-size: 26px; line-height: 1.1; }
.mkf-strip span { color: var(--mkf-mute); font-size: 14px; }

/* ---------- cards ---------- */
.mkf-card { position: relative; background: var(--mkf-card-bg); border: 1px solid var(--mkf-line); border-radius: var(--mkf-rl); box-shadow: var(--mkf-shadow); overflow: hidden; }
html[data-mkf-material="wood"] .mkf-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--mkf-tex); background-size: 1800px 600px; opacity: .6; mix-blend-mode: overlay; }
html[data-mkf-material="metal"] .mkf-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--mkf-tex), linear-gradient(115deg, transparent 30%, rgba(255,255,255,.05) 45%, transparent 60%); }
html[data-mkf-material="metal"] .mkf-card::after { content: ""; position: absolute; inset: 10px; pointer-events: none;
  background:
    radial-gradient(circle at 3px 3px, #67707b 0 1.8px, transparent 2.4px) top left / 6px 6px no-repeat,
    radial-gradient(circle at 3px 3px, #67707b 0 1.8px, transparent 2.4px) top right / 6px 6px no-repeat,
    radial-gradient(circle at 3px 3px, #67707b 0 1.8px, transparent 2.4px) bottom left / 6px 6px no-repeat,
    radial-gradient(circle at 3px 3px, #67707b 0 1.8px, transparent 2.4px) bottom right / 6px 6px no-repeat; }
html[data-mkf-material="plastic"] .mkf-card { border-color: rgba(255,255,255,.9); }
.mkf-card > * { position: relative; z-index: 1; }

/* capability grid */
.mkf-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.mkf-cap { padding: 26px 24px 24px; transition: transform .2s, border-color .2s; display: flex; flex-direction: column; min-height: 200px; }
a.mkf-cap:hover, .mkf-cap:hover { transform: translateY(-4px); border-color: var(--mkf-acc); }
.mkf-cap .mkf-ic { width: 46px; height: 46px; border-radius: calc(var(--mkf-rl) - 2px); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--mkf-acc) 15%, transparent); color: var(--mkf-acc); margin-bottom: 18px; }
html[data-mkf-material="plastic"] .mkf-cap .mkf-ic { border-radius: 14px; }
.mkf-cap .mkf-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mkf-cap h3 { font-size: 21px; margin-bottom: 8px; }
.mkf-cap p { color: var(--mkf-mute); font-size: 15px; }
.mkf-cap .mkf-tagline { margin-top: auto; padding-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mkf-acc); }
.mkf-cap-wide { grid-column: span 2; }

/* materials trio */
.mkf-mats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.mkf-mat { padding: 0; display: flex; flex-direction: column; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: transform .2s, border-color .2s; }
.mkf-mat:hover { transform: translateY(-4px); }
.mkf-mat[aria-checked="true"] { border-color: var(--mkf-acc); box-shadow: 0 0 0 2px var(--mkf-acc), var(--mkf-shadow); }
.mkf-mat-swatch { height: 170px; position: relative; }
.mkf-mat-wood .mkf-mat-swatch { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.005 .12' numOctaves='4' seed='3'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .19  0 0 0 0 .08  0 0 0 1.4 -.35'/></filter><rect width='100%' height='100%' fill='%23b07a45'/><rect width='100%' height='100%' filter='url(%23g)'/></svg>") center/cover; }
.mkf-mat-metal .mkf-mat-swatch { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.003 .9' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), linear-gradient(120deg, #cfd5db 0%, #8d969f 38%, #e9edf0 52%, #7b848d 72%, #b9c0c7 100%); background-size: cover; }
.mkf-mat-plastic .mkf-mat-swatch { background: radial-gradient(60% 90% at 25% 15%, rgba(255,255,255,.75), transparent 45%), linear-gradient(135deg, #ff2f6d 0%, #ff8a3d 40%, #ffd23f 60%, #00b5c9 100%); }
.mkf-mat-body { padding: 24px 26px 28px; }
.mkf-mat-body h3 { font-size: 28px; margin-bottom: 8px; }
.mkf-mat-body p { color: var(--mkf-mute); font-size: 15px; }
.mkf-mat-body ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.mkf-mat-body li { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--mkf-ink) 7%, transparent); color: var(--mkf-ink); }
.mkf-mat-cta { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--mkf-acc); letter-spacing: .04em; }

/* big-machine feature */
.mkf-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 0; }
.mkf-feature-vis { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; padding: 40px; border-right: 1px solid var(--mkf-line); }
.mkf-feature-vis svg { width: 100%; max-width: 460px; color: var(--mkf-ink); }
.mkf-feature-txt { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.mkf-feature-txt h2 { font-size: clamp(32px, 4vw, 52px); }
.mkf-specs { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.mkf-specs li { padding: 14px 0; border-top: 1px solid var(--mkf-line); color: var(--mkf-mute); font-size: 15px; }
.mkf-specs b { display: block; color: var(--mkf-ink); font-size: 17px; }

/* steps */
.mkf-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.mkf-step { padding: 28px; }
.mkf-step i { display: block; font-style: normal; font-family: var(--mkf-hf); font-weight: var(--mkf-hw); font-size: 42px; line-height: 1; color: var(--mkf-acc); margin-bottom: 14px; }
.mkf-step b { display: block; font-size: 19px; margin-bottom: 6px; }
.mkf-step p { color: var(--mkf-mute); font-size: 15px; }

/* sister / cta */
.mkf-sister { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 34px 38px; flex-wrap: wrap; }
.mkf-sister h3 { font-size: 26px; }
.mkf-sister p { color: var(--mkf-mute); margin-top: 6px; }
.mkf-cta { text-align: center; padding: 110px 0; }
.mkf-cta .mkf-lede { margin: 16px auto 0; }
.mkf-cta .mkf-ctas { justify-content: center; }

/* reveal */
.mkf-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.mkf-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mkf-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- form ---------- */
.mkf-form-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; margin-top: 44px; }
.mkf-form { display: flex; flex-direction: column; gap: 18px; font-family: Inter, system-ui, sans-serif; }
.mkf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.mkf-fstep { padding: 30px; background: var(--mkf-card-bg); border: 1px solid var(--mkf-line); border-radius: var(--mkf-rl); box-shadow: var(--mkf-shadow); }
.mkf-fhead { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.mkf-fhead i { font-style: normal; font-family: var(--mkf-hf); font-weight: var(--mkf-hw); font-size: 28px; line-height: 1; color: var(--mkf-acc); min-width: 44px; }
.mkf-fhead h3 { font-size: 24px; }
.mkf-fhead p { color: var(--mkf-mute); font-size: 15px; margin-top: 4px; }
.mkf-sub { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mkf-mute); margin: 22px 0 10px; }
.mkf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mkf-chip { position: relative; cursor: pointer; margin: 0; }
.mkf-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mkf-chip span { display: inline-block; padding: 9px 15px; border-radius: var(--mkf-r); border: 1px solid var(--mkf-line); font-size: 14px; font-weight: 600; color: var(--mkf-ink); background: color-mix(in srgb, var(--mkf-ink) 3%, transparent); transition: background .15s, border-color .15s, color .15s; user-select: none; }
.mkf-chip:hover span { border-color: var(--mkf-mute); }
.mkf-chip input:checked + span { background: var(--mkf-acc); border-color: var(--mkf-acc); color: var(--mkf-on-acc); }
.mkf-chip input:focus-visible + span { outline: 2px solid var(--mkf-acc); outline-offset: 2px; }
.mkf-field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; }
.mkf-field > span { font-size: 13px; font-weight: 700; color: var(--mkf-ink); letter-spacing: .02em; }
.mkf-field input, .mkf-field textarea, .mkf-field select {
  width: 100%; font: 400 16px/1.45 Inter, system-ui, sans-serif; color: var(--mkf-ink); background: color-mix(in srgb, var(--mkf-bg) 70%, transparent);
  border: 1px solid var(--mkf-line); border-radius: calc(var(--mkf-rl) - 4px); padding: 13px 14px; margin: 0; box-shadow: none; outline: none; transition: border-color .15s, box-shadow .15s; }
html[data-mkf-material="plastic"] .mkf-field input, html[data-mkf-material="plastic"] .mkf-field textarea, html[data-mkf-material="plastic"] .mkf-field select { background: #f6f7fb; border-radius: 14px; }
.mkf-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mkf-mute) 50%), linear-gradient(135deg, var(--mkf-mute) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.mkf-field option { color: #111; }
.mkf-field input:focus, .mkf-field textarea:focus, .mkf-field select:focus { border-color: var(--mkf-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mkf-acc) 25%, transparent); }
.mkf-field textarea { resize: vertical; min-height: 140px; }
.mkf-field ::placeholder { color: color-mix(in srgb, var(--mkf-mute) 75%, transparent); }
.mkf-field.is-bad input, .mkf-field.is-bad textarea { border-color: #ff4d4d; box-shadow: 0 0 0 3px rgba(255,77,77,.2); }
.mkf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.mkf-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }

.mkf-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: calc(var(--mkf-rl) - 2px); background: color-mix(in srgb, var(--mkf-ink) 6%, transparent); margin-bottom: 18px; }
.mkf-tabs button { border: 0; background: transparent; color: var(--mkf-mute); font: 700 14px/1 Inter, sans-serif; padding: 11px 18px; border-radius: calc(var(--mkf-rl) - 4px); cursor: pointer; }
.mkf-tabs button.is-on { background: var(--mkf-acc); color: var(--mkf-on-acc); }

.mkf-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 40px 20px; border: 2px dashed var(--mkf-line); border-radius: var(--mkf-rl); cursor: pointer; transition: border-color .15s, background .15s; color: var(--mkf-ink); margin: 0; }
.mkf-drop:hover, .mkf-drop.is-over { border-color: var(--mkf-acc); background: color-mix(in srgb, var(--mkf-acc) 7%, transparent); }
.mkf-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mkf-drop svg { width: 38px; height: 38px; color: var(--mkf-acc); }
.mkf-drop b { font-size: 17px; }
.mkf-drop small { color: var(--mkf-mute); font-size: 13px; }
.mkf-filelist { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mkf-filelist li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--mkf-line); border-radius: calc(var(--mkf-rl) - 4px); background: color-mix(in srgb, var(--mkf-bg) 50%, transparent); }
.mkf-fthumb { width: 40px; height: 40px; border-radius: 6px; background: color-mix(in srgb, var(--mkf-acc) 16%, transparent) center/cover; color: var(--mkf-acc); font: 800 11px/40px Inter, sans-serif; text-align: center; flex: none; }
.mkf-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.mkf-filelist small { color: var(--mkf-mute); font-size: 13px; }
.mkf-filelist button { border: 0; background: transparent; color: var(--mkf-mute); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.mkf-filelist button:hover { color: #ff4d4d; }

.mkf-pad { border: 1px solid var(--mkf-line); border-radius: var(--mkf-rl); overflow: hidden; background: color-mix(in srgb, var(--mkf-bg) 60%, transparent); }
.mkf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px; border-bottom: 1px solid var(--mkf-line); }
.mkf-tools button[data-tool], .mkf-tools button[data-act] { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: transparent; color: var(--mkf-ink); font: 600 13px/1 Inter, sans-serif; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.mkf-tools button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mkf-tools button:hover { background: color-mix(in srgb, var(--mkf-ink) 7%, transparent); }
.mkf-tools button.is-on[data-tool] { background: var(--mkf-acc); color: var(--mkf-on-acc); }
.mkf-tools button.is-on[data-act="grid"] { border-color: var(--mkf-line); }
.mkf-tsep { width: 1px; height: 24px; background: var(--mkf-line); margin: 0 6px; }
.mkf-size { display: inline-flex; align-items: center; margin: 0 4px; }
.mkf-size input { width: 90px; accent-color: var(--mkf-acc); }
.mkf-colors { display: inline-flex; gap: 6px; margin: 0 4px; }
.mkf-colors button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--mkf-line); }
.mkf-colors button.is-on { border-color: var(--mkf-bg); box-shadow: 0 0 0 2px var(--mkf-acc); }
.mkf-canvas-wrap { position: relative; }
.mkf-canvas-wrap canvas { display: block; width: 100%; height: auto; aspect-ratio: 5/3; cursor: crosshair; touch-action: none; background: #fdfcf8; }
.mkf-canvas-hint { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #9aa6b4; font: 600 16px Inter, sans-serif; pointer-events: none; }
.mkf-textbox { position: absolute; transform: translateY(-50%); min-width: 240px; font: 600 15px Inter, sans-serif; padding: 6px 10px; border: 2px solid var(--mkf-acc); border-radius: 6px; background: #fff; color: #111; outline: none; z-index: 3; }
.mkf-note { color: var(--mkf-mute); font-size: 13px; margin-top: 10px; }

.mkf-submit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 8px 0; }
.mkf-status { margin: 0; color: var(--mkf-mute); font-size: 15px; }
.mkf-status.is-err { color: #ff6b6b; }
html[data-mkf-material="plastic"] .mkf-status.is-err { color: #d4183d; }
.mkf-done { text-align: center; padding: 70px 30px; background: var(--mkf-card-bg); border: 1px solid var(--mkf-line); border-radius: var(--mkf-rl); box-shadow: var(--mkf-shadow); }
.mkf-done svg { width: 64px; height: 64px; color: var(--mkf-on-acc); background: var(--mkf-acc); border-radius: 50%; padding: 14px; }
.mkf-done h3 { font-size: 34px; margin: 20px 0 10px; }
.mkf-done p { color: var(--mkf-mute); }

.mkf-aside { position: sticky; top: 100px; padding: 28px; }
.mkf-aside h3 { font-size: 22px; margin-bottom: 14px; }
.mkf-aside ul { list-style: none; padding: 0; margin: 0; }
.mkf-aside li { padding: 12px 0; border-top: 1px solid var(--mkf-line); color: var(--mkf-mute); font-size: 15px; }
.mkf-aside li:first-child { border-top: 0; }
.mkf-aside b { color: var(--mkf-ink); display: block; }

/* ---------- footer ---------- */
.mkf-foot { border-top: 1px solid var(--mkf-line); background: color-mix(in srgb, var(--mkf-bg2) 85%, transparent); color: var(--mkf-mute); font-family: Inter, system-ui, sans-serif; font-size: 15px; }
.mkf-foot .mkf-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mkf-foot-in { display: flex; justify-content: space-between; gap: 40px; padding-top: 56px !important; padding-bottom: 40px !important; flex-wrap: wrap; }
.mkf-foot-brand { display: flex; gap: 16px; max-width: 340px; }
.mkf-foot-brand .mkf-mark { width: 54px; height: 54px; color: var(--mkf-ink); flex: none; }
.mkf-foot-brand b { color: var(--mkf-ink); font-size: 18px; }
.mkf-foot-brand p { margin: 4px 0 0; }
.mkf-foot-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.mkf-foot-cols > div { display: flex; flex-direction: column; gap: 8px; }
.mkf-foot-cols h4 { margin: 0 0 6px; color: var(--mkf-ink); font: 700 12px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.mkf-foot-cols a { color: var(--mkf-mute) !important; text-decoration: none !important; }
.mkf-foot-cols a:hover { color: var(--mkf-acc) !important; }
.mkf-foot-cols span { font-size: 13px; }
.mkf-foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 20px !important; padding-bottom: 28px !important; border-top: 1px solid var(--mkf-line); font-size: 13px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .mkf-switch-top span { display: none; }
  .mkf-switch-top button { padding: 7px; }
  .mkf-caps { grid-template-columns: repeat(3, 1fr); }
  .mkf-strip { grid-template-columns: repeat(3, 1fr); }
  .mkf-strip div:nth-child(3) { border-right: 0; }
  .mkf-strip div:nth-child(-n+3) { border-bottom: 1px solid var(--mkf-line); }
}
@media (max-width: 960px) {
  .mkf-burger { display: flex; }
  .mkf-nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 18px; background: var(--mkf-bg); border-bottom: 1px solid var(--mkf-line); display: none; }
  .mkf-menu-open .mkf-nav { display: flex; }
  .mkf-nav a { padding: 14px 12px; font-size: 17px; }
  .mkf-nav a.mkf-nav-cta { margin: 8px 0 0; text-align: center; }
  .mkf-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .mkf-badge-wrap { max-width: 300px; justify-self: start; order: -1; }
  .mkf-mats, .mkf-steps { grid-template-columns: 1fr 1fr; }
  .mkf-feature { grid-template-columns: 1fr; }
  .mkf-feature-vis { border-right: 0; border-bottom: 1px solid var(--mkf-line); min-height: 0; }
  .mkf-form-wrap { grid-template-columns: 1fr; }
  .mkf-aside { position: static; }
}
@media (max-width: 782px) { body.admin-bar .mkf-top { top: 46px; } }
@media (max-width: 720px) {
  .mkf-top-in { padding: 10px 16px; gap: 10px; }
  .mkf-brand .mkf-mark { width: 36px; height: 36px; }
  .mkf-brand b { font-size: 18px; }
  .mkf-brand em { font-size: 9px; letter-spacing: .28em; }
  .mkf-wrap { padding: 0 16px; }
  .mkf-sec { padding: 72px 0; }
  .mkf-hero { padding: 56px 0 64px; }
  .mkf-badge-wrap { max-width: 210px; }
  .mkf-caps, .mkf-mats, .mkf-steps { grid-template-columns: 1fr; }
  .mkf-cap-wide { grid-column: auto; }
  .mkf-cap { min-height: 0; }
  .mkf-strip { grid-template-columns: 1fr 1fr; }
  .mkf-strip div { border-right: 1px solid var(--mkf-line) !important; border-bottom: 1px solid var(--mkf-line); padding: 18px 16px; }
  .mkf-strip div:nth-child(2n) { border-right: 0 !important; }
  .mkf-strip b { font-size: 20px; }
  .mkf-feature-txt { padding: 30px 22px; }
  .mkf-specs { grid-template-columns: 1fr; }
  .mkf-fstep { padding: 22px 18px; }
  .mkf-grid2, .mkf-grid3 { grid-template-columns: 1fr; }
  .mkf-tools span.mkf-tsep { display: none; }
  .mkf-tools button span { display: none; }
  .mkf-switch-big button span { display: inline; }
  .mkf-sister { padding: 26px 22px; }
  .mkf-foot-cols { gap: 32px; }
}
@media (max-width: 420px) {
  .mkf-switch-top { display: none; }
  .mkf-switch-big { display: flex; width: 100%; }
  .mkf-switch-big button { flex: 1; justify-content: center; padding: 8px; font-size: 13px; }
  .mkf-switch-big .mkf-sw { width: 22px; height: 22px; }
}

/* pairing table */
.mkf-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; margin: 0; }
.mkf-table th, .mkf-table td { padding: 16px 22px; text-align: left; border: 0; border-bottom: 1px solid var(--mkf-line); background: transparent; color: var(--mkf-mute); }
.mkf-table th { font: 700 12px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--mkf-ink); }
.mkf-table td:first-child { color: var(--mkf-ink); font-weight: 700; }
.mkf-table tr:last-child td { border-bottom: 0; }
.mkf-table td { font-variant-numeric: tabular-nums; }