:root {
    /* Precision Industrial — mapped to match the mfh- design system. */
    --mfig-color-bg: #f8f9fa;            /* mfh surface */
    --mfig-color-surface: #ffffff;       /* mfh surface-container-lowest */
    --mfig-color-text: #1F2937;          /* mfh primary (slate-dark) */
    --mfig-color-muted: #44474c;         /* mfh ink-2 */
    --mfig-color-primary: #1F2937;       /* mfh primary (slate-dark) */
    --mfig-color-border: #E5E7EB;        /* mfh border-subtle */
    --mfig-color-accent: #D97706;        /* mfh industrial gold */
    --mfig-radius: 4px;                   /* mfh radius */
    --mfig-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);  /* mfh shadow */
}

/* ── Precision Industrial harmonization (mfh fonts + container width) ── */
.mfig-wrap {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1280px;
}
.mfig-wrap h1, .mfig-wrap h2, .mfig-wrap h3,
.mfig-kicker {
    font-family: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.01em;
}
.mfig-wrap h1 { letter-spacing: -0.02em; font-weight: 700; }
.mfig-kicker {
    color: var(--mfig-color-accent);
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    letter-spacing: 0.05em;
}
.mfig-badge-label, .mfig-label, .mfig-measurement-label,
.mfig-step-label, .mfig-breadcrumb {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.03em;
}

/* Cross-link CTA back to product pages */
.mfig-related-products {
    margin-top: 32px;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid var(--mfig-color-border);
    border-left: 4px solid var(--mfig-color-accent);
    border-radius: var(--mfig-radius);
}
.mfig-related-products .mfig-kicker { margin-bottom: 8px; }
.mfig-related-products a {
    color: var(--mfig-color-accent);
    font-weight: 700;
    text-decoration: none;
}
.mfig-related-products a:hover { text-decoration: underline; }


.mfig-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 20px 56px;
    color: var(--mfig-color-text);
    background: transparent;
}

