/* Shared timings for the small, local presentation transitions. */
:root { --mr-motion-fast:180ms; --mr-motion-normal:350ms; --mr-motion-slow:600ms; --mr-motion-ease:cubic-bezier(.22,1,.36,1); }
.mr-hero-shell { position: relative; background: var(--canvas); }
.mr-hero-shell .hero { width: 100%; min-height: 0; padding: 76px max(56px,calc((100% - 1240px)/2)) 0; }
.mr-hero-shell .hero-slider { min-height: 390px; }
.mr-hero-shell .hero-controls { height: 44px; width: 100%; max-width: 1240px; margin: var(--mr-hero-progress-gap,24px) auto 0; padding: 0; }
.mr-hero-outer-controls { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.mr-hero-outer-controls button { position: absolute; top: 47%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--text); border-radius: 50%; background: var(--text); color: var(--paper); font-size: 22px; line-height: 1; box-shadow: 0 3px 12px rgb(32 63 53 / .12); opacity: .5; pointer-events: auto; transition: opacity var(--mr-motion-fast) ease; }
.mr-hero-outer-controls [data-direction="-1"] { left: 12px; }
.mr-hero-outer-controls [data-direction="1"] { right: 12px; }
.mr-hero-outer-controls button:is(:hover,:focus-visible,:active) { opacity: 1; }
.mr-hero-outer-controls button:focus-visible { outline: 2px solid #a77c21; outline-offset: 4px; }
.mr-hero-shell + .section { padding-top: calc(var(--mr-hero-next-gap,100px) - 21px); }
.product-showcase.feature-carousel { display: block; }
.feature-carousel > .eyebrow { margin-bottom: 24px; }
.feature-track { display: grid; overflow: hidden; }
.feature-track > .feature-slide { grid-area: 1 / 1; display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 58px; min-width: 0; visibility: hidden; opacity: 0; transform: translateX(var(--mr-feature-travel,32px)); transition: opacity var(--mr-motion-normal), transform var(--mr-motion-slow) var(--mr-motion-ease), visibility 0s var(--mr-motion-slow); }
.feature-track > .feature-slide.is-active { visibility: visible; opacity: 1; transform: translateX(0); transition-delay: 0s; }
.feature-track > .feature-slide.was-current { transform: translateX(calc(-1 * var(--mr-feature-travel,32px))); }
.feature-carousel:not(.is-ready) .feature-slide:not(:first-child) { display: none; }
.feature-carousel:not(.is-ready) .feature-slide:first-child { visibility: visible; opacity: 1; transform: none; }
.feature-slide .product-copy h2 { max-width: 12em; }
.feature-slide .product-visual { width: 100%; min-width: 0; }
.feature-slide .product-screen img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.feature-controls { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.feature-tabs { display: flex; gap: 12px 24px; flex: 1; flex-wrap: wrap; }
.feature-tabs button { padding: 8px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--muted); }
.feature-tabs button[aria-pressed="true"] { color: var(--text); border-color: var(--accent); }
.feature-controls > button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text); }
/* The active step takes over half of the row; other steps physically yield. */
.workflow.has-sequence .workflow-grid { display:flex; gap:24px; align-items:stretch; padding:0 12px 28px; }
.workflow.has-sequence .workflow-step { flex:1 1 0; min-width:0; cursor:pointer; transform:translateY(24px); transition:flex-grow 600ms var(--mr-motion-ease), transform 600ms var(--mr-motion-ease), border-color 250ms; }
.workflow.has-sequence .workflow-step.is-current { flex-grow:3.2; transform:translateY(0); border-top:2px solid var(--accent); }
.workflow.has-sequence .workflow-step[data-yield="left"] { transform:translate(calc(-1 * var(--mr-yield-x,10px)),var(--mr-yield-y,24px)); }
.workflow.has-sequence .workflow-step[data-yield="right"] { transform:translate(var(--mr-yield-x,10px),var(--mr-yield-y,24px)); }
.workflow.has-sequence .workflow-step.is-neighbor { --mr-yield-x:26px; --mr-yield-y:36px; }
.workflow.has-sequence .workflow-icon { width:100%; height:188px; display:flex; align-items:center; margin-block:0 18px !important; }
.workflow.has-sequence .workflow-icon img { width:min(100%,var(--mr-workflow-rest-size,88px)); height:auto; aspect-ratio:1; object-fit:contain; transition:width 600ms var(--mr-motion-ease); }
.workflow.has-sequence .is-current .workflow-icon img { width:min(100%,var(--mr-workflow-active-size,440px)); }
.workflow.has-sequence .workflow-step h3 { font-size:18px; line-height:1.4; transition:font-size 600ms var(--mr-motion-ease); }
.workflow.has-sequence .workflow-step > p:last-child { font-size:15px; line-height:1.75; transition:font-size 600ms var(--mr-motion-ease); }
.workflow.has-sequence .workflow-step.is-current h3 { font-size:var(--mr-workflow-active-title-size,32px); }
.workflow.has-sequence .workflow-step.is-current > p:last-child { font-size:var(--mr-workflow-active-copy-size,20px); max-width:100%; }
.workflow-select { display:flex; align-items:center; gap:10px; width:100%; padding:6px 0; border:0; background:none; color:var(--muted); text-align:left; font:inherit; cursor:pointer; }
.workflow-select[aria-pressed="true"] { color:var(--accent); font-weight:600; }
.workflow-step:focus-within { outline:2px solid var(--accent); outline-offset:8px; }
.workflow-state { font-size:11px; opacity:0; }
.workflow-select[aria-pressed="true"] .workflow-state { opacity:1; }
.workflow.has-sequence .is-neighbor .workflow-icon { animation:mr-neighbor-nudge 480ms var(--mr-motion-ease) 1; }
@keyframes mr-neighbor-nudge { 0%,100% { transform:rotate(0); } 30% { transform:rotate(-2.5deg) translateX(-2px); } 65% { transform:rotate(2deg) translateX(2px); } }
.partner-logo .partner-color, .partner-logo .partner-ink { transform: scale(var(--brand-scale,.8)); transform-origin: center; }
.closing.closing-home { justify-content: flex-start; gap: clamp(32px,5vw,80px); }
.closing-home h2 { flex: 0 1 auto; }
.footer-line.footer-slogan { color: #808080; font-family: "MarkRule JinBu", "MarkRule PuHui", sans-serif; font-size: clamp(18px,1.8vw,26px); line-height: 1.7; letter-spacing: .02em; flex: 1 1 28rem; min-width: 0; max-width: 100%; margin-inline-start: auto; text-align: right; white-space: normal; overflow-wrap: anywhere; }
.footer-slogan .mr-typed-char { opacity: 1; }
.footer-slogan.is-typing .mr-typed-char.is-pending { opacity: 0; }
.footer-slogan.is-typed { opacity: 1; visibility: visible; }
.mr-layout-managed { margin-top: var(--mr-d-mt,0px) !important; margin-bottom: var(--mr-d-mb,0px) !important; }
.mr-layout-managed:not(.mr-layout-opening), .mr-layout-opening .product-hero { padding-top: var(--mr-d-pt,100px) !important; padding-bottom: var(--mr-d-pb,100px) !important; }
figure[data-mr-sized-image] > img { width: var(--mr-image-width) !important; height: var(--mr-image-height) !important; max-width: 100%; object-fit: contain; }
figure[data-mr-sized-image][data-mr-locked="1"] > img { height: auto !important; aspect-ratio: var(--mr-image-ratio); }
figure[data-mr-sized-image].workflow-icon { width: 100%; }
.editor-styles-wrapper .feature-track { display: block; overflow: visible; }
.editor-styles-wrapper .feature-track > .feature-slide { display: grid !important; visibility: visible !important; opacity: 1 !important; transform: none !important; margin-bottom: 40px; }
.editor-styles-wrapper .feature-controls { display: none; }
.mr-visual-image-list { display: grid; gap: 8px; margin-block: 14px; }
.mr-visual-image-list button { display: flex; align-items: center; gap: 8px; height: auto; text-align: left; white-space: normal; }
.mr-visual-image-list img { width: 44px; height: 36px; object-fit: contain; }
.mr-layout-tools, .mr-image-tools { margin-block: 18px; padding-top: 12px; border-top: 1px solid #d9ded5; }
.mr-layout-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mr-layout-tools p, .mr-image-tools p { font-size: 12px; line-height: 1.6; }
.mr-layout-tools button { margin-bottom: 10px; }
@media(max-width:1100px) { .feature-track > .feature-slide { gap: 32px; } }
@media(max-width:767px) {
    .mr-hero-shell .hero { padding: 46px 40px 0; }
    .mr-hero-shell .hero-slider { min-height: 320px; }
    .mr-hero-shell .hero-art { width: 100%; margin: 0 !important; }
    .mr-hero-shell .hero-controls { margin-top: var(--mr-hero-progress-gap,8px); padding: 0; }
    .mr-hero-outer-controls button { width: 32px; height: 32px; top: 44%; font-size: 19px; }
    .mr-hero-outer-controls [data-direction="-1"] { left: 4px; }
    .mr-hero-outer-controls [data-direction="1"] { right: 4px; }
    .feature-track > .feature-slide { grid-template-columns: 1fr; gap: 24px; align-content: start; }
    .feature-controls { gap: 6px; flex-wrap: wrap; }
    .feature-tabs { flex: 1 1 100%; gap: 8px 18px; }
    .workflow.has-sequence .workflow-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; padding:0; }
    .workflow.has-sequence .workflow-step, .workflow.has-sequence .workflow-step[data-yield] { transform:none; }
    .workflow.has-sequence .workflow-step h3 { overflow-wrap:anywhere; }
    .workflow.has-sequence .workflow-step.is-current { grid-column: span 2; }
    .workflow.has-sequence .workflow-icon { height: 128px; }
    .workflow.has-sequence .is-current .workflow-icon img { width: min(100%,var(--mr-workflow-active-size,440px)); max-height: 128px; }
    .closing.closing-home { display: flex; flex-wrap: wrap; gap: 28px; }
    .closing-home .wp-block-buttons { margin-top: 0 !important; }
    .footer-line.footer-slogan { font-size: 18px; letter-spacing: 0; }
    .mr-layout-managed { margin-top: var(--mr-m-mt,0px) !important; margin-bottom: var(--mr-m-mb,0px) !important; }
    .mr-layout-managed:not(.mr-layout-opening), .mr-layout-opening .product-hero { padding-top: var(--mr-m-pt,66px) !important; padding-bottom: var(--mr-m-pb,66px) !important; }
}
@media(prefers-reduced-motion:reduce) {
    .mr-hero-outer-controls button { transition: none; }
    .feature-track > .feature-slide, .workflow.has-sequence .workflow-step, .workflow.has-sequence .workflow-icon img, .workflow.has-sequence .workflow-step h3, .workflow.has-sequence .workflow-step > p:last-child { transition:none; }
    .workflow.has-sequence .is-neighbor .workflow-icon, .footer-slogan.is-typing .mr-typed-char { animation: none; }
    .footer-slogan.has-typing .mr-typed-char { opacity: 1; }
}

.slogan-pillars { display: flex; gap: 18px 32px; flex-wrap: wrap; margin-block: 0 40px; color: var(--accent); }
.slogan-pillars strong { margin-right: 8px; font-variant-numeric: tabular-nums; }
[data-mr-sized-image] img { width: var(--mr-image-width) !important; height: var(--mr-image-height) !important; max-width: 100%; object-fit: contain; }
[data-mr-sized-image][data-mr-locked="1"] img { height: auto !important; aspect-ratio: var(--mr-image-ratio); }
.hero-background[data-mr-sized-image] img { inset: 0; margin: auto; transform: none; }
.workflow.has-sequence .workflow-step { --mr-sequence-image-size: var(--mr-workflow-rest-size,88px); }
.workflow.has-sequence .workflow-step.is-current { --mr-sequence-image-size: var(--mr-workflow-active-size,440px); }
.workflow.has-sequence [data-mr-sized-image] img { width: min(100%,calc(var(--mr-sequence-image-size) * var(--mr-image-factor,1))) !important; height: auto !important; }

.workflow.has-sequence [data-mr-sized-image] img { aspect-ratio: var(--mr-image-ratio); }
.workflow.has-sequence [data-mr-sized-image][data-mr-locked="0"] img { height: calc(var(--mr-sequence-image-size) * var(--mr-image-height-factor,1)) !important; }

@media(max-width:767px){.footer-top .footer-line.footer-slogan { flex: 0 1 auto; width: 100%; text-align: right; }}