.mfig-wrap a {
    color: var(--mfig-color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.mfig-wrap a:focus-visible,
.mfig-button:focus-visible {
    outline: 3px solid rgba(217, 119, 6, 0.32);
    outline-offset: 3px;
}

.mfig-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 24px;
    color: var(--mfig-color-muted);
    font-size: 14px;
}

.mfig-guide-header,
.mfig-index-header {
    max-width: 860px;
    margin-bottom: 28px;
}

.mfig-kicker {
    margin: 0 0 8px;
    color: var(--mfig-color-primary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.mfig-wrap h1 {
    margin: 0 0 16px;
    color: var(--mfig-color-text);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: 0;
}

.mfig-wrap h2 {
    margin: 0 0 16px;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0;
}

.mfig-wrap h3 {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: 0;
}

.mfig-lede,
.mfig-short-answer p,
.mfig-section p,
.mfig-cta p {
    color: var(--mfig-color-muted);
    font-size: 16px;
    line-height: 1.7;
}

.mfig-short-answer {
    border-left: 4px solid var(--mfig-color-accent);
    padding: 16px 18px;
    background: #F9FAFB;
    border-radius: 0 var(--mfig-radius) var(--mfig-radius) 0;
}

.mfig-short-answer strong {
    display: block;
    margin-bottom: 4px;
}

.mfig-short-answer p {
    margin: 0;
}

.mfig-installation-note {
    margin: 18px 0 0;
    padding: 14px 16px;
    background: rgba(217, 119, 6, 0.08);
    border: 1px solid rgba(217, 119, 6, 0.28);
    border-radius: var(--mfig-radius);
}

.mfig-installation-note strong {
    display: block;
    margin-bottom: 4px;
}

.mfig-installation-note p {
    margin: 0;
    color: var(--mfig-color-muted);
    font-size: 15px;
    line-height: 1.6;
}

.mfig-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 28px;
    align-items: start;
}

.mfig-aside {
    position: sticky;
    top: 22px;
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-gutter: stable;
}

.mfig-section {
    margin: 0 0 28px;
    padding: 0;
}

.mfig-main .mfig-section {
    padding-bottom: 26px;
    border-bottom: 1px solid var(--mfig-color-border);
}

.mfig-panel,
.mfig-cta {
    margin: 0 0 18px;
    padding: 18px;
    background: var(--mfig-color-surface);
    border: 1px solid var(--mfig-color-border);
    border-radius: var(--mfig-radius);
    box-shadow: var(--mfig-shadow);
}

.mfig-panel h2,
.mfig-cta h2 {
    font-size: 18px;
}

.mfig-facts,
.mfig-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 0;
}

.mfig-facts div,
.mfig-stat-grid div {
    min-width: 0;
    padding: 14px;
    background: var(--mfig-color-surface);
    border: 1px solid var(--mfig-color-border);
    border-radius: var(--mfig-radius);
}

.mfig-facts dt,
.mfig-stat-grid span {
    color: var(--mfig-color-muted);
    font-size: 13px;
}

.mfig-facts dd {
    margin: 4px 0 0;
    font-weight: 700;
}

.mfig-tutorial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.mfig-tutorial-card {
    min-width: 0;
    padding: 16px;
    background: var(--mfig-color-surface);
    border: 1px solid var(--mfig-color-border);
    border-radius: var(--mfig-radius);
}

.mfig-tutorial-card h3 {
    margin-bottom: 8px;
}

.mfig-tutorial-card p {
    margin: 0;
}

.mfig-stat-grid strong {
    display: block;
    font-size: 30px;
    line-height: 1;
}

.mfig-check-list,
.mfig-link-list {
    margin: 0;
    padding-left: 20px;
}

.mfig-check-list li,
.mfig-link-list li {
    margin: 0 0 9px;
    line-height: 1.55;
}

.mfig-steps {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mfig-steps li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    background: var(--mfig-color-surface);
    border: 1px solid var(--mfig-color-border);
    border-radius: var(--mfig-radius);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.mfig-steps li.mfig-step-active {
    background: rgba(217, 119, 6, 0.08);
    border-color: var(--mfig-color-accent);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}

.mfig-step-number {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--mfig-color-primary);
    color: #fff;
    font-weight: 700;
}

.mfig-steps p {
    margin: 0;
}

.mfig-text-step-button {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mfig-color-text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.mfig-text-step-button:hover,
.mfig-text-step-button:focus-visible {
    color: var(--mfig-color-primary);
    outline: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mfig-svg-figure {
    margin: 0;
    padding: 16px;
    background: var(--mfig-color-surface);
    border: 1px solid var(--mfig-color-border);
    border-radius: var(--mfig-radius);
    box-shadow: var(--mfig-shadow);
}

.mfig-svg-figure figcaption {
    margin-top: 12px;
    color: var(--mfig-color-muted);
    font-size: 14px;
    line-height: 1.5;
}

.mfig-svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 360px;
}

.mfig-step-title-bg {
    fill: #edf5f1;
    stroke: var(--mfig-color-border);
    stroke-width: 1;
}

.mfig-svg .mfig-panel {
    fill: #eef1ea;
    stroke: #596772;
    stroke-width: 2;
    filter: none;
}

.mfig-svg .mfig-part {
    fill: #d7e7e2;
    stroke: var(--mfig-color-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mfig-svg .mfig-cut,
.mfig-svg .mfig-hole,
.mfig-svg .mfig-mark-box {
    fill: #fff8e8;
    stroke: var(--mfig-color-accent);
    stroke-width: 2;
}

.mfig-svg .mfig-mark {
    fill: #f7b733;
    stroke: #6b4a1b;
    stroke-width: 2;
}

.mfig-svg .mfig-screw {
    fill: #f4c968;
    stroke: #6b4a1b;
    stroke-width: 2;
}

.mfig-svg .mfig-screw-slot,
.mfig-svg .mfig-thread {
    stroke: #6b4a1b;
    stroke-width: 2;
    stroke-linecap: round;
}

.mfig-component-detail {
    pointer-events: none;
}

.mfig-svg .mfig-detail-line,
.mfig-svg .mfig-depth-line,
.mfig-svg .mfig-glass-line {
    fill: none;
    stroke: #45535d;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.72;
}

.mfig-svg .mfig-depth-line {
    stroke: #7a858d;
    stroke-dasharray: 5 4;
    opacity: 0.62;
}

.mfig-svg .mfig-detail-part {
    fill: rgba(217, 119, 6, 0.14);
    stroke: #0f6b5f;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mfig-svg .mfig-detail-hole {
    fill: #fffdf6;
    stroke: #9a5b22;
    stroke-width: 1.8;
}

.mfig-svg .mfig-glass-line {
    stroke: #4f90a7;
    opacity: 0.56;
}

.mfig-svg .mfig-dim-line {
    stroke: #2f5f8f;
    stroke-width: 2;
    stroke-dasharray: 6 5;
}

.mfig-svg .mfig-wire,
.mfig-svg .mfig-weather,
.mfig-svg .mfig-shield,
.mfig-svg .mfig-tool-stroke {
    fill: none;
    stroke: var(--mfig-color-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mfig-svg .mfig-tool-fill,
.mfig-svg .mfig-check-fill {
    fill: #d7e7e2;
    stroke: var(--mfig-color-primary);
    stroke-width: 2;
}

.mfig-svg .mfig-tool-cut {
    fill: #fff;
    stroke: var(--mfig-color-primary);
    stroke-width: 2;
}

.mfig-svg .mfig-check-line {
    fill: none;
    stroke: #0f6b5f;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mfig-svg .mfig-warning-fill {
    fill: #fff8e8;
    stroke: var(--mfig-color-accent);
    stroke-width: 2;
}

.mfig-svg .mfig-warning-line {
    fill: none;
    stroke: var(--mfig-color-accent);
    stroke-width: 4;
    stroke-linecap: round;
}

.mfig-svg .mfig-tool-icon {
    filter: drop-shadow(0 2px 2px rgba(23, 32, 38, 0.12));
}

.mfig-svg .mfig-arrow {
    fill: none;
    stroke: var(--mfig-color-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    marker-end: url(#mfig-arrowhead);
}

.mfig-svg .mfig-arrowhead {
    fill: var(--mfig-color-primary);
}

.mfig-svg .mfig-label {
    fill: var(--mfig-color-text);
    font-size: 13px;
    font-weight: 700;
}

.mfig-svg .mfig-stage-title {
    fill: var(--mfig-color-text);
    font-size: 16px;
    font-weight: 800;
}

.mfig-svg .mfig-stage-instruction {
    fill: var(--mfig-color-muted);
    font-size: 12px;
    font-weight: 600;
}

.mfig-svg .mfig-measurement-label {
    fill: #2f5f8f;
    font-size: 12px;
    font-weight: 700;
}

.mfig-step-layer {
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.mfig-step-layer.mfig-step-active {
    opacity: 1;
    pointer-events: auto;
}

.mfig-stage-mark {
    stroke-width: 3;
}

.mfig-step-badge {
    cursor: pointer;
}

.mfig-step-badge circle {
    fill: #f4f7f4;
    stroke: var(--mfig-color-primary);
    stroke-width: 2;
}

.mfig-step-badge .mfig-badge-number {
    fill: var(--mfig-color-primary);
    font-size: 13px;
    font-weight: 800;
    text-anchor: middle;
}

.mfig-step-badge .mfig-badge-step {
    fill: var(--mfig-color-primary);
    font-size: 11px;
    font-weight: 800;
    text-anchor: middle;
}

.mfig-step-badge .mfig-badge-label {
    fill: var(--mfig-color-text);
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
}

.mfig-step-badge.mfig-step-active circle,
.mfig-step-badge:focus circle {
    fill: var(--mfig-color-primary);
}

.mfig-step-badge.mfig-step-active .mfig-badge-number,
.mfig-step-badge:focus .mfig-badge-number {
    fill: #fff;
}

.mfig-step-badge.mfig-step-active .mfig-badge-step,
.mfig-step-badge:focus .mfig-badge-step {
    fill: var(--mfig-color-primary);
}

.mfig-step-controller {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.mfig-step-control {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--mfig-color-border);
    border-radius: 6px;
    background: #fff;
    color: var(--mfig-color-text);
    font-weight: 700;
    cursor: pointer;
}

.mfig-step-control:hover,
.mfig-step-control:focus-visible {
    border-color: var(--mfig-color-primary);
    color: var(--mfig-color-primary);
    outline: 3px solid rgba(217, 119, 6, 0.18);
    outline-offset: 2px;
}

.mfig-step-control[data-mfig-action="play"] {
    background: var(--mfig-color-primary);
    border-color: var(--mfig-color-primary);
    color: #fff;
}

.mfig-svg-figure.mfig-is-playing .mfig-step-control[data-mfig-action="play"] {
    opacity: 0.72;
}

.mfig-step-progress {
    height: 8px;
    margin-top: 12px;
    overflow: hidden;
    background: #e7ece8;
    border-radius: 999px;
}

.mfig-step-progress span {
    display: block;
    height: 100%;
    background: var(--mfig-color-primary);
    transition: width 180ms ease;
}

.mfig-current-step {
    margin: 10px 0 0;
    color: var(--mfig-color-muted);
    font-weight: 700;
}

.mfig-svg .mfig-badge circle {
    fill: var(--mfig-color-primary);
}

.mfig-svg .mfig-badge text {
    fill: #fff;
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
}

.mfig-svg-motion .mfig-anim-drill {
    animation: mfig-pulse 2.4s ease-in-out infinite;
}

.mfig-svg-motion .mfig-anim-place {
    animation: mfig-place 3.2s ease-in-out infinite;
}

.mfig-svg-motion .mfig-anim-move,
.mfig-svg-motion .mfig-anim-slide {
    animation: mfig-shift 3.2s ease-in-out infinite;
}

.mfig-svg-motion .mfig-anim-rotate {
    transform-box: fill-box;
    transform-origin: center;
    animation: mfig-rotate 3.6s ease-in-out infinite;
}

.mfig-svg-motion .mfig-anim-open {
    transform-box: fill-box;
    transform-origin: left center;
    animation: mfig-open 3.8s ease-in-out infinite;
}

@keyframes mfig-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@keyframes mfig-place {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-10px); }
}

@keyframes mfig-shift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(14px); }
}

@keyframes mfig-rotate {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(24deg); }
}

@keyframes mfig-open {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mfig-svg-motion .mfig-anim-drill,
    .mfig-svg-motion .mfig-anim-place,
    .mfig-svg-motion .mfig-anim-move,
    .mfig-svg-motion .mfig-anim-slide,
    .mfig-svg-motion .mfig-anim-rotate,
    .mfig-svg-motion .mfig-anim-open {
        animation: none;
        transform: none;
    }

    .mfig-step-layer {
        opacity: 0.2;
        transition: none;
    }

    .mfig-step-layer.mfig-step-active {
        opacity: 1;
    }

    .mfig-step-progress span,
    .mfig-steps li {
        transition: none;
    }
}

.mfig-reduced-motion .mfig-svg-motion * {
    animation: none !important;
    transform: none !important;
}

.mfig-reduced-motion .mfig-step-layer {
    opacity: 0.2;
    transition: none;
}

.mfig-reduced-motion .mfig-step-layer.mfig-step-active {
    opacity: 1;
}

.mfig-svg {
    min-height: 380px;
    overflow: visible;
}

.mfig-svg text {
    paint-order: stroke;
    stroke: rgba(247, 248, 245, 0.72);
    stroke-width: 2px;
    stroke-linejoin: round;
}

.mfig-svg .mfig-stage-title,
.mfig-svg .mfig-stage-instruction,
.mfig-svg .mfig-badge-number,
.mfig-svg .mfig-badge-step,
.mfig-svg .mfig-badge-label {
    stroke: none;
}

.mfig-step-title-bg {
    fill: #edf5f1;
    stroke: var(--mfig-color-border);
    stroke-width: 1;
}

.mfig-svg .mfig-stage-title {
    font-size: 14px;
    font-weight: 800;
}

.mfig-svg .mfig-stage-instruction {
    font-size: 10.5px;
    font-weight: 650;
}

.mfig-svg .mfig-label {
    font-size: 11.5px;
}

.mfig-svg .mfig-measurement-label {
    font-size: 9.8px;
    font-weight: 750;
}

.mfig-svg .mfig-measurement-panel {
    fill: rgba(237, 245, 241, 0.92);
    stroke: var(--mfig-color-border);
    stroke-width: 1;
}

.mfig-svg .mfig-measurement-dot {
    fill: var(--mfig-color-primary);
    stroke: none;
}

.mfig-step-layer {
    transform-box: fill-box;
    transform-origin: center;
    transition: none;
}

.mfig-step-layer.mfig-step-active {
    animation: mfig-stage-in 360ms cubic-bezier(.16, 1, .3, 1) both;
}

.mfig-step-layer.mfig-step-active .mfig-step-title-bg,
.mfig-step-layer.mfig-step-active .mfig-stage-title,
.mfig-step-layer.mfig-step-active .mfig-stage-instruction,
.mfig-step-layer.mfig-step-active .mfig-tool-icon,
.mfig-step-layer.mfig-step-active .mfig-label {
    animation: mfig-pop-in 420ms cubic-bezier(.16, 1, .3, 1) both;
}

.mfig-step-layer.mfig-step-active .mfig-stage-instruction {
    animation-delay: 70ms;
}

.mfig-step-layer.mfig-step-active .mfig-tool-icon,
.mfig-step-layer.mfig-step-active .mfig-label {
    animation-delay: 120ms;
}

.mfig-step-layer.mfig-step-active .mfig-stage-mark {
    animation: mfig-measure-sweep 900ms cubic-bezier(.16, 1, .3, 1) both;
}

.mfig-step-layer.mfig-step-active .mfig-arrow {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: mfig-arrow-draw 760ms cubic-bezier(.16, 1, .3, 1) 140ms both;
}

.mfig-svg-motion .mfig-step-layer:not(.mfig-step-active) .mfig-anim-drill,
.mfig-svg-motion .mfig-step-layer:not(.mfig-step-active) .mfig-anim-place,
.mfig-svg-motion .mfig-step-layer:not(.mfig-step-active) .mfig-anim-move,
.mfig-svg-motion .mfig-step-layer:not(.mfig-step-active) .mfig-anim-slide,
.mfig-svg-motion .mfig-step-layer:not(.mfig-step-active) .mfig-anim-rotate,
.mfig-svg-motion .mfig-step-layer:not(.mfig-step-active) .mfig-anim-open {
    animation: none;
}

.mfig-svg-motion .mfig-step-active .mfig-anim-drill {
    transform-box: fill-box;
    transform-origin: center;
    animation: mfig-drill-bite 1350ms cubic-bezier(.45, 0, .2, 1) 220ms infinite;
}

.mfig-svg-motion .mfig-step-active .mfig-anim-place {
    transform-box: fill-box;
    transform-origin: center;
    animation: mfig-place-settle 1450ms cubic-bezier(.16, 1, .3, 1) 180ms infinite;
}

.mfig-svg-motion .mfig-step-active .mfig-anim-move,
.mfig-svg-motion .mfig-step-active .mfig-anim-slide {
    animation: mfig-arrow-draw 760ms cubic-bezier(.16, 1, .3, 1) 140ms both, mfig-nudge 1700ms cubic-bezier(.45, 0, .2, 1) 940ms infinite;
}

.mfig-svg-motion .mfig-step-active .mfig-anim-rotate {
    transform-box: fill-box;
    transform-origin: center;
    animation: mfig-turn-test 1700ms cubic-bezier(.45, 0, .2, 1) 200ms infinite;
}

.mfig-svg-motion .mfig-step-active .mfig-anim-open {
    transform-box: fill-box;
    transform-origin: left center;
    animation: mfig-open-test 2100ms cubic-bezier(.45, 0, .2, 1) 220ms infinite;
}

.mfig-step-badge {
    transform-box: fill-box;
    transform-origin: center;
}

.mfig-step-badge.mfig-step-active {
    animation: mfig-badge-current 320ms cubic-bezier(.16, 1, .3, 1) both;
}

.mfig-step-badge .mfig-badge-step {
    font-size: 9.5px;
}

.mfig-step-badge .mfig-badge-label {
    font-size: 8.5px;
    font-weight: 750;
}

.mfig-step-progress {
    height: 10px;
}

.mfig-step-progress span {
    background: linear-gradient(90deg, var(--mfig-color-primary), var(--mfig-color-accent));
    transition: width 140ms linear;
}

.mfig-current-step {
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.mfig-step-control[aria-pressed="true"] {
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.20);
}

.mfig-svg .mfig-rail-hole {
    fill: #fffdf7;
    stroke-width: 2;
}

.mfig-svg .cabinet-hole {
    stroke: var(--mfig-color-primary);
}

.mfig-svg .drawer-hole {
    stroke: var(--mfig-color-accent);
}

.mfig-svg .mfig-hole-reference-lines {
    opacity: 0.36;
}

.mfig-svg .mfig-hole-reference-lines line {
    stroke: #2f5f8f;
    stroke-width: 1.2;
    stroke-dasharray: 3 5;
}

.mfig-svg .mfig-stage-datum {
    opacity: 0.38;
    pointer-events: none;
}

.mfig-svg .mfig-stage-datum line,
.mfig-svg .mfig-stage-datum path {
    fill: none;
    stroke: #2f5f8f;
    stroke-width: 1.35;
    stroke-dasharray: 4 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mfig-svg .mfig-stage-datum circle,
.mfig-svg .mfig-stage-datum rect {
    fill: rgba(255, 253, 247, 0.36);
    stroke: #2f5f8f;
    stroke-width: 1.35;
    stroke-dasharray: 4 5;
}

.mfig-step-layer.mfig-step-active .mfig-stage-datum {
    animation: mfig-datum-in 520ms cubic-bezier(.16, 1, .3, 1) both;
}

.mfig-step-layer.mfig-step-active .mfig-screw-set {
    transform-box: fill-box;
    transform-origin: center;
    animation: mfig-screw-seat 820ms cubic-bezier(.16, 1, .3, 1) both;
}

.mfig-step-layer.mfig-step-active .mfig-screw-set:nth-of-type(2) { animation-delay: 60ms; }
.mfig-step-layer.mfig-step-active .mfig-screw-set:nth-of-type(3) { animation-delay: 120ms; }
.mfig-step-layer.mfig-step-active .mfig-screw-set:nth-of-type(4) { animation-delay: 180ms; }

.mfig-step-layer.mfig-step-active .mfig-drawer-insert-assembly {
    transform-box: fill-box;
    transform-origin: center;
    animation: mfig-drawer-insert 2100ms cubic-bezier(.45, 0, .2, 1) 160ms infinite;
}

.mfig-step-layer.mfig-step-active .mfig-drawer-test-assembly {
    transform-box: fill-box;
    transform-origin: center;
    animation: mfig-drawer-test 2200ms cubic-bezier(.45, 0, .2, 1) 180ms infinite;
}

@keyframes mfig-stage-in {
    from { opacity: 0; transform: translateY(10px) scale(.995); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mfig-pop-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mfig-measure-sweep {
    from { stroke-dasharray: 8 18; stroke-dashoffset: 76; opacity: .36; }
    to { stroke-dasharray: 8 6; stroke-dashoffset: 0; opacity: 1; }
}

@keyframes mfig-arrow-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes mfig-drill-bite {
    0%, 100% { opacity: .78; transform: scale(.94) rotate(0deg); }
    42% { opacity: 1; transform: scale(1.07) rotate(7deg); }
    64% { opacity: .92; transform: scale(.99) rotate(-5deg); }
}

@keyframes mfig-place-settle {
    0%, 100% { transform: translateX(0); }
    40% { transform: translateX(-8px); }
    62% { transform: translateX(2px); }
}

@keyframes mfig-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

@keyframes mfig-turn-test {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(22deg); }
}

@keyframes mfig-open-test {
    0%, 100% { transform: rotate(0deg); }
    48% { transform: rotate(-10deg); }
}

@keyframes mfig-badge-current {
    from { transform: scale(.9); }
    to { transform: scale(1); }
}

@keyframes mfig-datum-in {
    from { opacity: 0; }
    to { opacity: .38; }
}

@keyframes mfig-screw-seat {
    from { opacity: .2; transform: scale(.55) rotate(0deg); }
    68% { opacity: 1; transform: scale(1.12) rotate(150deg); }
    to { opacity: 1; transform: scale(1) rotate(180deg); }
}

@keyframes mfig-drawer-insert {
    0%, 100% { transform: translateX(0); }
    52% { transform: translateX(-160px); }
    70% { transform: translateX(-154px); }
}

@keyframes mfig-drawer-test {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(88px); }
}

@media (max-width: 640px) {
    .mfig-svg {
        min-height: 300px;
    }

    .mfig-step-control {
        flex: 1 1 calc(50% - 8px);
        padding: 8px 9px;
        font-size: 13px;
    }
}

.mfig-faq-item {
    padding: 14px 0;
    border-top: 1px solid var(--mfig-color-border);
}

.mfig-faq-item summary {
    cursor: pointer;
    font-weight: 700;
}

.mfig-card-grid,
.mfig-profile-groups,
.mfig-category-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.mfig-guide-card,
.mfig-profile-group,
.mfig-category-group {
    min-width: 0;
    padding: 18px;
    background: var(--mfig-color-surface);
    border: 1px solid var(--mfig-color-border);
    border-radius: var(--mfig-radius);
}

.mfig-guide-card p {
    margin: 0 0 12px;
    color: var(--mfig-color-muted);
    font-size: 14px;
    line-height: 1.55;
}

.mfig-guide-card span {
    color: var(--mfig-color-accent);
    font-size: 13px;
    font-weight: 700;
}

.mfig-button {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 16px;
    background: var(--mfig-color-primary);
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
}

.mfig-muted {
    color: var(--mfig-color-muted);
}

@media (max-width: 920px) {
    .mfig-layout,
    .mfig-facts,
    .mfig-stat-grid,
    .mfig-tutorial-grid,
    .mfig-card-grid,
    .mfig-profile-groups,
    .mfig-category-groups {
        grid-template-columns: 1fr;
    }

    .mfig-wrap {
        padding: 24px 16px 44px;
    }

    .mfig-aside {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .mfig-svg {
        min-height: 210px;
    }
}